intelicoreact 0.0.85 → 0.0.91

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 (33) hide show
  1. package/dist/Atomic/FormElements/Dropdown/Dropdown.js +43 -19
  2. package/dist/Atomic/FormElements/Dropdown/Dropdown.scss +6 -0
  3. package/dist/Atomic/FormElements/Dropdown/Dropdown.stories.js +34 -7
  4. package/dist/Atomic/FormElements/Dropdown/components/DropdownLoader.js +23 -0
  5. package/dist/Atomic/FormElements/Dropdown/components/Loader.scss +57 -0
  6. package/dist/Atomic/FormElements/Input/Input.js +30 -10
  7. package/dist/Atomic/FormElements/InputCalendar/InputCalendar.js +7 -1
  8. package/dist/Atomic/FormElements/InputCalendar/InputCalendar.stories.js +21 -20
  9. package/dist/Atomic/FormElements/InputDateRange/InputDateRange.js +8 -2
  10. package/dist/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +2 -0
  11. package/dist/Atomic/FormElements/InputDateRange/components/Datepicker.js +35 -20
  12. package/dist/Atomic/FormElements/InputDateRange/components/OpenedPart.js +8 -2
  13. package/dist/Atomic/FormElements/InputDateRange/dependencies.js +1 -1
  14. package/dist/Atomic/FormElements/NumericInput/NumericInput.js +1 -0
  15. package/dist/Atomic/UI/Calendar/Calendar.js +1 -1
  16. package/dist/Atomic/UI/Calendar/Calendar.scss +7 -0
  17. package/package.json +1 -2
  18. package/src/Atomic/FormElements/Dropdown/Dropdown.js +66 -35
  19. package/src/Atomic/FormElements/Dropdown/Dropdown.scss +6 -0
  20. package/src/Atomic/FormElements/Dropdown/Dropdown.stories.js +22 -8
  21. package/src/Atomic/FormElements/Dropdown/components/DropdownLoader.js +17 -0
  22. package/src/Atomic/FormElements/Dropdown/components/Loader.scss +57 -0
  23. package/src/Atomic/FormElements/Input/Input.js +46 -33
  24. package/src/Atomic/FormElements/InputCalendar/InputCalendar.js +9 -1
  25. package/src/Atomic/FormElements/InputCalendar/InputCalendar.stories.js +14 -10
  26. package/src/Atomic/FormElements/InputDateRange/InputDateRange.js +5 -0
  27. package/src/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +2 -0
  28. package/src/Atomic/FormElements/InputDateRange/components/Datepicker.js +41 -20
  29. package/src/Atomic/FormElements/InputDateRange/components/OpenedPart.js +5 -1
  30. package/src/Atomic/FormElements/InputDateRange/dependencies.js +1 -1
  31. package/src/Atomic/FormElements/NumericInput/NumericInput.js +1 -0
  32. package/src/Atomic/UI/Calendar/Calendar.js +1 -1
  33. package/src/Atomic/UI/Calendar/Calendar.scss +7 -0
@@ -2,13 +2,15 @@
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
4
 
5
- var _typeof = require("@babel/runtime/helpers/typeof");
5
+ var _typeof3 = require("@babel/runtime/helpers/typeof");
6
6
 
7
7
  Object.defineProperty(exports, "__esModule", {
8
8
  value: true
9
9
  });
10
10
  exports.default = void 0;
11
11
 
12
+ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
13
+
12
14
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
13
15
 
14
16
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -21,11 +23,13 @@ var _classnames = _interopRequireDefault(require("classnames"));
21
23
 
22
24
  var _reactFeather = require("react-feather");
23
25
 
26
+ var _DropdownLoader = _interopRequireDefault(require("./components/DropdownLoader"));
27
+
24
28
  require("./Dropdown.scss");
25
29
 
26
30
  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); }
27
31
 
28
- 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; }
32
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(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; }
29
33
 
30
34
  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; }
31
35
 
@@ -34,29 +38,32 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
34
38
  var RC = 'dropdown';
35
39
 
