@elliemae/ds-date-picker 2.2.0-alpha.4 → 3.0.0-next.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/DSDatePicker.js +221 -219
- package/cjs/components/DSDatePickerImpl.js +208 -128
- package/cjs/components/DatePickerController/DatePickerController.js +242 -204
- package/cjs/components/DatePickerDay/DatePickerDay.js +23 -48
- package/cjs/components/DatePickerDropdown.js +54 -74
- package/cjs/components/DatePickerHeader/DatePickerHeader.js +44 -62
- package/cjs/components/DatePickerNavigation/DatePickerNavigation.js +31 -62
- package/cjs/components/DatePickerPicker/DatePickerPicker.js +71 -82
- package/cjs/components/DatePickerRange/DatePickerRange.js +93 -84
- package/cjs/components/DatePickerRangeHeader/DatePickerRangeHeader.js +97 -91
- package/cjs/components/DatePickerRenderMonth/DatePickerRenderMonth.js +45 -60
- package/cjs/components/DatePickerSingleDate/DatePickerSingleDate.js +77 -88
- package/cjs/components/SingleRangeDateSwitcher/SingleRangeDateSwitcher.js +48 -69
- package/cjs/components/index.js +27 -53
- package/cjs/defaultPhrases.js +92 -77
- package/cjs/index.js +35 -38
- package/esm/DSDatePicker.js +169 -171
- package/esm/components/DSDatePickerImpl.js +189 -88
- package/esm/components/DatePickerController/DatePickerController.js +198 -141
- package/esm/components/DatePickerDay/DatePickerDay.js +17 -19
- package/esm/components/DatePickerDropdown.js +46 -45
- package/esm/components/DatePickerHeader/DatePickerHeader.js +35 -31
- package/esm/components/DatePickerNavigation/DatePickerNavigation.js +24 -36
- package/esm/components/DatePickerPicker/DatePickerPicker.js +48 -44
- package/esm/components/DatePickerRange/DatePickerRange.js +79 -49
- package/esm/components/DatePickerRangeHeader/DatePickerRangeHeader.js +78 -50
- package/esm/components/DatePickerRenderMonth/DatePickerRenderMonth.js +37 -31
- package/esm/components/DatePickerSingleDate/DatePickerSingleDate.js +66 -56
- package/esm/components/SingleRangeDateSwitcher/SingleRangeDateSwitcher.js +42 -40
- package/esm/components/index.js +10 -24
- package/esm/defaultPhrases.js +80 -48
- package/esm/index.js +13 -9
- package/package.json +10 -10
- package/types/components/DSDatePickerImpl.d.ts +1 -2
- package/types/components/DatePickerController/DatePickerController.d.ts +1 -1
- package/types/components/DatePickerDay/DatePickerDay.d.ts +0 -1
- package/types/components/DatePickerDropdown.d.ts +0 -1
- package/types/components/DatePickerHeader/DatePickerHeader.d.ts +0 -1
- package/types/components/DatePickerNavigation/DatePickerNavigation.d.ts +3 -4
- package/types/components/DatePickerPicker/DatePickerPicker.d.ts +1 -2
- package/types/components/DatePickerRange/DatePickerRange.d.ts +0 -1
- package/types/components/DatePickerRangeHeader/DatePickerRangeHeader.d.ts +0 -1
- package/types/components/DatePickerSingleDate/DatePickerSingleDate.d.ts +0 -1
- package/types/components/SingleRangeDateSwitcher/SingleRangeDateSwitcher.d.ts +0 -1
- package/cjs/DSDatePicker.js.map +0 -7
- package/cjs/components/DSDatePickerImpl.js.map +0 -7
- package/cjs/components/DatePickerController/DatePickerController.js.map +0 -7
- package/cjs/components/DatePickerDay/DatePickerDay.js.map +0 -7
- package/cjs/components/DatePickerDropdown.js.map +0 -7
- package/cjs/components/DatePickerHeader/DatePickerHeader.js.map +0 -7
- package/cjs/components/DatePickerNavigation/DatePickerNavigation.js.map +0 -7
- package/cjs/components/DatePickerPicker/DatePickerPicker.js.map +0 -7
- package/cjs/components/DatePickerRange/DatePickerRange.js.map +0 -7
- package/cjs/components/DatePickerRangeHeader/DatePickerRangeHeader.js.map +0 -7
- package/cjs/components/DatePickerRenderMonth/DatePickerRenderMonth.js.map +0 -7
- package/cjs/components/DatePickerSingleDate/DatePickerSingleDate.js.map +0 -7
- package/cjs/components/SingleRangeDateSwitcher/SingleRangeDateSwitcher.js.map +0 -7
- package/cjs/components/index.js.map +0 -7
- package/cjs/defaultPhrases.js.map +0 -7
- package/cjs/index.js.map +0 -7
- package/esm/DSDatePicker.js.map +0 -7
- package/esm/components/DSDatePickerImpl.js.map +0 -7
- package/esm/components/DatePickerController/DatePickerController.js.map +0 -7
- package/esm/components/DatePickerDay/DatePickerDay.js.map +0 -7
- package/esm/components/DatePickerDropdown.js.map +0 -7
- package/esm/components/DatePickerHeader/DatePickerHeader.js.map +0 -7
- package/esm/components/DatePickerNavigation/DatePickerNavigation.js.map +0 -7
- package/esm/components/DatePickerPicker/DatePickerPicker.js.map +0 -7
- package/esm/components/DatePickerRange/DatePickerRange.js.map +0 -7
- package/esm/components/DatePickerRangeHeader/DatePickerRangeHeader.js.map +0 -7
- package/esm/components/DatePickerRenderMonth/DatePickerRenderMonth.js.map +0 -7
- package/esm/components/DatePickerSingleDate/DatePickerSingleDate.js.map +0 -7
- package/esm/components/SingleRangeDateSwitcher/SingleRangeDateSwitcher.js.map +0 -7
- package/esm/components/index.js.map +0 -7
- package/esm/defaultPhrases.js.map +0 -7
- package/esm/index.js.map +0 -7
|
@@ -1,45 +1,49 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import moment from
|
|
5
|
-
import {
|
|
6
|
-
import { aggregatedClasses } from
|
|
7
|
-
|
|
8
|
-
const
|
|
9
|
-
const
|
|
10
|
-
const
|
|
11
|
-
|
|
12
|
-
|
|
1
|
+
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
2
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
3
|
+
import { useState, useEffect } from 'react';
|
|
4
|
+
import moment from 'moment';
|
|
5
|
+
import { DSInputGroup, DSDateInputV2 } from '@elliemae/ds-form';
|
|
6
|
+
import { aggregatedClasses } from '@elliemae/ds-classnames';
|
|
7
|
+
|
|
8
|
+
const DATE_FORMAT = 'MMDDYYYY';
|
|
9
|
+
const blockname = 'date-picker-header';
|
|
10
|
+
const Header = aggregatedClasses('div')(blockname);
|
|
11
|
+
|
|
12
|
+
const isFn = variable => typeof variable === 'function';
|
|
13
|
+
|
|
14
|
+
const DatePickerHeader = _ref => {
|
|
15
|
+
let {
|
|
16
|
+
onInputChange = () => null,
|
|
17
|
+
selectedDate,
|
|
18
|
+
updateKeyDate
|
|
19
|
+
} = _ref;
|
|
20
|
+
const [value, setValue] = useState(isFn(selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.format) ? selectedDate.format(DATE_FORMAT) : '');
|
|
13
21
|
useEffect(() => {
|
|
14
|
-
if (isFn(selectedDate
|
|
15
|
-
setValue(selectedDate
|
|
22
|
+
if (isFn(selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.format)) {
|
|
23
|
+
setValue(selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.format(DATE_FORMAT));
|
|
16
24
|
}
|
|
17
25
|
}, [selectedDate]);
|
|
18
|
-
|
|
26
|
+
|
|
27
|
+
const handleOnChange = newDate => {
|
|
19
28
|
setValue(newDate);
|
|
20
29
|
};
|
|
21
|
-
|
|
22
|
-
|
|
30
|
+
|
|
31
|
+
const handleOnKeyDown = e => {
|
|
32
|
+
if (e.key === 'Enter' && value.length === DATE_FORMAT.length) {
|
|
23
33
|
const momentValue = moment(value, DATE_FORMAT);
|
|
24
34
|
onInputChange(momentValue);
|
|
25
35
|
updateKeyDate(momentValue);
|
|
26
36
|
}
|
|
27
37
|
};
|
|
28
|
-
|
|
38
|
+
|
|
39
|
+
return /*#__PURE__*/_jsx(Header, {}, void 0, /*#__PURE__*/_jsx(DSInputGroup, {}, void 0, /*#__PURE__*/_jsx(DSDateInputV2, {
|
|
29
40
|
onChange: handleOnChange,
|
|
30
41
|
onKeyDown: handleOnKeyDown,
|
|
31
|
-
value,
|
|
32
|
-
containerProps: {
|
|
42
|
+
value: value,
|
|
43
|
+
containerProps: {
|
|
44
|
+
'data-testid': 'start-date'
|
|
45
|
+
}
|
|
33
46
|
})));
|
|
34
47
|
};
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
selectedDate: PropTypes.any,
|
|
38
|
-
updateKeyDate: PropTypes.any
|
|
39
|
-
};
|
|
40
|
-
var DatePickerHeader_default = DatePickerHeader;
|
|
41
|
-
export {
|
|
42
|
-
DatePickerHeader,
|
|
43
|
-
DatePickerHeader_default as default
|
|
44
|
-
};
|
|
45
|
-
//# sourceMappingURL=DatePickerHeader.js.map
|
|
48
|
+
|
|
49
|
+
export { DatePickerHeader as default };
|
|
@@ -1,37 +1,25 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
size
|
|
24
|
-
}));
|
|
25
|
-
Navigation.propTypes = {
|
|
26
|
-
className: "date-picker-navigation",
|
|
27
|
-
icon: PropTypes.element,
|
|
28
|
-
color: PropTypes.oneOf(iconColors),
|
|
29
|
-
size: PropTypes.oneOf(iconSizes),
|
|
30
|
-
innerRef: PropTypes.any
|
|
1
|
+
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
2
|
+
import 'react';
|
|
3
|
+
import ChevronRight from '@elliemae/ds-icons/ChevronRight';
|
|
4
|
+
import { DSIconColors, DSIconSizes } from '@elliemae/ds-basic/Icon';
|
|
5
|
+
|
|
6
|
+
const Navigation = _ref => {
|
|
7
|
+
let {
|
|
8
|
+
className = 'date-picker-navigation',
|
|
9
|
+
icon: Icon = ChevronRight,
|
|
10
|
+
color = DSIconColors.NEUTRAL,
|
|
11
|
+
size = DSIconSizes.S,
|
|
12
|
+
innerRef
|
|
13
|
+
} = _ref;
|
|
14
|
+
return /*#__PURE__*/_jsx("div", {
|
|
15
|
+
tabIndex: 0,
|
|
16
|
+
"data-testid": "date-picker-nav"
|
|
17
|
+
}, void 0, /*#__PURE__*/_jsx(Icon, {
|
|
18
|
+
className: className,
|
|
19
|
+
color: color,
|
|
20
|
+
innerRef: innerRef,
|
|
21
|
+
size: size
|
|
22
|
+
}));
|
|
31
23
|
};
|
|
32
|
-
|
|
33
|
-
export {
|
|
34
|
-
Navigation as DatePickerNavigation,
|
|
35
|
-
DatePickerNavigation_default as default
|
|
36
|
-
};
|
|
37
|
-
//# sourceMappingURL=DatePickerNavigation.js.map
|
|
24
|
+
|
|
25
|
+
export { Navigation as default };
|
|
@@ -1,39 +1,50 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
6
|
-
import
|
|
7
|
-
import {
|
|
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
|
-
|
|
1
|
+
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
2
|
+
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
|
|
3
|
+
import 'react';
|
|
4
|
+
import PropTypes from 'prop-types';
|
|
5
|
+
import { DSIconSizes, DSIconColors } from '@elliemae/ds-basic/Icon';
|
|
6
|
+
import DatePicker from '@elliemae/ds-icons/DatePicker';
|
|
7
|
+
import DSButton, { buttonTypes } from '@elliemae/ds-button';
|
|
8
|
+
import { iconSizes } from '@elliemae/ds-shared/prop-types';
|
|
9
|
+
|
|
10
|
+
var _DatePicker;
|
|
11
|
+
|
|
12
|
+
const _excluded = ["className", "disabled", "icon", "size", "buttonActionType", "onClick", "onBlur", "readOnly", "tabIndex", "innerRef"];
|
|
13
|
+
const Picker = _ref => {
|
|
14
|
+
let {
|
|
15
|
+
className = 'date-picker-icon',
|
|
16
|
+
disabled = false,
|
|
17
|
+
icon = _DatePicker || (_DatePicker = /*#__PURE__*/_jsx(DatePicker, {})),
|
|
18
|
+
size = DSIconSizes.M,
|
|
19
|
+
buttonActionType = 'secondary',
|
|
20
|
+
onClick = () => null,
|
|
21
|
+
onBlur = () => null,
|
|
22
|
+
readOnly = false,
|
|
23
|
+
tabIndex = 0,
|
|
24
|
+
innerRef
|
|
25
|
+
} = _ref,
|
|
26
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
27
|
+
|
|
28
|
+
return /*#__PURE__*/_jsx(DSButton, {
|
|
29
|
+
innerRef: innerRef,
|
|
30
|
+
"aria-label": rest['aria-label'] || 'Date Picker Button',
|
|
31
|
+
buttonType: buttonActionType,
|
|
32
|
+
className: className,
|
|
33
|
+
color: !disabled ? DSIconColors.PRIMARY : DSIconColors.NEUTRAL,
|
|
34
|
+
disabled: disabled,
|
|
35
|
+
icon: icon,
|
|
36
|
+
onBlur: onBlur,
|
|
37
|
+
onClick: onClick,
|
|
38
|
+
readOnly: readOnly,
|
|
39
|
+
size: size,
|
|
40
|
+
tabIndex: tabIndex,
|
|
41
|
+
"data-testid": "btn-date-picker"
|
|
42
|
+
});
|
|
43
|
+
};
|
|
35
44
|
const PickerPropsTypes = {
|
|
36
|
-
innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
|
|
45
|
+
innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
|
|
46
|
+
current: PropTypes.any
|
|
47
|
+
})]),
|
|
37
48
|
className: PropTypes.string,
|
|
38
49
|
disabled: PropTypes.bool,
|
|
39
50
|
icon: PropTypes.element,
|
|
@@ -45,12 +56,5 @@ const PickerPropsTypes = {
|
|
|
45
56
|
readOnly: PropTypes.bool,
|
|
46
57
|
tabIndex: PropTypes.number
|
|
47
58
|
};
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
export {
|
|
51
|
-
Picker as DatePickerPicker,
|
|
52
|
-
Picker,
|
|
53
|
-
PickerPropsTypes,
|
|
54
|
-
DatePickerPicker_default as default
|
|
55
|
-
};
|
|
56
|
-
//# sourceMappingURL=DatePickerPicker.js.map
|
|
59
|
+
|
|
60
|
+
export { Picker, PickerPropsTypes, Picker as default };
|
|
@@ -1,81 +1,111 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
4
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
5
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
6
|
+
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
7
|
+
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
8
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
9
|
+
import { useState, useRef } from 'react';
|
|
10
|
+
import { DayPickerRangeController } from 'react-dates';
|
|
11
|
+
import moment from 'moment';
|
|
12
|
+
import { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';
|
|
13
|
+
import { ChevronLeft } from '@elliemae/ds-icons';
|
|
14
|
+
import Day from '../DatePickerDay/DatePickerDay.js';
|
|
15
|
+
import Navigation from '../DatePickerNavigation/DatePickerNavigation.js';
|
|
16
|
+
import DatePickerRangeHeader from '../DatePickerRangeHeader/DatePickerRangeHeader.js';
|
|
17
|
+
import { jsx } from 'react/jsx-runtime';
|
|
18
|
+
|
|
19
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
20
|
+
|
|
21
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
22
|
+
const blockname = 'date-range';
|
|
23
|
+
const Wrapper = aggregatedClasses('div')(blockname, 'wrapper');
|
|
24
|
+
const {
|
|
25
|
+
classNameElement,
|
|
26
|
+
classNameBlock
|
|
27
|
+
} = convertPropToCssClassName('datepicker');
|
|
28
|
+
const START_DATE = 'startDate';
|
|
29
|
+
const END_DATE = 'endDate';
|
|
30
|
+
|
|
31
|
+
const DatePickerRangeDate = _ref => {
|
|
32
|
+
let {
|
|
33
|
+
dateStart,
|
|
34
|
+
dateEnd,
|
|
35
|
+
displayFormatDay = 'D',
|
|
36
|
+
showHeader = true,
|
|
37
|
+
otherProps
|
|
38
|
+
} = _ref;
|
|
16
39
|
const [selectedDateStart, setSelectedDateStart] = useState(dateStart);
|
|
17
40
|
const [selectedDateEnd, setSelectedDateEnd] = useState(dateEnd);
|
|
18
41
|
const [focusedInput, setFocusedInput] = useState(START_DATE);
|
|
19
42
|
const datePickerRef = useRef();
|
|
43
|
+
|
|
20
44
|
const handleFocusChange = () => {
|
|
21
45
|
setFocusedInput(focusedInput === START_DATE ? END_DATE : START_DATE);
|
|
22
46
|
};
|
|
23
|
-
|
|
47
|
+
|
|
48
|
+
const handleDatesChange = _ref2 => {
|
|
49
|
+
let {
|
|
50
|
+
startDate,
|
|
51
|
+
endDate
|
|
52
|
+
} = _ref2;
|
|
24
53
|
setSelectedDateStart(startDate);
|
|
25
54
|
setSelectedDateEnd(endDate);
|
|
26
55
|
};
|
|
27
|
-
|
|
56
|
+
|
|
57
|
+
const handleStartInputChange = newDate => {
|
|
28
58
|
setSelectedDateStart(newDate);
|
|
29
59
|
};
|
|
30
|
-
|
|
60
|
+
|
|
61
|
+
const handleEndInputChange = newDate => {
|
|
31
62
|
setSelectedDateEnd(newDate);
|
|
32
63
|
};
|
|
64
|
+
|
|
33
65
|
const getSafeDateStartValue = () => {
|
|
34
66
|
if (selectedDateStart) {
|
|
35
67
|
return moment(selectedDateStart);
|
|
36
68
|
}
|
|
37
69
|
};
|
|
70
|
+
|
|
38
71
|
const getSafeDateEndValue = () => {
|
|
39
72
|
if (selectedDateEnd) {
|
|
40
73
|
return moment(selectedDateEnd);
|
|
41
74
|
}
|
|
42
75
|
};
|
|
76
|
+
|
|
43
77
|
const safeStartDate = getSafeDateStartValue();
|
|
44
78
|
const safeEndDate = getSafeDateEndValue();
|
|
45
|
-
return
|
|
79
|
+
return /*#__PURE__*/_jsx(Wrapper, {}, void 0, showHeader && /*#__PURE__*/_jsx(DatePickerRangeHeader, {
|
|
46
80
|
onEndInputChange: handleEndInputChange,
|
|
47
81
|
onStartInputChange: handleStartInputChange,
|
|
48
82
|
selectedEndDate: safeEndDate,
|
|
49
83
|
selectedStartDate: safeStartDate
|
|
50
|
-
}),
|
|
84
|
+
}), /*#__PURE__*/jsx("div", {
|
|
51
85
|
ref: datePickerRef,
|
|
52
|
-
className: classNameBlock(
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
}))
|
|
86
|
+
className: classNameBlock('wrapper-day-picker-single-date-controller'),
|
|
87
|
+
children: /*#__PURE__*/jsx(DayPickerRangeController, _objectSpread(_objectSpread({}, otherProps), {}, {
|
|
88
|
+
enableOutsideDays: true,
|
|
89
|
+
endDate: safeEndDate,
|
|
90
|
+
focused: true,
|
|
91
|
+
focusedInput: focusedInput,
|
|
92
|
+
hideKeyboardShortcutsPanel: true,
|
|
93
|
+
navNext: /*#__PURE__*/_jsx(Navigation, {
|
|
94
|
+
className: classNameElement('navigation-next')
|
|
95
|
+
}),
|
|
96
|
+
navPrev: /*#__PURE__*/_jsx(Navigation, {
|
|
97
|
+
className: classNameElement('navigation-prev'),
|
|
98
|
+
icon: ChevronLeft
|
|
99
|
+
}),
|
|
100
|
+
onDatesChange: handleDatesChange,
|
|
101
|
+
onFocusChange: handleFocusChange,
|
|
102
|
+
renderDayContents: date => /*#__PURE__*/_jsx(Day, {
|
|
103
|
+
className: classNameElement('day-contents'),
|
|
104
|
+
date: date.format(displayFormatDay)
|
|
105
|
+
}),
|
|
106
|
+
startDate: safeStartDate
|
|
107
|
+
}))
|
|
108
|
+
}));
|
|
75
109
|
};
|
|
76
|
-
|
|
77
|
-
export {
|
|
78
|
-
DatePickerRangeDate,
|
|
79
|
-
DatePickerRange_default as default
|
|
80
|
-
};
|
|
81
|
-
//# sourceMappingURL=DatePickerRange.js.map
|
|
110
|
+
|
|
111
|
+
export { DatePickerRangeDate as default };
|
|
@@ -1,22 +1,35 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import moment from
|
|
5
|
-
import {
|
|
6
|
-
import { aggregatedClasses } from
|
|
7
|
-
|
|
8
|
-
const
|
|
1
|
+
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
2
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
3
|
+
import { useState, useRef, useEffect } from 'react';
|
|
4
|
+
import moment from 'moment';
|
|
5
|
+
import { DSInputGroup, DSDateInputV2 } from '@elliemae/ds-form';
|
|
6
|
+
import { aggregatedClasses } from '@elliemae/ds-classnames';
|
|
7
|
+
|
|
8
|
+
const blockname = 'date-range-picker';
|
|
9
|
+
const DATE_FORMAT = 'MMDDYYYY'; // When year is greater than 999 it means the user finished writing
|
|
10
|
+
// the year for the range, because they must type 4 numbers for the year
|
|
11
|
+
// to be higher than 999
|
|
12
|
+
|
|
9
13
|
const MAGIC_NUMBER = 999;
|
|
10
|
-
const Header = aggregatedClasses(
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
14
|
+
const Header = aggregatedClasses('div')(blockname, 'header', _ref => {
|
|
15
|
+
let {
|
|
16
|
+
invalidDate
|
|
17
|
+
} = _ref;
|
|
18
|
+
return {
|
|
19
|
+
invalidDate
|
|
20
|
+
};
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
const DatePickerRangeHeader = _ref2 => {
|
|
24
|
+
let {
|
|
25
|
+
onStartInputChange = () => null,
|
|
26
|
+
onEndInputChange = () => null,
|
|
27
|
+
onFocusChange = () => null,
|
|
28
|
+
selectedStartDate,
|
|
29
|
+
selectedEndDate,
|
|
30
|
+
handleDatesChange,
|
|
31
|
+
autoJumpOnEdit = true
|
|
32
|
+
} = _ref2;
|
|
20
33
|
const [startValue, setStartValue] = useState(selectedStartDate);
|
|
21
34
|
const [endValue, setEndValue] = useState(selectedEndDate);
|
|
22
35
|
const startInputRef = useRef();
|
|
@@ -25,85 +38,100 @@ const DatePickerRangeHeader = ({
|
|
|
25
38
|
if (selectedStartDate) {
|
|
26
39
|
setStartValue(selectedStartDate.format(DATE_FORMAT));
|
|
27
40
|
}
|
|
41
|
+
|
|
28
42
|
if (selectedEndDate) {
|
|
29
43
|
setEndValue(selectedEndDate.format(DATE_FORMAT));
|
|
30
44
|
}
|
|
31
45
|
}, [selectedStartDate, selectedEndDate]);
|
|
46
|
+
|
|
32
47
|
const isValidRangeDate = (start, end) => {
|
|
33
48
|
let isValidRange = false;
|
|
49
|
+
|
|
34
50
|
if (start && end) {
|
|
35
51
|
const momentStart = moment(start, DATE_FORMAT);
|
|
36
52
|
const momentEnd = moment(end, DATE_FORMAT);
|
|
37
53
|
isValidRange = momentStart.isBefore(momentEnd);
|
|
38
54
|
}
|
|
55
|
+
|
|
39
56
|
return isValidRange;
|
|
40
57
|
};
|
|
41
|
-
|
|
42
|
-
const
|
|
58
|
+
|
|
59
|
+
const handleOnFocus = inputType => onFocusChange(inputType);
|
|
60
|
+
|
|
61
|
+
const handleOnChangeStart = newStartValue => {
|
|
62
|
+
var _endInputRef$current, _endInputRef$current$;
|
|
63
|
+
|
|
43
64
|
const y = newStartValue.substring(4);
|
|
44
65
|
const momentValue = moment(newStartValue, DATE_FORMAT);
|
|
66
|
+
|
|
45
67
|
if (newStartValue && newStartValue.length === DATE_FORMAT.length) {
|
|
46
68
|
onStartInputChange(momentValue);
|
|
47
69
|
}
|
|
70
|
+
|
|
48
71
|
setStartValue(newStartValue);
|
|
49
|
-
|
|
72
|
+
|
|
73
|
+
if (autoJumpOnEdit && parseInt(y, 10) > MAGIC_NUMBER && endInputRef !== null && endInputRef !== void 0 && (_endInputRef$current = endInputRef.current) !== null && _endInputRef$current !== void 0 && (_endInputRef$current$ = _endInputRef$current.firstChild) !== null && _endInputRef$current$ !== void 0 && _endInputRef$current$.focus) {
|
|
50
74
|
endInputRef.current.firstChild.focus();
|
|
51
75
|
}
|
|
52
76
|
};
|
|
53
|
-
|
|
77
|
+
|
|
78
|
+
const handleOnChangeEnd = newEndValue => {
|
|
54
79
|
const momentValue = moment(newEndValue, DATE_FORMAT);
|
|
80
|
+
|
|
55
81
|
if (isValidRangeDate(startValue, newEndValue) && newEndValue && newEndValue.length === DATE_FORMAT.length) {
|
|
56
82
|
onEndInputChange(momentValue);
|
|
57
83
|
}
|
|
84
|
+
|
|
58
85
|
setEndValue(newEndValue);
|
|
59
86
|
};
|
|
60
|
-
|
|
87
|
+
|
|
88
|
+
const handleOnKeyDownStart = e => {
|
|
61
89
|
const isValid = isValidRangeDate(startValue, endValue);
|
|
62
90
|
const momentStart = moment(startValue, DATE_FORMAT);
|
|
63
91
|
const momentEnd = moment(endValue, DATE_FORMAT);
|
|
64
|
-
|
|
92
|
+
|
|
93
|
+
if (e.key === 'Enter' && startValue) {
|
|
65
94
|
onStartInputChange(momentStart);
|
|
66
|
-
if (isValid)
|
|
67
|
-
|
|
95
|
+
if (isValid) handleDatesChange({
|
|
96
|
+
startDate: momentStart,
|
|
97
|
+
endDate: momentEnd
|
|
98
|
+
});
|
|
68
99
|
}
|
|
69
100
|
};
|
|
70
|
-
|
|
101
|
+
|
|
102
|
+
const handleOnKeyDownEnd = e => {
|
|
71
103
|
const isValid = isValidRangeDate(startValue, endValue);
|
|
72
104
|
const momentStart = moment(startValue, DATE_FORMAT);
|
|
73
105
|
const momentEnd = moment(endValue, DATE_FORMAT);
|
|
74
|
-
|
|
75
|
-
|
|
106
|
+
|
|
107
|
+
if (e.key === 'Enter' && isValid) {
|
|
108
|
+
handleDatesChange({
|
|
109
|
+
startDate: momentStart,
|
|
110
|
+
endDate: momentEnd
|
|
111
|
+
});
|
|
76
112
|
onEndInputChange(momentEnd);
|
|
77
113
|
}
|
|
78
114
|
};
|
|
79
|
-
|
|
80
|
-
|
|
115
|
+
|
|
116
|
+
return /*#__PURE__*/_jsx(Header, {}, void 0, /*#__PURE__*/_jsx(DSInputGroup, {}, void 0, /*#__PURE__*/_jsx(DSDateInputV2, {
|
|
117
|
+
containerProps: {
|
|
118
|
+
'data-testid': 'start-date'
|
|
119
|
+
},
|
|
81
120
|
innerRef: startInputRef,
|
|
82
121
|
onChange: handleOnChangeStart,
|
|
83
|
-
onFocus: () => handleOnFocus(
|
|
122
|
+
onFocus: () => handleOnFocus('startDate'),
|
|
84
123
|
onKeyDown: handleOnKeyDownStart,
|
|
85
124
|
value: startValue
|
|
86
|
-
}),
|
|
87
|
-
containerProps: {
|
|
125
|
+
}), /*#__PURE__*/_jsx(DSDateInputV2, {
|
|
126
|
+
containerProps: {
|
|
127
|
+
'data-testid': 'end-date'
|
|
128
|
+
},
|
|
88
129
|
innerRef: endInputRef,
|
|
89
130
|
onChange: handleOnChangeEnd,
|
|
90
|
-
onFocus: () => handleOnFocus(
|
|
131
|
+
onFocus: () => handleOnFocus('endDate'),
|
|
91
132
|
onKeyDown: handleOnKeyDownEnd,
|
|
92
133
|
value: endValue
|
|
93
134
|
})));
|
|
94
135
|
};
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
onEndInputChange: PropTypes.func,
|
|
98
|
-
onFocusChange: PropTypes.func,
|
|
99
|
-
selectedStartDate: PropTypes.any,
|
|
100
|
-
selectedEndDate: PropTypes.any,
|
|
101
|
-
handleDatesChange: PropTypes.func,
|
|
102
|
-
autoJumpOnEdit: PropTypes.bool
|
|
103
|
-
};
|
|
104
|
-
var DatePickerRangeHeader_default = DatePickerRangeHeader;
|
|
105
|
-
export {
|
|
106
|
-
DatePickerRangeHeader,
|
|
107
|
-
DatePickerRangeHeader_default as default
|
|
108
|
-
};
|
|
109
|
-
//# sourceMappingURL=DatePickerRangeHeader.js.map
|
|
136
|
+
|
|
137
|
+
export { DatePickerRangeHeader as default };
|