-
Notifications
You must be signed in to change notification settings - Fork 209
/
TextInput.tsx
68 lines (62 loc) · 1.92 KB
/
TextInput.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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import * as React from 'react';
import styled from '@emotion/styled';
import {GrowthBehavior, ErrorType, errorRing} from '@workday/canvas-kit-react-common';
import {borderRadius, inputColors, spacingNumbers, type} from '@workday/canvas-kit-react-core';
export interface TextInputProps
extends GrowthBehavior,
React.InputHTMLAttributes<HTMLInputElement> {
error?: ErrorType;
inputRef?: React.Ref<HTMLInputElement>;
}
const Input = styled('input')<Pick<TextInputProps, 'error' | 'grow'>>(
{
...type.body,
border: `1px solid ${inputColors.border}`,
display: 'block',
backgroundColor: inputColors.background,
borderRadius: borderRadius.m,
boxSizing: 'border-box',
height: 40,
minWidth: 280,
transition: '0.2s box-shadow, 0.2s border-color',
padding: spacingNumbers.xxs, // Compensate for border
margin: 0, // Fix Safari
'&::placeholder': {
color: inputColors.placeholder,
},
'&:hover': {
borderColor: inputColors.hoverBorder,
},
'&:focus:not([disabled])': {
borderColor: inputColors.focusBorder,
boxShadow: `inset 0 0 0 1px ${inputColors.focusBorder}`,
outline: 'none',
},
'&:disabled': {
backgroundColor: inputColors.disabled.background,
borderColor: inputColors.disabled.border,
color: inputColors.disabled.text,
'&::placeholder': {
color: inputColors.disabled.text,
},
},
},
({error}) => ({
...errorRing(error),
}),
({grow}) =>
grow && {
width: '100%',
}
);
export default class TextInput extends React.Component<TextInputProps> {
static ErrorType = ErrorType;
static defaultProps = {
inputRef: React.createRef<HTMLInputElement>(),
};
render() {
// TODO: Standardize on prop spread location (see #150)
const {grow, inputRef, error, ...inputProps} = this.props;
return <Input type="text" ref={inputRef} grow={grow} error={error} {...inputProps} />;
}
}