@elliemae/ds-date-range-picker 2.3.1 → 3.0.0-alpha.3

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.
Files changed (49) hide show
  1. package/dist/cjs/DSDateRangePicker.js +226 -0
  2. package/dist/cjs/DSDateRangePicker.js.map +7 -0
  3. package/dist/cjs/components/DSDateRangePickerImpl.js +293 -0
  4. package/dist/cjs/components/DSDateRangePickerImpl.js.map +7 -0
  5. package/dist/cjs/components/DatePickerLabel/DatePickerLabel.js +39 -0
  6. package/dist/cjs/components/DatePickerLabel/DatePickerLabel.js.map +7 -0
  7. package/dist/cjs/components/DatePickerRangeHeader/DatePickerRangeHeader.js +112 -0
  8. package/dist/cjs/components/DatePickerRangeHeader/DatePickerRangeHeader.js.map +7 -0
  9. package/dist/cjs/components/DayPickerRangeController.js +203 -0
  10. package/dist/cjs/components/DayPickerRangeController.js.map +7 -0
  11. package/dist/cjs/index.js +36 -0
  12. package/dist/cjs/index.js.map +7 -0
  13. package/dist/cjs/isMaxDiffSafe.js +46 -0
  14. package/dist/cjs/isMaxDiffSafe.js.map +7 -0
  15. package/dist/esm/DSDateRangePicker.js +202 -0
  16. package/dist/esm/DSDateRangePicker.js.map +7 -0
  17. package/dist/esm/components/DSDateRangePickerImpl.js +264 -0
  18. package/dist/esm/components/DSDateRangePickerImpl.js.map +7 -0
  19. package/dist/esm/components/DatePickerLabel/DatePickerLabel.js +10 -0
  20. package/dist/esm/components/DatePickerLabel/DatePickerLabel.js.map +7 -0
  21. package/{esm → dist/esm}/components/DatePickerRangeHeader/DatePickerRangeHeader.js +36 -45
  22. package/dist/esm/components/DatePickerRangeHeader/DatePickerRangeHeader.js.map +7 -0
  23. package/dist/esm/components/DayPickerRangeController.js +176 -0
  24. package/dist/esm/components/DayPickerRangeController.js.map +7 -0
  25. package/dist/esm/index.js +7 -0
  26. package/dist/esm/index.js.map +7 -0
  27. package/dist/esm/isMaxDiffSafe.js +17 -0
  28. package/dist/esm/isMaxDiffSafe.js.map +7 -0
  29. package/package.json +41 -32
  30. package/cjs/DSDateRangePicker.js +0 -204
  31. package/cjs/components/DSDateRangePickerImpl.js +0 -343
  32. package/cjs/components/DatePickerLabel/DatePickerLabel.js +0 -20
  33. package/cjs/components/DatePickerRangeHeader/DatePickerRangeHeader.js +0 -100
  34. package/cjs/components/DayPickerRangeController.js +0 -147
  35. package/cjs/index.js +0 -15
  36. package/cjs/isMaxDiffSafe.js +0 -20
  37. package/esm/DSDateRangePicker.js +0 -191
  38. package/esm/components/DSDateRangePickerImpl.js +0 -330
  39. package/esm/components/DatePickerLabel/DatePickerLabel.js +0 -14
  40. package/esm/components/DayPickerRangeController.js +0 -139
  41. package/esm/index.js +0 -3
  42. package/esm/isMaxDiffSafe.js +0 -15
  43. package/types/DSDateRangePicker.d.ts +0 -243
  44. package/types/components/DSDateRangePickerImpl.d.ts +0 -24
  45. package/types/components/DatePickerLabel/DatePickerLabel.d.ts +0 -6
  46. package/types/components/DatePickerRangeHeader/DatePickerRangeHeader.d.ts +0 -10
  47. package/types/components/DayPickerRangeController.d.ts +0 -36
  48. package/types/index.d.ts +0 -2
  49. package/types/isMaxDiffSafe.d.ts +0 -2
