intelicoreact 0.0.64 → 0.0.72

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 (89) 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/Input/Input.js +15 -4
  8. package/dist/Atomic/FormElements/Input/Input.stories.js +7 -1
  9. package/dist/Atomic/FormElements/InputDateRange/InputDateRange.js +17 -50
  10. package/dist/Atomic/FormElements/InputDateRange/InputDateRange.scss +98 -73
  11. package/dist/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +5 -157
  12. package/dist/Atomic/FormElements/InputDateRange/components/Datepicker.js +17 -12
  13. package/dist/Atomic/FormElements/InputDateRange/components/OpenedPart.js +5 -3
  14. package/dist/Atomic/FormElements/InputDateRange/components/SelectItem.js +3 -3
  15. package/dist/Atomic/FormElements/InputDateRange/dependencies.js +7 -7
  16. package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.js +7 -2
  17. package/dist/Atomic/FormElements/Table/Table.scss +1 -1
  18. package/dist/Atomic/FormElements/Textarea/Textarea.scss +1 -1
  19. package/dist/Atomic/MainMenu/MainMenu.scss +2 -2
  20. package/dist/Atomic/UI/Accordion/Accordion.scss +2 -2
  21. package/dist/Atomic/UI/Arrow/Arrow.js +7 -8
  22. package/dist/Atomic/UI/Calendar/Calendar.js +3 -2
  23. package/dist/Atomic/UI/Calendar/Calendar.stories.js +3 -2
  24. package/dist/Atomic/UI/Status/Status.scss +1 -1
  25. package/dist/Molecular/Datepicker/Datepicker.js +451 -0
  26. package/dist/Molecular/Datepicker/Datepicker.scss +8 -0
  27. package/dist/Molecular/Datepicker/Datepicker.stories.js +44 -0
  28. package/dist/Molecular/Datepicker/components/Calendar.js +156 -0
  29. package/dist/scss/_vars.scss +3 -1
  30. package/dist/scss/main.scss +1 -1
  31. package/package.json +6 -4
  32. package/src/Atomic/FormElements/CheckboxInput/CheckboxInput.js +12 -2
  33. package/src/Atomic/FormElements/CheckboxInput/CheckboxInput.scss +91 -60
  34. package/src/Atomic/FormElements/CheckboxInput/CheckboxInput.stories.js +4 -3
  35. package/src/Atomic/FormElements/Dropdown/Dropdown.js +53 -19
  36. package/src/Atomic/FormElements/Dropdown/Dropdown.scss +21 -3
  37. package/src/Atomic/FormElements/Dropdown/Dropdown.stories.js +28 -15
  38. package/src/Atomic/FormElements/Input/Input.js +4 -0
  39. package/src/Atomic/FormElements/Input/Input.stories.js +7 -1
  40. package/src/Atomic/FormElements/InputDateRange/InputDateRange.js +187 -220
  41. package/src/Atomic/FormElements/InputDateRange/InputDateRange.scss +98 -73
  42. package/src/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +35 -122
  43. package/src/Atomic/FormElements/InputDateRange/components/Datepicker.js +14 -8
  44. package/src/Atomic/FormElements/InputDateRange/components/OpenedPart.js +6 -4
  45. package/src/Atomic/FormElements/InputDateRange/components/SelectItem.js +1 -1
  46. package/src/Atomic/FormElements/InputDateRange/dependencies.js +6 -6
  47. package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.js +5 -2
  48. package/src/Atomic/FormElements/Table/Table.scss +1 -1
  49. package/src/Atomic/FormElements/Textarea/Textarea.scss +1 -1
  50. package/src/Atomic/MainMenu/MainMenu.scss +2 -2
  51. package/src/Atomic/UI/Accordion/Accordion.scss +2 -2
  52. package/src/Atomic/UI/Arrow/Arrow.js +5 -5
  53. package/src/Atomic/UI/Calendar/Calendar.js +2 -2
  54. package/src/Atomic/UI/Calendar/Calendar.stories.js +2 -1
  55. package/src/Atomic/UI/Status/Status.scss +1 -1
  56. package/src/Molecular/Datepicker/Datepicker.js +346 -0
  57. package/src/Molecular/Datepicker/Datepicker.scss +8 -0
  58. package/src/Molecular/Datepicker/Datepicker.stories.js +27 -0
  59. package/src/Molecular/Datepicker/components/Calendar.js +118 -0
  60. package/src/scss/_vars.scss +3 -1
  61. package/src/scss/main.scss +1 -1
  62. package/dist/scss/anme/_anme-bootstrap-grid.scss +0 -748
  63. package/dist/scss/anme/_anme-elements.scss +0 -269
  64. package/dist/scss/anme/_anme-grid.scss +0 -111
  65. package/dist/scss/anme/_anme-justify.scss +0 -111
  66. package/dist/scss/anme/_anme-mixins-media.scss +0 -116
  67. package/dist/scss/anme/_anme-mixins.scss +0 -166
  68. package/dist/scss/anme/_anme-normalize.scss +0 -8
  69. package/dist/scss/anme/_anme-overall.scss +0 -34
  70. package/dist/scss/anme/_anme-padding-margins.scss +0 -419
  71. package/dist/scss/anme/_anme-table.scss +0 -81
  72. package/dist/scss/anme/_anme-theme.scss +0 -275
  73. package/dist/scss/anme/_anme-vars.scss +0 -91
  74. package/dist/scss/anme/_code-styling.scss +0 -23
  75. package/dist/scss/anme/styles.scss +0 -12
  76. package/src/scss/anme/_anme-bootstrap-grid.scss +0 -748
  77. package/src/scss/anme/_anme-elements.scss +0 -269
  78. package/src/scss/anme/_anme-grid.scss +0 -111
  79. package/src/scss/anme/_anme-justify.scss +0 -111
  80. package/src/scss/anme/_anme-mixins-media.scss +0 -116
  81. package/src/scss/anme/_anme-mixins.scss +0 -166
  82. package/src/scss/anme/_anme-normalize.scss +0 -8
  83. package/src/scss/anme/_anme-overall.scss +0 -34
  84. package/src/scss/anme/_anme-padding-margins.scss +0 -419
  85. package/src/scss/anme/_anme-table.scss +0 -81
  86. package/src/scss/anme/_anme-theme.scss +0 -275
  87. package/src/scss/anme/_anme-vars.scss +0 -91
  88. package/src/scss/anme/_code-styling.scss +0 -23
  89. package/src/scss/anme/styles.scss +0 -12
