1 | const _excluded = ["value", "formatter", "editing", "editFormat", "displayFormat", "localizer", "parse", "onChange", "onBlur", "disabled", "readOnly"];
|
2 |
|
3 | function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
4 |
|
5 | function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
6 |
|
7 | import React, { useMemo, useRef, useState } from 'react';
|
8 | import { isNullOrInvalid } from './dates';
|
9 | import Input from './Input';
|
10 | const DatePickerInput = React.forwardRef((_ref, ref) => {
|
11 | let {
|
12 | value,
|
13 | formatter,
|
14 | editing,
|
15 | editFormat,
|
16 | displayFormat,
|
17 | localizer,
|
18 | parse,
|
19 | onChange,
|
20 | onBlur,
|
21 | disabled,
|
22 | readOnly
|
23 | } = _ref,
|
24 | props = _objectWithoutPropertiesLoose(_ref, _excluded);
|
25 |
|
26 | const needsFlush = useRef(false);
|
27 | const nextTextValue = useMemo(() => value instanceof Date && isValid(value) ? localizer.formatDate(value, formatter, editing ? editFormat : displayFormat) : '', [value, formatter, localizer, displayFormat, editing, editFormat]);
|
28 | const [prevValue, setPrevValue] = useState(nextTextValue);
|
29 | const [textValue, setTextValue] = useState(nextTextValue);
|
30 |
|
31 | if (prevValue !== nextTextValue) {
|
32 | setPrevValue(nextTextValue);
|
33 | setTextValue(nextTextValue);
|
34 | }
|
35 |
|
36 | const handleBlur = event => {
|
37 | if (onBlur) onBlur(event);
|
38 |
|
39 | if (needsFlush.current) {
|
40 | let date = parse(event.target.value);
|
41 | const dateIsInvalid = event.target.value != '' && isNullOrInvalid(date);
|
42 |
|
43 | if (dateIsInvalid) {
|
44 | setTextValue('');
|
45 | }
|
46 |
|
47 | needsFlush.current = false;
|
48 | onChange(date, event.target.value);
|
49 | }
|
50 | };
|
51 |
|
52 | const handleChange = ({
|
53 | target
|
54 | }) => {
|
55 | needsFlush.current = true;
|
56 | setTextValue(target.value);
|
57 | };
|
58 |
|
59 | return React.createElement(Input, _extends({}, props, {
|
60 | type: "text",
|
61 | ref: ref,
|
62 | className: "rw-widget-input",
|
63 | value: textValue,
|
64 | disabled: disabled,
|
65 | readOnly: readOnly,
|
66 | onChange: handleChange,
|
67 | onBlur: handleBlur
|
68 | }));
|
69 | });
|
70 | DatePickerInput.displayName = 'DatePickerInput';
|
71 | export default DatePickerInput;
|
72 |
|
73 | function isValid(d) {
|
74 | return !isNaN(d.getTime());
|
75 | } |
\ | No newline at end of file |