intelicoreact 0.0.76 → 0.0.81
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 +2 -1
- package/dist/Atomic/FormElements/Input/Input.js +85 -46
- package/dist/Atomic/FormElements/Input/Input.stories.js +16 -22
- package/dist/Atomic/FormElements/InputDateRange/InputDateRange.scss +36 -6
- package/dist/Atomic/FormElements/NumericInput/NumericInput.js +254 -0
- package/dist/Atomic/FormElements/NumericInput/NumericInput.scss +135 -0
- package/dist/Atomic/FormElements/NumericInput/NumericInput.stories.js +121 -0
- package/dist/Constants/index.constants.js +8 -0
- package/dist/Functions/inputExecutor.js +58 -0
- package/package.json +2 -2
- package/src/Atomic/FormElements/Dropdown/Dropdown.js +1 -1
- package/src/Atomic/FormElements/Input/Input.js +86 -36
- package/src/Atomic/FormElements/Input/Input.stories.js +40 -29
- package/src/Atomic/FormElements/InputDateRange/InputDateRange.scss +36 -6
- package/src/Atomic/FormElements/NumericInput/NumericInput.js +220 -0
- package/src/Atomic/FormElements/NumericInput/NumericInput.scss +135 -0
- package/src/Atomic/FormElements/NumericInput/NumericInput.stories.js +94 -0
- package/src/Constants/index.constants.js +41 -0
- package/src/Functions/inputExecutor.js +62 -0
- package/src/Functions/utils.js +4 -1
|
@@ -36,7 +36,8 @@ var RC = 'dropdown';
|
|
|
36
36
|
var Dropdown = function Dropdown(_ref) {
|
|
37
37
|
var _options$find, _filteredOptions$find;
|
|
38
38
|
|
|
39
|
-
var options = _ref.options,
|
|
39
|
+
var _ref$options = _ref.options,
|
|
40
|
+
options = _ref$options === void 0 ? [] : _ref$options,
|
|
40
41
|
value = _ref.value,
|
|
41
42
|
error = _ref.error,
|
|
42
43
|
onChange = _ref.onChange,
|
|
@@ -19,10 +19,12 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
19
19
|
|
|
20
20
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
21
21
|
|
|
22
|
-
var _reactFeather = require("react-feather");
|
|
23
|
-
|
|
24
22
|
var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
|
|
25
23
|
|
|
24
|
+
var _index = require("../../../Constants/index.constants");
|
|
25
|
+
|
|
26
|
+
var _inputExecutor = require("../../../Functions/inputExecutor");
|
|
27
|
+
|
|
26
28
|
require("./Input.scss");
|
|
27
29
|
|
|
28
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); }
|
|
@@ -35,30 +37,30 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
35
37
|
|
|
36
38
|
var Input = function Input(_ref) {
|
|
37
39
|
var onChange = _ref.onChange,
|
|
40
|
+
onBlur = _ref.onBlur,
|
|
41
|
+
onFocus = _ref.onFocus,
|
|
42
|
+
onKeyUp = _ref.onKeyUp,
|
|
43
|
+
isNotBlinkErrors = _ref.isNotBlinkErrors,
|
|
44
|
+
isPriceInput = _ref.isPriceInput,
|
|
45
|
+
isOnlyNumber = _ref.isOnlyNumber,
|
|
46
|
+
isOnlyString = _ref.isOnlyString,
|
|
47
|
+
isTwoDigitAfterDot = _ref.isTwoDigitAfterDot,
|
|
38
48
|
disabled = _ref.disabled,
|
|
39
49
|
withDelete = _ref.withDelete,
|
|
40
|
-
isNumeric = _ref.isNumeric,
|
|
41
|
-
_ref$numStep = _ref.numStep,
|
|
42
|
-
numStep = _ref$numStep === void 0 ? 1 : _ref$numStep,
|
|
43
|
-
_ref$min = _ref.min,
|
|
44
|
-
min = _ref$min === void 0 ? 0 : _ref$min,
|
|
45
|
-
max = _ref.max,
|
|
46
50
|
value = _ref.value,
|
|
47
51
|
placeholder = _ref.placeholder,
|
|
48
52
|
className = _ref.className,
|
|
49
53
|
_ref$type = _ref.type,
|
|
50
54
|
type = _ref$type === void 0 ? 'text' : _ref$type,
|
|
51
|
-
onBlur = _ref.onBlur,
|
|
52
|
-
onFocus = _ref.onFocus,
|
|
53
|
-
onKeyUp = _ref.onKeyUp,
|
|
54
55
|
mask = _ref.mask,
|
|
55
56
|
maskChar = _ref.maskChar,
|
|
56
57
|
formatChars = _ref.formatChars,
|
|
57
58
|
error = _ref.error,
|
|
58
59
|
icon = _ref.icon,
|
|
59
|
-
symbolsLimit = _ref.symbolsLimit
|
|
60
|
+
symbolsLimit = _ref.symbolsLimit,
|
|
61
|
+
blinkTime = _ref.blinkTime;
|
|
62
|
+
var DEFAULT_BLINK_TIME = 100; // STATES
|
|
60
63
|
|
|
61
|
-
// STATES
|
|
62
64
|
var _useState = (0, _react.useState)(false),
|
|
63
65
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
64
66
|
isFocused = _useState2[0],
|
|
@@ -69,20 +71,36 @@ var Input = function Input(_ref) {
|
|
|
69
71
|
isEditing = _useState4[0],
|
|
70
72
|
setEditing = _useState4[1];
|
|
71
73
|
|
|
72
|
-
var inputRef = (0, _react.useRef)(null);
|
|
74
|
+
var inputRef = (0, _react.useRef)(null);
|
|
75
|
+
var previousValueRef = (0, _react.useRef)(value);
|
|
76
|
+
|
|
77
|
+
var _useState5 = (0, _react.useState)(false),
|
|
78
|
+
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
79
|
+
isAttemptToChange = _useState6[0],
|
|
80
|
+
setIsAttemptToChange = _useState6[1];
|
|
81
|
+
|
|
82
|
+
var _useState7 = (0, _react.useState)(false),
|
|
83
|
+
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
|
|
84
|
+
isToHighlightError = _useState8[0],
|
|
85
|
+
setIsToHighlightError = _useState8[1];
|
|
86
|
+
|
|
87
|
+
var onlyNumbers = _inputExecutor.formatInput.onlyNumbers,
|
|
88
|
+
onlyString = _inputExecutor.formatInput.onlyString;
|
|
89
|
+
var _formatInput$priceInp = _inputExecutor.formatInput.priceInput,
|
|
90
|
+
addCommas = _formatInput$priceInp.addCommas,
|
|
91
|
+
removeComma = _formatInput$priceInp.removeComma; // HANDLES
|
|
73
92
|
|
|
74
93
|
var handle = {
|
|
75
94
|
change: function change(e) {
|
|
76
95
|
var inputValue = e.target ? e.target.value : e;
|
|
77
96
|
|
|
78
|
-
if (
|
|
79
|
-
inputValue =
|
|
80
|
-
|
|
81
|
-
if (min && +min > inputValue) {
|
|
82
|
-
inputValue = min;
|
|
83
|
-
} else if (max && +max < inputValue) inputValue = max;
|
|
84
|
-
} else if (symbolsLimit && inputValue.length > +symbolsLimit) inputValue = inputValue.substring(0, +symbolsLimit);
|
|
97
|
+
if (symbolsLimit && inputValue.length > +symbolsLimit) {
|
|
98
|
+
inputValue = inputValue.substring(0, +symbolsLimit);
|
|
99
|
+
}
|
|
85
100
|
|
|
101
|
+
if (isOnlyNumber && !isTwoDigitAfterDot) inputValue = onlyNumbers(inputValue);
|
|
102
|
+
if (isTwoDigitAfterDot) inputValue = onlyNumbers(inputValue, true);
|
|
103
|
+
if (isOnlyString) inputValue = onlyString(inputValue);
|
|
86
104
|
onChange(inputValue.toString());
|
|
87
105
|
},
|
|
88
106
|
toggleEdit: function toggleEdit() {
|
|
@@ -91,17 +109,47 @@ var Input = function Input(_ref) {
|
|
|
91
109
|
},
|
|
92
110
|
focus: function focus(e) {
|
|
93
111
|
setIsFocused(true);
|
|
112
|
+
if (isPriceInput && isOnlyNumber && !isTwoDigitAfterDot) onChange(removeComma(value));
|
|
94
113
|
if (onFocus) onFocus(e);
|
|
95
114
|
},
|
|
96
115
|
blur: function blur(e) {
|
|
97
116
|
setIsFocused(false);
|
|
98
117
|
setEditing(false);
|
|
118
|
+
|
|
119
|
+
if (isPriceInput && isOnlyNumber && !isTwoDigitAfterDot) {
|
|
120
|
+
onChange(addCommas(value));
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
if (isTwoDigitAfterDot && !isPriceInput) {
|
|
124
|
+
onChange(cutOffsingleDot(value));
|
|
125
|
+
}
|
|
126
|
+
|
|
99
127
|
if (onBlur) onBlur(e);
|
|
100
128
|
},
|
|
101
129
|
keyUp: function keyUp(e) {
|
|
102
|
-
|
|
130
|
+
if (!isNotBlinkErrors) {
|
|
131
|
+
var _previousValueRef$cur;
|
|
132
|
+
|
|
133
|
+
var changedValue = '' + (value !== null && value !== void 0 ? value : '');
|
|
134
|
+
var previousValue = '' + ((_previousValueRef$cur = previousValueRef.current) !== null && _previousValueRef$cur !== void 0 ? _previousValueRef$cur : '');
|
|
135
|
+
|
|
136
|
+
var currentSet = function () {
|
|
137
|
+
if (previousValue.length < changedValue.length) return value.slice(previousValue.length - changedValue.length);else return changedValue.includes(e.key) ? e.key : '';
|
|
138
|
+
}();
|
|
139
|
+
|
|
140
|
+
if (!_index.KEYBOARD_SERVICE_KEYS.includes(e.key) && changedValue === previousValue) setIsAttemptToChange(true);
|
|
141
|
+
console.log(changedValue, previousValue);
|
|
142
|
+
if (_index.KEYBOARD_SERVICE_KEYS.includes(e.key) || !currentSet) previousValueRef.current = value;else previousValueRef.current = previousValue + currentSet[0];
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
if (onKeyUp) onKeyUp(e.keyCode, e);
|
|
103
146
|
}
|
|
104
147
|
};
|
|
148
|
+
|
|
149
|
+
function cutOffsingleDot(value) {
|
|
150
|
+
return value.slice(-1) === '.' ? value.slice(0, -1) : value;
|
|
151
|
+
}
|
|
152
|
+
|
|
105
153
|
(0, _react.useEffect)(function () {
|
|
106
154
|
if (isEditing) inputRef.current.focus();
|
|
107
155
|
}, [isEditing, isFocused]);
|
|
@@ -114,9 +162,7 @@ var Input = function Input(_ref) {
|
|
|
114
162
|
onChange: handle.change,
|
|
115
163
|
onFocus: handle.focus,
|
|
116
164
|
onBlur: handle.blur,
|
|
117
|
-
onKeyUp: handle.keyUp
|
|
118
|
-
min: min,
|
|
119
|
-
max: max
|
|
165
|
+
onKeyUp: handle.keyUp
|
|
120
166
|
}, maskChar ? {
|
|
121
167
|
maskChar: maskChar
|
|
122
168
|
} : {}), formatChars ? {
|
|
@@ -131,31 +177,24 @@ var Input = function Input(_ref) {
|
|
|
131
177
|
}));
|
|
132
178
|
}
|
|
133
179
|
|
|
134
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
180
|
+
return /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, uniProps, {
|
|
135
181
|
ref: inputRef,
|
|
136
|
-
type:
|
|
137
|
-
}))
|
|
138
|
-
className: "input__nums"
|
|
139
|
-
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
140
|
-
onClick: function onClick() {
|
|
141
|
-
return handle.change(value - numStep);
|
|
142
|
-
},
|
|
143
|
-
className: (0, _classnames.default)("input__num-btn", {
|
|
144
|
-
disabled: value <= min
|
|
145
|
-
})
|
|
146
|
-
}, /*#__PURE__*/_react.default.createElement(_reactFeather.Minus, null)), /*#__PURE__*/_react.default.createElement("button", {
|
|
147
|
-
onClick: function onClick() {
|
|
148
|
-
return handle.change(+value + +numStep);
|
|
149
|
-
},
|
|
150
|
-
className: (0, _classnames.default)("input__num-btn", {
|
|
151
|
-
disabled: value >= max
|
|
152
|
-
})
|
|
153
|
-
}, /*#__PURE__*/_react.default.createElement(_reactFeather.Plus, null))));
|
|
182
|
+
type: isPriceInput ? 'text' : type
|
|
183
|
+
}));
|
|
154
184
|
}
|
|
155
185
|
|
|
186
|
+
(0, _react.useEffect)(function () {
|
|
187
|
+
if (!isNotBlinkErrors && isAttemptToChange) {
|
|
188
|
+
setIsAttemptToChange(null);
|
|
189
|
+
setIsToHighlightError(true);
|
|
190
|
+
setTimeout(function () {
|
|
191
|
+
setIsToHighlightError(false);
|
|
192
|
+
}, blinkTime || DEFAULT_BLINK_TIME);
|
|
193
|
+
}
|
|
194
|
+
}, [isAttemptToChange]);
|
|
156
195
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
157
|
-
className: (0, _classnames.default)("input__wrap", (0, _defineProperty2.default)({}, "input__wrap_focus", isFocused), (0, _defineProperty2.default)({}, "input__wrap_error", error), (0, _defineProperty2.default)({}, "input__wrap_disabled", disabled))
|
|
158
|
-
}, renderInput(), icon, withDelete &&
|
|
196
|
+
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))
|
|
197
|
+
}, renderInput(), icon, withDelete && /*#__PURE__*/_react.default.createElement("span", {
|
|
159
198
|
className: (0, _classnames.default)("input__close", {
|
|
160
199
|
hidden: !value
|
|
161
200
|
}),
|
|
@@ -34,20 +34,20 @@ var _default = {
|
|
|
34
34
|
error: {
|
|
35
35
|
description: 'text - coloring input if is errored'
|
|
36
36
|
},
|
|
37
|
+
isPriceInput: {
|
|
38
|
+
description: 'boolean - if true, the input will be styled as PriceInput'
|
|
39
|
+
},
|
|
37
40
|
withDelete: {
|
|
38
41
|
description: 'boolean - add clear-cross by hover'
|
|
39
42
|
},
|
|
40
|
-
|
|
41
|
-
description: 'boolean -
|
|
42
|
-
},
|
|
43
|
-
numStep: {
|
|
44
|
-
description: 'number/text - plus/minus buttons factor (default: 1)'
|
|
43
|
+
isOnlyNumber: {
|
|
44
|
+
description: 'boolean - only numbers'
|
|
45
45
|
},
|
|
46
|
-
|
|
47
|
-
description: '
|
|
46
|
+
isOnlyString: {
|
|
47
|
+
description: 'boolean - only strings'
|
|
48
48
|
},
|
|
49
|
-
|
|
50
|
-
description: '
|
|
49
|
+
isTwoDigitAfterDot: {
|
|
50
|
+
description: 'boolean - only two digits after dot'
|
|
51
51
|
},
|
|
52
52
|
placeholder: {
|
|
53
53
|
description: 'text'
|
|
@@ -103,21 +103,15 @@ var InputTemplate = Template.bind({});
|
|
|
103
103
|
exports.InputTemplate = InputTemplate;
|
|
104
104
|
InputTemplate.args = {
|
|
105
105
|
type: 'text',
|
|
106
|
+
isOnlyNumber: false,
|
|
107
|
+
isOnlyString: false,
|
|
108
|
+
isPriceInput: false,
|
|
109
|
+
isTwoDigitAfterDot: false,
|
|
106
110
|
disabled: false,
|
|
107
111
|
error: '',
|
|
112
|
+
mask: '',
|
|
108
113
|
withDelete: true,
|
|
109
|
-
|
|
110
|
-
numStep: 1,
|
|
111
|
-
min: '0',
|
|
112
|
-
max: '5',
|
|
114
|
+
symbolsLimit: 255,
|
|
113
115
|
placeholder: 'Placeholder',
|
|
114
|
-
|
|
115
|
-
// maskChar: '_',
|
|
116
|
-
// formatChars: {
|
|
117
|
-
// 'n': '[0-9]',
|
|
118
|
-
// 's': '[A-Za-z]',
|
|
119
|
-
// '*': '[A-Za-z0-9]'
|
|
120
|
-
// },
|
|
121
|
-
icon: /*#__PURE__*/_react.default.createElement(_reactFeather.User, null),
|
|
122
|
-
symbolsLimit: 225
|
|
116
|
+
icon: /*#__PURE__*/_react.default.createElement(_reactFeather.User, null)
|
|
123
117
|
};
|
|
@@ -205,7 +205,7 @@
|
|
|
205
205
|
border: 1px solid var(--border-color);
|
|
206
206
|
border-radius: var(--border-radius);
|
|
207
207
|
background: #FFFFFF;
|
|
208
|
-
|
|
208
|
+
box-shadow: 0 4px 25px rgba(0, 0, 0, 0.25);
|
|
209
209
|
&_right-position-once-element {
|
|
210
210
|
justify-content: flex-end;
|
|
211
211
|
}
|
|
@@ -222,15 +222,15 @@
|
|
|
222
222
|
position: relative;
|
|
223
223
|
|
|
224
224
|
width: 100%;
|
|
225
|
-
padding:
|
|
225
|
+
padding: 0 20px 0 30px;
|
|
226
226
|
|
|
227
227
|
text-transform: capitalize;
|
|
228
228
|
white-space: nowrap;
|
|
229
229
|
font-style: normal;
|
|
230
230
|
font-weight: 300;
|
|
231
231
|
font-family: var(--font-family);
|
|
232
|
-
font-size:
|
|
233
|
-
line-height:
|
|
232
|
+
font-size: 12px;
|
|
233
|
+
line-height: 24px;
|
|
234
234
|
cursor: pointer;
|
|
235
235
|
|
|
236
236
|
display: flex;
|
|
@@ -242,6 +242,9 @@
|
|
|
242
242
|
// background-color: rgba(128, 128, 128, 0.1);
|
|
243
243
|
background-color: #F2F2F8;
|
|
244
244
|
}
|
|
245
|
+
&_active {
|
|
246
|
+
background: #f2f2f8;
|
|
247
|
+
}
|
|
245
248
|
|
|
246
249
|
&-icon-active {
|
|
247
250
|
position: absolute;
|
|
@@ -293,7 +296,7 @@
|
|
|
293
296
|
|
|
294
297
|
&>div:not(.date-picker__inputs-separator) {
|
|
295
298
|
width: 110px;
|
|
296
|
-
height: 100%;
|
|
299
|
+
min-height: 100%;
|
|
297
300
|
margin-right: 9px;
|
|
298
301
|
|
|
299
302
|
border: 1px solid var(--border-color);
|
|
@@ -323,6 +326,9 @@
|
|
|
323
326
|
.date-picker__inputs-separator {
|
|
324
327
|
margin-right: 9px;
|
|
325
328
|
}
|
|
329
|
+
input {
|
|
330
|
+
font-weight: 300;
|
|
331
|
+
}
|
|
326
332
|
}
|
|
327
333
|
|
|
328
334
|
&__date-input {
|
|
@@ -348,7 +354,7 @@
|
|
|
348
354
|
|
|
349
355
|
&>.dropdown__trigger {
|
|
350
356
|
width: 100%;
|
|
351
|
-
height:
|
|
357
|
+
height: 28px;
|
|
352
358
|
padding-left: 10px;
|
|
353
359
|
padding-right: 15px;
|
|
354
360
|
|
|
@@ -592,3 +598,27 @@
|
|
|
592
598
|
height: 100%;
|
|
593
599
|
}
|
|
594
600
|
}
|
|
601
|
+
|
|
602
|
+
@media screen and (max-width: 992px) {
|
|
603
|
+
.opened-part__intervals-list {
|
|
604
|
+
display: none;
|
|
605
|
+
}
|
|
606
|
+
}
|
|
607
|
+
|
|
608
|
+
@media screen and (max-width: 745px) {
|
|
609
|
+
.date-picker__inputs-block {
|
|
610
|
+
flex-flow: wrap;
|
|
611
|
+
}
|
|
612
|
+
|
|
613
|
+
.date-picker__header {
|
|
614
|
+
flex-flow: row wrap
|
|
615
|
+
}
|
|
616
|
+
.date-picker__calendars-wrapper {
|
|
617
|
+
display: block;
|
|
618
|
+
margin: auto;
|
|
619
|
+
}
|
|
620
|
+
.date-picker__calendars .range-calendar {
|
|
621
|
+
margin: 0!important;
|
|
622
|
+
width: 100%;
|
|
623
|
+
}
|
|
624
|
+
}
|
|
@@ -0,0 +1,254 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports.default = void 0;
|
|
11
|
+
|
|
12
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
+
|
|
14
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
15
|
+
|
|
16
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
17
|
+
|
|
18
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
19
|
+
|
|
20
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
21
|
+
|
|
22
|
+
var _reactFeather = require("react-feather");
|
|
23
|
+
|
|
24
|
+
var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
|
|
25
|
+
|
|
26
|
+
var _index = require("../../../Constants/index.constants");
|
|
27
|
+
|
|
28
|
+
var _inputExecutor = require("../../../Functions/inputExecutor");
|
|
29
|
+
|
|
30
|
+
require("./NumericInput.scss");
|
|
31
|
+
|
|
32
|
+
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); }
|
|
33
|
+
|
|
34
|
+
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; }
|
|
35
|
+
|
|
36
|
+
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; }
|
|
37
|
+
|
|
38
|
+
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; }
|
|
39
|
+
|
|
40
|
+
var NumericInput = function NumericInput(_ref) {
|
|
41
|
+
var onChange = _ref.onChange,
|
|
42
|
+
disabled = _ref.disabled,
|
|
43
|
+
withDelete = _ref.withDelete,
|
|
44
|
+
_ref$numStep = _ref.numStep,
|
|
45
|
+
numStep = _ref$numStep === void 0 ? 1 : _ref$numStep,
|
|
46
|
+
_ref$min = _ref.min,
|
|
47
|
+
min = _ref$min === void 0 ? 0 : _ref$min,
|
|
48
|
+
max = _ref.max,
|
|
49
|
+
value = _ref.value,
|
|
50
|
+
placeholder = _ref.placeholder,
|
|
51
|
+
className = _ref.className,
|
|
52
|
+
_ref$type = _ref.type,
|
|
53
|
+
type = _ref$type === void 0 ? 'number' : _ref$type,
|
|
54
|
+
onBlur = _ref.onBlur,
|
|
55
|
+
onFocus = _ref.onFocus,
|
|
56
|
+
onKeyUp = _ref.onKeyUp,
|
|
57
|
+
mask = _ref.mask,
|
|
58
|
+
maskChar = _ref.maskChar,
|
|
59
|
+
formatChars = _ref.formatChars,
|
|
60
|
+
error = _ref.error,
|
|
61
|
+
icon = _ref.icon,
|
|
62
|
+
symbolsLimit = _ref.symbolsLimit,
|
|
63
|
+
isNotBlinkErrors = _ref.isNotBlinkErrors,
|
|
64
|
+
blinkTime = _ref.blinkTime,
|
|
65
|
+
isPriceInput = _ref.isPriceInput;
|
|
66
|
+
var DEFAULT_BLINK_TIME = 200; // STATES
|
|
67
|
+
|
|
68
|
+
var _useState = (0, _react.useState)(false),
|
|
69
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
70
|
+
isFocused = _useState2[0],
|
|
71
|
+
setIsFocused = _useState2[1];
|
|
72
|
+
|
|
73
|
+
var _useState3 = (0, _react.useState)(false),
|
|
74
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
75
|
+
isEditing = _useState4[0],
|
|
76
|
+
setEditing = _useState4[1];
|
|
77
|
+
|
|
78
|
+
var inputRef = (0, _react.useRef)(null);
|
|
79
|
+
var decRef = (0, _react.useRef)(null);
|
|
80
|
+
var incRef = (0, _react.useRef)(null);
|
|
81
|
+
var previousValueRef = (0, _react.useRef)(value);
|
|
82
|
+
|
|
83
|
+
var _useState5 = (0, _react.useState)(false),
|
|
84
|
+
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
85
|
+
isAttemptToChange = _useState6[0],
|
|
86
|
+
setIsAttemptToChange = _useState6[1];
|
|
87
|
+
|
|
88
|
+
var _useState7 = (0, _react.useState)(false),
|
|
89
|
+
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
|
|
90
|
+
isToHighlightError = _useState8[0],
|
|
91
|
+
setIsToHighlightError = _useState8[1];
|
|
92
|
+
|
|
93
|
+
var _useState9 = (0, _react.useState)(0),
|
|
94
|
+
_useState10 = (0, _slicedToArray2.default)(_useState9, 2),
|
|
95
|
+
intMemoVal = _useState10[0],
|
|
96
|
+
setIntMemoVal = _useState10[1];
|
|
97
|
+
|
|
98
|
+
var onlyNumbers = _inputExecutor.formatInput.onlyNumbers;
|
|
99
|
+
var _formatInput$priceInp = _inputExecutor.formatInput.priceInput,
|
|
100
|
+
addCommas = _formatInput$priceInp.addCommas,
|
|
101
|
+
removeComma = _formatInput$priceInp.removeComma; // HANDLES
|
|
102
|
+
|
|
103
|
+
var handle = {
|
|
104
|
+
change: function change(e) {
|
|
105
|
+
var inputValue = e.target ? onlyNumbers(e.target.value) : e;
|
|
106
|
+
|
|
107
|
+
if (inputValue !== '') {
|
|
108
|
+
inputValue = parseFloat(inputValue) || '';
|
|
109
|
+
|
|
110
|
+
if (min && +min > inputValue) {
|
|
111
|
+
inputValue = min;
|
|
112
|
+
} else if (max && +max < inputValue) inputValue = max;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
if (symbolsLimit) {
|
|
116
|
+
inputValue = inputValue.toString().substring(0, +symbolsLimit);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
setIntMemoVal(parseFloat(inputValue));
|
|
120
|
+
onChange(inputValue.toString());
|
|
121
|
+
},
|
|
122
|
+
toggleEdit: function toggleEdit() {
|
|
123
|
+
setEditing(!isEditing);
|
|
124
|
+
onChange('');
|
|
125
|
+
},
|
|
126
|
+
focus: function focus(e) {
|
|
127
|
+
setIsFocused(true);
|
|
128
|
+
if (isPriceInput) onChange(removeComma(value));
|
|
129
|
+
if (onFocus) onFocus(e);
|
|
130
|
+
},
|
|
131
|
+
blur: function blur(e) {
|
|
132
|
+
setIsFocused(false);
|
|
133
|
+
setEditing(false);
|
|
134
|
+
|
|
135
|
+
if (isPriceInput) {
|
|
136
|
+
if (!isFinite(value)) {
|
|
137
|
+
value = intMemoVal;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
onChange(addCommas(value));
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
if (onBlur) onBlur(e);
|
|
144
|
+
},
|
|
145
|
+
keyUp: function keyUp(e) {
|
|
146
|
+
if (!isNotBlinkErrors) {
|
|
147
|
+
var _value, _previousValueRef$cur;
|
|
148
|
+
|
|
149
|
+
var changedValue = '' + ((_value = value) !== null && _value !== void 0 ? _value : '');
|
|
150
|
+
var previousValue = '' + ((_previousValueRef$cur = previousValueRef.current) !== null && _previousValueRef$cur !== void 0 ? _previousValueRef$cur : '');
|
|
151
|
+
|
|
152
|
+
var currentSet = function () {
|
|
153
|
+
if (previousValue.length < changedValue.length) return value.toString().slice(previousValue.length - changedValue.length);else return changedValue.toString().includes(e.key) ? e.key : '';
|
|
154
|
+
}();
|
|
155
|
+
|
|
156
|
+
if (!_index.KEYBOARD_SERVICE_KEYS.includes(e.key) && changedValue === previousValue) setIsAttemptToChange(true);
|
|
157
|
+
if (_index.KEYBOARD_SERVICE_KEYS.includes(e.key) || !currentSet) previousValueRef.current = value;else previousValueRef.current = previousValue + currentSet[0];
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
if (onKeyUp) onKeyUp(e.keyCode, e.target.value);
|
|
161
|
+
},
|
|
162
|
+
decrement: function decrement() {
|
|
163
|
+
handle.change(intMemoVal - +numStep);
|
|
164
|
+
},
|
|
165
|
+
increment: function increment() {
|
|
166
|
+
handle.change(intMemoVal + +numStep);
|
|
167
|
+
}
|
|
168
|
+
};
|
|
169
|
+
|
|
170
|
+
var handleClickOutside = function handleClickOutside(event) {
|
|
171
|
+
if (inputRef.current && !inputRef.current.contains(event.target) && !decRef.current.contains(event.target) && !incRef.current.contains(event.target)) {
|
|
172
|
+
setTimeout(function () {
|
|
173
|
+
inputRef.current.focus();
|
|
174
|
+
inputRef.current.blur();
|
|
175
|
+
}, 0);
|
|
176
|
+
}
|
|
177
|
+
};
|
|
178
|
+
|
|
179
|
+
(0, _react.useEffect)(function () {
|
|
180
|
+
if (!isNotBlinkErrors && isAttemptToChange) {
|
|
181
|
+
setIsAttemptToChange(false);
|
|
182
|
+
setIsToHighlightError(true);
|
|
183
|
+
setTimeout(function () {
|
|
184
|
+
setIsToHighlightError(false);
|
|
185
|
+
}, blinkTime || DEFAULT_BLINK_TIME);
|
|
186
|
+
}
|
|
187
|
+
}, [isAttemptToChange]);
|
|
188
|
+
(0, _react.useEffect)(function () {
|
|
189
|
+
document.addEventListener('click', handleClickOutside, true);
|
|
190
|
+
return function () {
|
|
191
|
+
return document.removeEventListener('click', handleClickOutside, true);
|
|
192
|
+
};
|
|
193
|
+
}, []);
|
|
194
|
+
(0, _react.useEffect)(function () {
|
|
195
|
+
if (isNaN(intMemoVal)) setIntMemoVal(min || '');
|
|
196
|
+
}, [intMemoVal]);
|
|
197
|
+
(0, _react.useEffect)(function () {
|
|
198
|
+
if (isEditing || isFocused) inputRef.current.focus();
|
|
199
|
+
}, [isEditing, isFocused]);
|
|
200
|
+
|
|
201
|
+
var uniProps = _objectSpread(_objectSpread({
|
|
202
|
+
className: "input ".concat(className),
|
|
203
|
+
placeholder: placeholder,
|
|
204
|
+
value: value || '',
|
|
205
|
+
disabled: disabled,
|
|
206
|
+
onChange: handle.change,
|
|
207
|
+
onFocus: handle.focus,
|
|
208
|
+
onBlur: handle.blur,
|
|
209
|
+
onKeyUp: handle.keyUp,
|
|
210
|
+
min: min,
|
|
211
|
+
max: max
|
|
212
|
+
}, maskChar ? {
|
|
213
|
+
maskChar: maskChar
|
|
214
|
+
} : {}), formatChars ? {
|
|
215
|
+
formatChars: formatChars
|
|
216
|
+
} : {});
|
|
217
|
+
|
|
218
|
+
function renderInput() {
|
|
219
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, uniProps, {
|
|
220
|
+
ref: inputRef,
|
|
221
|
+
type: type
|
|
222
|
+
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
223
|
+
className: "input__nums"
|
|
224
|
+
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
225
|
+
ref: decRef,
|
|
226
|
+
onClick: function onClick() {
|
|
227
|
+
return handle.decrement();
|
|
228
|
+
},
|
|
229
|
+
className: (0, _classnames.default)("input__num-btn", {
|
|
230
|
+
disabled: +value <= min
|
|
231
|
+
})
|
|
232
|
+
}, /*#__PURE__*/_react.default.createElement(_reactFeather.Minus, null)), /*#__PURE__*/_react.default.createElement("button", {
|
|
233
|
+
ref: incRef,
|
|
234
|
+
onClick: function onClick() {
|
|
235
|
+
return handle.increment();
|
|
236
|
+
},
|
|
237
|
+
className: (0, _classnames.default)("input__num-btn", {
|
|
238
|
+
disabled: +value >= max
|
|
239
|
+
})
|
|
240
|
+
}, /*#__PURE__*/_react.default.createElement(_reactFeather.Plus, null))));
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
244
|
+
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))
|
|
245
|
+
}, renderInput(), icon, withDelete && /*#__PURE__*/_react.default.createElement("span", {
|
|
246
|
+
className: (0, _classnames.default)("input__close", {
|
|
247
|
+
hidden: !value
|
|
248
|
+
}),
|
|
249
|
+
onClick: handle.toggleEdit
|
|
250
|
+
}));
|
|
251
|
+
};
|
|
252
|
+
|
|
253
|
+
var _default = NumericInput;
|
|
254
|
+
exports.default = _default;
|