intelicoreact 0.0.66 → 0.0.74

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 (82) hide show
  1. package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.js +6 -2
  2. package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.scss +91 -60
  3. package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.stories.js +2 -1
  4. package/dist/Atomic/FormElements/Dropdown/Dropdown.js +48 -17
  5. package/dist/Atomic/FormElements/Dropdown/Dropdown.scss +21 -3
  6. package/dist/Atomic/FormElements/Dropdown/Dropdown.stories.js +22 -6
  7. package/dist/Atomic/FormElements/InputDateRange/InputDateRange.js +24 -43
  8. package/dist/Atomic/FormElements/InputDateRange/InputDateRange.scss +98 -73
  9. package/dist/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +3 -156
  10. package/dist/Atomic/FormElements/InputDateRange/components/Datepicker.js +11 -9
  11. package/dist/Atomic/FormElements/InputDateRange/components/SelectItem.js +3 -3
  12. package/dist/Atomic/FormElements/InputDateRange/dependencies.js +7 -7
  13. package/dist/Atomic/FormElements/Table/Table.scss +1 -1
  14. package/dist/Atomic/FormElements/Textarea/Textarea.scss +1 -1
  15. package/dist/Atomic/MainMenu/MainMenu.scss +2 -2
  16. package/dist/Atomic/UI/Accordion/Accordion.scss +2 -2
  17. package/dist/Atomic/UI/Arrow/Arrow.js +7 -8
  18. package/dist/Atomic/UI/Calendar/Calendar.js +3 -2
  19. package/dist/Atomic/UI/Calendar/Calendar.stories.js +3 -2
  20. package/dist/Atomic/UI/Status/Status.scss +1 -1
  21. package/dist/Molecular/Datepicker/Datepicker.js +451 -0
  22. package/dist/Molecular/Datepicker/Datepicker.scss +8 -0
  23. package/dist/Molecular/Datepicker/Datepicker.stories.js +44 -0
  24. package/dist/Molecular/Datepicker/components/Calendar.js +156 -0
  25. package/dist/scss/_vars.scss +3 -1
  26. package/dist/scss/main.scss +1 -1
  27. package/package.json +6 -4
  28. package/src/Atomic/FormElements/CheckboxInput/CheckboxInput.js +12 -2
  29. package/src/Atomic/FormElements/CheckboxInput/CheckboxInput.scss +91 -60
  30. package/src/Atomic/FormElements/CheckboxInput/CheckboxInput.stories.js +4 -3
  31. package/src/Atomic/FormElements/Dropdown/Dropdown.js +53 -19
  32. package/src/Atomic/FormElements/Dropdown/Dropdown.scss +21 -3
  33. package/src/Atomic/FormElements/Dropdown/Dropdown.stories.js +28 -15
  34. package/src/Atomic/FormElements/InputDateRange/InputDateRange.js +191 -213
  35. package/src/Atomic/FormElements/InputDateRange/InputDateRange.scss +98 -73
  36. package/src/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +35 -123
  37. package/src/Atomic/FormElements/InputDateRange/components/Datepicker.js +10 -7
  38. package/src/Atomic/FormElements/InputDateRange/components/OpenedPart.js +2 -2
  39. package/src/Atomic/FormElements/InputDateRange/components/SelectItem.js +1 -1
  40. package/src/Atomic/FormElements/InputDateRange/dependencies.js +6 -6
  41. package/src/Atomic/FormElements/Table/Table.scss +1 -1
  42. package/src/Atomic/FormElements/Textarea/Textarea.scss +1 -1
  43. package/src/Atomic/MainMenu/MainMenu.scss +2 -2
  44. package/src/Atomic/UI/Accordion/Accordion.scss +2 -2
  45. package/src/Atomic/UI/Arrow/Arrow.js +5 -5
  46. package/src/Atomic/UI/Calendar/Calendar.js +2 -2
  47. package/src/Atomic/UI/Calendar/Calendar.stories.js +2 -1
  48. package/src/Atomic/UI/Status/Status.scss +1 -1
  49. package/src/Molecular/Datepicker/Datepicker.js +346 -0
  50. package/src/Molecular/Datepicker/Datepicker.scss +8 -0
  51. package/src/Molecular/Datepicker/Datepicker.stories.js +27 -0
  52. package/src/Molecular/Datepicker/components/Calendar.js +118 -0
  53. package/src/scss/_vars.scss +3 -1
  54. package/src/scss/main.scss +1 -1
  55. package/dist/scss/anme/_anme-bootstrap-grid.scss +0 -748
  56. package/dist/scss/anme/_anme-elements.scss +0 -269
  57. package/dist/scss/anme/_anme-grid.scss +0 -111
  58. package/dist/scss/anme/_anme-justify.scss +0 -111
  59. package/dist/scss/anme/_anme-mixins-media.scss +0 -116
  60. package/dist/scss/anme/_anme-mixins.scss +0 -166
  61. package/dist/scss/anme/_anme-normalize.scss +0 -8
  62. package/dist/scss/anme/_anme-overall.scss +0 -34
  63. package/dist/scss/anme/_anme-padding-margins.scss +0 -419
  64. package/dist/scss/anme/_anme-table.scss +0 -81
  65. package/dist/scss/anme/_anme-theme.scss +0 -275
  66. package/dist/scss/anme/_anme-vars.scss +0 -91
  67. package/dist/scss/anme/_code-styling.scss +0 -23
  68. package/dist/scss/anme/styles.scss +0 -12
  69. package/src/scss/anme/_anme-bootstrap-grid.scss +0 -748
  70. package/src/scss/anme/_anme-elements.scss +0 -269
  71. package/src/scss/anme/_anme-grid.scss +0 -111
  72. package/src/scss/anme/_anme-justify.scss +0 -111
  73. package/src/scss/anme/_anme-mixins-media.scss +0 -116
  74. package/src/scss/anme/_anme-mixins.scss +0 -166
  75. package/src/scss/anme/_anme-normalize.scss +0 -8
  76. package/src/scss/anme/_anme-overall.scss +0 -34
  77. package/src/scss/anme/_anme-padding-margins.scss +0 -419
  78. package/src/scss/anme/_anme-table.scss +0 -81
  79. package/src/scss/anme/_anme-theme.scss +0 -275
  80. package/src/scss/anme/_anme-vars.scss +0 -91
  81. package/src/scss/anme/_code-styling.scss +0 -23
  82. package/src/scss/anme/styles.scss +0 -12
