@elliemae/ds-date-picker 3.0.0-next.2 → 3.0.0-next.6

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 (118) hide show
  1. package/dist/cjs/DSDatePicker.js +248 -0
  2. package/dist/cjs/DSDatePicker.js.map +7 -0
  3. package/dist/cjs/components/DSDatePickerImpl.js +274 -0
  4. package/dist/cjs/components/DSDatePickerImpl.js.map +7 -0
  5. package/dist/cjs/components/DatePickerController/DatePickerController.js +335 -0
  6. package/dist/cjs/components/DatePickerController/DatePickerController.js.map +7 -0
  7. package/dist/cjs/components/DatePickerDay/DatePickerDay.js +49 -0
  8. package/dist/cjs/components/DatePickerDay/DatePickerDay.js.map +7 -0
  9. package/dist/cjs/components/DatePickerDropdown.js +102 -0
  10. package/dist/cjs/components/DatePickerDropdown.js.map +7 -0
  11. package/dist/cjs/components/DatePickerHeader/DatePickerHeader.js +74 -0
  12. package/dist/cjs/components/DatePickerHeader/DatePickerHeader.js.map +7 -0
  13. package/dist/cjs/components/DatePickerNavigation/DatePickerNavigation.js +63 -0
  14. package/dist/cjs/components/DatePickerNavigation/DatePickerNavigation.js.map +7 -0
  15. package/dist/cjs/components/DatePickerPicker/DatePickerPicker.js +112 -0
  16. package/dist/cjs/components/DatePickerPicker/DatePickerPicker.js.map +7 -0
  17. package/dist/cjs/components/DatePickerRange/DatePickerRange.js +126 -0
  18. package/dist/cjs/components/DatePickerRange/DatePickerRange.js.map +7 -0
  19. package/dist/cjs/components/DatePickerRangeHeader/DatePickerRangeHeader.js +138 -0
  20. package/dist/cjs/components/DatePickerRangeHeader/DatePickerRangeHeader.js.map +7 -0
  21. package/dist/cjs/components/DatePickerRenderMonth/DatePickerRenderMonth.js +61 -0
  22. package/dist/cjs/components/DatePickerRenderMonth/DatePickerRenderMonth.js.map +7 -0
  23. package/dist/cjs/components/DatePickerSingleDate/DatePickerSingleDate.js +117 -0
  24. package/dist/cjs/components/DatePickerSingleDate/DatePickerSingleDate.js.map +7 -0
  25. package/dist/cjs/components/SingleRangeDateSwitcher/SingleRangeDateSwitcher.js +80 -0
  26. package/dist/cjs/components/SingleRangeDateSwitcher/SingleRangeDateSwitcher.js.map +7 -0
  27. package/dist/cjs/components/index.js +53 -0
  28. package/dist/cjs/components/index.js.map +7 -0
  29. package/dist/cjs/defaultPhrases.js +246 -0
  30. package/dist/cjs/defaultPhrases.js.map +7 -0
  31. package/dist/cjs/index.js +38 -0
  32. package/dist/cjs/index.js.map +7 -0
  33. package/dist/esm/DSDatePicker.js +232 -0
  34. package/dist/esm/DSDatePicker.js.map +7 -0
  35. package/dist/esm/components/DSDatePickerImpl.js +245 -0
  36. package/dist/esm/components/DSDatePickerImpl.js.map +7 -0
  37. package/dist/esm/components/DatePickerController/DatePickerController.js +308 -0
  38. package/dist/esm/components/DatePickerController/DatePickerController.js.map +7 -0
  39. package/dist/esm/components/DatePickerDay/DatePickerDay.js +20 -0
  40. package/dist/esm/components/DatePickerDay/DatePickerDay.js.map +7 -0
  41. package/dist/esm/components/DatePickerDropdown.js +75 -0
  42. package/dist/esm/components/DatePickerDropdown.js.map +7 -0
  43. package/dist/esm/components/DatePickerHeader/DatePickerHeader.js +45 -0
  44. package/dist/esm/components/DatePickerHeader/DatePickerHeader.js.map +7 -0
  45. package/dist/esm/components/DatePickerNavigation/DatePickerNavigation.js +37 -0
  46. package/dist/esm/components/DatePickerNavigation/DatePickerNavigation.js.map +7 -0
  47. package/dist/esm/components/DatePickerPicker/DatePickerPicker.js +84 -0
  48. package/dist/esm/components/DatePickerPicker/DatePickerPicker.js.map +7 -0
  49. package/dist/esm/components/DatePickerRange/DatePickerRange.js +99 -0
  50. package/dist/esm/components/DatePickerRange/DatePickerRange.js.map +7 -0
  51. package/dist/esm/components/DatePickerRangeHeader/DatePickerRangeHeader.js +109 -0
  52. package/dist/esm/components/DatePickerRangeHeader/DatePickerRangeHeader.js.map +7 -0
  53. package/dist/esm/components/DatePickerRenderMonth/DatePickerRenderMonth.js +32 -0
  54. package/dist/esm/components/DatePickerRenderMonth/DatePickerRenderMonth.js.map +7 -0
  55. package/dist/esm/components/DatePickerSingleDate/DatePickerSingleDate.js +89 -0
  56. package/dist/esm/components/DatePickerSingleDate/DatePickerSingleDate.js.map +7 -0
  57. package/dist/esm/components/SingleRangeDateSwitcher/SingleRangeDateSwitcher.js +51 -0
  58. package/dist/esm/components/SingleRangeDateSwitcher/SingleRangeDateSwitcher.js.map +7 -0
  59. package/dist/esm/components/index.js +24 -0
  60. package/dist/esm/components/index.js.map +7 -0
  61. package/{esm → dist/esm}/defaultPhrases.js +48 -80
  62. package/dist/esm/defaultPhrases.js.map +7 -0
  63. package/dist/esm/index.js +9 -0
  64. package/dist/esm/index.js.map +7 -0
  65. package/package.json +63 -55
  66. package/cjs/DSDatePicker.js +0 -233
  67. package/cjs/components/DSDatePickerImpl.js +0 -354
  68. package/cjs/components/DatePickerController/DatePickerController.js +0 -360
  69. package/cjs/components/DatePickerDay/DatePickerDay.js +0 -24
  70. package/cjs/components/DatePickerDropdown.js +0 -65
  71. package/cjs/components/DatePickerHeader/DatePickerHeader.js +0 -56
  72. package/cjs/components/DatePickerNavigation/DatePickerNavigation.js +0 -32
  73. package/cjs/components/DatePickerPicker/DatePickerPicker.js +0 -74
  74. package/cjs/components/DatePickerRange/DatePickerRange.js +0 -119
  75. package/cjs/components/DatePickerRangeHeader/DatePickerRangeHeader.js +0 -144
  76. package/cjs/components/DatePickerRenderMonth/DatePickerRenderMonth.js +0 -46
  77. package/cjs/components/DatePickerSingleDate/DatePickerSingleDate.js +0 -85
  78. package/cjs/components/SingleRangeDateSwitcher/SingleRangeDateSwitcher.js +0 -59
  79. package/cjs/components/index.js +0 -27
  80. package/cjs/defaultPhrases.js +0 -261
  81. package/cjs/index.js +0 -35
  82. package/esm/DSDatePicker.js +0 -211
  83. package/esm/components/DSDatePickerImpl.js +0 -346
  84. package/esm/components/DatePickerController/DatePickerController.js +0 -350
  85. package/esm/components/DatePickerDay/DatePickerDay.js +0 -18
  86. package/esm/components/DatePickerDropdown.js +0 -57
  87. package/esm/components/DatePickerHeader/DatePickerHeader.js +0 -49
  88. package/esm/components/DatePickerNavigation/DatePickerNavigation.js +0 -25
  89. package/esm/components/DatePickerPicker/DatePickerPicker.js +0 -60
  90. package/esm/components/DatePickerRange/DatePickerRange.js +0 -111
  91. package/esm/components/DatePickerRangeHeader/DatePickerRangeHeader.js +0 -137
  92. package/esm/components/DatePickerRenderMonth/DatePickerRenderMonth.js +0 -38
  93. package/esm/components/DatePickerSingleDate/DatePickerSingleDate.js +0 -77
  94. package/esm/components/SingleRangeDateSwitcher/SingleRangeDateSwitcher.js +0 -53
  95. package/esm/components/index.js +0 -10
  96. package/esm/index.js +0 -13
  97. package/types/components/DSDatePickerImpl.d.ts +0 -20
  98. package/types/components/DatePickerController/DatePickerController.d.ts +0 -80
  99. package/types/components/DatePickerDay/DatePickerDay.d.ts +0 -13
  100. package/types/components/DatePickerDropdown.d.ts +0 -41
  101. package/types/components/DatePickerHeader/DatePickerHeader.d.ts +0 -15
  102. package/types/components/DatePickerNavigation/DatePickerNavigation.d.ts +0 -19
  103. package/types/components/DatePickerPicker/DatePickerPicker.d.ts +0 -48
  104. package/types/components/DatePickerRange/DatePickerRange.d.ts +0 -9
  105. package/types/components/DatePickerRangeHeader/DatePickerRangeHeader.d.ts +0 -23
  106. package/types/components/DatePickerRangeHeader/tests/DatePickerRangeHeader.test.d.ts +0 -1
  107. package/types/components/DatePickerRenderMonth/DatePickerRenderMonth.d.ts +0 -5
  108. package/types/components/DatePickerSingleDate/DatePickerSingleDate.d.ts +0 -11
  109. package/types/components/SingleRangeDateSwitcher/SingleRangeDateSwitcher.d.ts +0 -16
  110. package/types/components/index.d.ts +0 -10
  111. package/types/components/tests/DatePickerHeader.test.d.ts +0 -1
  112. package/types/components/tests/DatePickerRange.test.d.ts +0 -1
  113. package/types/components/tests/DatePickerRangeHeader.test.d.ts +0 -1
  114. package/types/components/tests/DatePickerSelectedDate.test.d.ts +0 -1
  115. package/types/components/tests/DatePickerSingleDate.test.d.ts +0 -1
  116. package/types/components/tests/SingleRangeDateSwitcher.test.d.ts +0 -1
  117. package/types/defaultPhrases.d.ts +0 -225
  118. package/types/index.d.ts +0 -3
