@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,110 +1,119 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
var
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
const
|
|
48
|
-
const [
|
|
49
|
-
const [
|
|
50
|
-
const
|
|
51
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
4
|
+
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
5
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
6
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
8
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
9
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
10
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
11
|
+
var React = require('react');
|
|
12
|
+
var reactDates = require('react-dates');
|
|
13
|
+
var moment = require('moment');
|
|
14
|
+
var dsClassnames = require('@elliemae/ds-classnames');
|
|
15
|
+
var dsIcons = require('@elliemae/ds-icons');
|
|
16
|
+
var DatePickerDay = require('../DatePickerDay/DatePickerDay.js');
|
|
17
|
+
var DatePickerNavigation = require('../DatePickerNavigation/DatePickerNavigation.js');
|
|
18
|
+
var DatePickerRangeHeader = require('../DatePickerRangeHeader/DatePickerRangeHeader.js');
|
|
19
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
20
|
+
|
|
21
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
22
|
+
|
|
23
|
+
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
24
|
+
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
25
|
+
var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
|
|
26
|
+
|
|
27
|
+
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; }
|
|
28
|
+
|
|
29
|
+
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__default["default"](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; }
|
|
30
|
+
const blockname = 'date-range';
|
|
31
|
+
const Wrapper = dsClassnames.aggregatedClasses('div')(blockname, 'wrapper');
|
|
32
|
+
const {
|
|
33
|
+
classNameElement,
|
|
34
|
+
classNameBlock
|
|
35
|
+
} = dsClassnames.convertPropToCssClassName('datepicker');
|
|
36
|
+
const START_DATE = 'startDate';
|
|
37
|
+
const END_DATE = 'endDate';
|
|
38
|
+
|
|
39
|
+
const DatePickerRangeDate = _ref => {
|
|
40
|
+
let {
|
|
41
|
+
dateStart,
|
|
42
|
+
dateEnd,
|
|
43
|
+
displayFormatDay = 'D',
|
|
44
|
+
showHeader = true,
|
|
45
|
+
otherProps
|
|
46
|
+
} = _ref;
|
|
47
|
+
const [selectedDateStart, setSelectedDateStart] = React.useState(dateStart);
|
|
48
|
+
const [selectedDateEnd, setSelectedDateEnd] = React.useState(dateEnd);
|
|
49
|
+
const [focusedInput, setFocusedInput] = React.useState(START_DATE);
|
|
50
|
+
const datePickerRef = React.useRef();
|
|
51
|
+
|
|
52
52
|
const handleFocusChange = () => {
|
|
53
53
|
setFocusedInput(focusedInput === START_DATE ? END_DATE : START_DATE);
|
|
54
54
|
};
|
|
55
|
-
|
|
55
|
+
|
|
56
|
+
const handleDatesChange = _ref2 => {
|
|
57
|
+
let {
|
|
58
|
+
startDate,
|
|
59
|
+
endDate
|
|
60
|
+
} = _ref2;
|
|
56
61
|
setSelectedDateStart(startDate);
|
|
57
62
|
setSelectedDateEnd(endDate);
|
|
58
63
|
};
|
|
59
|
-
|
|
64
|
+
|
|
65
|
+
const handleStartInputChange = newDate => {
|
|
60
66
|
setSelectedDateStart(newDate);
|
|
61
67
|
};
|
|
62
|
-
|
|
68
|
+
|
|
69
|
+
const handleEndInputChange = newDate => {
|
|
63
70
|
setSelectedDateEnd(newDate);
|
|
64
71
|
};
|
|
72
|
+
|
|
65
73
|
const getSafeDateStartValue = () => {
|
|
66
74
|
if (selectedDateStart) {
|
|
67
|
-
return
|
|
75
|
+
return moment__default["default"](selectedDateStart);
|
|
68
76
|
}
|
|
69
77
|
};
|
|
78
|
+
|
|
70
79
|
const getSafeDateEndValue = () => {
|
|
71
80
|
if (selectedDateEnd) {
|
|
72
|
-
return
|
|
81
|
+
return moment__default["default"](selectedDateEnd);
|
|
73
82
|
}
|
|
74
83
|
};
|
|
84
|
+
|
|
75
85
|
const safeStartDate = getSafeDateStartValue();
|
|
76
86
|
const safeEndDate = getSafeDateEndValue();
|
|
77
|
-
return
|
|
87
|
+
return /*#__PURE__*/_jsx__default["default"](Wrapper, {}, void 0, showHeader && /*#__PURE__*/_jsx__default["default"](DatePickerRangeHeader, {
|
|
78
88
|
onEndInputChange: handleEndInputChange,
|
|
79
89
|
onStartInputChange: handleStartInputChange,
|
|
80
90
|
selectedEndDate: safeEndDate,
|
|
81
91
|
selectedStartDate: safeStartDate
|
|
82
|
-
}),
|
|
92
|
+
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
83
93
|
ref: datePickerRef,
|
|
84
|
-
className: classNameBlock(
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
}))
|
|
94
|
+
className: classNameBlock('wrapper-day-picker-single-date-controller'),
|
|
95
|
+
children: /*#__PURE__*/jsxRuntime.jsx(reactDates.DayPickerRangeController, _objectSpread(_objectSpread({}, otherProps), {}, {
|
|
96
|
+
enableOutsideDays: true,
|
|
97
|
+
endDate: safeEndDate,
|
|
98
|
+
focused: true,
|
|
99
|
+
focusedInput: focusedInput,
|
|
100
|
+
hideKeyboardShortcutsPanel: true,
|
|
101
|
+
navNext: /*#__PURE__*/_jsx__default["default"](DatePickerNavigation, {
|
|
102
|
+
className: classNameElement('navigation-next')
|
|
103
|
+
}),
|
|
104
|
+
navPrev: /*#__PURE__*/_jsx__default["default"](DatePickerNavigation, {
|
|
105
|
+
className: classNameElement('navigation-prev'),
|
|
106
|
+
icon: dsIcons.ChevronLeft
|
|
107
|
+
}),
|
|
108
|
+
onDatesChange: handleDatesChange,
|
|
109
|
+
onFocusChange: handleFocusChange,
|
|
110
|
+
renderDayContents: date => /*#__PURE__*/_jsx__default["default"](DatePickerDay, {
|
|
111
|
+
className: classNameElement('day-contents'),
|
|
112
|
+
date: date.format(displayFormatDay)
|
|
113
|
+
}),
|
|
114
|
+
startDate: safeStartDate
|
|
115
|
+
}))
|
|
116
|
+
}));
|
|
107
117
|
};
|
|
108
|
-
|
|
109
|
-
module.exports =
|
|
110
|
-
//# sourceMappingURL=DatePickerRange.js.map
|
|
118
|
+
|
|
119
|
+
module.exports = DatePickerRangeDate;
|
|
@@ -1,138 +1,144 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
var
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
4
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var moment = require('moment');
|
|
7
|
+
var dsForm = require('@elliemae/ds-form');
|
|
8
|
+
var dsClassnames = require('@elliemae/ds-classnames');
|
|
9
|
+
|
|
10
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
|
+
|
|
12
|
+
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
13
|
+
var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
|
|
14
|
+
|
|
15
|
+
const blockname = 'date-range-picker';
|
|
16
|
+
const DATE_FORMAT = 'MMDDYYYY'; // When year is greater than 999 it means the user finished writing
|
|
17
|
+
// the year for the range, because they must type 4 numbers for the year
|
|
18
|
+
// to be higher than 999
|
|
19
|
+
|
|
20
|
+
const MAGIC_NUMBER = 999;
|
|
21
|
+
const Header = dsClassnames.aggregatedClasses('div')(blockname, 'header', _ref => {
|
|
22
|
+
let {
|
|
23
|
+
invalidDate
|
|
24
|
+
} = _ref;
|
|
25
|
+
return {
|
|
26
|
+
invalidDate
|
|
26
27
|
};
|
|
27
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
-
var DatePickerRangeHeader_exports = {};
|
|
29
|
-
__export(DatePickerRangeHeader_exports, {
|
|
30
|
-
DatePickerRangeHeader: () => DatePickerRangeHeader,
|
|
31
|
-
default: () => DatePickerRangeHeader_default
|
|
32
28
|
});
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
handleDatesChange,
|
|
50
|
-
autoJumpOnEdit = true
|
|
51
|
-
}) => {
|
|
52
|
-
const [startValue, setStartValue] = (0, import_react.useState)(selectedStartDate);
|
|
53
|
-
const [endValue, setEndValue] = (0, import_react.useState)(selectedEndDate);
|
|
54
|
-
const startInputRef = (0, import_react.useRef)();
|
|
55
|
-
const endInputRef = (0, import_react.useRef)();
|
|
56
|
-
(0, import_react.useEffect)(() => {
|
|
29
|
+
|
|
30
|
+
const DatePickerRangeHeader = _ref2 => {
|
|
31
|
+
let {
|
|
32
|
+
onStartInputChange = () => null,
|
|
33
|
+
onEndInputChange = () => null,
|
|
34
|
+
onFocusChange = () => null,
|
|
35
|
+
selectedStartDate,
|
|
36
|
+
selectedEndDate,
|
|
37
|
+
handleDatesChange,
|
|
38
|
+
autoJumpOnEdit = true
|
|
39
|
+
} = _ref2;
|
|
40
|
+
const [startValue, setStartValue] = React.useState(selectedStartDate);
|
|
41
|
+
const [endValue, setEndValue] = React.useState(selectedEndDate);
|
|
42
|
+
const startInputRef = React.useRef();
|
|
43
|
+
const endInputRef = React.useRef();
|
|
44
|
+
React.useEffect(() => {
|
|
57
45
|
if (selectedStartDate) {
|
|
58
46
|
setStartValue(selectedStartDate.format(DATE_FORMAT));
|
|
59
47
|
}
|
|
48
|
+
|
|
60
49
|
if (selectedEndDate) {
|
|
61
50
|
setEndValue(selectedEndDate.format(DATE_FORMAT));
|
|
62
51
|
}
|
|
63
52
|
}, [selectedStartDate, selectedEndDate]);
|
|
53
|
+
|
|
64
54
|
const isValidRangeDate = (start, end) => {
|
|
65
55
|
let isValidRange = false;
|
|
56
|
+
|
|
66
57
|
if (start && end) {
|
|
67
|
-
const momentStart =
|
|
68
|
-
const momentEnd =
|
|
58
|
+
const momentStart = moment__default["default"](start, DATE_FORMAT);
|
|
59
|
+
const momentEnd = moment__default["default"](end, DATE_FORMAT);
|
|
69
60
|
isValidRange = momentStart.isBefore(momentEnd);
|
|
70
61
|
}
|
|
62
|
+
|
|
71
63
|
return isValidRange;
|
|
72
64
|
};
|
|
73
|
-
|
|
74
|
-
const
|
|
65
|
+
|
|
66
|
+
const handleOnFocus = inputType => onFocusChange(inputType);
|
|
67
|
+
|
|
68
|
+
const handleOnChangeStart = newStartValue => {
|
|
69
|
+
var _endInputRef$current, _endInputRef$current$;
|
|
70
|
+
|
|
75
71
|
const y = newStartValue.substring(4);
|
|
76
|
-
const momentValue =
|
|
72
|
+
const momentValue = moment__default["default"](newStartValue, DATE_FORMAT);
|
|
73
|
+
|
|
77
74
|
if (newStartValue && newStartValue.length === DATE_FORMAT.length) {
|
|
78
75
|
onStartInputChange(momentValue);
|
|
79
76
|
}
|
|
77
|
+
|
|
80
78
|
setStartValue(newStartValue);
|
|
81
|
-
|
|
79
|
+
|
|
80
|
+
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) {
|
|
82
81
|
endInputRef.current.firstChild.focus();
|
|
83
82
|
}
|
|
84
83
|
};
|
|
85
|
-
|
|
86
|
-
|
|
84
|
+
|
|
85
|
+
const handleOnChangeEnd = newEndValue => {
|
|
86
|
+
const momentValue = moment__default["default"](newEndValue, DATE_FORMAT);
|
|
87
|
+
|
|
87
88
|
if (isValidRangeDate(startValue, newEndValue) && newEndValue && newEndValue.length === DATE_FORMAT.length) {
|
|
88
89
|
onEndInputChange(momentValue);
|
|
89
90
|
}
|
|
91
|
+
|
|
90
92
|
setEndValue(newEndValue);
|
|
91
93
|
};
|
|
92
|
-
|
|
94
|
+
|
|
95
|
+
const handleOnKeyDownStart = e => {
|
|
93
96
|
const isValid = isValidRangeDate(startValue, endValue);
|
|
94
|
-
const momentStart =
|
|
95
|
-
const momentEnd =
|
|
96
|
-
|
|
97
|
+
const momentStart = moment__default["default"](startValue, DATE_FORMAT);
|
|
98
|
+
const momentEnd = moment__default["default"](endValue, DATE_FORMAT);
|
|
99
|
+
|
|
100
|
+
if (e.key === 'Enter' && startValue) {
|
|
97
101
|
onStartInputChange(momentStart);
|
|
98
|
-
if (isValid)
|
|
99
|
-
|
|
102
|
+
if (isValid) handleDatesChange({
|
|
103
|
+
startDate: momentStart,
|
|
104
|
+
endDate: momentEnd
|
|
105
|
+
});
|
|
100
106
|
}
|
|
101
107
|
};
|
|
102
|
-
|
|
108
|
+
|
|
109
|
+
const handleOnKeyDownEnd = e => {
|
|
103
110
|
const isValid = isValidRangeDate(startValue, endValue);
|
|
104
|
-
const momentStart =
|
|
105
|
-
const momentEnd =
|
|
106
|
-
|
|
107
|
-
|
|
111
|
+
const momentStart = moment__default["default"](startValue, DATE_FORMAT);
|
|
112
|
+
const momentEnd = moment__default["default"](endValue, DATE_FORMAT);
|
|
113
|
+
|
|
114
|
+
if (e.key === 'Enter' && isValid) {
|
|
115
|
+
handleDatesChange({
|
|
116
|
+
startDate: momentStart,
|
|
117
|
+
endDate: momentEnd
|
|
118
|
+
});
|
|
108
119
|
onEndInputChange(momentEnd);
|
|
109
120
|
}
|
|
110
121
|
};
|
|
111
|
-
|
|
112
|
-
|
|
122
|
+
|
|
123
|
+
return /*#__PURE__*/_jsx__default["default"](Header, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSInputGroup, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSDateInputV2, {
|
|
124
|
+
containerProps: {
|
|
125
|
+
'data-testid': 'start-date'
|
|
126
|
+
},
|
|
113
127
|
innerRef: startInputRef,
|
|
114
128
|
onChange: handleOnChangeStart,
|
|
115
|
-
onFocus: () => handleOnFocus(
|
|
129
|
+
onFocus: () => handleOnFocus('startDate'),
|
|
116
130
|
onKeyDown: handleOnKeyDownStart,
|
|
117
131
|
value: startValue
|
|
118
|
-
}),
|
|
119
|
-
containerProps: {
|
|
132
|
+
}), /*#__PURE__*/_jsx__default["default"](dsForm.DSDateInputV2, {
|
|
133
|
+
containerProps: {
|
|
134
|
+
'data-testid': 'end-date'
|
|
135
|
+
},
|
|
120
136
|
innerRef: endInputRef,
|
|
121
137
|
onChange: handleOnChangeEnd,
|
|
122
|
-
onFocus: () => handleOnFocus(
|
|
138
|
+
onFocus: () => handleOnFocus('endDate'),
|
|
123
139
|
onKeyDown: handleOnKeyDownEnd,
|
|
124
140
|
value: endValue
|
|
125
141
|
})));
|
|
126
142
|
};
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
onEndInputChange: import_prop_types.default.func,
|
|
130
|
-
onFocusChange: import_prop_types.default.func,
|
|
131
|
-
selectedStartDate: import_prop_types.default.any,
|
|
132
|
-
selectedEndDate: import_prop_types.default.any,
|
|
133
|
-
handleDatesChange: import_prop_types.default.func,
|
|
134
|
-
autoJumpOnEdit: import_prop_types.default.bool
|
|
135
|
-
};
|
|
136
|
-
var DatePickerRangeHeader_default = DatePickerRangeHeader;
|
|
137
|
-
module.exports = __toCommonJS(DatePickerRangeHeader_exports);
|
|
138
|
-
//# sourceMappingURL=DatePickerRangeHeader.js.map
|
|
143
|
+
|
|
144
|
+
module.exports = DatePickerRangeHeader;
|
|
@@ -1,61 +1,46 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
|
|
7
|
-
var
|
|
8
|
-
var
|
|
9
|
-
|
|
10
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
6
|
+
require('react');
|
|
7
|
+
var dsIcons = require('@elliemae/ds-icons');
|
|
8
|
+
var dsGrid = require('@elliemae/ds-grid');
|
|
9
|
+
|
|
10
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
|
+
|
|
12
|
+
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
13
|
+
|
|
14
|
+
var _ChevronDoubleLeft, _ChevronDoubleRight;
|
|
15
|
+
const renderMonthElement = _ref => {
|
|
16
|
+
let {
|
|
17
|
+
month,
|
|
18
|
+
onYearSelect
|
|
19
|
+
} = _ref;
|
|
20
|
+
return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
|
|
21
|
+
height: "20px",
|
|
22
|
+
cols: ['auto', 1, 'auto'],
|
|
23
|
+
alignItems: "flex-end",
|
|
24
|
+
mr: "10px"
|
|
25
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
|
|
26
|
+
role: "button",
|
|
27
|
+
tabIndex: "0",
|
|
28
|
+
"data-testid": "date-picker-prev-year-arrow",
|
|
29
|
+
onClick: () => onYearSelect(month, month.year() - 1)
|
|
30
|
+
}, void 0, _ChevronDoubleLeft || (_ChevronDoubleLeft = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronDoubleLeft, {
|
|
31
|
+
width: 13.6,
|
|
32
|
+
height: 13.6
|
|
33
|
+
})))), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
|
|
34
|
+
"data-testid": "date-picker-header"
|
|
35
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"]("strong", {}, void 0, month.format('MMMM YYYY'))), /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
|
|
36
|
+
role: "button",
|
|
37
|
+
tabIndex: "0",
|
|
38
|
+
"data-testid": "date-picker-next-year-arrow",
|
|
39
|
+
onClick: () => onYearSelect(month, month.year() + 1)
|
|
40
|
+
}, void 0, _ChevronDoubleRight || (_ChevronDoubleRight = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronDoubleRight, {
|
|
41
|
+
width: 13.6,
|
|
42
|
+
height: 13.6
|
|
43
|
+
})))));
|
|
11
44
|
};
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
for (let key of __getOwnPropNames(module2))
|
|
15
|
-
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
-
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return target;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (module2, isNodeMode) => {
|
|
21
|
-
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
-
};
|
|
23
|
-
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
-
return (module2, temp) => {
|
|
25
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
-
};
|
|
27
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
-
var DatePickerRenderMonth_exports = {};
|
|
29
|
-
__export(DatePickerRenderMonth_exports, {
|
|
30
|
-
renderMonthElement: () => renderMonthElement
|
|
31
|
-
});
|
|
32
|
-
var React = __toESM(require("react"));
|
|
33
|
-
var import_react = __toESM(require("react"));
|
|
34
|
-
var import_ds_icons = require("@elliemae/ds-icons");
|
|
35
|
-
var import_ds_grid = require("@elliemae/ds-grid");
|
|
36
|
-
const renderMonthElement = ({ month, onYearSelect }) => /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
|
|
37
|
-
height: "20px",
|
|
38
|
-
cols: ["auto", 1, "auto"],
|
|
39
|
-
alignItems: "flex-end",
|
|
40
|
-
mr: "10px"
|
|
41
|
-
}, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", {
|
|
42
|
-
role: "button",
|
|
43
|
-
tabIndex: "0",
|
|
44
|
-
"data-testid": "date-picker-prev-year-arrow",
|
|
45
|
-
onClick: () => onYearSelect(month, month.year() - 1)
|
|
46
|
-
}, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronDoubleLeft, {
|
|
47
|
-
width: 13.6,
|
|
48
|
-
height: 13.6
|
|
49
|
-
}))), /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
|
|
50
|
-
"data-testid": "date-picker-header"
|
|
51
|
-
}, /* @__PURE__ */ import_react.default.createElement("strong", null, month.format("MMMM YYYY"))), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", {
|
|
52
|
-
role: "button",
|
|
53
|
-
tabIndex: "0",
|
|
54
|
-
"data-testid": "date-picker-next-year-arrow",
|
|
55
|
-
onClick: () => onYearSelect(month, month.year() + 1)
|
|
56
|
-
}, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronDoubleRight, {
|
|
57
|
-
width: 13.6,
|
|
58
|
-
height: 13.6
|
|
59
|
-
}))));
|
|
60
|
-
module.exports = __toCommonJS(DatePickerRenderMonth_exports);
|
|
61
|
-
//# sourceMappingURL=DatePickerRenderMonth.js.map
|
|
45
|
+
|
|
46
|
+
exports.renderMonthElement = renderMonthElement;
|