This repository has been archived by the owner on Oct 23, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 226
/
index.tsx
54 lines (50 loc) · 1.56 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
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: PropertyItemStringProps): JSX.Element | null;
onResize?(): void;
}
// tslint:disable-next-line:no-any
export const PropertyLinkIcon: StyledComponentClass<{}, {}, any> = 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: React.StatelessComponent<PropertyItemStringProps> = 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>
);