intelicoreact 0.0.86 → 0.0.92
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Atomic/FormElements/Dropdown/Dropdown.js +44 -19
- package/dist/Atomic/FormElements/Dropdown/Dropdown.scss +12 -0
- package/dist/Atomic/FormElements/Dropdown/Dropdown.stories.js +35 -7
- package/dist/Atomic/FormElements/Dropdown/components/DropdownLoader.js +24 -0
- package/dist/Atomic/FormElements/Dropdown/components/Loader.scss +57 -0
- package/dist/Atomic/FormElements/Input/Input.js +30 -10
- package/dist/Atomic/FormElements/InputCalendar/InputCalendar.js +6 -4
- package/dist/Atomic/FormElements/InputCalendar/InputCalendar.stories.js +3 -2
- package/dist/Atomic/FormElements/InputDateRange/InputDateRange.js +8 -2
- package/dist/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +2 -0
- package/dist/Atomic/FormElements/InputDateRange/components/Datepicker.js +35 -20
- package/dist/Atomic/FormElements/InputDateRange/components/OpenedPart.js +8 -2
- package/dist/Atomic/FormElements/InputDateRange/dependencies.js +1 -1
- package/dist/Atomic/FormElements/NumericInput/NumericInput.js +1 -0
- package/dist/Atomic/UI/Calendar/Calendar.js +89 -15
- package/dist/Atomic/UI/Calendar/Calendar.scss +52 -5
- package/dist/Atomic/UI/Calendar/Calendar.stories.js +20 -3
- package/package.json +1 -2
- package/src/Atomic/FormElements/Dropdown/Dropdown.js +72 -35
- package/src/Atomic/FormElements/Dropdown/Dropdown.scss +12 -0
- package/src/Atomic/FormElements/Dropdown/Dropdown.stories.js +23 -8
- package/src/Atomic/FormElements/Dropdown/components/DropdownLoader.js +17 -0
- package/src/Atomic/FormElements/Dropdown/components/Loader.scss +57 -0
- package/src/Atomic/FormElements/Input/Input.js +46 -33
- package/src/Atomic/FormElements/InputCalendar/InputCalendar.js +14 -8
- package/src/Atomic/FormElements/InputCalendar/InputCalendar.stories.js +7 -8
- package/src/Atomic/FormElements/InputDateRange/InputDateRange.js +5 -0
- package/src/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +2 -0
- package/src/Atomic/FormElements/InputDateRange/components/Datepicker.js +41 -20
- package/src/Atomic/FormElements/InputDateRange/components/OpenedPart.js +5 -1
- package/src/Atomic/FormElements/InputDateRange/dependencies.js +1 -1
- package/src/Atomic/FormElements/NumericInput/NumericInput.js +1 -0
- package/src/Atomic/UI/Calendar/Calendar.js +80 -11
- package/src/Atomic/UI/Calendar/Calendar.scss +52 -5
- package/src/Atomic/UI/Calendar/Calendar.stories.js +9 -7
|
@@ -2,13 +2,15 @@
|
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
4
|
|
|
5
|
-
var
|
|
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 ||
|
|
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,33 @@ 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
|
|
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,
|
|
54
|
+
isListTop = _ref.isListTop;
|
|
48
55
|
|
|
49
56
|
var _useState = (0, _react.useState)(false),
|
|
50
57
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
51
58
|
isOpen = _useState2[0],
|
|
52
59
|
setIsOpen = _useState2[1];
|
|
53
60
|
|
|
54
|
-
var _useState3 = (0, _react.useState)(
|
|
61
|
+
var _useState3 = (0, _react.useState)(),
|
|
55
62
|
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
56
63
|
searchValue = _useState4[0],
|
|
57
64
|
setSearchValue = _useState4[1];
|
|
58
65
|
|
|
59
66
|
var dropdownRef = (0, _react.useRef)(null);
|
|
67
|
+
var dropdownListRef = (0, _react.useRef)(null);
|
|
60
68
|
if (!options) return null;
|
|
61
69
|
var filteredGroups = options.filter(function (item) {
|
|
62
70
|
var _item$items;
|
|
@@ -153,14 +161,6 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
153
161
|
})) : null;
|
|
154
162
|
};
|
|
155
163
|
|
|
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
164
|
var filteredOptionList = function filteredOptionList(filteredOption) {
|
|
165
165
|
var _filteredOption$items;
|
|
166
166
|
|
|
@@ -183,8 +183,34 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
183
183
|
return el.value === value;
|
|
184
184
|
})) === null || _item$items4$find === void 0 ? void 0 : _item$items4$find.label);
|
|
185
185
|
}, null);
|
|
186
|
+
var doScrollCallback = (0, _react.useCallback)(function (e) {
|
|
187
|
+
var callback = scrollReactionObj.callback,
|
|
188
|
+
isWithAnyScrolling = scrollReactionObj.isWithAnyScrolling;
|
|
189
|
+
|
|
190
|
+
if (callback && typeof callback === 'function') {
|
|
191
|
+
if (isWithAnyScrolling) callback(e);else if (e.target.clientHeight + e.target.scrollTop >= e.target.scrollHeight) callback(e);
|
|
192
|
+
}
|
|
193
|
+
}, [filteredOptions]);
|
|
194
|
+
(0, _react.useEffect)(function () {
|
|
195
|
+
if (!value) setSearchValue(null);
|
|
196
|
+
document.addEventListener('click', handleClickOutside, true);
|
|
197
|
+
return function () {
|
|
198
|
+
return document.removeEventListener('click', handleClickOutside, true);
|
|
199
|
+
};
|
|
200
|
+
}, [value]);
|
|
201
|
+
(0, _react.useEffect)(function () {
|
|
202
|
+
if (scrollReactionObj && (0, _typeof2.default)(scrollReactionObj) === 'object' && isOpen && dropdownListRef && dropdownListRef.current) {
|
|
203
|
+
dropdownListRef.current.addEventListener('scroll', doScrollCallback);
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
return function () {
|
|
207
|
+
if (scrollReactionObj && (0, _typeof2.default)(scrollReactionObj) === 'object') removeEventListener('scroll', doScrollCallback);
|
|
208
|
+
};
|
|
209
|
+
}, [isOpen, dropdownListRef]);
|
|
186
210
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
187
|
-
className: (0, _classnames.default)(RC, className
|
|
211
|
+
className: (0, _classnames.default)(RC, className, {
|
|
212
|
+
disabled: disabled
|
|
213
|
+
}),
|
|
188
214
|
ref: dropdownRef
|
|
189
215
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
190
216
|
className: "".concat(RC, "__trigger input__wrap ").concat(!value ? 'placeholder' : '', " ").concat(error ? 'error' : ''),
|
|
@@ -193,9 +219,7 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
193
219
|
}
|
|
194
220
|
}, isSearchable ? /*#__PURE__*/_react.default.createElement("input", {
|
|
195
221
|
className: "".concat(RC, "__input"),
|
|
196
|
-
value: searchValue ||
|
|
197
|
-
return el.value === value;
|
|
198
|
-
})) === null || _filteredOptions$find === void 0 ? void 0 : _filteredOptions$find.label) || '',
|
|
222
|
+
value: searchValue || selectedLabel || '',
|
|
199
223
|
onChange: function onChange(e) {
|
|
200
224
|
onSearchHandler(e.target.value);
|
|
201
225
|
},
|
|
@@ -212,12 +236,13 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
212
236
|
return setIsOpen(!isOpen);
|
|
213
237
|
}
|
|
214
238
|
}, 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")
|
|
239
|
+
className: (0, _classnames.default)("".concat(RC, "__list"), (0, _defineProperty2.default)({}, "".concat(RC, "__list-top"), isListTop)),
|
|
240
|
+
ref: dropdownListRef
|
|
216
241
|
}, depend.options.map(function (filteredOption) {
|
|
217
242
|
var _filteredOption$items2;
|
|
218
243
|
|
|
219
244
|
return (_filteredOption$items2 = filteredOption.items) !== null && _filteredOption$items2 !== void 0 && _filteredOption$items2.length ? filteredOptionList(filteredOption) : getMarkupForElement(filteredOption);
|
|
220
|
-
})));
|
|
245
|
+
}), disabled && isOpen && /*#__PURE__*/_react.default.createElement(_DropdownLoader.default, null)));
|
|
221
246
|
};
|
|
222
247
|
|
|
223
248
|
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%);
|
|
@@ -70,6 +71,12 @@
|
|
|
70
71
|
border-radius: 4px;
|
|
71
72
|
}
|
|
72
73
|
|
|
74
|
+
&-top {
|
|
75
|
+
bottom: calc(100% + 4px);
|
|
76
|
+
top: auto;
|
|
77
|
+
box-shadow: 0 -3px 10px rgb(0 0 0 / 15%);
|
|
78
|
+
}
|
|
79
|
+
|
|
73
80
|
&-item {
|
|
74
81
|
display: flex;
|
|
75
82
|
align-items: center;
|
|
@@ -177,4 +184,9 @@
|
|
|
177
184
|
font-size: 10px;
|
|
178
185
|
color: $color--secondary;
|
|
179
186
|
}
|
|
187
|
+
|
|
188
|
+
&.disabled {
|
|
189
|
+
pointer-events: none;
|
|
190
|
+
opacity: 0.5;
|
|
191
|
+
}
|
|
180
192
|
}
|
|
@@ -44,37 +44,65 @@ 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
|
-
|
|
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
|
-
|
|
70
|
-
setValue('');
|
|
97
|
+
return setDisabled(!disabled);
|
|
71
98
|
}
|
|
72
|
-
},
|
|
99
|
+
}, disabled ? 'enable' : 'disable'));
|
|
73
100
|
};
|
|
74
101
|
|
|
75
102
|
var DropdownTemplate = Template.bind({});
|
|
76
103
|
exports.DropdownTemplate = DropdownTemplate;
|
|
77
104
|
DropdownTemplate.args = {
|
|
105
|
+
isListTop: true,
|
|
78
106
|
entity: 'entity',
|
|
79
107
|
value: 'drop6',
|
|
80
108
|
placeholder: 'Placeholder',
|
|
@@ -0,0 +1,24 @@
|
|
|
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(_ref) {
|
|
15
|
+
var variant = _ref.variant;
|
|
16
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
17
|
+
className: "dropdown-loader-box j5"
|
|
18
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
19
|
+
className: "lds-ring".concat(variant === 'little' ? ' lds-ring_little' : '')
|
|
20
|
+
}, /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", null)));
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
var _default = DropdownLoader;
|
|
24
|
+
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;
|
|
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 (
|
|
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
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
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 (
|
|
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))
|
|
@@ -35,7 +35,8 @@ var InputCalendar = function InputCalendar(_ref) {
|
|
|
35
35
|
_ref$placeholder = _ref.placeholder,
|
|
36
36
|
placeholder = _ref$placeholder === void 0 ? 'mm/dd/yyyy' : _ref$placeholder,
|
|
37
37
|
_ref$mask = _ref.mask,
|
|
38
|
-
mask = _ref$mask === void 0 ? '99/99/9999' : _ref$mask
|
|
38
|
+
mask = _ref$mask === void 0 ? '99/99/9999' : _ref$mask,
|
|
39
|
+
dontLimitFuture = _ref.dontLimitFuture;
|
|
39
40
|
|
|
40
41
|
var _useState = (0, _react.useState)(false),
|
|
41
42
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
@@ -57,7 +58,7 @@ var InputCalendar = function InputCalendar(_ref) {
|
|
|
57
58
|
|
|
58
59
|
var getCalendarValue = function getCalendarValue(value) {
|
|
59
60
|
var date = (0, _moment.default)(value).format('L');
|
|
60
|
-
if (date !==
|
|
61
|
+
if (date !== 'Invalid date') return date;
|
|
61
62
|
return (0, _moment.default)(new Date()).format('L');
|
|
62
63
|
};
|
|
63
64
|
|
|
@@ -75,7 +76,7 @@ var InputCalendar = function InputCalendar(_ref) {
|
|
|
75
76
|
onFocus: function onFocus() {
|
|
76
77
|
return setIsOpened(!isOpened);
|
|
77
78
|
}
|
|
78
|
-
}),
|
|
79
|
+
}), isOpened ? /*#__PURE__*/_react.default.createElement(_Calendar.default, {
|
|
79
80
|
date: getCalendarValue(value),
|
|
80
81
|
setDate: function setDate(newDate) {
|
|
81
82
|
return changeCalendarDay(newDate);
|
|
@@ -83,7 +84,8 @@ var InputCalendar = function InputCalendar(_ref) {
|
|
|
83
84
|
params: {
|
|
84
85
|
minDate: minDate,
|
|
85
86
|
maxDate: maxDate
|
|
86
|
-
}
|
|
87
|
+
},
|
|
88
|
+
dontLimitFuture: dontLimitFuture
|
|
87
89
|
}) : null);
|
|
88
90
|
};
|
|
89
91
|
|
|
@@ -51,6 +51,7 @@ var CalendarTemplate = Template.bind({});
|
|
|
51
51
|
exports.CalendarTemplate = CalendarTemplate;
|
|
52
52
|
CalendarTemplate.args = {
|
|
53
53
|
value: '',
|
|
54
|
-
minDate: '10/14/2020',
|
|
55
|
-
maxDate: '10/14/2022'
|
|
54
|
+
// minDate: '10/14/2020',
|
|
55
|
+
// maxDate: '10/14/2022',
|
|
56
|
+
dontLimitFuture: true
|
|
56
57
|
};
|
|
@@ -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));
|
|
@@ -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 (
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
|
@@ -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() {
|