@@ -1,5 +1,5 @@
1
- @import "../../scss/anme/anme-vars";
2
- @import "../../scss/anme/anme-mixins";
1
+ @import "~anme/scss/anme-vars";
2
+ @import "~anme/scss/anme-mixins";
3
3
 
4
4
  .main-menu {
5
5
  display: flex;
@@ -1,5 +1,5 @@
1
- @import '../../../scss/anme/anme-vars';
2
- @import '../../../scss/anme/anme-mixins';
1
+ @import '~anme/scss/anme-vars';
2
+ @import '~anme/scss/anme-mixins';
3
3
 
4
4
  .accordion {
5
5
  &--item {
@@ -37,8 +37,7 @@ var Arrow = function Arrow(_ref) {
37
37
  setColor = _useState2[1];
38
38
 
39
39
  (0, _react.useEffect)(function () {
40
- if (ref.current) {
41
- setColor((0, _utils.getStyles)(ref.current, 'color'));
40
+ if (ref.current) {//setColor(getStyles(ref.current, 'color'));
42
41
  }
43
42
 
44
43
  ;
@@ -58,9 +57,9 @@ var Arrow = function Arrow(_ref) {
58
57
  }, /*#__PURE__*/_react.default.createElement("path", {
59
58
  d: "M15 18L9 12L15 6",
60
59
  stroke: color,
61
- "stroke-width": "2",
62
- "stroke-linecap": "round",
63
- "stroke-linejoin": "round"
60
+ strokeWidth: "2",
61
+ strokeLinecap: "round",
62
+ strokeLinejoin: "round"
64
63
  })) : /*#__PURE__*/_react.default.createElement("svg", {
65
64
  width: "24",
66
65
  height: "24",
@@ -70,9 +69,9 @@ var Arrow = function Arrow(_ref) {
70
69
  }, /*#__PURE__*/_react.default.createElement("path", {
71
70
  d: "M9 18L15 12L9 6",
72
71
  stroke: color,
73
- "stroke-width": "2",
74
- "stroke-linecap": "round",
75
- "stroke-linejoin": "round"
72
+ strokeWidth: "2",
73
+ strokeLinecap: "round",
74
+ strokeLinejoin: "round"
76
75
  })));
77
76
  };
78
77
 
@@ -34,7 +34,8 @@ function _default(props) {
34
34
  allowPrev = _props$allowPrev === void 0 ? true : _props$allowPrev,
35
35
  _props$allowNext = props.allowNext,
36
36
  allowNext = _props$allowNext === void 0 ? true : _props$allowNext,
37
- params = props.params;
37
+ params = props.params,
38
+ className = props.className;
38
39
  var minDate = params.minDate,
39
40
  maxDate = params.maxDate;
40
41
 
@@ -112,7 +113,7 @@ function _default(props) {
112
113
  };
113
114
 
114
115
  return /*#__PURE__*/_react.default.createElement("div", {
115
- className: "calendar"
116
+ className: "calendar ".concat(className)
116
117
  }, /*#__PURE__*/_react.default.createElement("div", {
117
118
  className: "calendar-header"
118
119
  }, /*#__PURE__*/_react.default.createElement("div", {
@@ -13,7 +13,7 @@ var _Calendar = _interopRequireDefault(require("./Calendar"));
13
13
 
14
14
  global.lng = 'en';
15
15
  var _default = {
16
- title: 'UI/Calendar',
16
+ title: 'Calendar',
17
17
  component: _Calendar.default
18
18
  };
19
19
  exports.default = _default;
@@ -33,5 +33,6 @@ CalendarTemplate.args = {
33
33
  params: {},
34
34
  setDate: function setDate() {
35
35
  return null;
36
- }
36
+ },
37
+ className: ''
37
38
  };
@@ -1,4 +1,4 @@
1
- @import "../../../scss/anme/anme-vars";
1
+ @import "~anme/scss/anme-vars";
2
2
 
3
3
  .status {
4
4
  display: inline-flex;
@@ -0,0 +1,451 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
6
+
7
+ Object.defineProperty(exports, "__esModule", {
8
+ value: true
9
+ });
10
+ exports.default = void 0;
11
+
12
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
13
+
14
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
+
16
+ var _react = _interopRequireWildcard(require("react"));
17
+
18
+ var _useClickOutside = require("../../Functions/useClickOutside");
19
+
20
+ var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
21
+
22
+ var _moment = _interopRequireDefault(require("moment"));
23
+
24
+ var _classnames = _interopRequireDefault(require("classnames"));
25
+
26
+ var _Langs = _interopRequireDefault(require("../../../../Langs"));
27
+
28
+ var _Button = _interopRequireDefault(require("../../Atomic/UI/Button/Button"));
29
+
30
+ var _Calendar = _interopRequireDefault(require("./components/Calendar"));
31
+
32
+ require("./Datepicker.scss");
33
+
34
+ var _Switcher = _interopRequireDefault(require("../../Atomic/FormElements/Switcher/Switcher"));
35
+
36
+ var _Dropdown = _interopRequireDefault(require("../../Atomic/FormElements/Dropdown/Dropdown"));
37
+
38
+ var _Input = _interopRequireDefault(require("../../Atomic/FormElements/Input/Input"));
39
+
40
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
41
+
42
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
43
+
44
+ var padTime = function padTime(time) {
45
+ return "".concat(time.toString().padStart(2, '0'), ":00");
46
+ };
47
+
48
+ var Datepicker = function Datepicker(props) {
49
+ var _props$values = props.values,
50
+ values = _props$values === void 0 ? {} : _props$values,
51
+ onChange = props.onChange,
52
+ onChangeCompare = props.onChangeCompare,
53
+ onCancel = props.onCancel,
54
+ _props$getSelectedMod = props.getSelectedMode,
55
+ getSelectedMode = _props$getSelectedMod === void 0 ? function () {} : _props$getSelectedMod,
56
+ onChangeInterval = props.onChangeInterval,
57
+ isCompareHidden = props.isCompareHidden,
58
+ limitRange = props.limitRange;
59
+ var _values$start = values.start,
60
+ start = _values$start === void 0 ? null : _values$start,
61
+ _values$end = values.end,
62
+ end = _values$end === void 0 ? null : _values$end,
63
+ _values$compare = values.compare,
64
+ compare = _values$compare === void 0 ? false : _values$compare;
65
+ var txt = _Langs.default[global.lng];
66
+ var startDateInputRef = (0, _react.useRef)(null);
67
+ var endDateInputRef = (0, _react.useRef)(null);
68
+
69
+ var _useState = (0, _react.useState)(start),
70
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
71
+ startDate = _useState2[0],
72
+ setStartDate = _useState2[1];
73
+
74
+ var _useState3 = (0, _react.useState)(end),
75
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
76
+ endDate = _useState4[0],
77
+ setEndDate = _useState4[1];
78
+
79
+ var dateInterval = getSelectedMode({
80
+ start: startDate,
81
+ end: endDate
82
+ });
83
+
84
+ var _useState5 = (0, _react.useState)(start),
85
+ _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
86
+ startDateInput = _useState6[0],
87
+ setStartDateInput = _useState6[1];
88
+
89
+ var _useState7 = (0, _react.useState)(end),
90
+ _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
91
+ endDateInput = _useState8[0],
92
+ setEndDateInput = _useState8[1];
93
+
94
+ var _useState9 = (0, _react.useState)(start ? (0, _moment.default)(start).hour() : 0),
95
+ _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
96
+ startHour = _useState10[0],
97
+ setStartHour = _useState10[1];
98
+
99
+ var _useState11 = (0, _react.useState)(end ? (0, _moment.default)(end).hour() : 0),
100
+ _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
101
+ endHour = _useState12[0],
102
+ setEndHour = _useState12[1]; // eslint-disable-next-line no-unused-vars
103
+
104
+
105
+ var _useState13 = (0, _react.useState)(compare),
106
+ _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
107
+ isCompare = _useState14[0],
108
+ setIsCompare = _useState14[1];
109
+
110
+ var _useState15 = (0, _react.useState)(start ? (0, _moment.default)(start).toDate() : (0, _moment.default)().subtract(1, 'month').toDate()),
111
+ _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
112
+ date1 = _useState16[0],
113
+ setDate1 = _useState16[1];
114
+
115
+ var _useState17 = (0, _react.useState)(end ? (0, _moment.default)(end).toDate() : (0, _moment.default)().toDate()),
116
+ _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
117
+ date2 = _useState18[0],
118
+ setDate2 = _useState18[1];
119
+
120
+ var _useState19 = (0, _react.useState)(false),
121
+ _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
122
+ isStartFocused = _useState20[0],
123
+ setIsStartFocused = _useState20[1];
124
+
125
+ var _useState21 = (0, _react.useState)(false),
126
+ _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
127
+ isEndFocused = _useState22[0],
128
+ setIsEndFocused = _useState22[1];
129
+
130
+ var _useState23 = (0, _react.useState)(null),
131
+ _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
132
+ hoverStatus = _useState24[0],
133
+ setHoverStatus = _useState24[1];
134
+
135
+ var isNearby = (0, _react.useMemo)(function () {
136
+ return (0, _moment.default)(date2).subtract(1, 'month').isSame((0, _moment.default)(date1), 'month');
137
+ }, [date1, date2]);
138
+ var isPreviousPeriodShowed = (0, _react.useMemo)(function () {
139
+ return isCompare && !isCompareHidden && startDate && endDate;
140
+ }, [startDate, endDate, isCompare]);
141
+ var prevEndHour = (0, _react.useRef)(endHour);
142
+
143
+ var getStartHourItems = function getStartHourItems() {
144
+ return (0, _toConsumableArray2.default)(Array(24).keys()).map(function (hour) {
145
+ return {
146
+ label: padTime(hour),
147
+ value: hour,
148
+ disabled: (0, _moment.default)(startDate).isSame(endDate, 'day') && endHour <= hour
149
+ };
150
+ });
151
+ };
152
+
153
+ var getEndHourItems = function getEndHourItems() {
154
+ return (0, _toConsumableArray2.default)(Array(24).keys()).map(function (hour) {
155
+ return {
156
+ label: padTime(hour + 1),
157
+ value: hour === 23 ? 0 : hour + 1,
158
+ disabled: ((0, _moment.default)(startDate).isSame(endDate, 'day') || (0, _moment.default)(startDate).isSame((0, _moment.default)(endDate).subtract(1, 'days'), 'day') && endHour === 0) && hour < startHour
159
+ };
160
+ });
161
+ };
162
+
163
+ var startPrevDate = (0, _react.useMemo)(function () {
164
+ if (isPreviousPeriodShowed) {
165
+ var intervalHoursCount = (0, _moment.default)(endDate).diff(startDate, 'hours');
166
+ return (0, _moment.default)(startDate).subtract(intervalHoursCount, 'hours').toDate();
167
+ } else return null;
168
+ }, [startDate, endDate, isCompare]);
169
+ var endPrevDate = (0, _react.useMemo)(function () {
170
+ if (isPreviousPeriodShowed) {
171
+ return startDate;
172
+ } else return null;
173
+ }, [startDate, endDate, isCompare]);
174
+ var title = (0, _react.useMemo)(function () {
175
+ if (isCompare && !isCompareHidden && startDate && endDate) {
176
+ return "".concat((0, _moment.default)(startPrevDate).format('ll'), " (").concat((0, _moment.default)(startPrevDate).format('HH:mm'), ") - ").concat((0, _moment.default)(endPrevDate).format('ll'), " (").concat((0, _moment.default)(endPrevDate).format('HH:mm'), ")");
177
+ } else return '';
178
+ }, [startDate, endDate, isCompare]);
179
+
180
+ var subtractDay = function subtractDay(date) {
181
+ return endHour === 0 ? (0, _moment.default)(date).subtract(1, 'days') : date;
182
+ };
183
+
184
+ var addDay = function addDay(date) {
185
+ return endHour === 0 ? (0, _moment.default)(date).add(1, 'days') : date;
186
+ };
187
+
188
+ (0, _react.useEffect)(function () {
189
+ if ((0, _moment.default)(startDate).isSameOrAfter(endDate)) {
190
+ setStartDate((0, _moment.default)(endDate).subtract(1, 'd').toDate());
191
+ setDate1((0, _moment.default)(endDate).subtract(1, 'd'));
192
+ }
193
+ }, [startDate]);
194
+ (0, _react.useEffect)(function () {
195
+ if ((0, _moment.default)(endDate).isSameOrBefore(startDate)) {
196
+ setEndDate((0, _moment.default)(startDate).add(1, 'd').toDate());
197
+ setDate2((0, _moment.default)(startDate).add(1, 'd'));
198
+ }
199
+ }, [endDate]);
200
+ (0, _react.useEffect)(function () {
201
+ setStartDateInput(startDate);
202
+ setEndDateInput(endDate);
203
+
204
+ if ((0, _moment.default)(startDate).isBefore((0, _moment.default)(endDate), 'month')) {
205
+ setDate1((0, _moment.default)(startDate));
206
+ setDate2((0, _moment.default)(endDate));
207
+ }
208
+ }, [startDate, endDate]);
209
+ (0, _react.useEffect)(function () {
210
+ if ((0, _moment.default)(date1).isSameOrAfter((0, _moment.default)(date2), 'month')) {
211
+ setDate1((0, _moment.default)(date2).subtract(1, 'month'));
212
+ }
213
+ }, [date1, date2]);
214
+ (0, _react.useEffect)(function () {
215
+ onChangeInterval(dateInterval);
216
+ }, [dateInterval]);
217
+
218
+ var handleClick = function handleClick(date) {
219
+ prevEndHour.current = 0;
220
+
221
+ if (!startDate || startDate && endDate && !((0, _moment.default)(startDate).add(1, 'd').isSame(endDate, 'day') && endHour === 0)) {
222
+ setStartDate((0, _moment.default)(date).startOf('day').toDate());
223
+ setEndDate((0, _moment.default)(date).add(1, 'd').startOf('day').toDate());
224
+ setStartHour(0);
225
+ setEndHour(0);
226
+ } else if ((0, _moment.default)(date).isBefore((0, _moment.default)(startDate), 'day')) {
227
+ setEndDate((0, _moment.default)(startDate).add(1, 'd').startOf('day').toDate());
228
+ setStartDate((0, _moment.default)(date).set('hour', parseInt(startHour, 10)).toDate());
229
+ } else if ((0, _moment.default)(date).isAfter((0, _moment.default)(startDate), 'day')) {
230
+ setEndDate((0, _moment.default)(date).add(1, 'd').startOf('day').toDate());
231
+ }
232
+
233
+ setHoverStatus(null);
234
+ };
235
+
236
+ var timerId;
237
+
238
+ var handleHover = function handleHover(date) {
239
+ if (!date) {
240
+ timerId = setTimeout(function () {
241
+ setHoverStatus(null);
242
+ }, 400);
243
+ return;
244
+ }
245
+
246
+ if (timerId) clearTimeout(timerId);
247
+
248
+ if ((0, _moment.default)(startDate).add(1, 'd').isSame(endDate, 'day') && endHour === 0) {
249
+ if ((0, _moment.default)(date).isAfter((0, _moment.default)(startDate), 'day')) setHoverStatus('end');else if ((0, _moment.default)(date).isBefore((0, _moment.default)(startDate), 'day')) setHoverStatus('start');else setHoverStatus(null);
250
+ } else {
251
+ setHoverStatus('start');
252
+ }
253
+ };
254
+
255
+ var handleChangeStartHour = function handleChangeStartHour(_ref) {
256
+ var val = _ref.target.value;
257
+ setStartHour(+val);
258
+ setStartDate((0, _moment.default)(startDate).set('hour', +val).toDate());
259
+ };
260
+
261
+ var handleChangeEndHour = function handleChangeEndHour(_ref2) {
262
+ var val = _ref2.target.value;
263
+ var newHour = +val;
264
+ setEndHour(newHour);
265
+ var newEndDate;
266
+
267
+ if (prevEndHour.current === 0 && newHour !== 0) {
268
+ newEndDate = (0, _moment.default)(endDate).subtract(1, 'days');
269
+ } else if (prevEndHour.current !== 0 && newHour === 0) {
270
+ newEndDate = (0, _moment.default)(endDate).add(1, 'days');
271
+ } else {
272
+ newEndDate = endDate;
273
+ }
274
+
275
+ prevEndHour.current = newHour;
276
+ setEndDate((0, _moment.default)(newEndDate).set('hour', newHour).toDate());
277
+ };
278
+
279
+ var renderButtons = function renderButtons() {
280
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
281
+ className: "plr15 mr5",
282
+ onClick: function onClick() {
283
+ return onCancel();
284
+ }
285
+ }, txt.buttons.cancel), /*#__PURE__*/_react.default.createElement(_Button.default, {
286
+ className: "plr20",
287
+ type: "filled",
288
+ disabled: !startDate || !endDate,
289
+ onClick: function onClick() {
290
+ return onChange({
291
+ start: startDate,
292
+ end: endDate,
293
+ startPrevDate: startPrevDate,
294
+ endPrevDate: endPrevDate,
295
+ compare: isCompare
296
+ });
297
+ }
298
+ }, txt.buttons.apply));
299
+ };
300
+
301
+ var renderPreviousPeriod = function renderPreviousPeriod() {
302
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, txt.labels.previousPeriod, ": ", /*#__PURE__*/_react.default.createElement("span", {
303
+ className: "date-picker__previous-period-interval"
304
+ }, title));
305
+ };
306
+
307
+ var handleStartDateFocus = function handleStartDateFocus() {
308
+ setIsStartFocused(true);
309
+ setStartDateInput((0, _moment.default)(startDate).format('L'));
310
+ };
311
+
312
+ var handleStartDateBlur = function handleStartDateBlur() {
313
+ var newDate;
314
+
315
+ if ((0, _moment.default)(startDateInput).isValid()) {
316
+ newDate = (0, _moment.default)(startDateInput).set('hour', parseInt(startHour, 10)).toDate();
317
+ setStartDate(newDate);
318
+ } else {
319
+ newDate = startDate;
320
+ setStartDateInput(newDate);
321
+ }
322
+
323
+ setIsStartFocused(false);
324
+ startDateInputRef.current.blur();
325
+ setDate1((0, _moment.default)(newDate).isSameOrAfter((0, _moment.default)(date2), 'month') ? (0, _moment.default)(date2).subtract(1, 'month') : (0, _moment.default)(newDate));
326
+ };
327
+
328
+ var handleEndDateFocus = function handleEndDateFocus() {
329
+ setIsEndFocused(true);
330
+ setEndDateInput((0, _moment.default)(subtractDay(endDateInput)).format('L'));
331
+ };
332
+
333
+ var handleEndDateBlur = function handleEndDateBlur() {
334
+ var newDate;
335
+
336
+ if ((0, _moment.default)(endDateInput).isValid()) {
337
+ newDate = (0, _moment.default)(endDateInput).set('hour', parseInt(endHour, 10)).toDate();
338
+ setEndDate(addDay(newDate));
339
+ } else {
340
+ newDate = endDate;
341
+ setEndDateInput(newDate);
342
+ }
343
+
344
+ setIsEndFocused(false);
345
+ endDateInputRef.current.blur();
346
+ setDate2(newDate);
347
+ setEndDateInput();
348
+ };
349
+
350
+ var handleKeyPressed = function handleKeyPressed(e, handleDateBlur) {
351
+ if (e.key === 'Enter') handleDateBlur();
352
+ };
353
+
354
+ return /*#__PURE__*/_react.default.createElement("div", {
355
+ className: "date-picker"
356
+ }, /*#__PURE__*/_react.default.createElement("div", {
357
+ className: "date-picker__header"
358
+ }, /*#__PURE__*/_react.default.createElement(_Input.default, {
359
+ dataTest: "datepicker_start-date-input",
360
+ className: (0, _classnames.default)('mr5', {
361
+ 'date-picker-text-input--active': hoverStatus === 'start'
362
+ }),
363
+ value: isStartFocused ? startDateInput : (0, _moment.default)(startDate).format('ll'),
364
+ disabled: !startDate,
365
+ onChange: function onChange(e) {
366
+ return setStartDateInput(e.target.value);
367
+ },
368
+ onFocus: handleStartDateFocus,
369
+ onBlur: handleStartDateBlur,
370
+ onKeyPress: function onKeyPress(e) {
371
+ return handleKeyPressed(e, handleStartDateBlur);
372
+ },
373
+ ref: startDateInputRef
374
+ }), /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
375
+ dataTest: "datepicker_start-hour-select-input",
376
+ onChange: handleChangeStartHour,
377
+ value: startHour,
378
+ items: getStartHourItems(),
379
+ disabled: !startDate,
380
+ short: true
381
+ }), /*#__PURE__*/_react.default.createElement("div", {
382
+ className: "pl5 pr5 date-picker__header--gray"
383
+ }, "\u2014"), /*#__PURE__*/_react.default.createElement(_Input.default, {
384
+ dataTest: "datepicker_end-date-input",
385
+ className: (0, _classnames.default)('mr5', {
386
+ 'date-picker-text-input--active': hoverStatus === 'end'
387
+ }),
388
+ value: isEndFocused ? endDateInput : (0, _moment.default)(subtractDay(endDate)).format('ll'),
389
+ disabled: !endDate,
390
+ onChange: function onChange(e) {
391
+ return setEndDateInput(e.target.value);
392
+ },
393
+ onFocus: handleEndDateFocus,
394
+ onBlur: handleEndDateBlur,
395
+ onKeyPress: function onKeyPress(e) {
396
+ return handleKeyPressed(e, handleEndDateBlur);
397
+ },
398
+ ref: endDateInputRef
399
+ }), /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
400
+ dataTest: "datepicker_end-hour-select-input",
401
+ onChange: handleChangeEndHour,
402
+ value: endHour,
403
+ items: getEndHourItems(),
404
+ disabled: !endDate,
405
+ short: true
406
+ })), /*#__PURE__*/_react.default.createElement("div", {
407
+ className: "date-picker__previous-period"
408
+ }, isCompare && !isCompareHidden && startDate && endDate && renderPreviousPeriod()), /*#__PURE__*/_react.default.createElement("div", {
409
+ className: "date-picker__calendars"
410
+ }, /*#__PURE__*/_react.default.createElement(_Calendar.default, {
411
+ date: date1,
412
+ setDate: setDate1,
413
+ allowNext: !isNearby,
414
+ startDate: startDate,
415
+ endDate: endDate,
416
+ startPrevDate: startPrevDate,
417
+ endPrevDate: endPrevDate,
418
+ onClick: handleClick,
419
+ onHover: handleHover,
420
+ limitRange: limitRange
421
+ }), /*#__PURE__*/_react.default.createElement(_Calendar.default, {
422
+ date: date2,
423
+ setDate: setDate2,
424
+ allowPrev: !isNearby,
425
+ startDate: startDate,
426
+ endDate: endDate,
427
+ startPrevDate: startPrevDate,
428
+ endPrevDate: endPrevDate,
429
+ onClick: handleClick,
430
+ onHover: handleHover
431
+ })), /*#__PURE__*/_react.default.createElement("div", {
432
+ className: "date-picker__footer j46"
433
+ }, !isCompareHidden ? /*#__PURE__*/_react.default.createElement("div", {
434
+ className: "j4"
435
+ }, /*#__PURE__*/_react.default.createElement("div", {
436
+ className: "mr5"
437
+ }, /*#__PURE__*/_react.default.createElement(_Switcher.default, {
438
+ dataTest: "datepicker_compare",
439
+ label: txt.labels.compare,
440
+ isSwitchOn: isCompare,
441
+ onChange: function onChange() {
442
+ onChangeCompare(!isCompare);
443
+ setIsCompare(function (state) {
444
+ return !state;
445
+ });
446
+ }
447
+ }))) : /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", null, renderButtons())));
448
+ };
449
+
450
+ var _default = Datepicker;
451
+ exports.default = _default;
@@ -0,0 +1,8 @@
1
+ .test {
2
+ width: 380px;
3
+ }
4
+
5
+ .testing {
6
+ border: none;
7
+ box-shadow: none;
8
+ }
@@ -0,0 +1,44 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
6
+
7
+ Object.defineProperty(exports, "__esModule", {
8
+ value: true
9
+ });
10
+ exports.DatepickerTemplate = void 0;
11
+
12
+ var _react = _interopRequireWildcard(require("react"));
13
+
14
+ var _yup = require("yup");
15
+
16
+ var _Datepicker = _interopRequireDefault(require("./Datepicker"));
17
+
18
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
19
+
20
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
21
+
22
+ global.lng = 'en'; // export default {
23
+ // title: 'Form Elements/Datepicker',
24
+ // component: Datepicker,
25
+ // };
26
+
27
+ var Template = function Template(args) {
28
+ var params = {
29
+ minDate: args === null || args === void 0 ? void 0 : args.minDate,
30
+ maxDate: args === null || args === void 0 ? void 0 : args.maxDate
31
+ };
32
+ return /*#__PURE__*/_react.default.createElement(_Datepicker.default, {
33
+ data: args.date,
34
+ params: params
35
+ });
36
+ };
37
+
38
+ var DatepickerTemplate = Template.bind({});
39
+ exports.DatepickerTemplate = DatepickerTemplate;
40
+ DatepickerTemplate.args = {
41
+ date: '10/14/2021',
42
+ minDate: '10/11/2021',
43
+ maxDate: '10/25/2021'
44
+ };