@@ -21,7 +21,8 @@ var CheckboxInput = function CheckboxInput(_ref) {
21
21
  value = _ref.value,
22
22
  _onChange = _ref.onChange,
23
23
  disabled = _ref.disabled,
24
- className = _ref.className;
24
+ className = _ref.className,
25
+ isStark = _ref.isStark;
25
26
  return /*#__PURE__*/_react.default.createElement("label", {
26
27
  className: (0, _classnames.default)('checkbox-input', className, (0, _defineProperty2.default)({}, "checkbox-input_disabled", disabled)),
27
28
  htmlFor: id
@@ -35,7 +36,10 @@ var CheckboxInput = function CheckboxInput(_ref) {
35
36
  return _onChange(!value, e);
36
37
  },
37
38
  checked: value,
38
- disabled: disabled
39
+ disabled: disabled,
40
+ ref: function ref(elem) {
41
+ if (elem) elem.indeterminate = isStark;
42
+ }
39
43
  }), /*#__PURE__*/_react.default.createElement("span", {
40
44
  className: "checkbox-input__mark"
41
45
  })), label && /*#__PURE__*/_react.default.createElement("div", {
@@ -1,76 +1,107 @@
1
1
  .checkbox-input {
2
- display: flex;
3
- align-items: center;
4
- cursor: pointer;
2
+ display: flex;
3
+ align-items: center;
4
+ cursor: pointer;
5
+
6
+ &_disabled {
7
+ opacity: 0.5;
8
+ pointer-events: none;
9
+ cursor: auto;
10
+ }
5
11
 
6
- &_disabled {
7
- opacity: .5;
8
- pointer-events: none;
9
- cursor: auto;
12
+ &:hover {
13
+ .checkbox-input__input {
14
+ background-color: rgba(#6b81dd, 0.2);
10
15
  }
16
+ }
17
+
18
+ &__input {
19
+ position: relative;
20
+ height: 14px;
21
+ width: 14px;
22
+ min-width: 14px;
23
+ border: 1px solid #9aa0b9;
24
+ border-radius: 2px;
25
+ overflow: hidden;
26
+ margin-right: 5px;
27
+ cursor: pointer;
28
+ transition: background-color 0.2s ease;
29
+ background-color: #ffff;
11
30
 
12
- &:hover {
13
- .checkbox-input__input {
14
- background-color: rgba(#6b81dd, .2);
15
- }
31
+ &_checked {
32
+ border-color: #6b81dd;
16
33
  }
17
34
 
18
- &__input {
19
- position: relative;
20
- height: 14px;
21
- width: 14px;
22
- min-width: 14px;
23
- border: 1px solid #9AA0B9;
24
- border-radius: 2px;
25
- overflow: hidden;
26
- margin-right: 5px;
27
- cursor: pointer;
28
- transition: background-color .2s ease;
29
- background-color: #ffff;
35
+ .checkbox-input__checkbox:checked ~ .checkbox-input__mark {
36
+ display: block;
37
+ }
38
+ }
30
39
 
31
- &_checked {
32
- border-color: #6b81dd;
33
- }
40
+ &__checkbox {
41
+ opacity: 0;
42
+ position: absolute;
43
+ height: 0;
44
+ width: 0;
45
+ }
34
46
 
35
- .checkbox-input__checkbox:checked ~ .checkbox-input__mark {
36
- display: block;
37
- }
47
+ &__mark {
48
+ display: none;
49
+ position: absolute;
50
+ width: 14px;
51
+ height: 14px;
52
+ background-color: #6b81dd;
38
53
 
54
+ &:after {
55
+ content: "";
56
+ position: absolute;
57
+ top: -2px;
58
+ bottom: 0;
59
+ left: 0;
60
+ right: 0;
61
+ margin: auto;
62
+ width: 4px;
63
+ height: 8px;
64
+ border: solid white;
65
+ border-radius: 2px;
66
+ border-width: 0 2px 2px 0;
67
+ transform: rotate(45deg);
39
68
  }
69
+ }
40
70
 
41
- &__checkbox {
42
- opacity: 0;
43
- position: absolute;
44
- height: 0;
45
- width: 0;
46
- }
71
+ &__label {
72
+ font-size: 13px;
73
+ user-select: none;
74
+ }
47
75
 
48
- &__mark {
49
- display: none;
76
+ input[type="checkbox" i] {
77
+ &:indeterminate {
78
+ display: block;
79
+ width: 100%;
80
+ height: 100%;
81
+ &:after {
82
+ content: "";
50
83
  position: absolute;
51
- width: 14px;
52
- height: 14px;
84
+ top: 0;
85
+ bottom: 0;
86
+ left: 0;
87
+ right: 0;
88
+ margin: auto;
89
+ width: 100%;
90
+ height: 100%;
53
91
  background-color: #6b81dd;
54
-
55
- &:after {
56
- content: '';
57
- position: absolute;
58
- top: -2px;
59
- bottom: 0;
60
- left: 0;
61
- right: 0;
62
- margin: auto;
63
- width: 4px;
64
- height: 8px;
65
- border: solid white;
66
- border-radius: 2px;
67
- border-width: 0 2px 2px 0;
68
- transform: rotate(45deg);
69
- }
70
- }
71
-
72
- &__label{
73
- font-size: 13px;
74
- user-select: none;
92
+ }
93
+ &:before {
94
+ content: "";
95
+ position: absolute;
96
+ top: 50%;
97
+ left: 50%;
98
+ transform: translate(-50%, -50%);
99
+ width: 65%;
100
+ border: solid white;
101
+ border-radius: 2px;
102
+ border-width: 0 2px 2px 0;
103
+ z-index: 1;
104
+ }
75
105
  }
106
+ }
76
107
  }
@@ -48,5 +48,6 @@ Checkbox.args = {
48
48
  label: 'Test label',
49
49
  value: true,
50
50
  disabled: false,
51
- forced: false
51
+ forced: false,
52
+ isStark: true
52
53
  };
@@ -21,8 +21,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
21
21
 
22
22
  var _reactFeather = require("react-feather");
23
23
 
24
- var _Label = _interopRequireDefault(require("../Label/Label"));
25
-
26
24
  require("./Dropdown.scss");
27
25
 
28
26
  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); }
@@ -36,7 +34,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
36
34
  var RC = 'dropdown';
37
35
 
38
36
  var Dropdown = function Dropdown(_ref) {
39
- var _options$find;
37
+ var _options$find, _filteredOptions$find;
40
38
 
41
39
  var options = _ref.options,
42
40
  value = _ref.value,
@@ -44,7 +42,8 @@ var Dropdown = function Dropdown(_ref) {
44
42
  onChange = _ref.onChange,
45
43
  placeholder = _ref.placeholder,
46
44
  className = _ref.className,
47
- isSearchable = _ref.isSearchable;
45
+ isSearchable = _ref.isSearchable,
46
+ entity = _ref.entity;
48
47
 
49
48
  var _useState = (0, _react.useState)(false),
50
49
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -57,6 +56,7 @@ var Dropdown = function Dropdown(_ref) {
57
56
  setSearchValue = _useState4[1];
58
57
 
59
58
  var dropdownRef = (0, _react.useRef)(null);
59
+ if (!options) return null;
60
60
  var filteredGroups = options.filter(function (item) {
61
61
  var _item$items;
62
62
 
@@ -84,6 +84,37 @@ var Dropdown = function Dropdown(_ref) {
84
84
  return item === null || item === void 0 ? void 0 : (_item$label = item.label) === null || _item$label === void 0 ? void 0 : _item$label.toLowerCase().includes((searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase()) || '');
85
85
  });
86
86
  var filteredOptions = [].concat((0, _toConsumableArray2.default)(filteredItems), (0, _toConsumableArray2.default)(filteredGroups));
87
+ var modalBtnTrigger = entity && entity !== '' && typeof entity === 'string';
88
+
89
+ var onChangeHandler = function onChangeHandler(item) {
90
+ setIsOpen(false);
91
+ setSearchValue(null);
92
+ onChange(item.value);
93
+ }; // decorator
94
+
95
+
96
+ var getDepends = function getDepends(getDependsTrigger) {
97
+ var newOnChange = function newOnChange(e) {
98
+ if (e.value === 'open_modal') {
99
+ onChange('open_modal');
100
+ } else {
101
+ onChangeHandler(e);
102
+ }
103
+ }; // add pseudo option
104
+
105
+
106
+ var newOptions = [{
107
+ label: "New ".concat(entity),
108
+ value: 'open_modal',
109
+ className: 'dropdown__list-item--modal'
110
+ }].concat((0, _toConsumableArray2.default)(filteredOptions));
111
+ return {
112
+ onChange: function onChange(changeItem) {
113
+ return getDependsTrigger ? newOnChange(changeItem) : onChangeHandler(changeItem);
114
+ },
115
+ options: getDependsTrigger ? newOptions : options
116
+ };
117
+ };
87
118
 
88
119
  var handleClickOutside = function handleClickOutside(event) {
89
120
  if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -92,12 +123,6 @@ var Dropdown = function Dropdown(_ref) {
92
123
  }
93
124
  };
94
125
 
95
- var onChangeHandler = function onChangeHandler(item) {
96
- setIsOpen(false);
97
- setSearchValue(null);
98
- onChange(item.value);
99
- };
100
-
101
126
  var onSearchHandler = function onSearchHandler(name) {
102
127
  setSearchValue(name);
103
128
  };
@@ -108,11 +133,13 @@ var Dropdown = function Dropdown(_ref) {
108
133
  }) : text;
109
134
  };
110
135
 
136
+ var depend = getDepends(modalBtnTrigger);
137
+
111
138
  var getMarkupForElement = function getMarkupForElement(item) {
112
139
  return item.label.toLowerCase().includes((searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase()) || '') ? /*#__PURE__*/_react.default.createElement("button", {
113
140
  key: item.value,
114
141
  onClick: function onClick() {
115
- return onChangeHandler(item);
142
+ return depend.onChange(item);
116
143
  },
117
144
  className: (0, _classnames.default)("".concat(RC, "__list-item"), (0, _defineProperty2.default)({}, "".concat(RC, "__list-item_active"), item.value === value), (0, _defineProperty2.default)({}, "".concat(RC, "__list-item_disabled"), item.disabled))
118
145
  }, /*#__PURE__*/_react.default.createElement("span", {
@@ -126,11 +153,12 @@ var Dropdown = function Dropdown(_ref) {
126
153
  };
127
154
 
128
155
  (0, _react.useEffect)(function () {
156
+ if (!value) setSearchValue(null);
129
157
  document.addEventListener('click', handleClickOutside, true);
130
158
  return function () {
131
159
  return document.removeEventListener('click', handleClickOutside, true);
132
160
  };
133
- });
161
+ }, [value]);
134
162
 
135
163
  var filteredOptionList = function filteredOptionList(filteredOption) {
136
164
  var _filteredOption$items;
@@ -164,13 +192,16 @@ var Dropdown = function Dropdown(_ref) {
164
192
  }
165
193
  }, isSearchable ? /*#__PURE__*/_react.default.createElement("input", {
166
194
  className: "".concat(RC, "__input"),
167
- value: searchValue !== null && searchValue !== void 0 ? searchValue : selectedLabel,
195
+ value: searchValue || ((_filteredOptions$find = filteredOptions.find(function (el) {
196
+ return el.value === value;
197
+ })) === null || _filteredOptions$find === void 0 ? void 0 : _filteredOptions$find.label) || '',
168
198
  onChange: function onChange(e) {
169
- return onSearchHandler(e.target.value);
199
+ onSearchHandler(e.target.value);
170
200
  },
171
201
  placeholder: placeholder,
172
- onFocus: function onFocus() {
173
- return setIsOpen(true);
202
+ onFocus: function onFocus(e) {
203
+ e.target.select();
204
+ setIsOpen(true);
174
205
  }
175
206
  }) : /*#__PURE__*/_react.default.createElement("span", {
176
207
  className: "text"
@@ -181,7 +212,7 @@ var Dropdown = function Dropdown(_ref) {
181
212
  }
182
213
  }, isOpen ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, null) : /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, null))), isOpen && filteredOptions.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
183
214
  className: "".concat(RC, "__list")
184
- }, filteredOptions.map(function (filteredOption) {
215
+ }, depend.options.map(function (filteredOption) {
185
216
  var _filteredOption$items2;
186
217
 
187
218
  return (_filteredOption$items2 = filteredOption.items) !== null && _filteredOption$items2 !== void 0 && _filteredOption$items2.length ? filteredOptionList(filteredOption) : getMarkupForElement(filteredOption);
@@ -5,6 +5,7 @@
5
5
  flex-direction: column;
6
6
  position: relative;
7
7
  width: 100%;
8
+ border-radius: 7px;
8
9
 
9
10
  &__trigger {
10
11
  background: #ffffff;
@@ -28,8 +29,8 @@
28
29
  &.error {
29
30
  border-color: $color--secondary;
30
31
  }
31
- &.placeholder .text{
32
- opacity: .7;
32
+ &.placeholder .text {
33
+ opacity: 0.7;
33
34
  }
34
35
  }
35
36
 
@@ -85,7 +86,24 @@
85
86
  width: 100%;
86
87
  height: 24px;
87
88
  white-space: nowrap;
88
-
89
+ overflow-x: hidden;
90
+
91
+ &--modal {
92
+ color: #1f7499;
93
+ font-size: 14px;
94
+ line-height: 20px;
95
+ letter-spacing: 0.2px;
96
+ position: relative;
97
+ &:after {
98
+ content: "";
99
+ position: absolute;
100
+ bottom: -2px;
101
+ height: 1px;
102
+ width: 300%;
103
+ transform: translateX(-50%);
104
+ background-color: #e8e9ec;
105
+ }
106
+ }
89
107
  &:hover,
90
108
  &_active {
91
109
  background: $color--gray--gentle;
@@ -37,10 +37,17 @@ var _default = {
37
37
  },
38
38
  onChange: {
39
39
  description: 'callback return selected value'
40
+ },
41
+ entity: {
42
+ description: 'string'
40
43
  }
41
44
  }
42
45
  };
43
46
  exports.default = _default;
47
+ var buttonStyles = {
48
+ border: 'solid 1px #000',
49
+ padding: '5px'
50
+ };
44
51
 
45
52
  var Template = function Template(args) {
46
53
  var _useState = (0, _react.useState)(''),
@@ -48,26 +55,31 @@ var Template = function Template(args) {
48
55
  value = _useState2[0],
49
56
  setValue = _useState2[1];
50
57
 
51
- return /*#__PURE__*/_react.default.createElement("div", {
58
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
52
59
  style: {
53
60
  width: 200
54
61
  }
55
62
  }, /*#__PURE__*/_react.default.createElement(_Dropdown.default, (0, _extends2.default)({}, args, {
56
63
  value: value,
57
64
  onChange: setValue
58
- })));
65
+ }))), /*#__PURE__*/_react.default.createElement("button", {
66
+ style: buttonStyles,
67
+ className: "mt10",
68
+ onClick: function onClick() {
69
+ console.log('click!');
70
+ setValue('');
71
+ }
72
+ }, "Reset"));
59
73
  };
60
74
 
61
75
  var DropdownTemplate = Template.bind({});
62
76
  exports.DropdownTemplate = DropdownTemplate;
63
77
  DropdownTemplate.args = {
78
+ entity: 'entity',
79
+ value: 'drop6',
64
80
  placeholder: 'Placeholder',
65
81
  isSearchable: true,
66
82
  options: [{
67
- label: 'Dropdown1',
68
- value: 'drop1',
69
- className: 'status status--approved'
70
- }, {
71
83
  label: 'Dropdown2',
72
84
  value: 'drop2'
73
85
  }, {
@@ -77,6 +89,10 @@ DropdownTemplate.args = {
77
89
  }, {
78
90
  label: 'Dropdown4',
79
91
  value: 'drop4'
92
+ }, {
93
+ label: 'Dropdown1',
94
+ value: 'drop1',
95
+ className: 'status status--approved'
80
96
  }, {
81
97
  label: 'Dropdown5',
82
98
  value: 'drop5'
@@ -9,10 +9,10 @@ Object.defineProperty(exports, "__esModule", {
9
9
  });
10
10
  exports.default = void 0;
11
11
 
12
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
-
14
12
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
15
13
 
14
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
15
+
16
16
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
17
17
 
18
18
  var _react = _interopRequireWildcard(require("react"));
@@ -29,6 +29,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
29
29
 
30
30
  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; }
31
31
 
32
+ 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; }
33
+
34
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
35
+
32
36
  var Input = function Input(_ref) {
33
37
  var onChange = _ref.onChange,
34
38
  disabled = _ref.disabled,
@@ -48,6 +52,8 @@ var Input = function Input(_ref) {
48
52
  onFocus = _ref.onFocus,
49
53
  onKeyUp = _ref.onKeyUp,
50
54
  mask = _ref.mask,
55
+ maskChar = _ref.maskChar,
56
+ formatChars = _ref.formatChars,
51
57
  error = _ref.error,
52
58
  icon = _ref.icon,
53
59
  symbolsLimit = _ref.symbolsLimit;
@@ -99,7 +105,8 @@ var Input = function Input(_ref) {
99
105
  (0, _react.useEffect)(function () {
100
106
  if (isEditing) inputRef.current.focus();
101
107
  }, [isEditing, isFocused]);
102
- var uniProps = {
108
+
109
+ var uniProps = _objectSpread(_objectSpread({
103
110
  className: "input ".concat(className),
104
111
  placeholder: placeholder,
105
112
  value: value || '',
@@ -110,7 +117,11 @@ var Input = function Input(_ref) {
110
117
  onKeyUp: handle.keyUp,
111
118
  min: min,
112
119
  max: max
113
- };
120
+ }, maskChar ? {
121
+ maskChar: maskChar
122
+ } : {}), formatChars ? {
123
+ formatChars: formatChars
124
+ } : {});
114
125
 
115
126
  function renderInput() {
116
127
  if (mask) {
@@ -111,7 +111,13 @@ InputTemplate.args = {
111
111
  min: '0',
112
112
  max: '5',
113
113
  placeholder: 'Placeholder',
114
- mask: '',
114
+ // mask: 'nnnnn0129',
115
+ // maskChar: '_',
116
+ // formatChars: {
117
+ // 'n': '[0-9]',
118
+ // 's': '[A-Za-z]',
119
+ // '*': '[A-Za-z0-9]'
120
+ // },
115
121
  icon: /*#__PURE__*/_react.default.createElement(_reactFeather.User, null),
116
122
  symbolsLimit: 225
117
123
  };
@@ -44,26 +44,18 @@ var InputDateRange = function InputDateRange(props) {
44
44
  id = props.id,
45
45
  label = props.label,
46
46
  className = props.className,
47
- buttonsTypes = props.buttonsTypes,
48
47
  value = props.value,
49
48
  _props$onChange = props.onChange,
50
49
  onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
51
50
  error = props.error,
52
51
  disabled = props.disabled,
53
52
  isHoverable = props.isHoverable,
54
- short = props.short,
55
53
  _props$isCompact = props.isCompact,
56
54
  isCompact = _props$isCompact === void 0 ? false : _props$isCompact,
57
- _props$isIntervalsHid = props.isIntervalsHidden,
58
- isIntervalsHidden = _props$isIntervalsHid === void 0 ? false : _props$isIntervalsHid,
59
- _props$isCompareHidde = props.isCompareHidden,
60
- isCompareHidden = _props$isCompareHidde === void 0 ? false : _props$isCompareHidde,
61
55
  _props$hideArrows = props.hideArrows,
62
56
  hideArrows = _props$hideArrows === void 0 ? false : _props$hideArrows,
63
57
  isOptionsRight = props.isOptionsRight,
64
- limitRange = props.limitRange,
65
- isUseAbs = props.isUseAbs,
66
- absTooltip = props.absTooltip;
58
+ isUseAbs = props.isUseAbs;
67
59
  var actualValues = (0, _dependencies.getActualDateRange)(value);
68
60
 
69
61
  var _useToggle = (0, _dependencies.useToggle)(false),
@@ -84,7 +76,6 @@ var InputDateRange = function InputDateRange(props) {
84
76
 
85
77
  var ref = !isUseAbs ? (0, _dependencies.useClickOutside)(toggleOff) : (0, _react.useRef)(null);
86
78
  var internalContainerRef = (0, _react.useRef)(null);
87
- var isEndDateNearFuture = (0, _momentTimezone.default)(actualValues === null || actualValues === void 0 ? void 0 : actualValues.end).isSameOrAfter((0, _momentTimezone.default)());
88
79
 
89
80
  var handleChange = function handleChange(input) {
90
81
  var newValue = (0, _dependencies.getActualDateRange)(input);
@@ -105,6 +96,10 @@ var InputDateRange = function InputDateRange(props) {
105
96
  return formatedValue;
106
97
  };
107
98
 
99
+ (0, _react.useEffect)(function () {
100
+ handleChange(_objectSpread({}, value));
101
+ }, []);
102
+
108
103
  var Range = function Range() {
109
104
  var SYMBOLS_QUANTITY_IF_TIME_ADDED = 13;
110
105
  var start = actualValues.start,
@@ -135,7 +130,8 @@ var InputDateRange = function InputDateRange(props) {
135
130
  var start = actualValues.start,
136
131
  end = actualValues.end;
137
132
  var intervalHoursCount = (0, _momentTimezone.default)(end).diff(start, 'hours');
138
- var newEnd, newStart;
133
+ var newEnd;
134
+ var newStart;
139
135
  var endHours = (0, _momentTimezone.default)(end).hours();
140
136
  var startHours = (0, _momentTimezone.default)(start).hours();
141
137
 
@@ -164,33 +160,7 @@ var InputDateRange = function InputDateRange(props) {
164
160
  var handleArrowClick = function handleArrowClick(type) {
165
161
  slideInterval(type === 'right' ? 'forward' : 'back');
166
162
  toggleOff();
167
- }; // const absData = useMemo(
168
- // () => ({
169
- // body: OpenedPart,
170
- // props: {
171
- // ...props,
172
- // key: `${actualValues.start}-${actualValues.end}-${actualValues.intervalKey}-${current}-${isCompare}`,
173
- // actualValues,
174
- // current,
175
- // setCurrent,
176
- // isCompare,
177
- // setIsCompare,
178
- // toggleOff,
179
- // onChange,
180
- // },
181
- // clickOutsideCallback: () => toggleOff(),
182
- // top: internalContainerRef.current?.getBoundingClientRect()?.bottom || 0,
183
- // left: internalContainerRef.current?.getBoundingClientRect()?.left || 0,
184
- // }),
185
- // [isToggled, value, actualValues, current, isCompare],
186
- // );
187
- // useEffect(() => {
188
- // if (current && isUseAbs && absTooltip) onChange(current, 'absTooltip/props/current');
189
- // }, [current]);
190
- // useEffect(() => {
191
- // if (isUseAbs) onChange(isToggled ? absData : null, 'absTooltip');
192
- // }, [isToggled]);
193
-
163
+ };
194
164
 
195
165
  return /*#__PURE__*/_react.default.createElement("div", {
196
166
  ref: internalContainerRef,
@@ -206,8 +176,12 @@ var InputDateRange = function InputDateRange(props) {
206
176
  }, label), /*#__PURE__*/_react.default.createElement("div", {
207
177
  className: "date-range-input__wraper",
208
178
  ref: ref,
209
- onMouseEnter: isHoverable && toggleOn,
210
- onMouseLeave: isHoverable && toggleOff
179
+ onMouseEnter: isHoverable ? toggleOn : function () {
180
+ return null;
181
+ },
182
+ onMouseLeave: isHoverable ? toggleOff : function () {
183
+ return null;
184
+ }
211
185
  }, /*#__PURE__*/_react.default.createElement("div", {
212
186
  className: (0, _classnames.default)('date-range-input__absolut-wraper', {
213
187
  'date-range-input__absolut-wraper_right-position': isOptionsRight
@@ -216,14 +190,7 @@ var InputDateRange = function InputDateRange(props) {
216
190
  className: (0, _classnames.default)('date-range-input__static-part')
217
191
  }, /*#__PURE__*/_react.default.createElement("button", {
218
192
  id: id,
219
- className: (0, _classnames.default)('date-range-input__toggle-button') // className={cn(
220
- // 'date-range-input__toggle-button',
221
- // { 'form-select__input--disabled': disabled },
222
- // { 'form-select__input--opened': isToggled },
223
- // { 'form-select__input--focused': isToggled },
224
- // className,
225
- // )}
226
- ,
193
+ className: (0, _classnames.default)('date-range-input__toggle-button'),
227
194
  disabled: disabled,
228
195
  onClick: !disabled && !isHoverable ? toggle : undefined
229
196
  }, /*#__PURE__*/_react.default.createElement("div", {
@@ -236,14 +203,14 @@ var InputDateRange = function InputDateRange(props) {
236
203
  type: "left",
237
204
  className: "date-range-input__arrow",
238
205
  onClick: function onClick() {
239
- return handleArrowClick("left");
206
+ return handleArrowClick('left');
240
207
  },
241
208
  disabled: disabled || (actualValues === null || actualValues === void 0 ? void 0 : actualValues.intervalKey) === _dependencies.ALL_TIME_KEY
242
209
  }), /*#__PURE__*/_react.default.createElement(_Arrow.default, {
243
210
  type: "right",
244
211
  className: "date-range-input__arrow",
245
212
  onClick: function onClick() {
246
- return handleArrowClick("right");
213
+ return handleArrowClick('right');
247
214
  },
248
215
  disabled: disabled || (actualValues === null || actualValues === void 0 ? void 0 : actualValues.intervalKey) === _dependencies.ALL_TIME_KEY || (actualValues === null || actualValues === void 0 ? void 0 : actualValues.intervalKey) === 'today' || (0, _momentTimezone.default)(actualValues === null || actualValues === void 0 ? void 0 : actualValues.end).add((0, _momentTimezone.default)(actualValues === null || actualValues === void 0 ? void 0 : actualValues.end).diff(actualValues === null || actualValues === void 0 ? void 0 : actualValues.start, 'hours'), 'hours').isAfter((0, _momentTimezone.default)().add(1, 'day').startOf('day'))
249
216
  }))), isToggled && !isUseAbs && /*#__PURE__*/_react.default.createElement(_OpenedPart.default, (0, _extends2.default)({}, props, {