36
40
  var Dropdown = function Dropdown(_ref) {
37
- var _options$find, _filteredOptions$find;
41
+ var _options$find;
38
42
 
39
43
  var _ref$options = _ref.options,
40
44
  options = _ref$options === void 0 ? [] : _ref$options,
41
45
  value = _ref.value,
42
46
  error = _ref.error,
47
+ disabled = _ref.disabled,
43
48
  onChange = _ref.onChange,
44
49
  placeholder = _ref.placeholder,
45
50
  className = _ref.className,
46
51
  isSearchable = _ref.isSearchable,
47
- entity = _ref.entity;
52
+ entity = _ref.entity,
53
+ scrollReactionObj = _ref.scrollReactionObj;
48
54
 
49
55
  var _useState = (0, _react.useState)(false),
50
56
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
51
57
  isOpen = _useState2[0],
52
58
  setIsOpen = _useState2[1];
53
59
 
54
- var _useState3 = (0, _react.useState)(''),
60
+ var _useState3 = (0, _react.useState)(),
55
61
  _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
56
62
  searchValue = _useState4[0],
57
63
  setSearchValue = _useState4[1];
58
64
 
59
65
  var dropdownRef = (0, _react.useRef)(null);
66
+ var dropdownListRef = (0, _react.useRef)(null);
60
67
  if (!options) return null;
61
68
  var filteredGroups = options.filter(function (item) {
62
69
  var _item$items;
@@ -153,14 +160,6 @@ var Dropdown = function Dropdown(_ref) {
153
160
  })) : null;
154
161
  };
155
162
 
156
- (0, _react.useEffect)(function () {
157
- if (!value) setSearchValue(null);
158
- document.addEventListener('click', handleClickOutside, true);
159
- return function () {
160
- return document.removeEventListener('click', handleClickOutside, true);
161
- };
162
- }, [value]);
163
-
164
163
  var filteredOptionList = function filteredOptionList(filteredOption) {
165
164
  var _filteredOption$items;
166
165
 
@@ -183,8 +182,34 @@ var Dropdown = function Dropdown(_ref) {
183
182
  return el.value === value;
184
183
  })) === null || _item$items4$find === void 0 ? void 0 : _item$items4$find.label);
185
184
  }, null);
185
+ var doScrollCallback = (0, _react.useCallback)(function (e) {
186
+ var callback = scrollReactionObj.callback,
187
+ isWithAnyScrolling = scrollReactionObj.isWithAnyScrolling;
188
+
189
+ if (callback && typeof callback === 'function') {
190
+ if (isWithAnyScrolling) callback(e);else if (e.target.clientHeight + e.target.scrollTop >= e.target.scrollHeight) callback(e);
191
+ }
192
+ }, [filteredOptions]);
193
+ (0, _react.useEffect)(function () {
194
+ if (!value) setSearchValue(null);
195
+ document.addEventListener('click', handleClickOutside, true);
196
+ return function () {
197
+ return document.removeEventListener('click', handleClickOutside, true);
198
+ };
199
+ }, [value]);
200
+ (0, _react.useEffect)(function () {
201
+ if (scrollReactionObj && (0, _typeof2.default)(scrollReactionObj) === 'object' && isOpen && dropdownListRef && dropdownListRef.current) {
202
+ dropdownListRef.current.addEventListener('scroll', doScrollCallback);
203
+ }
204
+
205
+ return function () {
206
+ if (scrollReactionObj && (0, _typeof2.default)(scrollReactionObj) === 'object') removeEventListener('scroll', doScrollCallback);
207
+ };
208
+ }, [isOpen, dropdownListRef]);
186
209
  return /*#__PURE__*/_react.default.createElement("div", {
187
- className: (0, _classnames.default)(RC, className),
210
+ className: (0, _classnames.default)(RC, className, {
211
+ disabled: disabled
212
+ }),
188
213
  ref: dropdownRef
189
214
  }, /*#__PURE__*/_react.default.createElement("button", {
190
215
  className: "".concat(RC, "__trigger input__wrap ").concat(!value ? 'placeholder' : '', " ").concat(error ? 'error' : ''),
@@ -193,9 +218,7 @@ var Dropdown = function Dropdown(_ref) {
193
218
  }
194
219
  }, isSearchable ? /*#__PURE__*/_react.default.createElement("input", {
195
220
  className: "".concat(RC, "__input"),
196
- value: searchValue || ((_filteredOptions$find = filteredOptions.find(function (el) {
197
- return el.value === value;
198
- })) === null || _filteredOptions$find === void 0 ? void 0 : _filteredOptions$find.label) || '',
221
+ value: searchValue || selectedLabel || '',
199
222
  onChange: function onChange(e) {
200
223
  onSearchHandler(e.target.value);
201
224
  },
@@ -212,12 +235,13 @@ var Dropdown = function Dropdown(_ref) {
212
235
  return setIsOpen(!isOpen);
213
236
  }
214
237
  }, isOpen ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, null) : /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, null))), isOpen && filteredOptions.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
