intelicoreact 0.0.75 → 0.0.79
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 +38 -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/Atomic/UI/Arrow/Arrow.js +2 -1
- 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 +38 -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/Atomic/UI/Arrow/Arrow.js +1 -1
- 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
|
};
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@import "~anme/scss/anme-mixins-media";
|
|
2
|
+
|
|
1
3
|
:root {
|
|
2
4
|
--input-height: 28px;
|
|
3
5
|
--label-line-height: 16px;
|
|
@@ -205,7 +207,7 @@
|
|
|
205
207
|
border: 1px solid var(--border-color);
|
|
206
208
|
border-radius: var(--border-radius);
|
|
207
209
|
background: #FFFFFF;
|
|
208
|
-
|
|
210
|
+
box-shadow: 0 4px 25px rgba(0, 0, 0, 0.25);
|
|
209
211
|
&_right-position-once-element {
|
|
210
212
|
justify-content: flex-end;
|
|
211
213
|
}
|
|
@@ -222,15 +224,15 @@
|
|
|
222
224
|
position: relative;
|
|
223
225
|
|
|
224
226
|
width: 100%;
|
|
225
|
-
padding:
|
|
227
|
+
padding: 0 20px 0 30px;
|
|
226
228
|
|
|
227
229
|
text-transform: capitalize;
|
|
228
230
|
white-space: nowrap;
|
|
229
231
|
font-style: normal;
|
|
230
232
|
font-weight: 300;
|
|
231
233
|
font-family: var(--font-family);
|
|
232
|
-
font-size:
|
|
233
|
-
line-height:
|
|
234
|
+
font-size: 12px;
|
|
235
|
+
line-height: 24px;
|
|
234
236
|
cursor: pointer;
|
|
235
237
|
|
|
236
238
|
display: flex;
|
|
@@ -242,6 +244,9 @@
|
|
|
242
244
|
// background-color: rgba(128, 128, 128, 0.1);
|
|
243
245
|
background-color: #F2F2F8;
|
|
244
246
|
}
|
|
247
|
+
&_active {
|
|
248
|
+
background: #f2f2f8;
|
|
249
|
+
}
|
|
245
250
|
|
|
246
251
|
&-icon-active {
|
|
247
252
|
position: absolute;
|
|
@@ -293,7 +298,7 @@
|
|
|
293
298
|
|
|
294
299
|
&>div:not(.date-picker__inputs-separator) {
|
|
295
300
|
width: 110px;
|
|
296
|
-
height: 100%;
|
|
301
|
+
min-height: 100%;
|
|
297
302
|
margin-right: 9px;
|
|
298
303
|
|
|
299
304
|
border: 1px solid var(--border-color);
|
|
@@ -323,6 +328,9 @@
|
|
|
323
328
|
.date-picker__inputs-separator {
|
|
324
329
|
margin-right: 9px;
|
|
325
330
|
}
|
|
331
|
+
input {
|
|
332
|
+
font-weight: 300;
|
|
333
|
+
}
|
|
326
334
|
}
|
|
327
335
|
|
|
328
336
|
&__date-input {
|
|
@@ -348,7 +356,7 @@
|
|
|
348
356
|
|
|
349
357
|
&>.dropdown__trigger {
|
|
350
358
|
width: 100%;
|
|
351
|
-
height:
|
|
359
|
+
height: 28px;
|
|
352
360
|
padding-left: 10px;
|
|
353
361
|
padding-right: 15px;
|
|
354
362
|
|
|
@@ -592,3 +600,27 @@
|
|
|
592
600
|
height: 100%;
|
|
593
601
|
}
|
|
594
602
|
}
|
|
603
|
+
|
|
604
|
+
@include lgDown {
|
|
605
|
+
.opened-part__intervals-list {
|
|
606
|
+
display: none;
|
|
607
|
+
}
|
|
608
|
+
}
|
|
609
|
+
|
|
610
|
+
@include mdDown {
|
|
611
|
+
.date-picker__inputs-block {
|
|
612
|
+
flex-flow: wrap;
|
|
613
|
+
}
|
|
614
|
+
|
|
615
|
+
.date-picker__header {
|
|
616
|
+
flex-flow: row wrap
|
|
617
|
+
}
|
|
618
|
+
.date-picker__calendars-wrapper {
|
|
619
|
+
display: block;
|
|
620
|
+
margin: auto;
|
|
621
|
+
}
|
|
622
|
+
.date-picker__calendars .range-calendar {
|
|
623
|
+
margin: 0!important;
|
|
624
|
+
width: 100%;
|
|
625
|
+
}
|
|
626
|
+
}
|
|
@@ -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;
|