@elliemae/ds-date-picker 2.0.0-next.0 → 2.0.0-next.12
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 +52 -48
- package/cjs/components/DSDatePickerImpl.js +15 -12
- package/cjs/components/DatePickerController/DatePickerController.js +8 -3
- package/cjs/components/DatePickerDay/DatePickerDay.js +13 -10
- package/cjs/components/DatePickerDropdown.js +17 -11
- package/cjs/components/DatePickerHeader/DatePickerHeader.js +9 -10
- package/cjs/components/DatePickerNavigation/DatePickerNavigation.js +18 -15
- package/cjs/components/DatePickerPicker/DatePickerPicker.js +1 -1
- package/cjs/components/DatePickerRange/DatePickerRange.js +28 -19
- package/cjs/components/DatePickerRangeHeader/DatePickerRangeHeader.js +23 -21
- package/cjs/components/DatePickerRenderMonth/DatePickerRenderMonth.js +32 -32
- package/cjs/components/DatePickerSingleDate/DatePickerSingleDate.js +10 -8
- package/cjs/components/SingleRangeDateSwitcher/SingleRangeDateSwitcher.js +22 -20
- package/cjs/defaultPhrases.js +42 -21
- package/esm/DSDatePicker.js +52 -48
- package/esm/components/DSDatePickerImpl.js +13 -9
- package/esm/components/DatePickerController/DatePickerController.js +7 -1
- package/esm/components/DatePickerDay/DatePickerDay.js +13 -10
- package/esm/components/DatePickerDropdown.js +17 -11
- package/esm/components/DatePickerHeader/DatePickerHeader.js +9 -8
- package/esm/components/DatePickerNavigation/DatePickerNavigation.js +18 -15
- package/esm/components/DatePickerPicker/DatePickerPicker.js +1 -1
- package/esm/components/DatePickerRange/DatePickerRange.js +26 -16
- package/esm/components/DatePickerRangeHeader/DatePickerRangeHeader.js +23 -19
- package/esm/components/DatePickerRenderMonth/DatePickerRenderMonth.js +32 -30
- package/esm/components/DatePickerSingleDate/DatePickerSingleDate.js +8 -5
- package/esm/components/SingleRangeDateSwitcher/SingleRangeDateSwitcher.js +19 -16
- package/esm/defaultPhrases.js +42 -21
- package/package.json +7 -5
- package/types/components/DatePickerDropdown.d.ts +1 -1
- package/types/components/DatePickerHeader/DatePickerHeader.d.ts +1 -1
- package/types/components/DatePickerPicker/DatePickerPicker.d.ts +2 -2
- package/types/components/DatePickerRange/DatePickerRange.d.ts +1 -1
- package/cjs/package.json +0 -7
- package/esm/package.json +0 -7
package/cjs/DSDatePicker.js
CHANGED
|
@@ -4,6 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
6
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
7
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
10
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
11
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
12
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
7
13
|
require('react');
|
|
8
14
|
var reactDesc = require('react-desc');
|
|
9
15
|
require('react-dates/initialize');
|
|
@@ -34,48 +40,49 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
34
40
|
|
|
35
41
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
36
42
|
|
|
37
|
-
const DSDatePicker =
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
43
|
+
const DSDatePicker = _ref => {
|
|
44
|
+
let {
|
|
45
|
+
containerProps = {},
|
|
46
|
+
id = '',
|
|
47
|
+
appendToBody = true,
|
|
48
|
+
className = '',
|
|
49
|
+
date,
|
|
50
|
+
value,
|
|
51
|
+
placeholder = '',
|
|
52
|
+
disabled = false,
|
|
53
|
+
required = false,
|
|
54
|
+
readOnly = false,
|
|
55
|
+
hasError = false,
|
|
56
|
+
screenReaderInputMessage = 'Select date',
|
|
57
|
+
enableOutsideDays = true,
|
|
58
|
+
initialVisibleMonth = moment__default["default"](),
|
|
59
|
+
firstDayOfWeek = 0,
|
|
60
|
+
keepOpenOnDateSelect = false,
|
|
61
|
+
hideKeyboardShortcutsPanel = true,
|
|
62
|
+
onChange = () => null,
|
|
63
|
+
onDateChange = undefined,
|
|
64
|
+
onPrevMonthClick = () => null,
|
|
65
|
+
onNextMonthClick = () => null,
|
|
66
|
+
onClose = () => null,
|
|
67
|
+
onFocus = () => null,
|
|
68
|
+
onBlur = () => null,
|
|
69
|
+
phrases = defaultPhrases.SingleDatePickerPhrases,
|
|
70
|
+
displayFormat = 'L',
|
|
71
|
+
displayFormatDay = 'D',
|
|
72
|
+
transitionDuration = 0,
|
|
73
|
+
verticalSpacing = 0,
|
|
74
|
+
isDayBlocked = () => false,
|
|
75
|
+
isOutsideRange = () => false,
|
|
76
|
+
isDayHighlighted = () => false,
|
|
77
|
+
numberOfMonths = 1,
|
|
78
|
+
openDirection = 'down',
|
|
79
|
+
tabIndex = '',
|
|
80
|
+
zIndex = 1,
|
|
81
|
+
pickerProps = {},
|
|
82
|
+
calendarProps = {},
|
|
83
|
+
autoClear = false,
|
|
84
|
+
focusCurrentDate = false
|
|
85
|
+
} = _ref;
|
|
79
86
|
const {
|
|
80
87
|
cssClassName
|
|
81
88
|
} = dsClassnames.convertPropToCssClassName('datepicker', className, {
|
|
@@ -110,8 +117,8 @@ const DSDatePicker = ({
|
|
|
110
117
|
onBlur: onBlur,
|
|
111
118
|
onClose: onClose,
|
|
112
119
|
onChange: onChange,
|
|
113
|
-
onDateChange: (
|
|
114
|
-
if (onDateChange) onDateChange(...
|
|
120
|
+
onDateChange: function () {
|
|
121
|
+
if (onDateChange) onDateChange(...arguments);
|
|
115
122
|
},
|
|
116
123
|
onFocus: onFocus,
|
|
117
124
|
onNextMonthClick: onNextMonthClick,
|
|
@@ -153,10 +160,7 @@ const datePickerProps = {
|
|
|
153
160
|
firstDayOfWeek: reactDesc.PropTypes.number.description('first day of week').defaultValue(0),
|
|
154
161
|
keepOpenOnDateSelect: reactDesc.PropTypes.bool.description('keep picker open when a date is selected').defaultValue(false),
|
|
155
162
|
hideKeyboardShortcutsPanel: reactDesc.PropTypes.bool.description('hide keyabord shortcut panel or not').defaultValue(true),
|
|
156
|
-
onChange: reactDesc.PropTypes.func.description(
|
|
157
|
-
function executed when input changes. This could trigger with invalid dates. It returns a string and a moment
|
|
158
|
-
if the date is valid.
|
|
159
|
-
`),
|
|
163
|
+
onChange: reactDesc.PropTypes.func.description("\n function executed when input changes. This could trigger with invalid dates. It returns a string and a moment\n if the date is valid.\n "),
|
|
160
164
|
onDateChange: reactDesc.PropTypes.func.description('function executed when date changes. This doesnt trigger with invalid dates. It returns a moment object'),
|
|
161
165
|
onPrevMonthClick: reactDesc.PropTypes.func.description('function executed when clicking on prev month button'),
|
|
162
166
|
onNextMonthClick: reactDesc.PropTypes.func.description('function executed when clicking on next month button'),
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
4
4
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
5
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
5
6
|
var React = require('react');
|
|
6
7
|
var moment = require('moment');
|
|
7
|
-
var
|
|
8
|
-
var DSDateInput = require('@elliemae/ds-basic/form/DateInputV2');
|
|
8
|
+
var dsForm = require('@elliemae/ds-form');
|
|
9
9
|
var DatePickerController = require('./DatePickerController/DatePickerController.js');
|
|
10
10
|
var DatePickerDropdown = require('./DatePickerDropdown.js');
|
|
11
11
|
|
|
@@ -15,7 +15,6 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
|
15
15
|
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
16
16
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
17
17
|
var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
|
|
18
|
-
var DSInputGroup__default = /*#__PURE__*/_interopDefaultLegacy(DSInputGroup);
|
|
19
18
|
|
|
20
19
|
const FORMAT = 'MMDDYYYY';
|
|
21
20
|
class DSdatePickerImpl extends React__default["default"].Component {
|
|
@@ -132,9 +131,10 @@ class DSdatePickerImpl extends React__default["default"].Component {
|
|
|
132
131
|
onDateChange(momentValue);
|
|
133
132
|
});
|
|
134
133
|
|
|
135
|
-
_defineProperty__default["default"](this, "handleFocus",
|
|
136
|
-
|
|
137
|
-
|
|
134
|
+
_defineProperty__default["default"](this, "handleFocus", _ref => {
|
|
135
|
+
let {
|
|
136
|
+
focused
|
|
137
|
+
} = _ref;
|
|
138
138
|
this.setState({
|
|
139
139
|
inputFocused: focused
|
|
140
140
|
});
|
|
@@ -258,6 +258,8 @@ class DSdatePickerImpl extends React__default["default"].Component {
|
|
|
258
258
|
}
|
|
259
259
|
|
|
260
260
|
render() {
|
|
261
|
+
var _this = this;
|
|
262
|
+
|
|
261
263
|
const {
|
|
262
264
|
inputFocused
|
|
263
265
|
} = this.state;
|
|
@@ -288,7 +290,7 @@ class DSdatePickerImpl extends React__default["default"].Component {
|
|
|
288
290
|
const safedate = this.getSafeValue();
|
|
289
291
|
const safeInputValue = this.getSafeInputValue();
|
|
290
292
|
const hasSelectedDate = !!safedate;
|
|
291
|
-
return /*#__PURE__*/_jsx__default["default"](
|
|
293
|
+
return /*#__PURE__*/_jsx__default["default"](dsForm.DSInputGroup, {
|
|
292
294
|
rightAddon: /*#__PURE__*/_jsx__default["default"](DatePickerDropdown, {
|
|
293
295
|
pickerRef: this.state.pickerRef,
|
|
294
296
|
disabled: disabled,
|
|
@@ -312,10 +314,11 @@ class DSdatePickerImpl extends React__default["default"].Component {
|
|
|
312
314
|
keepOpenOnDateSelect: keepOpenOnDateSelect,
|
|
313
315
|
numberOfMonths: numberOfMonths,
|
|
314
316
|
onClickEscape: this.handleClickEscape,
|
|
315
|
-
onClose: (
|
|
316
|
-
if (
|
|
317
|
-
onClose(...
|
|
318
|
-
|
|
317
|
+
onClose: function () {
|
|
318
|
+
if (_this.state.pickerRef.current) _this.state.pickerRef.current.focus();
|
|
319
|
+
onClose(...arguments);
|
|
320
|
+
|
|
321
|
+
_this.setState({
|
|
319
322
|
inputFocused: false
|
|
320
323
|
});
|
|
321
324
|
},
|
|
@@ -334,7 +337,7 @@ class DSdatePickerImpl extends React__default["default"].Component {
|
|
|
334
337
|
zIndex: zIndex,
|
|
335
338
|
pickerProps: pickerProps
|
|
336
339
|
})
|
|
337
|
-
}, void 0, /*#__PURE__*/_jsx__default["default"](
|
|
340
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSDateInputV2, {
|
|
338
341
|
"data-testid": "datepicker-input",
|
|
339
342
|
"aria-label": placeholder || 'Date Picker Input',
|
|
340
343
|
disabled: disabled,
|
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
4
4
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
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');
|
|
5
11
|
var React = require('react');
|
|
6
12
|
var lodash = require('lodash');
|
|
7
13
|
var PropTypes = require('prop-types');
|
|
@@ -9,7 +15,7 @@ var moment = require('moment');
|
|
|
9
15
|
require('react-dates/initialize');
|
|
10
16
|
var reactDates = require('react-dates');
|
|
11
17
|
var dsClassnames = require('@elliemae/ds-classnames');
|
|
12
|
-
var
|
|
18
|
+
var dsIcons = require('@elliemae/ds-icons');
|
|
13
19
|
var defaultPhrases = require('../../defaultPhrases.js');
|
|
14
20
|
var DatePickerRenderMonth = require('../DatePickerRenderMonth/DatePickerRenderMonth.js');
|
|
15
21
|
var DatePickerNavigation = require('../DatePickerNavigation/DatePickerNavigation.js');
|
|
@@ -23,7 +29,6 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
|
|
|
23
29
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
24
30
|
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
25
31
|
var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
|
|
26
|
-
var ChevronLeft__default = /*#__PURE__*/_interopDefaultLegacy(ChevronLeft);
|
|
27
32
|
|
|
28
33
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
29
34
|
|
|
@@ -243,7 +248,7 @@ class DSDatePickerController extends React__default["default"].Component {
|
|
|
243
248
|
}),
|
|
244
249
|
navPrev: /*#__PURE__*/_jsx__default["default"](DatePickerNavigation, {
|
|
245
250
|
className: classNameElement('navigation-prev'),
|
|
246
|
-
icon:
|
|
251
|
+
icon: dsIcons.ChevronLeft,
|
|
247
252
|
innerRef: firstFocusableItem
|
|
248
253
|
}),
|
|
249
254
|
renderMonthElement: DatePickerRenderMonth.renderMonthElement,
|
|
@@ -7,15 +7,18 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
7
7
|
|
|
8
8
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
9
9
|
|
|
10
|
-
const Day =
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
"
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
"
|
|
19
|
-
|
|
10
|
+
const Day = _ref => {
|
|
11
|
+
let {
|
|
12
|
+
className = 'date-picker-content-day',
|
|
13
|
+
date = ''
|
|
14
|
+
} = _ref;
|
|
15
|
+
return /*#__PURE__*/_jsx__default["default"]("div", {
|
|
16
|
+
className: className,
|
|
17
|
+
"data-testid": "datepicker-day-".concat(date)
|
|
18
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
|
|
19
|
+
className: "".concat(className, "-half"),
|
|
20
|
+
"data-testid": "datepicker-day"
|
|
21
|
+
}, void 0, date));
|
|
22
|
+
};
|
|
20
23
|
|
|
21
24
|
module.exports = Day;
|
|
@@ -1,10 +1,15 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
4
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
5
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
6
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
3
8
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
4
9
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
5
10
|
require('react');
|
|
6
11
|
var dsClassnames = require('@elliemae/ds-classnames');
|
|
7
|
-
var DSPopper = require('@elliemae/ds-
|
|
12
|
+
var DSPopper = require('@elliemae/ds-popper');
|
|
8
13
|
var DatePickerPicker = require('./DatePickerPicker/DatePickerPicker.js');
|
|
9
14
|
var jsxRuntime = require('react/jsx-runtime');
|
|
10
15
|
|
|
@@ -23,16 +28,17 @@ const {
|
|
|
23
28
|
|
|
24
29
|
const noop = () => null;
|
|
25
30
|
|
|
26
|
-
function DatePickerDropdown({
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
31
|
+
function DatePickerDropdown(_ref) {
|
|
32
|
+
let {
|
|
33
|
+
disabled = false,
|
|
34
|
+
readOnly,
|
|
35
|
+
onClick = noop,
|
|
36
|
+
isOpen,
|
|
37
|
+
menu,
|
|
38
|
+
zIndex = 1,
|
|
39
|
+
pickerProps,
|
|
40
|
+
pickerRef
|
|
41
|
+
} = _ref;
|
|
36
42
|
return /*#__PURE__*/_jsx__default["default"](DSPopper__default["default"], {
|
|
37
43
|
contentComponent: menu,
|
|
38
44
|
isOpen: isOpen,
|
|
@@ -1,18 +1,16 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
4
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
4
5
|
var React = require('react');
|
|
5
6
|
var moment = require('moment');
|
|
6
|
-
var
|
|
7
|
-
var DSInputGroup = require('@elliemae/ds-basic/form/InputGroup');
|
|
7
|
+
var dsForm = require('@elliemae/ds-form');
|
|
8
8
|
var dsClassnames = require('@elliemae/ds-classnames');
|
|
9
9
|
|
|
10
10
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
11
|
|
|
12
12
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
13
13
|
var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
|
|
14
|
-
var DSDateInput__default = /*#__PURE__*/_interopDefaultLegacy(DSDateInput);
|
|
15
|
-
var DSInputGroup__default = /*#__PURE__*/_interopDefaultLegacy(DSInputGroup);
|
|
16
14
|
|
|
17
15
|
const DATE_FORMAT = 'MMDDYYYY';
|
|
18
16
|
const blockname = 'date-picker-header';
|
|
@@ -20,11 +18,12 @@ const Header = dsClassnames.aggregatedClasses('div')(blockname);
|
|
|
20
18
|
|
|
21
19
|
const isFn = variable => typeof variable === 'function';
|
|
22
20
|
|
|
23
|
-
const DatePickerHeader =
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
21
|
+
const DatePickerHeader = _ref => {
|
|
22
|
+
let {
|
|
23
|
+
onInputChange = () => null,
|
|
24
|
+
selectedDate,
|
|
25
|
+
updateKeyDate
|
|
26
|
+
} = _ref;
|
|
28
27
|
const [value, setValue] = React.useState(isFn(selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.format) ? selectedDate.format(DATE_FORMAT) : '');
|
|
29
28
|
React.useEffect(() => {
|
|
30
29
|
if (isFn(selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.format)) {
|
|
@@ -44,7 +43,7 @@ const DatePickerHeader = ({
|
|
|
44
43
|
}
|
|
45
44
|
};
|
|
46
45
|
|
|
47
|
-
return /*#__PURE__*/_jsx__default["default"](Header, {}, void 0, /*#__PURE__*/_jsx__default["default"](
|
|
46
|
+
return /*#__PURE__*/_jsx__default["default"](Header, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSInputGroup, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSDateInputV2, {
|
|
48
47
|
onChange: handleOnChange,
|
|
49
48
|
onKeyDown: handleOnKeyDown,
|
|
50
49
|
value: value,
|
|
@@ -10,20 +10,23 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
10
10
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
11
11
|
var ChevronRight__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRight);
|
|
12
12
|
|
|
13
|
-
const Navigation =
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
"
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
13
|
+
const Navigation = _ref => {
|
|
14
|
+
let {
|
|
15
|
+
className = 'date-picker-navigation',
|
|
16
|
+
icon: Icon$1 = ChevronRight__default["default"],
|
|
17
|
+
color = Icon.DSIconColors.NEUTRAL,
|
|
18
|
+
size = Icon.DSIconSizes.S,
|
|
19
|
+
innerRef
|
|
20
|
+
} = _ref;
|
|
21
|
+
return /*#__PURE__*/_jsx__default["default"]("div", {
|
|
22
|
+
tabIndex: 0,
|
|
23
|
+
"data-testid": "date-picker-nav"
|
|
24
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](Icon$1, {
|
|
25
|
+
className: className,
|
|
26
|
+
color: color,
|
|
27
|
+
innerRef: innerRef,
|
|
28
|
+
size: size
|
|
29
|
+
}));
|
|
30
|
+
};
|
|
28
31
|
|
|
29
32
|
module.exports = Navigation;
|
|
@@ -8,7 +8,7 @@ require('react');
|
|
|
8
8
|
var PropTypes = require('prop-types');
|
|
9
9
|
var Icon = require('@elliemae/ds-basic/Icon');
|
|
10
10
|
var DatePicker = require('@elliemae/ds-icons/DatePicker');
|
|
11
|
-
var DSButton = require('@elliemae/ds-
|
|
11
|
+
var DSButton = require('@elliemae/ds-button');
|
|
12
12
|
var propTypes = require('@elliemae/ds-shared/prop-types');
|
|
13
13
|
|
|
14
14
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -2,12 +2,20 @@
|
|
|
2
2
|
|
|
3
3
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
4
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');
|
|
5
11
|
var React = require('react');
|
|
6
12
|
var reactDates = require('react-dates');
|
|
7
13
|
var moment = require('moment');
|
|
8
|
-
var dsDatePicker = require('@elliemae/ds-date-picker');
|
|
9
|
-
var ChevronLeft = require('@elliemae/ds-icons/ChevronLeft');
|
|
10
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');
|
|
11
19
|
var jsxRuntime = require('react/jsx-runtime');
|
|
12
20
|
|
|
13
21
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -15,7 +23,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
15
23
|
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
16
24
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
17
25
|
var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
|
|
18
|
-
var ChevronLeft__default = /*#__PURE__*/_interopDefaultLegacy(ChevronLeft);
|
|
19
26
|
|
|
20
27
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
21
28
|
|
|
@@ -29,13 +36,14 @@ const {
|
|
|
29
36
|
const START_DATE = 'startDate';
|
|
30
37
|
const END_DATE = 'endDate';
|
|
31
38
|
|
|
32
|
-
const DatePickerRangeDate =
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
+
const DatePickerRangeDate = _ref => {
|
|
40
|
+
let {
|
|
41
|
+
dateStart,
|
|
42
|
+
dateEnd,
|
|
43
|
+
displayFormatDay = 'D',
|
|
44
|
+
showHeader = true,
|
|
45
|
+
otherProps
|
|
46
|
+
} = _ref;
|
|
39
47
|
const [selectedDateStart, setSelectedDateStart] = React.useState(dateStart);
|
|
40
48
|
const [selectedDateEnd, setSelectedDateEnd] = React.useState(dateEnd);
|
|
41
49
|
const [focusedInput, setFocusedInput] = React.useState(START_DATE);
|
|
@@ -45,10 +53,11 @@ const DatePickerRangeDate = ({
|
|
|
45
53
|
setFocusedInput(focusedInput === START_DATE ? END_DATE : START_DATE);
|
|
46
54
|
};
|
|
47
55
|
|
|
48
|
-
const handleDatesChange =
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
56
|
+
const handleDatesChange = _ref2 => {
|
|
57
|
+
let {
|
|
58
|
+
startDate,
|
|
59
|
+
endDate
|
|
60
|
+
} = _ref2;
|
|
52
61
|
setSelectedDateStart(startDate);
|
|
53
62
|
setSelectedDateEnd(endDate);
|
|
54
63
|
};
|
|
@@ -75,7 +84,7 @@ const DatePickerRangeDate = ({
|
|
|
75
84
|
|
|
76
85
|
const safeStartDate = getSafeDateStartValue();
|
|
77
86
|
const safeEndDate = getSafeDateEndValue();
|
|
78
|
-
return /*#__PURE__*/_jsx__default["default"](Wrapper, {}, void 0, showHeader && /*#__PURE__*/_jsx__default["default"](
|
|
87
|
+
return /*#__PURE__*/_jsx__default["default"](Wrapper, {}, void 0, showHeader && /*#__PURE__*/_jsx__default["default"](DatePickerRangeHeader, {
|
|
79
88
|
onEndInputChange: handleEndInputChange,
|
|
80
89
|
onStartInputChange: handleStartInputChange,
|
|
81
90
|
selectedEndDate: safeEndDate,
|
|
@@ -89,16 +98,16 @@ const DatePickerRangeDate = ({
|
|
|
89
98
|
focused: true,
|
|
90
99
|
focusedInput: focusedInput,
|
|
91
100
|
hideKeyboardShortcutsPanel: true,
|
|
92
|
-
navNext: /*#__PURE__*/_jsx__default["default"](
|
|
101
|
+
navNext: /*#__PURE__*/_jsx__default["default"](DatePickerNavigation, {
|
|
93
102
|
className: classNameElement('navigation-next')
|
|
94
103
|
}),
|
|
95
|
-
navPrev: /*#__PURE__*/_jsx__default["default"](
|
|
104
|
+
navPrev: /*#__PURE__*/_jsx__default["default"](DatePickerNavigation, {
|
|
96
105
|
className: classNameElement('navigation-prev'),
|
|
97
|
-
icon:
|
|
106
|
+
icon: dsIcons.ChevronLeft
|
|
98
107
|
}),
|
|
99
108
|
onDatesChange: handleDatesChange,
|
|
100
109
|
onFocusChange: handleFocusChange,
|
|
101
|
-
renderDayContents: date => /*#__PURE__*/_jsx__default["default"](
|
|
110
|
+
renderDayContents: date => /*#__PURE__*/_jsx__default["default"](DatePickerDay, {
|
|
102
111
|
className: classNameElement('day-contents'),
|
|
103
112
|
date: date.format(displayFormatDay)
|
|
104
113
|
}),
|
|
@@ -1,18 +1,16 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
4
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
4
5
|
var React = require('react');
|
|
5
6
|
var moment = require('moment');
|
|
6
|
-
var
|
|
7
|
-
var DSInputGroup = require('@elliemae/ds-basic/form/InputGroup');
|
|
7
|
+
var dsForm = require('@elliemae/ds-form');
|
|
8
8
|
var dsClassnames = require('@elliemae/ds-classnames');
|
|
9
9
|
|
|
10
10
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
11
|
|
|
12
12
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
13
13
|
var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
|
|
14
|
-
var DSDateInput__default = /*#__PURE__*/_interopDefaultLegacy(DSDateInput);
|
|
15
|
-
var DSInputGroup__default = /*#__PURE__*/_interopDefaultLegacy(DSInputGroup);
|
|
16
14
|
|
|
17
15
|
const blockname = 'date-range-picker';
|
|
18
16
|
const DATE_FORMAT = 'MMDDYYYY'; // When year is greater than 999 it means the user finished writing
|
|
@@ -20,21 +18,25 @@ const DATE_FORMAT = 'MMDDYYYY'; // When year is greater than 999 it means the us
|
|
|
20
18
|
// to be higher than 999
|
|
21
19
|
|
|
22
20
|
const MAGIC_NUMBER = 999;
|
|
23
|
-
const Header = dsClassnames.aggregatedClasses('div')(blockname, 'header',
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
21
|
+
const Header = dsClassnames.aggregatedClasses('div')(blockname, 'header', _ref => {
|
|
22
|
+
let {
|
|
23
|
+
invalidDate
|
|
24
|
+
} = _ref;
|
|
25
|
+
return {
|
|
26
|
+
invalidDate
|
|
27
|
+
};
|
|
28
|
+
});
|
|
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;
|
|
38
40
|
const [startValue, setStartValue] = React.useState(selectedStartDate);
|
|
39
41
|
const [endValue, setEndValue] = React.useState(selectedEndDate);
|
|
40
42
|
const startInputRef = React.useRef();
|
|
@@ -118,7 +120,7 @@ const DatePickerRangeHeader = ({
|
|
|
118
120
|
}
|
|
119
121
|
};
|
|
120
122
|
|
|
121
|
-
return /*#__PURE__*/_jsx__default["default"](Header, {}, void 0, /*#__PURE__*/_jsx__default["default"](
|
|
123
|
+
return /*#__PURE__*/_jsx__default["default"](Header, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSInputGroup, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSDateInputV2, {
|
|
122
124
|
containerProps: {
|
|
123
125
|
'data-testid': 'start-date'
|
|
124
126
|
},
|
|
@@ -127,7 +129,7 @@ const DatePickerRangeHeader = ({
|
|
|
127
129
|
onFocus: () => handleOnFocus('startDate'),
|
|
128
130
|
onKeyDown: handleOnKeyDownStart,
|
|
129
131
|
value: startValue
|
|
130
|
-
}), /*#__PURE__*/_jsx__default["default"](
|
|
132
|
+
}), /*#__PURE__*/_jsx__default["default"](dsForm.DSDateInputV2, {
|
|
131
133
|
containerProps: {
|
|
132
134
|
'data-testid': 'end-date'
|
|
133
135
|
},
|