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.
- package/dist/Atomic/FormElements/Dropdown/Dropdown.js +43 -19
- package/dist/Atomic/FormElements/Dropdown/Dropdown.scss +6 -0
- package/dist/Atomic/FormElements/Dropdown/Dropdown.stories.js +34 -7
- package/dist/Atomic/FormElements/Dropdown/components/DropdownLoader.js +23 -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 +7 -1
- package/dist/Atomic/FormElements/InputCalendar/InputCalendar.stories.js +21 -20
- 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 +1 -1
- package/dist/Atomic/UI/Calendar/Calendar.scss +7 -0
- package/package.json +1 -2
- package/src/Atomic/FormElements/Dropdown/Dropdown.js +66 -35
- package/src/Atomic/FormElements/Dropdown/Dropdown.scss +6 -0
- package/src/Atomic/FormElements/Dropdown/Dropdown.stories.js +22 -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 +9 -1
- package/src/Atomic/FormElements/InputCalendar/InputCalendar.stories.js +14 -10
- 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 +1 -1
- 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
|
|
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,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
|
|
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 ||
|
|
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
|
-
|
|
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({});
|
|
@@ -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;
|
|
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))
|
|
@@ -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: (
|
|
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.
|
|
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/
|
|
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
|
|
47
|
-
exports.
|
|
48
|
-
|
|
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));
|
|
@@ -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() {
|
|
@@ -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", {
|