forked from deephaven/web-client-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
/
DateInput.tsx
77 lines (68 loc) · 2.01 KB
/
DateInput.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
69
70
71
72
73
74
75
76
77
import React, { useCallback, useState } from 'react';
import classNames from 'classnames';
import Log from '@deephaven/log';
import MaskedInput, { SelectionSegment } from './MaskedInput';
import { getNextSegmentValue } from './DateInputUtils';
const log = Log.module('DateInput');
const DATE_PATTERN = '[12][0-9]{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])';
const EXAMPLES = ['2000-01-01', '2022-12-31'];
const DATE_FORMAT = 'YYYY-MM-DD';
type DateInputProps = {
className?: string;
onChange?(date?: string): void;
defaultValue?: string;
onFocus?(): void;
onBlur?(): void;
'data-testid'?: string;
};
const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
(props: DateInputProps, ref) => {
const {
className = '',
onChange = () => undefined,
defaultValue = '',
onFocus = () => undefined,
onBlur = () => undefined,
'data-testid': dataTestId,
} = props;
const [value, setValue] = useState(defaultValue);
const [selection, setSelection] = useState<SelectionSegment>();
const handleChange = useCallback(
(newValue: string): void => {
log.debug('handleChange', newValue);
setValue(newValue);
onChange(newValue);
},
[onChange]
);
return (
<div className="d-flex flex-row align-items-center">
<MaskedInput
ref={ref}
className={classNames(className)}
example={EXAMPLES}
getNextSegmentValue={getNextSegmentValue}
onChange={handleChange}
onSelect={setSelection}
pattern={DATE_PATTERN}
placeholder={DATE_FORMAT}
selection={selection}
value={value}
onFocus={onFocus}
onBlur={onBlur}
data-testid={dataTestId}
/>
</div>
);
}
);
DateInput.displayName = 'DateInput';
DateInput.defaultProps = {
className: '',
onChange: () => false,
defaultValue: '',
onFocus: () => false,
onBlur: () => false,
'data-testid': undefined,
};
export default DateInput;