215
- className: "".concat(RC, "__list")
238
+ className: "".concat(RC, "__list"),
239
+ ref: dropdownListRef
216
240
  }, depend.options.map(function (filteredOption) {
217
241
  var _filteredOption$items2;
218
242
 
219
243
  return (_filteredOption$items2 = filteredOption.items) !== null && _filteredOption$items2 !== void 0 && _filteredOption$items2.length ? filteredOptionList(filteredOption) : getMarkupForElement(filteredOption);
220
- })));
244
+ }), disabled && isOpen && /*#__PURE__*/_react.default.createElement(_DropdownLoader.default, null)));
221
245
  };
222
246
 
223
247
  var _default = Dropdown;
@@ -45,6 +45,7 @@
45
45
  }
46
46
 
47
47
  &__list {
48
+ position: relative;
48
49
  background: #ffffff;
49
50
  border: 1px solid #e2e5ec;
50
51
  box-shadow: 0 5px 20px rgb(0 0 0 / 15%);
@@ -177,4 +178,9 @@
177
178
  font-size: 10px;
178
179
  color: $color--secondary;
179
180
  }
181
+
182
+ &.disabled {
183
+ pointer-events: none;
184
+ opacity: 0.5;
185
+ }
180
186
  }
@@ -44,32 +44,59 @@ var _default = {
44
44
  }
45
45
  };
46
46
  exports.default = _default;
47
+ var blockStyles = {
48
+ display: 'flex',
49
+ flexFlow: 'row no-wrap',
50
+ alignItems: 'center'
51
+ };
47
52
  var buttonStyles = {
48
53
  border: 'solid 1px #000',
49
- padding: '5px'
54
+ padding: '5px',
55
+ margin: '0 0 0 50px'
50
56
  };
51
57
 
52
58
  var Template = function Template(args) {
53
- var _useState = (0, _react.useState)(''),
59
+ var _useState = (0, _react.useState)(args.value),
54
60
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
55
61
  value = _useState2[0],
56
62
  setValue = _useState2[1];
57
63
 
58
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
64
+ var _useState3 = (0, _react.useState)(false),
65
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
66
+ disabled = _useState4[0],
67
+ setDisabled = _useState4[1];
68
+
69
+ return /*#__PURE__*/_react.default.createElement("div", {
70
+ style: blockStyles
71
+ }, /*#__PURE__*/_react.default.createElement("div", {
72
+ key: "dropdown",
59
73
  style: {
60
74
  width: 200
61
75
  }
62
76
  }, /*#__PURE__*/_react.default.createElement(_Dropdown.default, (0, _extends2.default)({}, args, {
63
77
  value: value,
64
- onChange: setValue
78
+ onChange: setValue,
79
+ disabled: disabled,
80
+ scrollReactionObj: {
81
+ callback: function callback(e) {
82
+ return setDisabled(true);
83
+ }
84
+ }
65
85
  }))), /*#__PURE__*/_react.default.createElement("button", {
86
+ key: "reset",
87
+ style: buttonStyles,
88
+ className: "mt10",
89
+ onClick: function onClick() {
90
+ return setValue('');
91
+ }
92
+ }, "Reset"), /*#__PURE__*/_react.default.createElement("button", {
93
+ key: "enable/disable",
66
94
  style: buttonStyles,
67
95
  className: "mt10",
68
96
  onClick: function onClick() {
69
- console.log('click!');
70
- setValue('');
97
+ return setDisabled(!disabled);
71
98
  }
72
- }, "Reset"));
99
+ }, disabled ? 'enable' : 'disable'));
73
100
  };
