@elliemae/ds-date-range-picker 2.0.0-next.7 → 2.0.0-rc.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/DSDateRangePicker.js +47 -41
- package/cjs/components/DSDateRangePickerImpl.js +25 -22
- package/cjs/components/DatePickerLabel/DatePickerLabel.js +9 -6
- package/cjs/components/DatePickerRangeHeader/DatePickerRangeHeader.js +11 -12
- package/cjs/components/DayPickerRangeController.js +7 -3
- package/esm/DSDateRangePicker.js +47 -41
- package/esm/components/DSDateRangePickerImpl.js +21 -16
- package/esm/components/DatePickerLabel/DatePickerLabel.js +9 -6
- package/esm/components/DatePickerRangeHeader/DatePickerRangeHeader.js +10 -10
- package/esm/components/DayPickerRangeController.js +6 -1
- package/package.json +6 -5
package/cjs/DSDateRangePicker.js
CHANGED
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
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/esnext.async-iterator.for-each.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
5
10
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
11
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
7
12
|
require('react');
|
|
@@ -24,47 +29,48 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
24
29
|
|
|
25
30
|
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; }
|
|
26
31
|
|
|
27
|
-
const DSDateRangePicker =
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
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
|
-
|
|
32
|
+
const DSDateRangePicker = _ref => {
|
|
33
|
+
let {
|
|
34
|
+
containerProps = {},
|
|
35
|
+
className = '',
|
|
36
|
+
disabled = false,
|
|
37
|
+
required = false,
|
|
38
|
+
startDateRequired = false,
|
|
39
|
+
endDateRequired = false,
|
|
40
|
+
id,
|
|
41
|
+
hasError = false,
|
|
42
|
+
validationMessage = '',
|
|
43
|
+
readOnly = false,
|
|
44
|
+
screenReaderInputMessage = 'Select date',
|
|
45
|
+
initialVisibleMonth = moment__default["default"](),
|
|
46
|
+
firstDayOfWeek = 0,
|
|
47
|
+
keepOpenOnDateSelect = true,
|
|
48
|
+
reopenPickerOnClearDates = false,
|
|
49
|
+
hideKeyboardShortcutsPanel = true,
|
|
50
|
+
onPrevMonthClick = () => null,
|
|
51
|
+
onNextMonthClick = () => null,
|
|
52
|
+
onClose = () => null,
|
|
53
|
+
onOutsideClick = () => null,
|
|
54
|
+
transitionDuration = 0,
|
|
55
|
+
verticalSpacing = 0,
|
|
56
|
+
minimumNights = 0,
|
|
57
|
+
isDayBlocked = () => false,
|
|
58
|
+
isOutsideRange = () => false,
|
|
59
|
+
isDayHighlighted = () => false,
|
|
60
|
+
displayFormat = 'L',
|
|
61
|
+
displayFormatDay = 'D',
|
|
62
|
+
phrases = defaultPhrases.DateRangePickerPhrases,
|
|
63
|
+
startDate,
|
|
64
|
+
endDate,
|
|
65
|
+
startDateId = 'startDateId',
|
|
66
|
+
endDateId = 'endDateId',
|
|
67
|
+
labelFrom = 'From',
|
|
68
|
+
labelTo = 'To',
|
|
69
|
+
enableOutsideDays = true,
|
|
70
|
+
onChangeStartInput = () => null,
|
|
71
|
+
onChangeEndInput = () => null,
|
|
72
|
+
onDatesChange = () => null
|
|
73
|
+
} = _ref;
|
|
68
74
|
const {
|
|
69
75
|
cssClassName,
|
|
70
76
|
prefixBlockName
|
|
@@ -7,9 +7,8 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
|
7
7
|
var React = require('react');
|
|
8
8
|
var moment = require('moment');
|
|
9
9
|
var dsClassnames = require('@elliemae/ds-classnames');
|
|
10
|
-
var DSInputMask = require('@elliemae/ds-
|
|
11
|
-
var
|
|
12
|
-
var DSPopper = require('@elliemae/ds-basic/Popper');
|
|
10
|
+
var DSInputMask = require('@elliemae/ds-form');
|
|
11
|
+
var DSPopper = require('@elliemae/ds-popper');
|
|
13
12
|
var dsDatePicker = require('@elliemae/ds-date-picker');
|
|
14
13
|
var DayPickerRangeController = require('./DayPickerRangeController.js');
|
|
15
14
|
var isMaxDiffSafe = require('../isMaxDiffSafe.js');
|
|
@@ -20,8 +19,6 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
|
20
19
|
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
21
20
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
22
21
|
var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
|
|
23
|
-
var DSInputMask__default = /*#__PURE__*/_interopDefaultLegacy(DSInputMask);
|
|
24
|
-
var DSFormItemLayout__default = /*#__PURE__*/_interopDefaultLegacy(DSFormItemLayout);
|
|
25
22
|
var DSPopper__default = /*#__PURE__*/_interopDefaultLegacy(DSPopper);
|
|
26
23
|
|
|
27
24
|
const START_DATE = 'startDate';
|
|
@@ -34,10 +31,11 @@ class DSDateRangePickerImpl extends React__default["default"].Component {
|
|
|
34
31
|
constructor(props) {
|
|
35
32
|
super(props);
|
|
36
33
|
|
|
37
|
-
_defineProperty__default["default"](this, "onDatesChange",
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
34
|
+
_defineProperty__default["default"](this, "onDatesChange", _ref => {
|
|
35
|
+
let {
|
|
36
|
+
startDate,
|
|
37
|
+
endDate
|
|
38
|
+
} = _ref;
|
|
41
39
|
const {
|
|
42
40
|
onDatesChange
|
|
43
41
|
} = this.props;
|
|
@@ -59,11 +57,14 @@ class DSDateRangePickerImpl extends React__default["default"].Component {
|
|
|
59
57
|
});
|
|
60
58
|
|
|
61
59
|
_defineProperty__default["default"](this, "onFocusChange", () => {
|
|
62
|
-
this.setState(
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
60
|
+
this.setState(_ref2 => {
|
|
61
|
+
let {
|
|
62
|
+
focusedInput
|
|
63
|
+
} = _ref2;
|
|
64
|
+
return {
|
|
65
|
+
focusedInput: focusedInput === START_DATE ? END_DATE : START_DATE
|
|
66
|
+
};
|
|
67
|
+
});
|
|
67
68
|
});
|
|
68
69
|
|
|
69
70
|
_defineProperty__default["default"](this, "handleKeyDown", event => {
|
|
@@ -180,10 +181,12 @@ class DSDateRangePickerImpl extends React__default["default"].Component {
|
|
|
180
181
|
}));
|
|
181
182
|
});
|
|
182
183
|
|
|
183
|
-
_defineProperty__default["default"](this, "handleChangeDate",
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
184
|
+
_defineProperty__default["default"](this, "handleChangeDate", _ref3 => {
|
|
185
|
+
let {
|
|
186
|
+
startDate: _start,
|
|
187
|
+
endDate
|
|
188
|
+
} = _ref3;
|
|
189
|
+
|
|
187
190
|
if (_start && endDate) {
|
|
188
191
|
this.setState({
|
|
189
192
|
startDate: moment__default["default"](_start),
|
|
@@ -258,9 +261,9 @@ class DSDateRangePickerImpl extends React__default["default"].Component {
|
|
|
258
261
|
className: "".concat(inputClass, " ").concat(inputClassModifier)
|
|
259
262
|
}, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
|
|
260
263
|
className: classNameBlock('wrapper-input-date-range-picker-controller')
|
|
261
|
-
}, void 0, /*#__PURE__*/_jsx__default["default"](
|
|
264
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](DSInputMask.DSFormItemLayout, {
|
|
262
265
|
floatingLabel: true,
|
|
263
|
-
inputComponent:
|
|
266
|
+
inputComponent: DSInputMask.DSInputMask,
|
|
264
267
|
labelText: labelFrom,
|
|
265
268
|
mask: DSInputMask.MASK_TYPES.DATE,
|
|
266
269
|
onChange: this.handleChangeStart,
|
|
@@ -272,9 +275,9 @@ class DSDateRangePickerImpl extends React__default["default"].Component {
|
|
|
272
275
|
required: startDateRequired,
|
|
273
276
|
hasError: hasError || startDateError,
|
|
274
277
|
placeholder: "MM/DD/YYYY"
|
|
275
|
-
}), /*#__PURE__*/_jsx__default["default"](
|
|
278
|
+
}), /*#__PURE__*/_jsx__default["default"](DSInputMask.DSFormItemLayout, {
|
|
276
279
|
floatingLabel: true,
|
|
277
|
-
inputComponent:
|
|
280
|
+
inputComponent: DSInputMask.DSInputMask,
|
|
278
281
|
labelText: labelTo,
|
|
279
282
|
mask: DSInputMask.MASK_TYPES.DATE,
|
|
280
283
|
onChange: this.handleChangeEnd,
|
|
@@ -7,11 +7,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
7
7
|
|
|
8
8
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
9
9
|
|
|
10
|
-
const Label =
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
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
|
+
};
|
|
16
19
|
|
|
17
20
|
module.exports = Label;
|
|
@@ -4,8 +4,7 @@ var _jsx = require('@babel/runtime/helpers/jsx');
|
|
|
4
4
|
require('core-js/modules/web.dom-collections.iterator.js');
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var moment = require('moment');
|
|
7
|
-
var DSInputMask = require('@elliemae/ds-
|
|
8
|
-
var DSInputGroup = require('@elliemae/ds-basic/form/InputGroup');
|
|
7
|
+
var DSInputMask = require('@elliemae/ds-form');
|
|
9
8
|
var dsClassnames = require('@elliemae/ds-classnames');
|
|
10
9
|
|
|
11
10
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -13,7 +12,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
13
12
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
14
13
|
var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
|
|
15
14
|
var DSInputMask__default = /*#__PURE__*/_interopDefaultLegacy(DSInputMask);
|
|
16
|
-
var DSInputGroup__default = /*#__PURE__*/_interopDefaultLegacy(DSInputGroup);
|
|
17
15
|
|
|
18
16
|
const blockname = 'date-range-picker';
|
|
19
17
|
const Header = dsClassnames.aggregatedClasses('div')(blockname, 'header');
|
|
@@ -24,14 +22,15 @@ const formatDate = date => {
|
|
|
24
22
|
}
|
|
25
23
|
};
|
|
26
24
|
|
|
27
|
-
const DatePickerRangeHeader =
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
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;
|
|
35
34
|
const [startValue, setStartValue] = React.useState(selectedStartDate ? formatDate(selectedStartDate) : '');
|
|
36
35
|
const [endValue, setEndValue] = React.useState(selectedEndDate ? formatDate(selectedEndDate) : '');
|
|
37
36
|
React.useEffect(() => {
|
|
@@ -77,7 +76,7 @@ const DatePickerRangeHeader = ({
|
|
|
77
76
|
}
|
|
78
77
|
};
|
|
79
78
|
|
|
80
|
-
return /*#__PURE__*/_jsx__default["default"](Header, {}, void 0, /*#__PURE__*/_jsx__default["default"](
|
|
79
|
+
return /*#__PURE__*/_jsx__default["default"](Header, {}, void 0, /*#__PURE__*/_jsx__default["default"](DSInputMask.DSInputGroup, {}, void 0, /*#__PURE__*/_jsx__default["default"](DSInputMask__default["default"], {
|
|
81
80
|
"aria-label": placeholderStart || 'Date Picker Input Mask',
|
|
82
81
|
mask: DSInputMask.MASK_TYPES.DATE,
|
|
83
82
|
onBlur: handleOnBlurStart,
|
|
@@ -4,10 +4,15 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
|
4
4
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
5
5
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
6
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');
|
|
7
12
|
var React = require('react');
|
|
8
13
|
var reactDates = require('react-dates');
|
|
9
14
|
var dsDatePicker = require('@elliemae/ds-date-picker');
|
|
10
|
-
var
|
|
15
|
+
var dsIcons = require('@elliemae/ds-icons');
|
|
11
16
|
var dsClassnames = require('@elliemae/ds-classnames');
|
|
12
17
|
var jsxRuntime = require('react/jsx-runtime');
|
|
13
18
|
|
|
@@ -16,7 +21,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
16
21
|
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
17
22
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
18
23
|
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
|
|
19
|
-
var ChevronLeft__default = /*#__PURE__*/_interopDefaultLegacy(ChevronLeft);
|
|
20
24
|
|
|
21
25
|
const _excluded = ["endDate", "startDate", "displayFormatDay", "focusedInput", "enableOutsideDays", "onDatesChange", "onFocusChange", "onOutsideClick", "isDayBlocked", "isDayHighlighted", "isOutsideRange", "onNextMonthClick", "onPrevMonthClick"];
|
|
22
26
|
|
|
@@ -123,7 +127,7 @@ const DayPickerRangeController = _ref => {
|
|
|
123
127
|
}),
|
|
124
128
|
navPrev: /*#__PURE__*/_jsx__default["default"](dsDatePicker.DatePickerNavigation, {
|
|
125
129
|
className: classNameElement('navigation-prev'),
|
|
126
|
-
icon:
|
|
130
|
+
icon: dsIcons.ChevronLeft
|
|
127
131
|
}),
|
|
128
132
|
onDatesChange: onDatesChange,
|
|
129
133
|
onFocusChange: onFocusChange,
|
package/esm/DSDateRangePicker.js
CHANGED
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
4
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
5
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
1
6
|
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
2
7
|
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
3
8
|
import 'react';
|
|
@@ -15,47 +20,48 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
15
20
|
|
|
16
21
|
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(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; }
|
|
17
22
|
|
|
18
|
-
const DSDateRangePicker =
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
23
|
+
const DSDateRangePicker = _ref => {
|
|
24
|
+
let {
|
|
25
|
+
containerProps = {},
|
|
26
|
+
className = '',
|
|
27
|
+
disabled = false,
|
|
28
|
+
required = false,
|
|
29
|
+
startDateRequired = false,
|
|
30
|
+
endDateRequired = false,
|
|
31
|
+
id,
|
|
32
|
+
hasError = false,
|
|
33
|
+
validationMessage = '',
|
|
34
|
+
readOnly = false,
|
|
35
|
+
screenReaderInputMessage = 'Select date',
|
|
36
|
+
initialVisibleMonth = moment(),
|
|
37
|
+
firstDayOfWeek = 0,
|
|
38
|
+
keepOpenOnDateSelect = true,
|
|
39
|
+
reopenPickerOnClearDates = false,
|
|
40
|
+
hideKeyboardShortcutsPanel = true,
|
|
41
|
+
onPrevMonthClick = () => null,
|
|
42
|
+
onNextMonthClick = () => null,
|
|
43
|
+
onClose = () => null,
|
|
44
|
+
onOutsideClick = () => null,
|
|
45
|
+
transitionDuration = 0,
|
|
46
|
+
verticalSpacing = 0,
|
|
47
|
+
minimumNights = 0,
|
|
48
|
+
isDayBlocked = () => false,
|
|
49
|
+
isOutsideRange = () => false,
|
|
50
|
+
isDayHighlighted = () => false,
|
|
51
|
+
displayFormat = 'L',
|
|
52
|
+
displayFormatDay = 'D',
|
|
53
|
+
phrases = DateRangePickerPhrases,
|
|
54
|
+
startDate,
|
|
55
|
+
endDate,
|
|
56
|
+
startDateId = 'startDateId',
|
|
57
|
+
endDateId = 'endDateId',
|
|
58
|
+
labelFrom = 'From',
|
|
59
|
+
labelTo = 'To',
|
|
60
|
+
enableOutsideDays = true,
|
|
61
|
+
onChangeStartInput = () => null,
|
|
62
|
+
onChangeEndInput = () => null,
|
|
63
|
+
onDatesChange = () => null
|
|
64
|
+
} = _ref;
|
|
59
65
|
const {
|
|
60
66
|
cssClassName,
|
|
61
67
|
prefixBlockName
|
|
@@ -3,9 +3,8 @@ import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import moment from 'moment';
|
|
5
5
|
import { convertPropToCssClassName } from '@elliemae/ds-classnames';
|
|
6
|
-
import DSInputMask,
|
|
7
|
-
import
|
|
8
|
-
import DSPopper from '@elliemae/ds-basic/Popper';
|
|
6
|
+
import { DSFormItemLayout, DSInputMask, MASK_TYPES, MASK_PIPES } from '@elliemae/ds-form';
|
|
7
|
+
import DSPopper from '@elliemae/ds-popper';
|
|
9
8
|
import { renderMonthElement, DatePickerPicker } from '@elliemae/ds-date-picker';
|
|
10
9
|
import DayPickerRangeController from './DayPickerRangeController.js';
|
|
11
10
|
import { isMaxDiffSafe } from '../isMaxDiffSafe.js';
|
|
@@ -20,10 +19,11 @@ class DSDateRangePickerImpl extends React.Component {
|
|
|
20
19
|
constructor(props) {
|
|
21
20
|
super(props);
|
|
22
21
|
|
|
23
|
-
_defineProperty(this, "onDatesChange",
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
22
|
+
_defineProperty(this, "onDatesChange", _ref => {
|
|
23
|
+
let {
|
|
24
|
+
startDate,
|
|
25
|
+
endDate
|
|
26
|
+
} = _ref;
|
|
27
27
|
const {
|
|
28
28
|
onDatesChange
|
|
29
29
|
} = this.props;
|
|
@@ -45,11 +45,14 @@ class DSDateRangePickerImpl extends React.Component {
|
|
|
45
45
|
});
|
|
46
46
|
|
|
47
47
|
_defineProperty(this, "onFocusChange", () => {
|
|
48
|
-
this.setState(
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
48
|
+
this.setState(_ref2 => {
|
|
49
|
+
let {
|
|
50
|
+
focusedInput
|
|
51
|
+
} = _ref2;
|
|
52
|
+
return {
|
|
53
|
+
focusedInput: focusedInput === START_DATE ? END_DATE : START_DATE
|
|
54
|
+
};
|
|
55
|
+
});
|
|
53
56
|
});
|
|
54
57
|
|
|
55
58
|
_defineProperty(this, "handleKeyDown", event => {
|
|
@@ -166,10 +169,12 @@ class DSDateRangePickerImpl extends React.Component {
|
|
|
166
169
|
}));
|
|
167
170
|
});
|
|
168
171
|
|
|
169
|
-
_defineProperty(this, "handleChangeDate",
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
172
|
+
_defineProperty(this, "handleChangeDate", _ref3 => {
|
|
173
|
+
let {
|
|
174
|
+
startDate: _start,
|
|
175
|
+
endDate
|
|
176
|
+
} = _ref3;
|
|
177
|
+
|
|
173
178
|
if (_start && endDate) {
|
|
174
179
|
this.setState({
|
|
175
180
|
startDate: moment(_start),
|
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
2
2
|
import 'react';
|
|
3
3
|
|
|
4
|
-
const Label =
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
4
|
+
const Label = _ref => {
|
|
5
|
+
let {
|
|
6
|
+
className = 'date-picker-label',
|
|
7
|
+
label = ''
|
|
8
|
+
} = _ref;
|
|
9
|
+
return /*#__PURE__*/_jsx("div", {
|
|
10
|
+
className: className
|
|
11
|
+
}, void 0, /*#__PURE__*/_jsx("span", {}, void 0, label));
|
|
12
|
+
};
|
|
10
13
|
|
|
11
14
|
export { Label as default };
|
|
@@ -2,8 +2,7 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
|
2
2
|
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
3
3
|
import { useState, useEffect } from 'react';
|
|
4
4
|
import moment from 'moment';
|
|
5
|
-
import DSInputMask, { MASK_TYPES, MASK_PIPES } from '@elliemae/ds-
|
|
6
|
-
import DSInputGroup from '@elliemae/ds-basic/form/InputGroup';
|
|
5
|
+
import DSInputMask, { DSInputGroup, MASK_TYPES, MASK_PIPES } from '@elliemae/ds-form';
|
|
7
6
|
import { aggregatedClasses } from '@elliemae/ds-classnames';
|
|
8
7
|
|
|
9
8
|
const blockname = 'date-range-picker';
|
|
@@ -15,14 +14,15 @@ const formatDate = date => {
|
|
|
15
14
|
}
|
|
16
15
|
};
|
|
17
16
|
|
|
18
|
-
const DatePickerRangeHeader =
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
17
|
+
const DatePickerRangeHeader = _ref => {
|
|
18
|
+
let {
|
|
19
|
+
placeholderStart = 'Start Date',
|
|
20
|
+
placeholderEnd = 'End Date',
|
|
21
|
+
onStartInputChange = () => null,
|
|
22
|
+
onEndInputChange = () => null,
|
|
23
|
+
selectedStartDate,
|
|
24
|
+
selectedEndDate
|
|
25
|
+
} = _ref;
|
|
26
26
|
const [startValue, setStartValue] = useState(selectedStartDate ? formatDate(selectedStartDate) : '');
|
|
27
27
|
const [endValue, setEndValue] = useState(selectedEndDate ? formatDate(selectedEndDate) : '');
|
|
28
28
|
useEffect(() => {
|
|
@@ -2,10 +2,15 @@ import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
|
2
2
|
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
3
3
|
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
|
|
4
4
|
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
5
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
6
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
7
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
8
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
9
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
5
10
|
import { useRef, useEffect } from 'react';
|
|
6
11
|
import { DayPickerRangeController as DayPickerRangeController$1 } from 'react-dates';
|
|
7
12
|
import { DatePickerNavigation, DatePickerDay, renderMonthElement } from '@elliemae/ds-date-picker';
|
|
8
|
-
import ChevronLeft from '@elliemae/ds-icons
|
|
13
|
+
import { ChevronLeft } from '@elliemae/ds-icons';
|
|
9
14
|
import { convertPropToCssClassName } from '@elliemae/ds-classnames';
|
|
10
15
|
import { jsx } from 'react/jsx-runtime';
|
|
11
16
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-date-range-picker",
|
|
3
|
-
"version": "2.0.0-
|
|
3
|
+
"version": "2.0.0-rc.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Date Range Picker",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -56,13 +56,14 @@
|
|
|
56
56
|
"build": "node ../../scripts/build/build.js"
|
|
57
57
|
},
|
|
58
58
|
"dependencies": {
|
|
59
|
-
"@elliemae/ds-basic": "2.0.0-
|
|
60
|
-
"@elliemae/ds-classnames": "2.0.0-
|
|
61
|
-
"@elliemae/ds-date-picker": "2.0.0-
|
|
59
|
+
"@elliemae/ds-basic": "2.0.0-rc.2",
|
|
60
|
+
"@elliemae/ds-classnames": "2.0.0-rc.2",
|
|
61
|
+
"@elliemae/ds-date-picker": "2.0.0-rc.2",
|
|
62
|
+
"@elliemae/ds-icons": "2.0.0-rc.2",
|
|
62
63
|
"moment": "~2.29.1",
|
|
63
64
|
"prop-types": "~15.7.2",
|
|
64
65
|
"react-dates": "~21.8.0",
|
|
65
|
-
"react-
|
|
66
|
+
"react-desc": "~4.1.3"
|
|
66
67
|
},
|
|
67
68
|
"peerDependencies": {
|
|
68
69
|
"lodash": "^4.17.21",
|