@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,57 +0,0 @@
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';
6
- import _jsx from '@babel/runtime/helpers/esm/jsx';
7
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
8
- import 'react';
9
- import { convertPropToCssClassName } from '@elliemae/ds-classnames';
10
- import DSPopper from '@elliemae/ds-popper';
11
- import { Picker } from './DatePickerPicker/DatePickerPicker.js';
12
- import { jsx } from 'react/jsx-runtime';
13
-
14
- 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; }
15
-
16
- 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(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; }
17
- const {
18
- classNameElement
19
- } = convertPropToCssClassName('datepicker-range');
20
-
21
- const noop = () => null;
22
-
23
- function DatePickerDropdown(_ref) {
24
- let {
25
- disabled = false,
26
- readOnly,
27
- onClick = noop,
28
- isOpen,
29
- menu,
30
- zIndex = 1,
31
- pickerProps,
32
- pickerRef
33
- } = _ref;
34
- return /*#__PURE__*/_jsx(DSPopper, {
35
- contentComponent: menu,
36
- isOpen: isOpen,
37
- modifiers: {
38
- preventOverflow: {
39
- enabled: true,
40
- padding: 0,
41
- boundariesElement: 'window'
42
- }
43
- },
44
- showArrow: false,
45
- triggerComponent: /*#__PURE__*/_jsx("div", {}, void 0, /*#__PURE__*/jsx(Picker, _objectSpread(_objectSpread({
46
- innerRef: pickerRef
47
- }, pickerProps), {}, {
48
- className: classNameElement('picker'),
49
- disabled: disabled,
50
- onClick: onClick,
51
- readOnly: readOnly
52
- }))),
53
- zIndex: zIndex
54
- });
55
- }
56
-
57
- export { DatePickerDropdown as default };
@@ -1,49 +0,0 @@
1
- import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import 'core-js/modules/web.dom-collections.iterator.js';
3
- import { useState, useEffect } from 'react';
4
- import moment from 'moment';
5
- import { DSInputGroup, DSDateInputV2 } from '@elliemae/ds-form';
6
- import { aggregatedClasses } from '@elliemae/ds-classnames';
7
-
8
- const DATE_FORMAT = 'MMDDYYYY';
9
- const blockname = 'date-picker-header';
10
- const Header = aggregatedClasses('div')(blockname);
11
-
12
- const isFn = variable => typeof variable === 'function';
13
-
14
- const DatePickerHeader = _ref => {
15
- let {
16
- onInputChange = () => null,
17
- selectedDate,
18
- updateKeyDate
19
- } = _ref;
20
- const [value, setValue] = useState(isFn(selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.format) ? selectedDate.format(DATE_FORMAT) : '');
21
- useEffect(() => {
22
- if (isFn(selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.format)) {
23
- setValue(selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.format(DATE_FORMAT));
24
- }
25
- }, [selectedDate]);
26
-
27
- const handleOnChange = newDate => {
28
- setValue(newDate);
29
- };
30
-
31
- const handleOnKeyDown = e => {
32
- if (e.key === 'Enter' && value.length === DATE_FORMAT.length) {
33
- const momentValue = moment(value, DATE_FORMAT);
34
- onInputChange(momentValue);
35
- updateKeyDate(momentValue);
36
- }
37
- };
38
-
39
- return /*#__PURE__*/_jsx(Header, {}, void 0, /*#__PURE__*/_jsx(DSInputGroup, {}, void 0, /*#__PURE__*/_jsx(DSDateInputV2, {
40
- onChange: handleOnChange,
41
- onKeyDown: handleOnKeyDown,
42
- value: value,
43
- containerProps: {
44
- 'data-testid': 'start-date'
45
- }
46
- })));
47
- };
48
-
49
- export { DatePickerHeader as default };
@@ -1,25 +0,0 @@
1
- import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import 'react';
3
- import ChevronRight from '@elliemae/ds-icons/ChevronRight';
4
- import { DSIconColors, DSIconSizes } from '@elliemae/ds-basic/Icon';
5
-
6
- const Navigation = _ref => {
7
- let {
8
- className = 'date-picker-navigation',
9
- icon: Icon = ChevronRight,
10
- color = DSIconColors.NEUTRAL,
11
- size = DSIconSizes.S,
12
- innerRef
13
- } = _ref;
14
- return /*#__PURE__*/_jsx("div", {
15
- tabIndex: 0,
16
- "data-testid": "date-picker-nav"
17
- }, void 0, /*#__PURE__*/_jsx(Icon, {
18
- className: className,
19
- color: color,
20
- innerRef: innerRef,
21
- size: size
22
- }));
23
- };
24
-
25
- export { Navigation as default };
@@ -1,60 +0,0 @@
1
- import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
3
- import 'react';
4
- import PropTypes from 'prop-types';
5
- import { DSIconSizes, DSIconColors } from '@elliemae/ds-basic/Icon';
6
- import DatePicker from '@elliemae/ds-icons/DatePicker';
7
- import DSButton, { buttonTypes } from '@elliemae/ds-button';
8
- import { iconSizes } from '@elliemae/ds-shared/prop-types';
9
-
10
- var _DatePicker;
11
-
12
- const _excluded = ["className", "disabled", "icon", "size", "buttonActionType", "onClick", "onBlur", "readOnly", "tabIndex", "innerRef"];
13
- const Picker = _ref => {
14
- let {
15
- className = 'date-picker-icon',
16
- disabled = false,
17
- icon = _DatePicker || (_DatePicker = /*#__PURE__*/_jsx(DatePicker, {})),
18
- size = DSIconSizes.M,
19
- buttonActionType = 'secondary',
20
- onClick = () => null,
21
- onBlur = () => null,
22
- readOnly = false,
23
- tabIndex = 0,
24
- innerRef
25
- } = _ref,
26
- rest = _objectWithoutProperties(_ref, _excluded);
27
-
28
- return /*#__PURE__*/_jsx(DSButton, {
29
- innerRef: innerRef,
30
- "aria-label": rest['aria-label'] || 'Date Picker Button',
31
- buttonType: buttonActionType,
32
- className: className,
33
- color: !disabled ? DSIconColors.PRIMARY : DSIconColors.NEUTRAL,
34
- disabled: disabled,
35
- icon: icon,
36
- onBlur: onBlur,
37
- onClick: onClick,
38
- readOnly: readOnly,
39
- size: size,
40
- tabIndex: tabIndex,
41
- "data-testid": "btn-date-picker"
42
- });
43
- };
44
- const PickerPropsTypes = {
45
- innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
46
- current: PropTypes.any
47
- })]),
48
- className: PropTypes.string,
49
- disabled: PropTypes.bool,
50
- icon: PropTypes.element,
51
- size: PropTypes.oneOf(iconSizes),
52
- buttonActionType: PropTypes.oneOf(buttonTypes),
53
- onClick: PropTypes.func,
54
- onFocus: PropTypes.func,
55
- onBlur: PropTypes.func,
56
- readOnly: PropTypes.bool,
57
- tabIndex: PropTypes.number
58
- };
59
-
60
- export { Picker, PickerPropsTypes, Picker as default };
@@ -1,111 +0,0 @@
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';
6
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
7
- import _jsx from '@babel/runtime/helpers/esm/jsx';
8
- import 'core-js/modules/web.dom-collections.iterator.js';
9
- import { useState, useRef } from 'react';
10
- import { DayPickerRangeController } from 'react-dates';
11
- import moment from 'moment';
12
- import { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';
13
- import { ChevronLeft } from '@elliemae/ds-icons';
14
- import Day from '../DatePickerDay/DatePickerDay.js';
15
- import Navigation from '../DatePickerNavigation/DatePickerNavigation.js';
16
- import DatePickerRangeHeader from '../DatePickerRangeHeader/DatePickerRangeHeader.js';
17
- import { jsx } from 'react/jsx-runtime';
18
-
19
- 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; }
20
-
21
- 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(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; }
22
- const blockname = 'date-range';
23
- const Wrapper = aggregatedClasses('div')(blockname, 'wrapper');
24
- const {
25
- classNameElement,
26
- classNameBlock
27
- } = convertPropToCssClassName('datepicker');
28
- const START_DATE = 'startDate';
29
- const END_DATE = 'endDate';
30
-
31
- const DatePickerRangeDate = _ref => {
32
- let {
33
- dateStart,
34
- dateEnd,
35
- displayFormatDay = 'D',
36
- showHeader = true,
37
- otherProps
38
- } = _ref;
39
- const [selectedDateStart, setSelectedDateStart] = useState(dateStart);
40
- const [selectedDateEnd, setSelectedDateEnd] = useState(dateEnd);
41
- const [focusedInput, setFocusedInput] = useState(START_DATE);
42
- const datePickerRef = useRef();
43
-
44
- const handleFocusChange = () => {
45
- setFocusedInput(focusedInput === START_DATE ? END_DATE : START_DATE);
46
- };
47
-
48
- const handleDatesChange = _ref2 => {
49
- let {
50
- startDate,
51
- endDate
52
- } = _ref2;
53
- setSelectedDateStart(startDate);
54
- setSelectedDateEnd(endDate);
55
- };
56
-
57
- const handleStartInputChange = newDate => {
58
- setSelectedDateStart(newDate);
59
- };
60
-
61
- const handleEndInputChange = newDate => {
62
- setSelectedDateEnd(newDate);
63
- };
64
-
65
- const getSafeDateStartValue = () => {
66
- if (selectedDateStart) {
67
- return moment(selectedDateStart);
68
- }
69
- };
70
-
71
- const getSafeDateEndValue = () => {
72
- if (selectedDateEnd) {
73
- return moment(selectedDateEnd);
74
- }
75
- };
76
-
77
- const safeStartDate = getSafeDateStartValue();
78
- const safeEndDate = getSafeDateEndValue();
79
- return /*#__PURE__*/_jsx(Wrapper, {}, void 0, showHeader && /*#__PURE__*/_jsx(DatePickerRangeHeader, {
80
- onEndInputChange: handleEndInputChange,
81
- onStartInputChange: handleStartInputChange,
82
- selectedEndDate: safeEndDate,
83
- selectedStartDate: safeStartDate
84
- }), /*#__PURE__*/jsx("div", {
85
- ref: datePickerRef,
86
- className: classNameBlock('wrapper-day-picker-single-date-controller'),
87
- children: /*#__PURE__*/jsx(DayPickerRangeController, _objectSpread(_objectSpread({}, otherProps), {}, {
88
- enableOutsideDays: true,
89
- endDate: safeEndDate,
90
- focused: true,
91
- focusedInput: focusedInput,
92
- hideKeyboardShortcutsPanel: true,
93
- navNext: /*#__PURE__*/_jsx(Navigation, {
94
- className: classNameElement('navigation-next')
95
- }),
96
- navPrev: /*#__PURE__*/_jsx(Navigation, {
97
- className: classNameElement('navigation-prev'),
98
- icon: ChevronLeft
99
- }),
100
- onDatesChange: handleDatesChange,
101
- onFocusChange: handleFocusChange,
102
- renderDayContents: date => /*#__PURE__*/_jsx(Day, {
103
- className: classNameElement('day-contents'),
104
- date: date.format(displayFormatDay)
105
- }),
106
- startDate: safeStartDate
107
- }))
108
- }));
109
- };
110
-
111
- export { DatePickerRangeDate as default };
@@ -1,137 +0,0 @@
1
- import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import 'core-js/modules/web.dom-collections.iterator.js';
3
- import { useState, useRef, useEffect } from 'react';
4
- import moment from 'moment';
5
- import { DSInputGroup, DSDateInputV2 } from '@elliemae/ds-form';
6
- import { aggregatedClasses } from '@elliemae/ds-classnames';
7
-
8
- const blockname = 'date-range-picker';
9
- const DATE_FORMAT = 'MMDDYYYY'; // When year is greater than 999 it means the user finished writing
10
- // the year for the range, because they must type 4 numbers for the year
11
- // to be higher than 999
12
-
13
- const MAGIC_NUMBER = 999;
14
- const Header = aggregatedClasses('div')(blockname, 'header', _ref => {
15
- let {
16
- invalidDate
17
- } = _ref;
18
- return {
19
- invalidDate
20
- };
21
- });
22
-
23
- const DatePickerRangeHeader = _ref2 => {
24
- let {
25
- onStartInputChange = () => null,
26
- onEndInputChange = () => null,
27
- onFocusChange = () => null,
28
- selectedStartDate,
29
- selectedEndDate,
30
- handleDatesChange,
31
- autoJumpOnEdit = true
32
- } = _ref2;
33
- const [startValue, setStartValue] = useState(selectedStartDate);
34
- const [endValue, setEndValue] = useState(selectedEndDate);
35
- const startInputRef = useRef();
36
- const endInputRef = useRef();
37
- useEffect(() => {
38
- if (selectedStartDate) {
39
- setStartValue(selectedStartDate.format(DATE_FORMAT));
40
- }
41
-
42
- if (selectedEndDate) {
43
- setEndValue(selectedEndDate.format(DATE_FORMAT));
44
- }
45
- }, [selectedStartDate, selectedEndDate]);
46
-
47
- const isValidRangeDate = (start, end) => {
48
- let isValidRange = false;
49
-
50
- if (start && end) {
51
- const momentStart = moment(start, DATE_FORMAT);
52
- const momentEnd = moment(end, DATE_FORMAT);
53
- isValidRange = momentStart.isBefore(momentEnd);
54
- }
55
-
56
- return isValidRange;
57
- };
58
-
59
- const handleOnFocus = inputType => onFocusChange(inputType);
60
-
61
- const handleOnChangeStart = newStartValue => {
62
- var _endInputRef$current, _endInputRef$current$;
63
-
64
- const y = newStartValue.substring(4);
65
- const momentValue = moment(newStartValue, DATE_FORMAT);
66
-
67
- if (newStartValue && newStartValue.length === DATE_FORMAT.length) {
68
- onStartInputChange(momentValue);
69
- }
70
-
71
- setStartValue(newStartValue);
72
-
73
- if (autoJumpOnEdit && parseInt(y, 10) > MAGIC_NUMBER && endInputRef !== null && endInputRef !== void 0 && (_endInputRef$current = endInputRef.current) !== null && _endInputRef$current !== void 0 && (_endInputRef$current$ = _endInputRef$current.firstChild) !== null && _endInputRef$current$ !== void 0 && _endInputRef$current$.focus) {
74
- endInputRef.current.firstChild.focus();
75
- }
76
- };
77
-
78
- const handleOnChangeEnd = newEndValue => {
79
- const momentValue = moment(newEndValue, DATE_FORMAT);
80
-
81
- if (isValidRangeDate(startValue, newEndValue) && newEndValue && newEndValue.length === DATE_FORMAT.length) {
82
- onEndInputChange(momentValue);
83
- }
84
-
85
- setEndValue(newEndValue);
86
- };
87
-
88
- const handleOnKeyDownStart = e => {
89
- const isValid = isValidRangeDate(startValue, endValue);
90
- const momentStart = moment(startValue, DATE_FORMAT);
91
- const momentEnd = moment(endValue, DATE_FORMAT);
92
-
93
- if (e.key === 'Enter' && startValue) {
94
- onStartInputChange(momentStart);
95
- if (isValid) handleDatesChange({
96
- startDate: momentStart,
97
- endDate: momentEnd
98
- });
99
- }
100
- };
101
-
102
- const handleOnKeyDownEnd = e => {
103
- const isValid = isValidRangeDate(startValue, endValue);
104
- const momentStart = moment(startValue, DATE_FORMAT);
105
- const momentEnd = moment(endValue, DATE_FORMAT);
106
-
107
- if (e.key === 'Enter' && isValid) {
108
- handleDatesChange({
109
- startDate: momentStart,
110
- endDate: momentEnd
111
- });
112
- onEndInputChange(momentEnd);
113
- }
114
- };
115
-
116
- return /*#__PURE__*/_jsx(Header, {}, void 0, /*#__PURE__*/_jsx(DSInputGroup, {}, void 0, /*#__PURE__*/_jsx(DSDateInputV2, {
117
- containerProps: {
118
- 'data-testid': 'start-date'
119
- },
120
- innerRef: startInputRef,
121
- onChange: handleOnChangeStart,
122
- onFocus: () => handleOnFocus('startDate'),
123
- onKeyDown: handleOnKeyDownStart,
124
- value: startValue
125
- }), /*#__PURE__*/_jsx(DSDateInputV2, {
126
- containerProps: {
127
- 'data-testid': 'end-date'
128
- },
129
- innerRef: endInputRef,
130
- onChange: handleOnChangeEnd,
131
- onFocus: () => handleOnFocus('endDate'),
132
- onKeyDown: handleOnKeyDownEnd,
133
- value: endValue
134
- })));
135
- };
136
-
137
- export { DatePickerRangeHeader as default };
@@ -1,38 +0,0 @@
1
- import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import 'react';
3
- import { ChevronDoubleLeft, ChevronDoubleRight } from '@elliemae/ds-icons';
4
- import { Grid } from '@elliemae/ds-grid';
5
-
6
- var _ChevronDoubleLeft, _ChevronDoubleRight;
7
- const renderMonthElement = _ref => {
8
- let {
9
- month,
10
- onYearSelect
11
- } = _ref;
12
- return /*#__PURE__*/_jsx(Grid, {
13
- height: "20px",
14
- cols: ['auto', 1, 'auto'],
15
- alignItems: "flex-end",
16
- mr: "10px"
17
- }, void 0, /*#__PURE__*/_jsx("div", {}, void 0, /*#__PURE__*/_jsx("div", {
18
- role: "button",
19
- tabIndex: "0",
20
- "data-testid": "date-picker-prev-year-arrow",
21
- onClick: () => onYearSelect(month, month.year() - 1)
22
- }, void 0, _ChevronDoubleLeft || (_ChevronDoubleLeft = /*#__PURE__*/_jsx(ChevronDoubleLeft, {
23
- width: 13.6,
24
- height: 13.6
25
- })))), /*#__PURE__*/_jsx(Grid, {
26
- "data-testid": "date-picker-header"
27
- }, void 0, /*#__PURE__*/_jsx("strong", {}, void 0, month.format('MMMM YYYY'))), /*#__PURE__*/_jsx("div", {}, void 0, /*#__PURE__*/_jsx("div", {
28
- role: "button",
29
- tabIndex: "0",
30
- "data-testid": "date-picker-next-year-arrow",
31
- onClick: () => onYearSelect(month, month.year() + 1)
32
- }, void 0, _ChevronDoubleRight || (_ChevronDoubleRight = /*#__PURE__*/_jsx(ChevronDoubleRight, {
33
- width: 13.6,
34
- height: 13.6
35
- })))));
36
- };
37
-
38
- export { renderMonthElement };
@@ -1,77 +0,0 @@
1
- import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
3
- import 'core-js/modules/web.dom-collections.iterator.js';
4
- import { useState, useRef } from 'react';
5
- import { DayPickerSingleDateController } from 'react-dates';
6
- import moment from 'moment';
7
- import { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';
8
- import { ChevronLeft } from '@elliemae/ds-icons';
9
- import Day from '../DatePickerDay/DatePickerDay.js';
10
- import Navigation from '../DatePickerNavigation/DatePickerNavigation.js';
11
- import DatePickerHeader from '../DatePickerHeader/DatePickerHeader.js';
12
- import { jsx } from 'react/jsx-runtime';
13
-
14
- const _excluded = ["date", "displayFormatDay", "isDayHighlighted", "enableOutsideDays", "showHeader", "onChange"];
15
- const blockname = 'single-date';
16
- const Wrapper = aggregatedClasses('div')(blockname, 'wrapper');
17
- const {
18
- classNameElement,
19
- classNameBlock
20
- } = convertPropToCssClassName('datepicker');
21
-
22
- const DatePickerSingleDate = _ref => {
23
- let {
24
- date,
25
- displayFormatDay = 'D',
26
- isDayHighlighted = () => false,
27
- enableOutsideDays = true,
28
- showHeader = true,
29
- onChange = () => null
30
- } = _ref,
31
- rest = _objectWithoutProperties(_ref, _excluded);
32
-
33
- const [selectedDate, setSelectedDate] = useState(date);
34
- const [key, setKey] = useState(moment());
35
- const datePickerRef = useRef();
36
-
37
- const updateKeyDate = newDate => {
38
- setKey(newDate);
39
- };
40
-
41
- const handleDateChange = newDate => {
42
- setSelectedDate(newDate);
43
- setTimeout(() => onChange(newDate), 500);
44
- };
45
-
46
- return /*#__PURE__*/_jsx(Wrapper, {}, void 0, showHeader && /*#__PURE__*/_jsx(DatePickerHeader, {
47
- onInputChange: handleDateChange,
48
- selectedDate: selectedDate,
49
- updateKeyDate: updateKeyDate
50
- }), /*#__PURE__*/jsx("div", {
51
- ref: datePickerRef,
52
- className: classNameBlock('wrapper-day-picker-single-date-controller'),
53
- "data-testid": rest['data-testid'] || 'date-picker-single-date',
54
- children: /*#__PURE__*/_jsx(DayPickerSingleDateController, {
55
- date: selectedDate,
56
- enableOutsideDays: enableOutsideDays,
57
- focused: true,
58
- hideKeyboardShortcutsPanel: true,
59
- isDayHighlighted: isDayHighlighted,
60
- keepOpenOnDateSelect: true,
61
- navNext: /*#__PURE__*/_jsx(Navigation, {
62
- className: classNameElement('navigation-next')
63
- }),
64
- navPrev: /*#__PURE__*/_jsx(Navigation, {
65
- className: classNameElement('navigation-prev'),
66
- icon: ChevronLeft
67
- }),
68
- onDateChange: handleDateChange,
69
- renderDayContents: givenDate => /*#__PURE__*/_jsx(Day, {
70
- className: classNameElement('day-contents'),
71
- date: givenDate.format(displayFormatDay)
72
- })
73
- }, key)
74
- }));
75
- };
76
-
77
- export { DatePickerSingleDate as default };
@@ -1,53 +0,0 @@
1
- import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import 'react';
3
- import { DSCheckbox } from '@elliemae/ds-form';
4
- import { aggregatedClasses } from '@elliemae/ds-classnames';
5
- import DatePickerRangeHeader from '../DatePickerRangeHeader/DatePickerRangeHeader.js';
6
- import DatePickerHeader from '../DatePickerHeader/DatePickerHeader.js';
7
-
8
- const blockname = 'date-switcher';
9
- const Header = aggregatedClasses('div')(blockname, 'header');
10
-
11
- const SingleRangeDateSwitcher = _ref => {
12
- let {
13
- onStartInputChange,
14
- onEndInputChange,
15
- onSingleInputChange,
16
- onFocusChange,
17
- selectedStartDate,
18
- selectedEndDate,
19
- selectedSingleDate,
20
- isDateRange,
21
- setIsDateRange,
22
- handleDatesChange,
23
- updateKeyDate,
24
- focusedInput
25
- } = _ref;
26
-
27
- const SingleDateInput = /*#__PURE__*/_jsx(DatePickerHeader, {
28
- onInputChange: onSingleInputChange,
29
- selectedDate: selectedSingleDate,
30
- updateKeyDate: updateKeyDate
31
- });
32
-
33
- const DateRangeInput = /*#__PURE__*/_jsx(DatePickerRangeHeader, {
34
- focusedInput: focusedInput,
35
- onFocusChange: onFocusChange,
36
- onEndInputChange: onEndInputChange,
37
- onStartInputChange: onStartInputChange,
38
- selectedEndDate: selectedEndDate,
39
- selectedStartDate: selectedStartDate,
40
- handleDatesChange: handleDatesChange
41
- });
42
-
43
- return /*#__PURE__*/_jsx(Header, {
44
- "data-testid": "date-switch-header"
45
- }, void 0, /*#__PURE__*/_jsx(DSCheckbox, {
46
- checked: isDateRange,
47
- className: "switch-header__checkbox",
48
- labelText: "Range",
49
- onChange: setIsDateRange
50
- }), isDateRange ? DateRangeInput : SingleDateInput);
51
- };
52
-
53
- export { SingleRangeDateSwitcher as default };
@@ -1,10 +0,0 @@
1
- export { default as DatePickerNavigation } from './DatePickerNavigation/DatePickerNavigation.js';
2
- export { default as DatePickerDay } from './DatePickerDay/DatePickerDay.js';
3
- export { Picker as DatePickerPicker } from './DatePickerPicker/DatePickerPicker.js';
4
- export { default as DatePickerDropdown } from './DatePickerDropdown.js';
5
- export { default as DatePickerSingleDate } from './DatePickerSingleDate/DatePickerSingleDate.js';
6
- export { default as DatePickerHeader } from './DatePickerHeader/DatePickerHeader.js';
7
- export { default as DatePickerRange } from './DatePickerRange/DatePickerRange.js';
8
- export { default as DatePickerRangeHeader } from './DatePickerRangeHeader/DatePickerRangeHeader.js';
9
- export { default as SingleRangeDateSwitcher } from './SingleRangeDateSwitcher/SingleRangeDateSwitcher.js';
10
- export { renderMonthElement } from './DatePickerRenderMonth/DatePickerRenderMonth.js';
package/esm/index.js DELETED
@@ -1,13 +0,0 @@
1
- export { DatePickerWithSchema, default } from './DSDatePicker.js';
2
- export { SingleDatePickerPhrases } from './defaultPhrases.js';
3
- export { default as DatePickerNavigation } from './components/DatePickerNavigation/DatePickerNavigation.js';
4
- export { default as DatePickerDay } from './components/DatePickerDay/DatePickerDay.js';
5
- export { Picker as DatePickerPicker, Picker } from './components/DatePickerPicker/DatePickerPicker.js';
6
- export { default as DSDatePickerController } from './components/DatePickerController/DatePickerController.js';
7
- export { default as DatePickerDropdown } from './components/DatePickerDropdown.js';
8
- export { default as DatePickerSingleDate } from './components/DatePickerSingleDate/DatePickerSingleDate.js';
9
- export { default as DatePickerHeader } from './components/DatePickerHeader/DatePickerHeader.js';
10
- export { default as DatePickerRange } from './components/DatePickerRange/DatePickerRange.js';
11
- export { default as DatePickerRangeHeader } from './components/DatePickerRangeHeader/DatePickerRangeHeader.js';
12
- export { default as SingleRangeDateSwitcher } from './components/SingleRangeDateSwitcher/SingleRangeDateSwitcher.js';
13
- export { renderMonthElement } from './components/DatePickerRenderMonth/DatePickerRenderMonth.js';
@@ -1,20 +0,0 @@
1
- import React from 'react';
2
- export default class DSdatePickerImpl extends React.Component {
3
- constructor(props: any);
4
- static getDerivedStateFromProps(nextProps: any, prevState: any): {} | null;
5
- onClickPicker: () => void;
6
- getSafeValue: () => any;
7
- getSafeInputValue: () => any;
8
- isControlled: () => boolean;
9
- handleDateChange: (date: any, event: any) => void;
10
- handleInputChange: (dataInput: any, newDate: any) => void;
11
- handleChange: (newDate: any) => void;
12
- handleFocus: ({ focused }: {
13
- focused: any;
14
- }) => void;
15
- handleCalendarClose: () => void;
16
- handleClickEscape: () => void;
17
- handleOnBlur: () => void;
18
- handleInputFocus: (dataInput: any) => void;
19
- render(): JSX.Element;
20
- }