@@ -1,354 +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 dsForm = require('@elliemae/ds-form');
8
- var DatePickerController = require('./DatePickerController/DatePickerController.js');
9
- var DatePickerDropdown = require('./DatePickerDropdown.js');
10
-
11
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
12
-
13
- var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
14
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
15
- var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
16
-
17
- const FORMAT = 'MMDDYYYY';
18
- class DSdatePickerImpl extends React__default["default"].Component {
19
- constructor(props) {
20
- super(props);
21
-
22
- this.onClickPicker = () => {
23
- this.setState({
24
- inputFocused: true
25
- });
26
- };
27
-
28
- this.getSafeValue = () => {
29
- const {
30
- value,
31
- date,
32
- defaultValue
33
- } = this.props;
34
- const {
35
- selectedDate
36
- } = this.state;
37
-
38
- if (value) {
39
- return moment__default["default"](value, FORMAT, true);
40
- }
41
-
42
- if (date) {
43
- return moment__default["default"](date, FORMAT, true);
44
- }
45
-
46
- if (defaultValue) {
47
- return moment__default["default"](defaultValue, FORMAT, true);
48
- }
49
-
50
- if (selectedDate) {
51
- return selectedDate;
52
- }
53
-
54
- return null;
55
- };
56
-
57
- this.getSafeInputValue = () => {
58
- const safeValue = this.getSafeValue();
59
-
60
- if (safeValue && safeValue.isValid()) {
61
- return safeValue.format(FORMAT);
62
- }
63
-
64
- const {
65
- dataInput
66
- } = this.state;
67
- return dataInput;
68
- };
69
-
70
- this.isControlled = () => {
71
- const {
72
- value,
73
- date
74
- } = this.props;
75
- return Boolean(value) || Boolean(date);
76
- };
77
-
78
- this.handleDateChange = (date, event) => {
79
- const {
80
- readOnly,
81
- onDateChange,
82
- keepOpenOnDateSelect,
83
- onChange,
84
- onBlur
85
- } = this.props;
86
-
87
- if (!readOnly) {
88
- if (!this.isControlled()) {
89
- this.setState({
90
- dataInput: date.format(FORMAT),
91
- selectedDate: date
92
- });
93
- }
94
-
95
- onChange(date.format(FORMAT), date);
96
- onDateChange(date);
97
-
98
- if (!keepOpenOnDateSelect || event.key === 'Enter') {
99
- this.setState({
100
- inputFocused: false
101
- });
102
- onBlur(date.format(FORMAT), date);
103
- }
104
- }
105
- };
106
-
107
- this.handleInputChange = (dataInput, newDate) => {
108
- const {
109
- onChange
110
- } = this.props;
111
- const newState = {
112
- dataInput,
113
- selectedDate: newDate
114
- };
115
- this.setState(() => newState);
116
- onChange(dataInput, newDate);
117
- };
118
-
119
- this.handleChange = newDate => {
120
- if (!newDate) return;
121
- const {
122
- onDateChange
123
- } = this.props;
124
- const momentValue = moment__default["default"](newDate, FORMAT, true);
125
- if (!momentValue.isValid()) return;
126
- this.setState({
127
- selectedDate: momentValue
128
- });
129
- onDateChange(momentValue);
130
- };
131
-
132
- this.handleFocus = _ref => {
133
- let {
134
- focused
135
- } = _ref;
136
- this.setState({
137
- inputFocused: focused
138
- });
139
- };
140
-
141
- this.handleCalendarClose = () => {
142
- const {
143
- onClose
144
- } = this.props;
145
- this.setState({
146
- inputFocused: false
147
- });
148
- this.handleOnBlur();
149
- onClose();
150
- };
151
-
152
- this.handleClickEscape = () => {
153
- const {
154
- onClose
155
- } = this.props;
156
- this.setState({
157
- inputFocused: false
158
- });
159
- this.handleOnBlur();
160
- onClose();
161
- };
162
-
163
- this.handleOnBlur = () => {
164
- setTimeout(() => {
165
- const {
166
- onBlur,
167
- autoClear
168
- } = this.props;
169
- const {
170
- dataInput,
171
- selectedDate
172
- } = this.state;
173
-
174
- if (moment__default["default"](selectedDate, FORMAT, true).isValid()) {
175
- onBlur(dataInput, selectedDate);
176
- } else {
177
- if (autoClear) {
178
- this.setState({
179
- dataInput: undefined
180
- });
181
- }
182
-
183
- onBlur(dataInput, null);
184
- }
185
- });
186
- };
187
-
188
- this.handleInputFocus = dataInput => {
189
- const {
190
- onFocus
191
- } = this.props;
192
- onFocus(dataInput);
193
- };
194
-
195
- this.state = {
196
- pickerRef: /*#__PURE__*/React__default["default"].createRef(),
197
- dataInput: '',
198
- selectedDate: null,
199
- inputFocused: false
200
- };
201
- }
202
-
203
- static getDerivedStateFromProps(nextProps, prevState) {
204
- const {
205
- dataInput: prevVal,
206
- selectedDate: prevDate
207
- } = prevState || {};
208
- const {
209
- value: nextVal,
210
- date: nextDate
211
- } = nextProps;
212
- const isPrevValMoment = prevVal instanceof moment__default["default"];
213
- const isPrevDateMoment = prevDate instanceof moment__default["default"];
214
- const prevValAsString = isPrevValMoment ? prevVal.format(FORMAT) : prevVal; // if users wants to clear, we use '==' to catch both undefined AND null
215
-
216
- if (nextVal == null && nextDate == null) {
217
- return {
218
- dataInput: '',
219
- selectedDate: null
220
- };
221
- } // when val is an incomplete state, we don't want to mess with the state
222
- // it's incomplete when length is not the full mmddyyyy (length === 8)
223
-
224
-
225
- if ((prevValAsString === null || prevValAsString === void 0 ? void 0 : prevValAsString.length) < 8) {
226
- return null;
227
- }
228
-
229
- const prevDateAsString = isPrevDateMoment ? prevDate.format(FORMAT) : prevDate;
230
- const isNextValMoment = nextVal instanceof moment__default["default"];
231
- const isNextDateMoment = nextDate instanceof moment__default["default"];
232
- const nextValAsString = isNextValMoment ? nextVal.format(FORMAT) : nextVal;
233
- const nextValAsMoment = isNextValMoment ? nextVal : moment__default["default"](nextVal);
234
- const nextDateAsString = isNextDateMoment ? nextDate.format(FORMAT) : nextDate;
235
- const nextDateAsMoment = isNextDateMoment ? nextDate : moment__default["default"](nextDate);
236
- const hasValChanged = nextValAsString !== prevValAsString;
237
- const hasDateChanged = nextDateAsString !== prevDateAsString;
238
- const newState = {};
239
- let skipStateChange = true; // value has priority over date, if both date and value change we take date
240
- // as such, order of condition is meaningful
241
-
242
- if (hasDateChanged) {
243
- skipStateChange = false;
244
- newState.dataInput = nextDateAsString;
245
- newState.selectedDate = nextDateAsMoment;
246
- }
247
-
248
- if (hasValChanged) {
249
- skipStateChange = false;
250
- newState.dataInput = nextValAsString;
251
- newState.selectedDate = nextValAsMoment;
252
- }
253
-
254
- if (skipStateChange) return null;
255
- return newState;
256
- }
257
-
258
- render() {
259
- var _this = this;
260
-
261
- const {
262
- inputFocused
263
- } = this.state;
264
- const {
265
- disabled,
266
- numberOfMonths,
267
- readOnly,
268
- enableOutsideDays,
269
- transitionDuration,
270
- firstDayOfWeek,
271
- keepOpenOnDateSelect,
272
- hideKeyboardShortcutsPanel,
273
- onPrevMonthClick,
274
- onNextMonthClick,
275
- onClose,
276
- phrases,
277
- placeholder,
278
- displayFormatDay,
279
- isDayBlocked,
280
- isOutsideRange,
281
- isDayHighlighted,
282
- tabIndex,
283
- zIndex,
284
- pickerProps,
285
- calendarProps,
286
- focusCurrentDate
287
- } = this.props;
288
- const safedate = this.getSafeValue();
289
- const safeInputValue = this.getSafeInputValue();
290
- const hasSelectedDate = !!safedate;
291
- return /*#__PURE__*/_jsx__default["default"](dsForm.DSInputGroup, {
292
- rightAddon: /*#__PURE__*/_jsx__default["default"](DatePickerDropdown, {
293
- pickerRef: this.state.pickerRef,
294
- disabled: disabled,
295
- isOpen: inputFocused,
296
- menu: /*#__PURE__*/_jsx__default["default"]("div", {
297
- style: {
298
- minHeight: '310px',
299
- zIndex: 1
300
- },
301
- className: hasSelectedDate ? 'has-selected-date' : 'without-selected-date',
302
- "data-testid": "date-picker-portal-wrapper"
303
- }, void 0, /*#__PURE__*/_jsx__default["default"](DatePickerController, {
304
- date: safedate,
305
- displayFormatDay: displayFormatDay,
306
- enableOutsideDays: enableOutsideDays,
307
- firstDayOfWeek: firstDayOfWeek,
308
- hideKeyboardShortcutsPanel: hideKeyboardShortcutsPanel,
309
- isDayBlocked: isDayBlocked,
310
- isDayHighlighted: isDayHighlighted,
311
- isOutsideRange: isOutsideRange,
312
- keepOpenOnDateSelect: keepOpenOnDateSelect,
313
- numberOfMonths: numberOfMonths,
314
- onClickEscape: this.handleClickEscape,
315
- onClose: function () {
316
- if (_this.state.pickerRef.current) _this.state.pickerRef.current.focus();
317
- onClose(...arguments);
318
-
319
- _this.setState({
320
- inputFocused: false
321
- });
322
- },
323
- onDateChange: this.handleDateChange,
324
- onFocusChange: this.handleFocus,
325
- onNextMonthClick: onNextMonthClick,
326
- onOutsideClick: this.handleCalendarClose,
327
- onPrevMonthClick: onPrevMonthClick,
328
- phrases: phrases,
329
- transitionDuration: transitionDuration,
330
- calendarProps: calendarProps,
331
- focusCurrentDate: focusCurrentDate
332
- })),
333
- onClick: this.onClickPicker,
334
- readOnly: readOnly,
335
- zIndex: zIndex,
336
- pickerProps: pickerProps
337
- })
338
- }, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSDateInputV2, {
339
- "data-testid": "datepicker-input",
340
- "aria-label": placeholder || 'Date Picker Input',
341
- disabled: disabled,
342
- onBlur: this.handleOnBlur,
343
- onChange: this.handleInputChange,
344
- onDateChange: this.handleChange,
345
- onFocus: this.handleInputFocus,
346
- placeholder: placeholder,
347
- tabIndex: tabIndex,
348
- value: safeInputValue
349
- }));
350
- }
351
-
352
- }
353
-
354
- module.exports = DSdatePickerImpl;
@@ -1,360 +0,0 @@
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/esnext.async-iterator.filter.js');
6
- require('core-js/modules/esnext.iterator.constructor.js');
7
- require('core-js/modules/esnext.iterator.filter.js');
8
- require('core-js/modules/web.dom-collections.iterator.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 lodash = require('lodash');
13
- var PropTypes = require('prop-types');
14
- var moment = require('moment');
15
- require('react-dates/initialize');
16
- var reactDates = require('react-dates');
17
- var dsClassnames = require('@elliemae/ds-classnames');
18
- var dsIcons = require('@elliemae/ds-icons');
19
- var defaultPhrases = require('../../defaultPhrases.js');
20
- var DatePickerRenderMonth = require('../DatePickerRenderMonth/DatePickerRenderMonth.js');
21
- var DatePickerNavigation = require('../DatePickerNavigation/DatePickerNavigation.js');
22
- var DatePickerDay = require('../DatePickerDay/DatePickerDay.js');
23
- var jsxRuntime = require('react/jsx-runtime');
24
-
25
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
26
-
27
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
28
- var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
29
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
30
- var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
31
- var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
32
-
33
- 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; }
34
-
35
- 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; }
36
- const {
37
- classNameElement,
38
- classNameBlock
39
- } = dsClassnames.convertPropToCssClassName('datepicker-range');
40
- const focusElementOnOpen = lodash.debounce((datePickerDom, firstFocusableItemDom, focusCurrentDate) => {
41
- if (datePickerDom) {
42
- const currentDay = Array.from(datePickerDom === null || datePickerDom === void 0 ? void 0 : datePickerDom.getElementsByClassName('CalendarDay__today')).filter(el => !el.className.includes('CalendarDay__outside'))[0];
43
- const [calendarDaySelected] = datePickerDom === null || datePickerDom === void 0 ? void 0 : datePickerDom.getElementsByClassName('CalendarDay__selected');
44
-
45
- if (calendarDaySelected) {
46
- var _calendarDaySelected$;
47
-
48
- calendarDaySelected === null || calendarDaySelected === void 0 ? void 0 : (_calendarDaySelected$ = calendarDaySelected.focus) === null || _calendarDaySelected$ === void 0 ? void 0 : _calendarDaySelected$.call(calendarDaySelected);
49
- } else if (focusCurrentDate && !calendarDaySelected) currentDay.focus();else {
50
- var _navButton$focus;
51
-
52
- const navButton = firstFocusableItemDom === null || firstFocusableItemDom === void 0 ? void 0 : firstFocusableItemDom.closest('.DayPickerNavigation_button>div');
53
- navButton === null || navButton === void 0 ? void 0 : (_navButton$focus = navButton.focus) === null || _navButton$focus === void 0 ? void 0 : _navButton$focus.call(navButton);
54
- }
55
- }
56
- }, 100);
57
- class DSDatePickerController extends React__default["default"].Component {
58
- // eslint-disable-next-line react/static-property-placement
59
- constructor(props) {
60
- super(props);
61
-
62
- this.handleMouseUp = () => {
63
- var _focusedElement$blur;
64
-
65
- const focusedElement = document.activeElement;
66
- focusedElement === null || focusedElement === void 0 ? void 0 : (_focusedElement$blur = focusedElement.blur) === null || _focusedElement$blur === void 0 ? void 0 : _focusedElement$blur.call(focusedElement);
67
- };
68
-
69
- this.handleKeyDown = event => {
70
- const [firstDay, ...restOfDays] = document.getElementsByClassName('CalendarMonthGrid_month__horizontal')[1].getElementsByClassName('CalendarDay');
71
- const [lastDay] = restOfDays.slice(-1);
72
- const {
73
- onClickEscape
74
- } = this.props;
75
-
76
- switch (event.key) {
77
- case 'Home':
78
- firstDay.focus();
79
- break;
80
-
81
- case 'End':
82
- lastDay.focus();
83
- break;
84
-
85
- case 'Escape':
86
- onClickEscape();
87
- break;
88
- }
89
- };
90
-
91
- this.getSafeValue = () => {
92
- const {
93
- value,
94
- date,
95
- defaultValue
96
- } = this.props;
97
- const {
98
- selectedDate
99
- } = this.state;
100
- if (value) return moment__default["default"](value);
101
- if (date) return moment__default["default"](date);
102
- if (defaultValue) return moment__default["default"](defaultValue);
103
- if (selectedDate) return moment__default["default"](selectedDate);
104
- return null;
105
- };
106
-
107
- this.isControlled = () => {
108
- const {
109
- value,
110
- date
111
- } = this.props;
112
- return Boolean(value) || Boolean(date);
113
- };
114
-
115
- this.handleDateChange = date => {
116
- const {
117
- readOnly,
118
- onDateChange,
119
- onChange
120
- } = this.props;
121
-
122
- if (!readOnly) {
123
- if (!this.isControlled()) {
124
- this.setState({
125
- selectedDate: date
126
- });
127
- }
128
-
129
- onDateChange(date);
130
- onChange(date);
131
- }
132
- };
133
-
134
- this.handleChange = dataInput => {
135
- const {
136
- onDateChange,
137
- onChange
138
- } = this.props;
139
- const momentvalue = moment__default["default"](dataInput.target.value);
140
- this.setState({
141
- selectedDate: momentvalue
142
- });
143
- onDateChange(momentvalue);
144
- onChange(momentvalue);
145
- };
146
-
147
- this.handleNavClick = (date, nav) => {
148
- const [prev, next] = document.getElementsByClassName('DayPickerNavigation_button');
149
- const {
150
- onPrevMonthClick,
151
- onNextMonthClick
152
- } = this.props;
153
-
154
- if (nav === 'prev') {
155
- var _prev$focus;
156
-
157
- prev === null || prev === void 0 ? void 0 : (_prev$focus = prev.focus) === null || _prev$focus === void 0 ? void 0 : _prev$focus.call(prev);
158
- onPrevMonthClick(date);
159
- } else {
160
- var _next$focus;
161
-
162
- next === null || next === void 0 ? void 0 : (_next$focus = next.focus) === null || _next$focus === void 0 ? void 0 : _next$focus.call(next);
163
- onNextMonthClick(date);
164
- }
165
- };
166
-
167
- this.insideBlur = event => {
168
- const {
169
- datePicker
170
- } = this.state;
171
-
172
- if (!datePicker.current.contains(event.currentTarget)) {
173
- this.props.onClose();
174
- }
175
- };
176
-
177
- this.state = {
178
- selectedDate: null,
179
- firstFocusableItem: /*#__PURE__*/React__default["default"].createRef(),
180
- datePicker: /*#__PURE__*/React__default["default"].createRef()
181
- };
182
- }
183
-
184
- componentDidMount() {
185
- const {
186
- datePicker,
187
- firstFocusableItem
188
- } = this.state;
189
- datePicker.current.addEventListener('mouseup', this.handleMouseUp, false);
190
- document.addEventListener('keydown', this.handleKeyDown, false);
191
- setTimeout(() => {
192
- focusElementOnOpen(datePicker === null || datePicker === void 0 ? void 0 : datePicker.current, firstFocusableItem === null || firstFocusableItem === void 0 ? void 0 : firstFocusableItem.current, this.props.focusCurrentDate);
193
- }, 400);
194
- }
195
-
196
- componentWillUnmount() {
197
- const {
198
- datePicker
199
- } = this.state;
200
- datePicker.current.removeEventListener('mouseup', this.handleMouseUp, false);
201
- document.removeEventListener('keydown', this.handleKeyDown, false);
202
- }
203
-
204
- render() {
205
- const {
206
- numberOfMonths,
207
- enableOutsideDays,
208
- transitionDuration,
209
- initialVisibleMonth,
210
- firstDayOfWeek,
211
- keepOpenOnDateSelect,
212
- hideKeyboardShortcutsPanel,
213
- onClose,
214
- phrases,
215
- displayFormatDay,
216
- isDayBlocked,
217
- isOutsideRange,
218
- isDayHighlighted,
219
- onOutsideClick,
220
- key,
221
- calendarProps
222
- } = this.props;
223
- const {
224
- datePicker,
225
- firstFocusableItem
226
- } = this.state;
227
- const safedate = this.getSafeValue();
228
- const safeinitialMonth = safedate && safedate.isValid() ? () => safedate : () => initialVisibleMonth;
229
- return /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
230
- onBlur: this.insideBlur,
231
- ref: datePicker,
232
- className: classNameBlock('wrapper-day-picker-single-date-controller'),
233
- "data-testid": "calendar-wrapper"
234
- }, calendarProps), {}, {
235
- children: /*#__PURE__*/_jsx__default["default"](reactDates.DayPickerSingleDateController, {
236
- date: safedate,
237
- enableOutsideDays: enableOutsideDays,
238
- firstDayOfWeek: firstDayOfWeek,
239
- focused: true,
240
- hideKeyboardShortcutsPanel: hideKeyboardShortcutsPanel,
241
- initialVisibleMonth: safeinitialMonth,
242
- isDayBlocked: isDayBlocked,
243
- isDayHighlighted: isDayHighlighted,
244
- isOutsideRange: isOutsideRange,
245
- keepOpenOnDateSelect: keepOpenOnDateSelect,
246
- navNext: /*#__PURE__*/_jsx__default["default"](DatePickerNavigation, {
247
- className: classNameElement('navigation-next')
248
- }),
249
- navPrev: /*#__PURE__*/_jsx__default["default"](DatePickerNavigation, {
250
- className: classNameElement('navigation-prev'),
251
- icon: dsIcons.ChevronLeft,
252
- innerRef: firstFocusableItem
253
- }),
254
- renderMonthElement: DatePickerRenderMonth.renderMonthElement,
255
- numberOfMonths: numberOfMonths,
256
- onClose: onClose,
257
- onDateChange: this.handleDateChange,
258
- onNextMonthClick: e => {
259
- this.handleNavClick(e, 'next');
260
- },
261
- onOutsideClick: onOutsideClick,
262
- onPrevMonthClick: e => {
263
- this.handleNavClick(e, 'prev');
264
- },
265
- phrases: phrases,
266
- renderDayContents: date => /*#__PURE__*/_jsx__default["default"](DatePickerDay, {
267
- className: classNameElement('day-contents'),
268
- date: date.format(displayFormatDay)
269
- }),
270
- transitionDuration: transitionDuration,
271
- onTab: e => {
272
- if (e.target.classList.contains('CalendarDay')) {
273
- e.preventDefault();
274
- onClose();
275
- }
276
- }
277
- }, key)
278
- })));
279
- }
280
-
281
- }
282
- DSDatePickerController.defaultProps = {
283
- date: '',
284
- value: '',
285
- enableOutsideDays: false,
286
- initialVisibleMonth: moment__default["default"](),
287
- firstDayOfWeek: 0,
288
- keepOpenOnDateSelect: true,
289
- hideKeyboardShortcutsPanel: true,
290
- onPrevMonthClick: () => null,
291
- onNextMonthClick: () => null,
292
- onClose: () => null,
293
- onChange: () => null,
294
- onClickEscape: () => null,
295
- onDateChange: () => null,
296
- phrases: defaultPhrases.SingleDatePickerPhrases,
297
- // displayFormat: 'L',
298
- displayFormatDay: 'D',
299
- transitionDuration: 0,
300
- // verticalSpacing: 0,
301
- isDayBlocked: () => false,
302
- isOutsideRange: () => false,
303
- isDayHighlighted: () => false,
304
- numberOfMonths: 1
305
- };
306
- DSDatePickerController.defaultProps = {
307
- date: '',
308
- value: '',
309
- enableOutsideDays: false,
310
- initialVisibleMonth: moment__default["default"](),
311
- firstDayOfWeek: 0,
312
- keepOpenOnDateSelect: true,
313
- hideKeyboardShortcutsPanel: true,
314
- onPrevMonthClick: () => null,
315
- onNextMonthClick: () => null,
316
- onClose: () => null,
317
- onClickEscape: () => null,
318
- onChange: () => null,
319
- onDateChange: () => null,
320
- phrases: PropTypes__default["default"].shape({
321
- calendarLabel: PropTypes__default["default"].string,
322
- closeDatePicker: PropTypes__default["default"].string,
323
- clearDates: PropTypes__default["default"].string,
324
- focusStartDate: PropTypes__default["default"].string,
325
- jumpToPrevMonth: PropTypes__default["default"].string,
326
- jumpToNextMonth: PropTypes__default["default"].string,
327
- keyboardShortcuts: PropTypes__default["default"].string,
328
- showKeyboardShortcutsPanel: PropTypes__default["default"].string,
329
- hideKeyboardShortcutsPanel: PropTypes__default["default"].string,
330
- openThisPanel: PropTypes__default["default"].string,
331
- enterKey: PropTypes__default["default"].string,
332
- leftArrowRightArrow: PropTypes__default["default"].string,
333
- upArrowDownArrow: PropTypes__default["default"].string,
334
- pageUpPageDown: PropTypes__default["default"].string,
335
- homeEnd: PropTypes__default["default"].string,
336
- escape: PropTypes__default["default"].string,
337
- questionMark: PropTypes__default["default"].string,
338
- selectFocusedDate: PropTypes__default["default"].string,
339
- moveFocusByOneDay: PropTypes__default["default"].string,
340
- moveFocusByOneWeek: PropTypes__default["default"].string,
341
- moveFocusByOneMonth: PropTypes__default["default"].string,
342
- moveFocustoStartAndEndOfWeek: PropTypes__default["default"].string,
343
- returnFocusToInput: PropTypes__default["default"].string,
344
- keyboardNavigationInstructions: PropTypes__default["default"].string,
345
- chooseAvailableStartDate: PropTypes__default["default"].func,
346
- chooseAvailableEndDate: PropTypes__default["default"].func,
347
- dateIsUnavailable: PropTypes__default["default"].func,
348
- dateIsSelected: PropTypes__default["default"].func
349
- }),
350
- // displayFormat: 'L',
351
- displayFormatDay: 'D',
352
- transitionDuration: 0,
353
- // verticalSpacing: 0,
354
- isDayBlocked: () => false,
355
- isOutsideRange: () => false,
356
- isDayHighlighted: () => false,
357
- numberOfMonths: 1
358
- };
359
-
360
- module.exports = DSDatePickerController;