@@ -1,343 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var _jsx = require('@babel/runtime/helpers/jsx');
6
- var React = require('react');
7
- var moment = require('moment');
8
- var dsClassnames = require('@elliemae/ds-classnames');
9
- var DSInputMask = require('@elliemae/ds-form');
10
- var DSPopper = require('@elliemae/ds-popper');
11
- var dsDatePicker = require('@elliemae/ds-date-picker');
12
- var DayPickerRangeController = require('./DayPickerRangeController.js');
13
- var isMaxDiffSafe = require('../isMaxDiffSafe.js');
14
-
15
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
16
-
17
- var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
18
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
19
- var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
20
- var DSPopper__default = /*#__PURE__*/_interopDefaultLegacy(DSPopper);
21
-
22
- const START_DATE = 'startDate';
23
- const END_DATE = 'endDate';
24
- const {
25
- classNameElement,
26
- classNameBlock
27
- } = dsClassnames.convertPropToCssClassName('datepicker');
28
- class DSDateRangePickerImpl extends React__default["default"].Component {
29
- constructor(props) {
30
- super(props);
31
-
32
- this.onDatesChange = _ref => {
33
- let {
34
- startDate,
35
- endDate
36
- } = _ref;
37
- const {
38
- onDatesChange
39
- } = this.props;
40
- onDatesChange(startDate, endDate);
41
- const safe = isMaxDiffSafe.isMaxDiffSafe(startDate, endDate, this.state.startDate, this.state.endDate);
42
-
43
- if (!safe) {
44
- this.setState({
45
- showPicker: false
46
- });
47
- }
48
-
49
- this.setState({
50
- startDate,
51
- endDate,
52
- primaryStartInput: false,
53
- primaryEndInput: false
54
- });
55
- };
56
-
57
- this.onFocusChange = () => {
58
- this.setState(_ref2 => {
59
- let {
60
- focusedInput
61
- } = _ref2;
62
- return {
63
- focusedInput: focusedInput === START_DATE ? END_DATE : START_DATE
64
- };
65
- });
66
- };
67
-
68
- this.handleKeyDown = event => {
69
- if (event.key === 'Escape') this.setState({
70
- showPicker: false
71
- });
72
- };
73
-
74
- this.getSafeStartInputValue = () => {
75
- const {
76
- startInput,
77
- primaryStartInput,
78
- startDate
79
- } = this.state;
80
- if (primaryStartInput && startInput) return startInput;
81
- if (!startDate) return '';
82
- return startDate.format('MMDDYYYY');
83
- };
84
-
85
- this.getSafeEndInputValue = () => {
86
- const {
87
- endInput,
88
- primaryEndInput,
89
- endDate
90
- } = this.state;
91
- if (primaryEndInput && endInput) return endInput;
92
- if (!endDate) return '';
93
- return endDate.format('MMDDYYYY');
94
- };
95
-
96
- this.changeFocus = () => {
97
- const {
98
- disabled
99
- } = this.props;
100
-
101
- if (!disabled) {
102
- this.setState(() => ({
103
- focusedInput: 'startDate'
104
- }));
105
- }
106
- };
107
-
108
- this.handleChangeStart = e => {
109
- var _momentValue;
110
-
111
- const {
112
- onChangeStartInput,
113
- isDayBlocked,
114
- minimumNights
115
- } = this.props;
116
- const {
117
- endDate
118
- } = this.state;
119
- const startInputVal = e.target.value;
120
- let momentValue = null;
121
-
122
- if (startInputVal && moment__default["default"](startInputVal, 'MM/DD/YYYY', true).isValid()) {
123
- momentValue = moment__default["default"](startInputVal);
124
- }
125
-
126
- const startDateBlocked = isDayBlocked(momentValue);
127
- const isStartDateAcceptable = !startDateBlocked && momentValue && startInputVal !== '';
128
- const areDatesValid = endDate && momentValue && (endDate === null || endDate === void 0 ? void 0 : endDate.isValid()) && ((_momentValue = momentValue) === null || _momentValue === void 0 ? void 0 : _momentValue.isValid());
129
- const canEndBeSameAsStart = minimumNights === 0;
130
- const isStartAcceptableWithSelectedEnd = !endDate || areDatesValid && (canEndBeSameAsStart && momentValue.diff(endDate, 'days') <= 0 || !canEndBeSameAsStart && momentValue.diff(endDate, 'days') < 0);
131
- const invalidDate = !isStartDateAcceptable || !isStartAcceptableWithSelectedEnd;
132
- if (startDateBlocked) momentValue = null;
133
- onChangeStartInput(momentValue);
134
- this.setState(prevState => ({
135
- startDate: momentValue,
136
- startInput: startInputVal,
137
- primaryStartInput: true,
138
- startDateError: invalidDate,
139
- endDateError: !isStartDateAcceptable || !prevState.endDateError ? prevState.endDateError : !isStartAcceptableWithSelectedEnd
140
- }));
141
- };
142
-
143
- this.handleChangeEnd = e => {
144
- var _momentValue2;
145
-
146
- const {
147
- onChangeEndInput,
148
- isDayBlocked,
149
- minimumNights
150
- } = this.props;
151
- const {
152
- startDate
153
- } = this.state;
154
- const endInputValue = e.target.value;
155
- let momentValue = null;
156
-
157
- if (endInputValue && moment__default["default"](endInputValue, 'MM/DD/YYYY', true).isValid()) {
158
- momentValue = moment__default["default"](endInputValue);
159
- }
160
-
161
- const endDateBlocked = isDayBlocked(momentValue);
162
- const isEndDateAcceptable = !endDateBlocked && momentValue && endInputValue !== '';
163
- const areDatesValid = startDate && momentValue && (startDate === null || startDate === void 0 ? void 0 : startDate.isValid()) && ((_momentValue2 = momentValue) === null || _momentValue2 === void 0 ? void 0 : _momentValue2.isValid());
164
- const canEndBeSameAsStart = minimumNights === 0;
165
- const isEndAcceptableWithSelectedStart = !startDate || // we can't compare with start date because it's not yet set
166
- areDatesValid && ( // it's set and both are valid
167
- canEndBeSameAsStart && momentValue.diff(startDate, 'days') >= 0 || // >= is valid
168
- !canEndBeSameAsStart && momentValue.diff(startDate, 'days') > 0); // only > is valid
169
-
170
- const invalidDate = !isEndDateAcceptable || !isEndAcceptableWithSelectedStart;
171
- if (endDateBlocked) momentValue = null;
172
- onChangeEndInput(momentValue);
173
- this.setState(prevState => ({
174
- endDate: momentValue,
175
- endInput: endInputValue,
176
- primaryEndInput: true,
177
- startDateError: !isEndDateAcceptable || !prevState.startDateError ? prevState.startDateError : !isEndAcceptableWithSelectedStart,
178
- endDateError: invalidDate
179
- }));
180
- };
181
-
182
- this.handleChangeDate = _ref3 => {
183
- let {
184
- startDate: _start,
185
- endDate
186
- } = _ref3;
187
-
188
- if (_start && endDate) {
189
- this.setState({
190
- startDate: moment__default["default"](_start),
191
- endDate,
192
- primaryStartInput: false,
193
- primaryEndInput: false
194
- });
195
- } else if (_start) {
196
- this.setState({
197
- startDate: moment__default["default"](_start),
198
- primaryStartInput: false
199
- });
200
- } else if (endDate) {
201
- this.setState({
202
- endDate,
203
- primaryEndInput: false
204
- });
205
- }
206
- };
207
-
208
- this.state = {
209
- startDate: props.startDate ? moment__default["default"](props.startDate) : null,
210
- endDate: props.endDate ? moment__default["default"](props.endDate) : null,
211
- focusedInput: START_DATE,
212
- showPicker: false,
213
- startDateError: false,
214
- endDateError: false
215
- };
216
- }
217
-
218
- componentDidMount() {
219
- document.addEventListener('keydown', this.handleKeyDown, false);
220
- }
221
-
222
- componentWillUnmount() {
223
- document.removeEventListener('keydown', this.handleKeyDown, false);
224
- }
225
-
226
- render() {
227
- const {
228
- startDate,
229
- endDate,
230
- focusedInput,
231
- showPicker,
232
- startDateError,
233
- endDateError
234
- } = this.state;
235
- const {
236
- disabled,
237
- displayFormatDay,
238
- minimumNights,
239
- labelFrom,
240
- labelTo,
241
- isDayBlocked,
242
- isDayHighlighted,
243
- isOutsideRange,
244
- enableOutsideDays,
245
- startDateRequired,
246
- endDateRequired,
247
- onOutsideClick,
248
- onNextMonthClick,
249
- onPrevMonthClick,
250
- onClose,
251
- hasError,
252
- validationMessage
253
- } = this.props;
254
- const inputClass = classNameBlock('inputs', 'range-picker');
255
- const inputClassModifier = '';
256
- const safeStartInputValue = this.getSafeStartInputValue();
257
- const safeEndInputValue = this.getSafeEndInputValue();
258
- return /*#__PURE__*/_jsx__default["default"]("div", {
259
- className: "".concat(inputClass, " ").concat(inputClassModifier)
260
- }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
261
- className: classNameBlock('wrapper-input-date-range-picker-controller')
262
- }, void 0, /*#__PURE__*/_jsx__default["default"](DSInputMask.DSFormItemLayout, {
263
- floatingLabel: true,
264
- inputComponent: DSInputMask.DSInputMask,
265
- labelText: labelFrom,
266
- mask: DSInputMask.MASK_TYPES.DATE,
267
- onChange: this.handleChangeStart,
268
- onFocus: () => this.setState({
269
- showPicker: false
270
- }),
271
- pipe: DSInputMask.MASK_PIPES.AUTO_CORRECT_DATE,
272
- value: safeStartInputValue,
273
- required: startDateRequired,
274
- hasError: hasError || startDateError,
275
- placeholder: "MM/DD/YYYY"
276
- }), /*#__PURE__*/_jsx__default["default"](DSInputMask.DSFormItemLayout, {
277
- floatingLabel: true,
278
- inputComponent: DSInputMask.DSInputMask,
279
- labelText: labelTo,
280
- mask: DSInputMask.MASK_TYPES.DATE,
281
- onChange: this.handleChangeEnd,
282
- onFocus: () => this.setState({
283
- showPicker: false
284
- }),
285
- pipe: DSInputMask.MASK_PIPES.AUTO_CORRECT_DATE,
286
- value: safeEndInputValue,
287
- required: endDateRequired,
288
- hasError: hasError || endDateError,
289
- validationMessage: validationMessage,
290
- placeholder: "MM/DD/YYYY"
291
- })), /*#__PURE__*/_jsx__default["default"]("div", {
292
- className: classNameBlock('wrapper-button-date-range-picker-controller')
293
- }, void 0, /*#__PURE__*/_jsx__default["default"](DSPopper__default["default"], {
294
- contentComponent: /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, showPicker && /*#__PURE__*/_jsx__default["default"](DayPickerRangeController, {
295
- enableOutsideDays: enableOutsideDays,
296
- isDayBlocked: isDayBlocked,
297
- isDayHighlighted: isDayHighlighted,
298
- isOutsideRange: isOutsideRange,
299
- displayFormatDay: displayFormatDay,
300
- endDate: endDate,
301
- focusedInput: focusedInput,
302
- hideKeyboardShortcutsPanel: true,
303
- minimumNights: minimumNights,
304
- onDatesChange: this.onDatesChange,
305
- onFocusChange: this.onFocusChange,
306
- onOutsideClick: e => {
307
- onOutsideClick(e);
308
- this.setState({
309
- showPicker: false
310
- });
311
- },
312
- onNextMonthClick: onNextMonthClick,
313
- onPrevMonthClick: onPrevMonthClick,
314
- startDate: startDate,
315
- renderMonthElement: dsDatePicker.renderMonthElement
316
- })),
317
- isOpen: showPicker && !startDateError && !endDateError,
318
- onClose: onClose,
319
- placement: "bottom-end",
320
- showArrow: false,
321
- triggerComponent: /*#__PURE__*/_jsx__default["default"]("div", {
322
- onFocus: () => this.setState({
323
- showPicker: true
324
- })
325
- }, void 0, /*#__PURE__*/_jsx__default["default"](dsDatePicker.DatePickerPicker, {
326
- className: classNameElement('picker'),
327
- disabled: disabled,
328
- onClick: () => this.setState({
329
- showPicker: true
330
- })
331
- }), hasError && validationMessage && /*#__PURE__*/_jsx__default["default"]("div", {
332
- style: {
333
- height: 15
334
- }
335
- }))
336
- })));
337
- }
338
-
339
- }
340
-
341
- exports.END_DATE = END_DATE;
342
- exports.START_DATE = START_DATE;
343
- exports["default"] = DSDateRangePickerImpl;
@@ -1,20 +0,0 @@
1
- 'use strict';
2
-
3
- var _jsx = require('@babel/runtime/helpers/jsx');
4
- require('react');
5
-
6
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
7
-
8
- var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
9
-
10
- const Label = _ref => {
11
- let {
12
- className = 'date-picker-label',
13
- label = ''
14
- } = _ref;
15
- return /*#__PURE__*/_jsx__default["default"]("div", {
16
- className: className
17
- }, void 0, /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, label));
18
- };
19
-
20
- module.exports = Label;
@@ -1,100 +0,0 @@
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 DSInputMask = 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
- var DSInputMask__default = /*#__PURE__*/_interopDefaultLegacy(DSInputMask);
15
-
16
- const blockname = 'date-range-picker';
17
- const Header = dsClassnames.aggregatedClasses('div')(blockname, 'header');
18
-
19
- const formatDate = date => {
20
- if (date) {
21
- return date.format('MMDDYYYY');
22
- }
23
- };
24
-
25
- const DatePickerRangeHeader = _ref => {
26
- let {
27
- placeholderStart = 'Start Date',
28
- placeholderEnd = 'End Date',
29
- onStartInputChange = () => null,
30
- onEndInputChange = () => null,
31
- selectedStartDate,
32
- selectedEndDate
33
- } = _ref;
34
- const [startValue, setStartValue] = React.useState(selectedStartDate ? formatDate(selectedStartDate) : '');
35
- const [endValue, setEndValue] = React.useState(selectedEndDate ? formatDate(selectedEndDate) : '');
36
- React.useEffect(() => {
37
- const startDate = formatDate(selectedStartDate);
38
- const endDate = formatDate(selectedEndDate);
39
- startDate !== startValue && setStartValue(startDate);
40
- endDate !== endValue && setEndValue(endDate);
41
- }, [selectedStartDate, selectedEndDate]);
42
-
43
- const handleOnChangeStart = e => {
44
- const newStartValue = e.target.value;
45
- setStartValue(newStartValue);
46
- };
47
-
48
- const handleOnChangeEnd = e => {
49
- const newEndValue = e.target.value;
50
- setEndValue(newEndValue);
51
- };
52
-
53
- const handleOnBlurStart = e => {
54
- const newStartValue = e.target.value;
55
- onStartInputChange(moment__default["default"](newStartValue));
56
- };
57
-
58
- const handleOnBlurEnd = e => {
59
- const newEndValue = e.target.value;
60
- onEndInputChange(moment__default["default"](newEndValue));
61
- };
62
-
63
- const handleOnKeyDownStart = e => {
64
- if (e.key === 'Enter') {
65
- const newValue = e.target.value;
66
- onStartInputChange(moment__default["default"](newValue));
67
- e.target.blur();
68
- }
69
- };
70
-
71
- const handleOnKeyDownEnd = e => {
72
- if (e.key === 'Enter') {
73
- const newValue = e.target.value;
74
- onEndInputChange(moment__default["default"](newValue));
75
- e.target.blur();
76
- }
77
- };
78
-
79
- return /*#__PURE__*/_jsx__default["default"](Header, {}, void 0, /*#__PURE__*/_jsx__default["default"](DSInputMask.DSInputGroup, {}, void 0, /*#__PURE__*/_jsx__default["default"](DSInputMask__default["default"], {
80
- "aria-label": placeholderStart || 'Date Picker Input Mask',
81
- mask: DSInputMask.MASK_TYPES.DATE,
82
- onBlur: handleOnBlurStart,
83
- onChange: handleOnChangeStart,
84
- onKeyDown: handleOnKeyDownStart,
85
- pipe: DSInputMask.MASK_PIPES.AUTO_CORRECT_DATE,
86
- placeholder: placeholderStart,
87
- value: startValue
88
- }), /*#__PURE__*/_jsx__default["default"](DSInputMask__default["default"], {
89
- "aria-label": placeholderEnd || 'Date Picker Input Mask',
90
- mask: DSInputMask.MASK_TYPES.DATE,
91
- onBlur: handleOnBlurEnd,
92
- onChange: handleOnChangeEnd,
93
- onKeyDown: handleOnKeyDownEnd,
94
- pipe: DSInputMask.MASK_PIPES.AUTO_CORRECT_DATE,
95
- placeholder: placeholderEnd,
96
- value: endValue
97
- })));
98
- };
99
-
100
- module.exports = DatePickerRangeHeader;
@@ -1,147 +0,0 @@
1
- 'use strict';
2
-
3
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
4
- var _jsx = require('@babel/runtime/helpers/jsx');
5
- var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
6
- require('core-js/modules/web.dom-collections.iterator.js');
7
- require('core-js/modules/esnext.async-iterator.filter.js');
8
- require('core-js/modules/esnext.iterator.constructor.js');
9
- require('core-js/modules/esnext.iterator.filter.js');
10
- require('core-js/modules/esnext.async-iterator.for-each.js');
11
- require('core-js/modules/esnext.iterator.for-each.js');
12
- var React = require('react');
13
- var reactDates = require('react-dates');
14
- var dsDatePicker = require('@elliemae/ds-date-picker');
15
- var dsIcons = require('@elliemae/ds-icons');
16
- var dsClassnames = require('@elliemae/ds-classnames');
17
- var jsxRuntime = require('react/jsx-runtime');
18
-
19
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
20
-
21
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
22
- var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
23
- var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
24
-
25
- const _excluded = ["endDate", "startDate", "displayFormatDay", "focusedInput", "enableOutsideDays", "onDatesChange", "onFocusChange", "onOutsideClick", "isDayBlocked", "isDayHighlighted", "isOutsideRange", "onNextMonthClick", "onPrevMonthClick"];
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 {
31
- classNameElement,
32
- classNameBlock
33
- } = dsClassnames.convertPropToCssClassName('datepicker-range');
34
-
35
- const DayPickerRangeController = _ref => {
36
- let {
37
- endDate = undefined,
38
- startDate = undefined,
39
- displayFormatDay = 'D',
40
- focusedInput = undefined,
41
- enableOutsideDays = false,
42
- onDatesChange = () => null,
43
- onFocusChange = () => null,
44
- onOutsideClick = () => null,
45
- isDayBlocked = () => null,
46
- isDayHighlighted = () => null,
47
- isOutsideRange = () => null,
48
- onNextMonthClick = () => null,
49
- onPrevMonthClick = () => null
50
- } = _ref,
51
- otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
52
-
53
- const datePickerRef = React.useRef();
54
- React.useEffect(() => {
55
- const handleMouseUp = () => {
56
- const focusedElement = document.activeElement;
57
- focusedElement.blur();
58
- };
59
-
60
- const handleKeyDown = event => {
61
- const [firstDay, ...restOfDays] = document.getElementsByClassName('CalendarMonthGrid_month__horizontal')[1].getElementsByClassName('CalendarDay');
62
- const [lastDay] = restOfDays.slice(-1);
63
- const focusedElement = document.activeElement;
64
- const [prev, next] = document.getElementsByClassName('DayPickerNavigation_button');
65
-
66
- switch (event.key) {
67
- case 'Home':
68
- event.stopPropagation();
69
- firstDay.focus();
70
- break;
71
-
72
- case 'End':
73
- event.stopPropagation();
74
- lastDay.focus();
75
- break;
76
-
77
- case 'Enter':
78
- case ' ':
79
- if (focusedElement === prev) {
80
- event.stopPropagation();
81
- setTimeout(() => {
82
- prev.focus();
83
- }, 240);
84
- } else if (focusedElement === next) {
85
- event.stopPropagation();
86
- setTimeout(() => {
87
- next === null || next === void 0 ? void 0 : next.focus();
88
- }, 240);
89
- }
90
-
91
- break;
92
-
93
- case 'Tab':
94
- if (firstDay === focusedElement || restOfDays.includes(focusedElement)) {
95
- event.preventDefault();
96
- prev.focus();
97
- }
98
-
99
- break;
100
- }
101
- };
102
-
103
- datePickerRef.current.addEventListener('mouseup', handleMouseUp, false);
104
- datePickerRef.current.addEventListener('keydown', handleKeyDown, false);
105
- return () => {
106
- if (datePickerRef.current) {
107
- datePickerRef.current.removeEventListener('mouseup', handleMouseUp, false);
108
- datePickerRef.current.removeEventListener('keydown', handleKeyDown, false);
109
- }
110
- };
111
- }, []);
112
- return /*#__PURE__*/jsxRuntime.jsx("div", {
113
- ref: datePickerRef,
114
- className: classNameBlock('wrapper-day-picker-single-date-controller'),
115
- "data-testid": otherProps['data-testid'] || 'date-range-picker-controller',
116
- children: /*#__PURE__*/jsxRuntime.jsx(reactDates.DayPickerRangeController, _objectSpread(_objectSpread({}, otherProps), {}, {
117
- isDayBlocked: isDayBlocked,
118
- isDayHighlighted: isDayHighlighted,
119
- isOutsideRange: isOutsideRange,
120
- enableOutsideDays: enableOutsideDays,
121
- endDate: endDate,
122
- focused: true,
123
- focusedInput: focusedInput,
124
- hideKeyboardShortcutsPanel: true,
125
- navNext: /*#__PURE__*/_jsx__default["default"](dsDatePicker.DatePickerNavigation, {
126
- className: classNameElement('navigation-next')
127
- }),
128
- navPrev: /*#__PURE__*/_jsx__default["default"](dsDatePicker.DatePickerNavigation, {
129
- className: classNameElement('navigation-prev'),
130
- icon: dsIcons.ChevronLeft
131
- }),
132
- onDatesChange: onDatesChange,
133
- onFocusChange: onFocusChange,
134
- onOutsideClick: onOutsideClick,
135
- onNextMonthClick: onNextMonthClick,
136
- onPrevMonthClick: onPrevMonthClick,
137
- renderDayContents: date => /*#__PURE__*/_jsx__default["default"](dsDatePicker.DatePickerDay, {
138
- className: classNameElement('day-contents'),
139
- date: date.format(displayFormatDay)
140
- }),
141
- renderMonthElement: dsDatePicker.renderMonthElement,
142
- startDate: startDate
143
- }))
144
- });
145
- };
146
-
147
- module.exports = DayPickerRangeController;
package/cjs/index.js DELETED
@@ -1,15 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var DSDateRangePicker = require('./DSDateRangePicker.js');
6
- var DayPickerRangeController = require('./components/DayPickerRangeController.js');
7
- var DSDateRangePickerImpl = require('./components/DSDateRangePickerImpl.js');
8
-
9
-
10
-
11
- exports.DateRangePickerWithSchema = DSDateRangePicker.DateRangePickerWithSchema;
12
- exports["default"] = DSDateRangePicker["default"];
13
- exports.DayPickerRangeController = DayPickerRangeController;
14
- exports.END_DATE = DSDateRangePickerImpl.END_DATE;
15
- exports.START_DATE = DSDateRangePickerImpl.START_DATE;
@@ -1,20 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- /* eslint-disable max-params */
6
- const MAX_YEARS_DIFF = 150; // https://jira.elliemae.io/browse/PUI-4145
7
-
8
- const isMaxDiffSafe = (startDate, endDate, prevStart, prevEnd) => {
9
- try {
10
- const diff = Math.abs(endDate.diff(startDate, 'years'));
11
- const diffStart = Math.abs(startDate.diff(prevStart, 'years'));
12
- const diffEnd = Math.abs(endDate.diff(prevEnd, 'years'));
13
- return diff < MAX_YEARS_DIFF && diffStart < MAX_YEARS_DIFF && diffEnd < MAX_YEARS_DIFF;
14
- } catch (error) {
15
- return true;
16
- }
17
- };
18
-
19
- exports.MAX_YEARS_DIFF = MAX_YEARS_DIFF;
20
- exports.isMaxDiffSafe = isMaxDiffSafe;