import * as React from 'react' ; import { PropertyInputStyles } from '../property-input' ; import { PropertyItem } from '../property-item' ; import { Link2 } from 'react-feather' ; import styled , { StyledComponentClass } from 'styled-components' ; import { Color } from '../colors' ; import * as TextareaAutosize from 'react-textarea-autosize' ; export interface PropertyItemStringProps { className ? : string ; description ? : string ; label : string ; onBlur ? : React . FocusEventHandler < HTMLInputElement | HTMLTextAreaElement > ; onChange ? : React . ChangeEventHandler < HTMLInputElement | HTMLTextAreaElement > ; placeholder ? : string ; value ? : string ; children ? ( renderProps ) : JSX . Element | null ; onResize ? ( ) : void ; } export const PropertyLinkIcon = styled ( Link2 ) `
	position: absolute;
	top: 15px;
	transform: translateY(-50%);
	right: 0;
	box-sizing: border-box;
	padding: 3px 6px 3px 0;
	width: 20px;
	cursor: pointer;
	transition: stroke 0.3s ease-in-out;
	stroke: ${ Color . Grey60 };
	&:hover {
		stroke: ${ Color . Grey20 };
	}
` ; const StyledTextArea = styled ( TextareaAutosize . default ) `
	resize: none;
	${ PropertyInputStyles };
` ; export const PropertyItemString = props => ( < PropertyItem description = { props . description } label = { props . label } > < StyledTextArea onChange = { props . onChange } onBlur = { props . onBlur } onHeightChange = { props . onResize } useCacheForDOMMeasurements value = { props . value || '' } placeholder = { props . placeholder } / > < /PropertyItem>);