74
101
 
75
102
  var DropdownTemplate = Template.bind({});
@@ -0,0 +1,23 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = void 0;
9
+
10
+ var _react = _interopRequireDefault(require("react"));
11
+
12
+ require("./Loader.scss");
13
+
14
+ var DropdownLoader = function DropdownLoader() {
15
+ return /*#__PURE__*/_react.default.createElement("div", {
16
+ className: "dropdown-loader-box j5"
17
+ }, /*#__PURE__*/_react.default.createElement("div", {
18
+ className: "lds-ring".concat(variant === 'little' ? ' lds-ring_little' : '')
19
+ }, /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", null)));
20
+ };
21
+
22
+ var _default = DropdownLoader;
23
+ exports.default = _default;
@@ -0,0 +1,57 @@
1
+ @mixin fill-parent {
2
+ left: 0;
3
+ top: 0;
4
+ width: 100%;
5
+ height: 100%;
6
+ }
7
+
8
+ .dropdown-loader-box {
9
+ position: absolute;
10
+ @include fill-parent;
11
+ background: #fff;
12
+ opacity: 0.1;
13
+ z-index: 100;
14
+ }
15
+ .lds-ring {
16
+ display: inline-block;
17
+ position: relative;
18
+ width: 100px;
19
+ height: 100px;
20
+ }
21
+ .lds-ring.lds-ring_little {
22
+ width: 20px;
23
+ height: 20px;
24
+ }
25
+ .lds-ring div {
26
+ box-sizing: border-box;
27
+ display: block;
28
+ position: absolute;
29
+ width: 84px;
30
+ height: 84px;
31
+ margin: 8px;
32
+ border: 8px solid #000;
33
+ border-radius: 50%;
34
+ animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
35
+ border-color: #000 transparent transparent transparent;
36
+ }
37
+ .lds-ring_little div {
38
+ width: 20px;
39
+ height: 20px;
40
+ }
41
+ .lds-ring div:nth-child(1) {
42
+ animation-delay: -0.45s;
43
+ }
44
+ .lds-ring div:nth-child(2) {
45
+ animation-delay: -0.3s;
46
+ }
47
+ .lds-ring div:nth-child(3) {
48
+ animation-delay: -0.15s;
49
+ }
50
+ @keyframes lds-ring {
51
+ 0% {
52
+ transform: rotate(0deg);
53
+ }
54
+ 100% {
55
+ transform: rotate(360deg);
56
+ }
57
+ }
@@ -90,7 +90,8 @@ var Input = function Input(_ref) {
90
90
  onlyString = _inputExecutor.formatInput.onlyString;
91
91
  var _formatInput$priceInp = _inputExecutor.formatInput.priceInput,
92
92
  addCommas = _formatInput$priceInp.addCommas,
93
- removeComma = _formatInput$priceInp.removeComma; // HANDLES
93
+ removeComma = _formatInput$priceInp.removeComma;
94
+ var isUseErrorsBlink = !isNotBlinkErrors && !mask; // HANDLES
94
95
 
95
96
  var handle = {
96
97
  change: function change(e) {
@@ -129,18 +130,36 @@ var Input = function Input(_ref) {
129
130
  if (onBlur) onBlur(e);
130
131
  },
131
132
  keyUp: function keyUp(e) {
132
- if (!isNotBlinkErrors) {
133
+ if (isUseErrorsBlink) {
133
134
  var _previousValueRef$cur;
134
135
 
135
136
  var changedValue = '' + (value !== null && value !== void 0 ? value : '');
136
137
  var previousValue = '' + ((_previousValueRef$cur = previousValueRef.current) !== null && _previousValueRef$cur !== void 0 ? _previousValueRef$cur : '');
137
-
138
- var currentSet = function () {
139
- if (previousValue.length < changedValue.length) return value.slice(previousValue.length - changedValue.length);else return changedValue.includes(e.key) ? e.key : '';
140
- }();
141
-
142
- if (!_index.KEYBOARD_SERVICE_KEYS.includes(e.key) && changedValue === previousValue) setIsAttemptToChange(true);
143
- if (_index.KEYBOARD_SERVICE_KEYS.includes(e.key) || !currentSet) previousValueRef.current = value;else previousValueRef.current = previousValue + currentSet[0];
138
+ var short = previousValue.length <= changedValue.length ? previousValue : changedValue;
139
+ var long = previousValue.length > changedValue.length ? previousValue : changedValue;
140
+ var infoAboutDifferencesSameness = short.split('').reduce(function (acc, symbol, idx) {
141
+ if (acc.countOn && symbol === long[idx]) acc.same.push(symbol);else {
142
+ acc.countOn = false;
143
+ acc.differences.push([idx, symbol]);
144
+ }
145
+ return acc;
146
+ }, {
147
+ same: [],
148
+ countOn: true,
149
+ differences: []
150
+ });
151
+ var samePart = infoAboutDifferencesSameness.same.join('');
152
+ var differencesLength = infoAboutDifferencesSameness.differences.length;
153
+ var currentSet = changedValue.replace(samePart, '');
154
+
155
+ var getNext = function getNext(inputPartToAdd, correctedSamePart) {
156
+ var partToAdd = inputPartToAdd || currentSet;
157
+ var currentSamePart = correctedSamePart || samePart;
158
+ return changedValue.includes(e.key) && e.key !== changedValue[changedValue.length - 1] ? currentSamePart + (partToAdd[0] || '') : changedValue;
159
+ };
160
+
161
+ if (!_index.KEYBOARD_SERVICE_KEYS.includes(e.key) && changedValue === previousValue) setIsAttemptToChange(!(!differencesLength && e.key === changedValue[changedValue.length - 2]));
162
+ if (!previousValueRef.current || _index.KEYBOARD_SERVICE_KEYS.includes(e.key)) previousValueRef.current = getNext();else if (changedValue === samePart) previousValueRef.current = getNext(changedValue, changedValue.slice(0, -1));else previousValueRef.current = getNext();
144
163
  }
145
164
 
146
165
  if (onKeyUp) onKeyUp(e.keyCode, e);
@@ -185,7 +204,7 @@ var Input = function Input(_ref) {
185
204
  }
186
205
 
187
206
  (0, _react.useEffect)(function () {
188
- if (!isNotBlinkErrors && isAttemptToChange) {
207
+ if (isUseErrorsBlink && isAttemptToChange) {
189
208
  setIsAttemptToChange(null);
190
209
  setIsToHighlightError(true);
191
210
  setTimeout(function () {
@@ -195,6 +214,7 @@ var Input = function Input(_ref) {
195
214
  }, [isAttemptToChange]);
196
215
  (0, _react.useEffect)(function () {
197
216
  if (inputRef !== null && inputRef !== void 0 && inputRef.current && typeof isFocusDefault === 'boolean') setIsFocused(isFocusDefault);
217
+ setEditing(isFocusDefault);
198
218
  }, [inputRef, isFocusDefault]);
199
219
  return /*#__PURE__*/_react.default.createElement("div", {
200
220
  className: (0, _classnames.default)("input__wrap", (0, _defineProperty2.default)({}, "input__wrap_focus", isFocused), (0, _defineProperty2.default)({}, "input__wrap_error", error || isToHighlightError), (0, _defineProperty2.default)({}, "input__wrap_disabled", disabled))
@@ -55,6 +55,12 @@ var InputCalendar = function InputCalendar(_ref) {
55
55
  if (onChange) onChange(val);
56
56
  };
57
57
 
58
+ var getCalendarValue = function getCalendarValue(value) {
59
+ var date = (0, _moment.default)(value).format('L');
60
+ if (date !== "Invalid date") return date;
61
+ return (0, _moment.default)(new Date()).format('L');
62
+ };
63
+
58
64
  return /*#__PURE__*/_react.default.createElement("div", {
59
65
  className: "input__wrap calendar-container ".concat(className),
60
66
  ref: calendarRef
@@ -70,7 +76,7 @@ var InputCalendar = function InputCalendar(_ref) {
70
76
  return setIsOpened(!isOpened);
71
77
  }
72
78
  }), isOpened ? /*#__PURE__*/_react.default.createElement(_Calendar.default, {
73
- date: (0, _moment.default)(value).format('L'),
79
+ date: getCalendarValue(value),
74
80
  setDate: function setDate(newDate) {
75
81
  return changeCalendarDay(newDate);
76
82
  },
@@ -7,18 +7,14 @@ var _typeof = require("@babel/runtime/helpers/typeof");
7
7
  Object.defineProperty(exports, "__esModule", {
8
8
  value: true
9
9
  });
10
- exports.Calendar = exports.default = void 0;
10
+ exports.CalendarTemplate = exports.default = void 0;
11
11
 
12
12
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
13
13
 
14
14
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
15
 
16
- var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
17
-
18
16
  var _react = _interopRequireWildcard(require("react"));
19
17
 
20
- var _yup = require("yup");
21
-
22
18
  var _InputCalendar = _interopRequireDefault(require("./InputCalendar"));
23
19
 
24
20
  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); }
@@ -27,29 +23,34 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
27
23
 
28
24
  global.lng = 'en';
29
25
  var _default = {
30
- title: 'Form Elements/InputCalendar',
31
- component: _InputCalendar.default
26
+ title: 'Form Elements/Input Calendar',
27
+ component: _InputCalendar.default,
28
+ argTypes: {
29
+ value: {
30
+ description: 'string (mm.dd.yyyy)'
31
+ }
32
+ }
32
33
  };
33
34
  exports.default = _default;
34
35
 
35
- var _useState = (0, _react.useState)(''),
36
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
37
- date = _useState2[0],
38
- setDate = _useState2[1];
39
-
40
36
  var Template = function Template(args) {
37
+ var _useState = (0, _react.useState)(''),
38
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
39
+ date = _useState2[0],
40
+ setDate = _useState2[1];
41
+
41
42
  return /*#__PURE__*/_react.default.createElement(_InputCalendar.default, (0, _extends2.default)({}, args, {
42
- value: date
43
+ value: date,
44
+ onChange: function onChange(val) {
45
+ return setDate(val);
46
+ }
43
47
  }));
44
48
  };
45
49
 
46
- var Calendar = Template.bind({});
47
- exports.Calendar = Calendar;
48
- Calendar.args = {
50
+ var CalendarTemplate = Template.bind({});
51
+ exports.CalendarTemplate = CalendarTemplate;
52
+ CalendarTemplate.args = {
49
53
  value: '',
50
54
  minDate: '10/14/2020',
51
- maxDate: '10/14/2022',
52
- onChange: function onChange(val) {
53
- return setDate(val);
54
- }
55
+ maxDate: '10/14/2022'
55
56
  };
@@ -55,7 +55,11 @@ var InputDateRange = function InputDateRange(props) {
55
55
  _props$hideArrows = props.hideArrows,
56
56
  hideArrows = _props$hideArrows === void 0 ? false : _props$hideArrows,
57
57
  isOptionsRight = props.isOptionsRight,
58
- isUseAbs = props.isUseAbs;
58
+ isUseAbs = props.isUseAbs,
59
+ _props$minDate = props.minDate,
60
+ minDate = _props$minDate === void 0 ? null : _props$minDate,
61
+ _props$maxDate = props.maxDate,
62
+ maxDate = _props$maxDate === void 0 ? null : _props$maxDate;
59
63
  var actualValues = (0, _dependencies.getActualDateRange)(value);
60
64
 
61
65
  var _useToggle = (0, _dependencies.useToggle)(false),
@@ -223,7 +227,9 @@ var InputDateRange = function InputDateRange(props) {
223
227
  isCompare: isCompare,
224
228
  setIsCompare: setIsCompare,
225
229
  toggleOff: toggleOff,
226
- onChange: handleChange
230
+ onChange: handleChange,
231
+ minDate: minDate ? (0, _momentTimezone.default)(minDate) : null,
232
+ maxDate: maxDate ? (0, _momentTimezone.default)(maxDate) : null
227
233
  })))), error && /*#__PURE__*/_react.default.createElement("span", {
228
234
  className: "date-range-input__error-block"
229
235
  }, error));
@@ -77,6 +77,8 @@ InputDateRangeTemplate.args = {
77
77
  error: false,
78
78
  disabled: false,
79
79
  isHoverable: false,
80
+ minDate: "",
81
+ maxDate: "",
80
82
  // short: true,
81
83
  isCompact: false,
82
84
  // isFocused: true,
@@ -67,7 +67,11 @@ var Datepicker = function Datepicker(props) {
67
67
  limitRange = props.limitRange,
68
68
  handleItemClick = props.handleItemClick,
69
69
  setActiveInterval = props.setActiveInterval,
70
- isShortWeekNames = props.isShortWeekNames;
70
+ isShortWeekNames = props.isShortWeekNames,
71
+ _props$minDate = props.minDate,
72
+ minDate = _props$minDate === void 0 ? null : _props$minDate,
73
+ _props$maxDate = props.maxDate,
74
+ maxDate = _props$maxDate === void 0 ? null : _props$maxDate;
71
75
  var _values$start = values.start,
72
76
  start = _values$start === void 0 ? null : _values$start,
73
77
  _values$end = values.end,
@@ -275,20 +279,20 @@ var Datepicker = function Datepicker(props) {
275
279
 
276
280
  var handleChangeStartHour = function handleChangeStartHour(val) {
277
281
  setStartHour(+val);
278
- setStartDate((0, _momentTimezone.default)(startDate).set('hour', +val).toDate());
282
+ setStartDate((0, _momentTimezone.default)(startDate || (0, _momentTimezone.default)()).set('hour', +val).toDate());
279
283
  };
280
284
 
281
285
  var handleChangeEndHour = function handleChangeEndHour(val) {
282
286
  var newHour = +val;
283
287
  setEndHour(newHour);
284
- var newEndDate;
288
+ var newEndDate = (0, _momentTimezone.default)();
285
289
 
286
- if (prevEndHour.current === 0 && newHour !== 0) {
287
- newEndDate = (0, _momentTimezone.default)(endDate).subtract(1, 'days');
288
- } else if (prevEndHour.current !== 0 && newHour === 0) {
289
- newEndDate = (0, _momentTimezone.default)(endDate).add(1, 'days');
290
- } else {
291
- newEndDate = endDate;
290
+ if (endDate) {
291
+ if (prevEndHour.current === 0 && newHour !== 0) {
292
+ newEndDate = (0, _momentTimezone.default)(endDate).subtract(1, 'days');
293
+ } else if (prevEndHour.current !== 0 && newHour === 0) {
294
+ newEndDate = (0, _momentTimezone.default)(endDate).add(1, 'days');
295
+ }
292
296
  }
293
297
 
294
298
  prevEndHour.current = newHour;
@@ -343,14 +347,20 @@ var Datepicker = function Datepicker(props) {
343
347
  var handleStartDateBlur = function handleStartDateBlur(e) {
344
348
  var newDate;
345
349
 
346
- if ((0, _momentTimezone.default)(startDateInput).isValid()) {
347
- newDate = (0, _momentTimezone.default)(startDateInput).set('hour', parseInt(startHour, 10)).toDate();
348
- setStartDate(newDate);
349
- } else {
350
+ if (!(0, _momentTimezone.default)(startDateInput).isValid()) {
350
351
  newDate = startDate;
351
- setStartDateInput(newDate);
352
+ } else {
353
+ if (minDate && !(0, _momentTimezone.default)(startDateInput).isSameOrAfter(minDate)) {
354
+ newDate = minDate;
355
+ } else if (maxDate && !(0, _momentTimezone.default)(startDateInput).isSameOrBefore(maxDate)) {
356
+ newDate = maxDate;
357
+ } else {
358
+ newDate = (0, _momentTimezone.default)(startDateInput);
359
+ }
352
360
  }
353
361
 
362
+ setStartDateInput(newDate);
363
+ setStartDate(newDate.set('hour', parseInt(startHour, 10)).toDate());
354
364
  doBlur('start', e);
355
365
  setDate1((0, _momentTimezone.default)(newDate).isSameOrAfter((0, _momentTimezone.default)(date2), 'month') ? (0, _momentTimezone.default)(date2).subtract(1, 'month') : (0, _momentTimezone.default)(newDate));
356
366
  };
@@ -366,17 +376,22 @@ var Datepicker = function Datepicker(props) {
366
376
  var handleEndDateBlur = function handleEndDateBlur(e) {
367
377
  var newDate;
368
378
 
369
- if ((0, _momentTimezone.default)(endDateInput).isValid()) {
370
- newDate = (0, _momentTimezone.default)(endDateInput).set('hour', parseInt(endHour, 10)).toDate();
371
- setEndDate(addDay(newDate));
372
- } else {
379
+ if (!(0, _momentTimezone.default)(endDateInput).isValid()) {
373
380
  newDate = endDate;
374
- setEndDateInput(newDate);
381
+ } else {
382
+ if (minDate && !(0, _momentTimezone.default)(endDateInput).isSameOrAfter(minDate)) {
383
+ newDate = minDate;
384
+ } else if (maxDate && !(0, _momentTimezone.default)(endDateInput).isSameOrBefore(maxDate)) {
385
+ newDate = maxDate;
386
+ } else {
387
+ newDate = (0, _momentTimezone.default)(endDateInput);
388
+ }
375
389
  }
376
390
 
391
+ setEndDate(addDay(newDate.set('hour', parseInt(endHour, 10)).toDate()));
392
+ setEndDateInput(newDate);
377
393
  doBlur('end', e);
378
394
  setDate2(newDate);
379
- setEndDateInput();
380
395
  };
381
396
 
382
397
  var handleKeyPressed = function handleKeyPressed(code, e, type) {
@@ -56,7 +56,11 @@ var OpenedPart = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
56
56
  isCompare = props.isCompare,
57
57
  setIsCompare = props.setIsCompare,
58
58
  toggleOff = props.toggleOff,
59
- isShortWeekNames = props.isShortWeekNames;
59
+ isShortWeekNames = props.isShortWeekNames,
60
+ _props$minDate = props.minDate,
61
+ minDate = _props$minDate === void 0 ? null : _props$minDate,
62
+ _props$maxDate = props.maxDate,
63
+ maxDate = _props$maxDate === void 0 ? null : _props$maxDate;
60
64
 
61
65
  var items = isCompact ? (0, _toConsumableArray2.default)(Object.keys(_dependencies.INTERVALS)) : [].concat((0, _toConsumableArray2.default)(Object.keys(_dependencies.INTERVALS)), [_dependencies.CUSTOM_INTERVAL_KEY]);
62
66
 
@@ -148,7 +152,9 @@ var OpenedPart = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
148
152
  isCompareHidden: isCompareHidden,
149
153
  limitRange: limitRange,
150
154
  setActiveInterval: setActiveInterval,
151
- isShortWeekNames: isShortWeekNames
155
+ isShortWeekNames: isShortWeekNames,
156
+ minDate: minDate,
157
+ maxDate: maxDate
152
158
  })));
153
159
  });
154
160
 
@@ -154,7 +154,7 @@ var INTERVALS = {
154
154
  }
155
155
  },
156
156
  last6Months: {
157
- label: 'Last 6 Months',
157
+ label: '6 Months',
158
158
  start: function start() {
159
159
  return (0, _momentTimezone.default)().subtract(6, 'month').startOf('month');
160
160
  },
@@ -225,6 +225,7 @@ var NumericInput = function NumericInput(_ref) {
225
225
  }, [isFocused]);
226
226
  (0, _react.useEffect)(function () {
227
227
  if (inputRef !== null && inputRef !== void 0 && inputRef.current && typeof isFocusDefault === 'boolean') setIsFocused(isFocusDefault);
228
+ setEditing(isFocusDefault);
228
229
  }, [inputRef, isFocusDefault]);
229
230
 
230
231
  function renderInput() {
@@ -115,7 +115,7 @@ function _default(props) {
115
115
  };
116
116
 
117
117
  return /*#__PURE__*/_react.default.createElement("div", {
118
- className: "calendar ".concat(className)
118
+ className: "calendar ".concat(className ? className : "")
119
119
  }, /*#__PURE__*/_react.default.createElement("div", {
120
120
  className: "calendar-header"
121
121
  }, /*#__PURE__*/_react.default.createElement("div", {