intelicoreact 0.0.8 → 0.0.9
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 +20 -0
- package/dist/Atomic/FormElements/Dropdown/components/Loader.scss +57 -0
- package/dist/Atomic/FormElements/Input/Input.js +42 -18
- package/dist/Atomic/FormElements/Input/Input.stories.js +4 -0
- package/dist/Atomic/FormElements/InputCalendar/InputCalendar.js +33 -31
- package/dist/Atomic/FormElements/InputCalendar/InputCalendar.stories.js +29 -19
- package/dist/Atomic/FormElements/InputDateRange/InputDateRange.js +8 -2
- package/dist/Atomic/FormElements/InputDateRange/InputDateRange.scss +2 -4
- 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 +125 -87
- package/dist/Atomic/FormElements/NumericInput/NumericInput.stories.js +6 -10
- package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.js +3 -1
- package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.scss +4 -4
- package/dist/Atomic/UI/Calendar/Calendar.js +6 -4
- package/dist/Atomic/UI/Calendar/Calendar.scss +19 -3
- package/dist/Functions/inputExecutor.js +1 -1
- package/package.json +2 -3
- 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 +16 -0
- package/src/Atomic/FormElements/Dropdown/components/Loader.scss +57 -0
- package/src/Atomic/FormElements/Input/Input.js +56 -39
- package/src/Atomic/FormElements/Input/Input.stories.js +4 -0
- package/src/Atomic/FormElements/InputCalendar/InputCalendar.js +18 -17
- package/src/Atomic/FormElements/InputCalendar/InputCalendar.stories.js +17 -14
- package/src/Atomic/FormElements/InputDateRange/InputDateRange.js +5 -0
- package/src/Atomic/FormElements/InputDateRange/InputDateRange.scss +2 -4
- 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 +107 -64
- package/src/Atomic/FormElements/NumericInput/NumericInput.stories.js +6 -22
- package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.js +1 -1
- package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.scss +4 -4
- package/src/Atomic/UI/Calendar/Calendar.js +3 -3
- package/src/Atomic/UI/Calendar/Calendar.scss +19 -3
- package/src/Functions/inputExecutor.js +6 -15
|
@@ -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
|
|
|
@@ -37,6 +37,9 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
37
37
|
|
|
38
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
39
|
|
|
40
|
+
var timerOutside;
|
|
41
|
+
var timerFocus;
|
|
42
|
+
|
|
40
43
|
var NumericInput = function NumericInput(_ref) {
|
|
41
44
|
var onChange = _ref.onChange,
|
|
42
45
|
disabled = _ref.disabled,
|
|
@@ -49,8 +52,6 @@ var NumericInput = function NumericInput(_ref) {
|
|
|
49
52
|
value = _ref.value,
|
|
50
53
|
placeholder = _ref.placeholder,
|
|
51
54
|
className = _ref.className,
|
|
52
|
-
_ref$type = _ref.type,
|
|
53
|
-
type = _ref$type === void 0 ? 'number' : _ref$type,
|
|
54
55
|
onBlur = _ref.onBlur,
|
|
55
56
|
onFocus = _ref.onFocus,
|
|
56
57
|
onKeyUp = _ref.onKeyUp,
|
|
@@ -62,38 +63,51 @@ var NumericInput = function NumericInput(_ref) {
|
|
|
62
63
|
symbolsLimit = _ref.symbolsLimit,
|
|
63
64
|
isNotBlinkErrors = _ref.isNotBlinkErrors,
|
|
64
65
|
blinkTime = _ref.blinkTime,
|
|
65
|
-
isPriceInput = _ref.isPriceInput
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
var
|
|
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];
|
|
66
|
+
isPriceInput = _ref.isPriceInput,
|
|
67
|
+
_ref$isFocusDefault = _ref.isFocusDefault,
|
|
68
|
+
isFocusDefault = _ref$isFocusDefault === void 0 ? false : _ref$isFocusDefault;
|
|
69
|
+
var DEFAULT_BLINK_TIME = 200; //REFS
|
|
77
70
|
|
|
78
71
|
var inputRef = (0, _react.useRef)(null);
|
|
79
72
|
var decRef = (0, _react.useRef)(null);
|
|
80
73
|
var incRef = (0, _react.useRef)(null);
|
|
81
|
-
var
|
|
74
|
+
var wrapRef = (0, _react.useRef)(null);
|
|
75
|
+
var previousValueRef = (0, _react.useRef)(value); // STATES
|
|
76
|
+
|
|
77
|
+
var _useState = (0, _react.useState)(value || min || ''),
|
|
78
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
79
|
+
inputValue = _useState2[0],
|
|
80
|
+
setInputValue = _useState2[1];
|
|
81
|
+
|
|
82
|
+
var _useState3 = (0, _react.useState)(inputValue),
|
|
83
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
84
|
+
inputValueFormated = _useState4[0],
|
|
85
|
+
setInputValueFormated = _useState4[1];
|
|
82
86
|
|
|
83
|
-
var _useState5 = (0, _react.useState)(
|
|
87
|
+
var _useState5 = (0, _react.useState)(0),
|
|
84
88
|
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
85
|
-
|
|
86
|
-
|
|
89
|
+
intMemoVal = _useState6[0],
|
|
90
|
+
setIntMemoVal = _useState6[1];
|
|
87
91
|
|
|
88
92
|
var _useState7 = (0, _react.useState)(false),
|
|
89
93
|
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
|
|
90
|
-
|
|
91
|
-
|
|
94
|
+
isFocused = _useState8[0],
|
|
95
|
+
setIsFocused = _useState8[1];
|
|
92
96
|
|
|
93
|
-
var _useState9 = (0, _react.useState)(
|
|
97
|
+
var _useState9 = (0, _react.useState)(false),
|
|
94
98
|
_useState10 = (0, _slicedToArray2.default)(_useState9, 2),
|
|
95
|
-
|
|
96
|
-
|
|
99
|
+
isEditing = _useState10[0],
|
|
100
|
+
setEditing = _useState10[1];
|
|
101
|
+
|
|
102
|
+
var _useState11 = (0, _react.useState)(false),
|
|
103
|
+
_useState12 = (0, _slicedToArray2.default)(_useState11, 2),
|
|
104
|
+
isAttemptToChange = _useState12[0],
|
|
105
|
+
setIsAttemptToChange = _useState12[1];
|
|
106
|
+
|
|
107
|
+
var _useState13 = (0, _react.useState)(false),
|
|
108
|
+
_useState14 = (0, _slicedToArray2.default)(_useState13, 2),
|
|
109
|
+
isToHighlightError = _useState14[0],
|
|
110
|
+
setIsToHighlightError = _useState14[1];
|
|
97
111
|
|
|
98
112
|
var onlyNumbers = _inputExecutor.formatInput.onlyNumbers;
|
|
99
113
|
var _formatInput$priceInp = _inputExecutor.formatInput.priceInput,
|
|
@@ -104,8 +118,8 @@ var NumericInput = function NumericInput(_ref) {
|
|
|
104
118
|
change: function change(e) {
|
|
105
119
|
var inputValue = e.target ? onlyNumbers(e.target.value) : e;
|
|
106
120
|
|
|
107
|
-
if (inputValue
|
|
108
|
-
inputValue = parseFloat(inputValue)
|
|
121
|
+
if (inputValue && (decRef.current.contains(e.target) || incRef.current.contains(e.target))) {
|
|
122
|
+
inputValue = parseFloat(inputValue);
|
|
109
123
|
|
|
110
124
|
if (min && +min > inputValue) {
|
|
111
125
|
inputValue = min;
|
|
@@ -116,37 +130,27 @@ var NumericInput = function NumericInput(_ref) {
|
|
|
116
130
|
inputValue = inputValue.toString().substring(0, +symbolsLimit);
|
|
117
131
|
}
|
|
118
132
|
|
|
119
|
-
|
|
120
|
-
onChange(inputValue.toString());
|
|
133
|
+
setInputValue(inputValue.toString());
|
|
121
134
|
},
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
onChange('');
|
|
135
|
+
clear: function clear() {
|
|
136
|
+
handle.change(min || '');
|
|
125
137
|
},
|
|
126
138
|
focus: function focus(e) {
|
|
139
|
+
if (isFocused) return;
|
|
127
140
|
setIsFocused(true);
|
|
128
|
-
if (isPriceInput) onChange(removeComma(value));
|
|
129
141
|
if (onFocus) onFocus(e);
|
|
130
142
|
},
|
|
131
143
|
blur: function blur(e) {
|
|
144
|
+
if (!isFocused) return;
|
|
132
145
|
setIsFocused(false);
|
|
133
146
|
setEditing(false);
|
|
134
|
-
|
|
135
|
-
if (isPriceInput) {
|
|
136
|
-
if (!isFinite(value)) {
|
|
137
|
-
value = intMemoVal;
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
onChange(addCommas(value));
|
|
141
|
-
}
|
|
142
|
-
|
|
143
147
|
if (onBlur) onBlur(e);
|
|
144
148
|
},
|
|
145
149
|
keyUp: function keyUp(e) {
|
|
146
150
|
if (!isNotBlinkErrors) {
|
|
147
|
-
var
|
|
151
|
+
var _previousValueRef$cur;
|
|
148
152
|
|
|
149
|
-
var changedValue = '' + (
|
|
153
|
+
var changedValue = '' + (value !== null && value !== void 0 ? value : '');
|
|
150
154
|
var previousValue = '' + ((_previousValueRef$cur = previousValueRef.current) !== null && _previousValueRef$cur !== void 0 ? _previousValueRef$cur : '');
|
|
151
155
|
|
|
152
156
|
var currentSet = function () {
|
|
@@ -159,23 +163,26 @@ var NumericInput = function NumericInput(_ref) {
|
|
|
159
163
|
|
|
160
164
|
if (onKeyUp) onKeyUp(e.keyCode, e.target.value);
|
|
161
165
|
},
|
|
162
|
-
decrement: function decrement() {
|
|
166
|
+
decrement: function decrement(e) {
|
|
163
167
|
handle.change(intMemoVal - +numStep);
|
|
164
168
|
},
|
|
165
|
-
increment: function increment() {
|
|
169
|
+
increment: function increment(e) {
|
|
166
170
|
handle.change(intMemoVal + +numStep);
|
|
167
171
|
}
|
|
168
|
-
};
|
|
172
|
+
}; //Check Outside Click
|
|
169
173
|
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
}
|
|
177
|
-
};
|
|
174
|
+
(0, _react.useEffect)(function () {
|
|
175
|
+
var handleClickOutside = function handleClickOutside(event) {
|
|
176
|
+
if (!wrapRef.current.contains(event.target)) {
|
|
177
|
+
setIsFocused(false);
|
|
178
|
+
}
|
|
179
|
+
};
|
|
178
180
|
|
|
181
|
+
document.addEventListener('mousedown', handleClickOutside, true);
|
|
182
|
+
return function () {
|
|
183
|
+
return document.removeEventListener('mousedown', handleClickOutside, true);
|
|
184
|
+
};
|
|
185
|
+
}, []);
|
|
179
186
|
(0, _react.useEffect)(function () {
|
|
180
187
|
if (!isNotBlinkErrors && isAttemptToChange) {
|
|
181
188
|
setIsAttemptToChange(false);
|
|
@@ -184,55 +191,83 @@ var NumericInput = function NumericInput(_ref) {
|
|
|
184
191
|
setIsToHighlightError(false);
|
|
185
192
|
}, blinkTime || DEFAULT_BLINK_TIME);
|
|
186
193
|
}
|
|
187
|
-
}, [isAttemptToChange]);
|
|
194
|
+
}, [isAttemptToChange]); //On Input Value Change
|
|
195
|
+
|
|
188
196
|
(0, _react.useEffect)(function () {
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
}, []);
|
|
197
|
+
if (inputValue !== value) setIsFocused(true);
|
|
198
|
+
setInputValueFormated(isPriceInput ? isFocused ? removeComma(inputValue) : addCommas(inputValue) : inputValue);
|
|
199
|
+
setIntMemoVal(parseInt(inputValue));
|
|
200
|
+
if (typeof onChange === 'function') onChange(inputValue === null || inputValue === void 0 ? void 0 : inputValue.toString());
|
|
201
|
+
}, [inputValue]); //On Integer Value Change
|
|
202
|
+
|
|
203
|
+
(0, _react.useEffect)(function () {
|
|
204
|
+
if (isNaN(intMemoVal)) setIntMemoVal(min || 0);
|
|
205
|
+
}, [intMemoVal]); //On Focuse Change
|
|
206
|
+
|
|
194
207
|
(0, _react.useEffect)(function () {
|
|
195
|
-
|
|
196
|
-
|
|
208
|
+
setInputValueFormated(isPriceInput ? isFocused ? removeComma(inputValue) : addCommas(inputValue) : inputValue);
|
|
209
|
+
|
|
210
|
+
if (isFocused) {
|
|
211
|
+
var _inputRef$current;
|
|
212
|
+
|
|
213
|
+
if (typeof onFocus === 'function') onFocus({
|
|
214
|
+
target: inputRef === null || inputRef === void 0 ? void 0 : inputRef.current
|
|
215
|
+
});
|
|
216
|
+
inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
|
|
217
|
+
} else {
|
|
218
|
+
var _inputRef$current2;
|
|
219
|
+
|
|
220
|
+
if (typeof onBlur === 'function') onBlur({
|
|
221
|
+
target: inputRef === null || inputRef === void 0 ? void 0 : inputRef.current
|
|
222
|
+
});
|
|
223
|
+
inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
|
|
224
|
+
}
|
|
225
|
+
}, [isFocused]);
|
|
197
226
|
(0, _react.useEffect)(function () {
|
|
198
|
-
if (
|
|
199
|
-
|
|
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
|
-
} : {});
|
|
227
|
+
if (inputRef !== null && inputRef !== void 0 && inputRef.current && typeof isFocusDefault === 'boolean') setIsFocused(isFocusDefault);
|
|
228
|
+
setEditing(isFocusDefault);
|
|
229
|
+
}, [inputRef, isFocusDefault]);
|
|
217
230
|
|
|
218
231
|
function renderInput() {
|
|
232
|
+
var uniProps = _objectSpread(_objectSpread({
|
|
233
|
+
className: "input ".concat(className || ''),
|
|
234
|
+
placeholder: placeholder,
|
|
235
|
+
value: inputValueFormated,
|
|
236
|
+
disabled: disabled,
|
|
237
|
+
onChange: handle.change,
|
|
238
|
+
onFocus: function onFocus() {
|
|
239
|
+
setIsFocused(true);
|
|
240
|
+
setEditing(true);
|
|
241
|
+
},
|
|
242
|
+
onBlur: function onBlur() {
|
|
243
|
+
return setEditing(false);
|
|
244
|
+
},
|
|
245
|
+
onKeyUp: handle.keyUp,
|
|
246
|
+
min: min,
|
|
247
|
+
max: max
|
|
248
|
+
}, maskChar ? {
|
|
249
|
+
maskChar: maskChar
|
|
250
|
+
} : {}), formatChars ? {
|
|
251
|
+
formatChars: formatChars
|
|
252
|
+
} : {});
|
|
253
|
+
|
|
219
254
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, uniProps, {
|
|
220
255
|
ref: inputRef,
|
|
221
|
-
type:
|
|
256
|
+
type: "text"
|
|
222
257
|
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
223
258
|
className: "input__nums"
|
|
224
259
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
225
260
|
ref: decRef,
|
|
226
|
-
|
|
227
|
-
return handle.decrement();
|
|
261
|
+
onMouseDown: function onMouseDown(e) {
|
|
262
|
+
return handle.decrement(e);
|
|
228
263
|
},
|
|
229
264
|
className: (0, _classnames.default)("input__num-btn", {
|
|
230
265
|
disabled: +value <= min
|
|
231
266
|
})
|
|
232
267
|
}, /*#__PURE__*/_react.default.createElement(_reactFeather.Minus, null)), /*#__PURE__*/_react.default.createElement("button", {
|
|
233
268
|
ref: incRef,
|
|
234
|
-
|
|
235
|
-
return handle.increment();
|
|
269
|
+
onMouseDown: function onMouseDown(e) {
|
|
270
|
+
return handle.increment(e);
|
|
236
271
|
},
|
|
237
272
|
className: (0, _classnames.default)("input__num-btn", {
|
|
238
273
|
disabled: +value >= max
|
|
@@ -241,12 +276,15 @@ var NumericInput = function NumericInput(_ref) {
|
|
|
241
276
|
}
|
|
242
277
|
|
|
243
278
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
279
|
+
ref: wrapRef,
|
|
244
280
|
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
281
|
}, renderInput(), icon, withDelete && /*#__PURE__*/_react.default.createElement("span", {
|
|
246
282
|
className: (0, _classnames.default)("input__close", {
|
|
247
|
-
hidden: !
|
|
283
|
+
hidden: !inputValue
|
|
248
284
|
}),
|
|
249
|
-
onClick:
|
|
285
|
+
onClick: function onClick() {
|
|
286
|
+
return handle.clear();
|
|
287
|
+
}
|
|
250
288
|
}));
|
|
251
289
|
};
|
|
252
290
|
|
|
@@ -31,6 +31,9 @@ var _default = {
|
|
|
31
31
|
disabled: {
|
|
32
32
|
description: 'boolean'
|
|
33
33
|
},
|
|
34
|
+
isFocusDefault: {
|
|
35
|
+
description: 'boolean - if true, input will be focused on mount'
|
|
36
|
+
},
|
|
34
37
|
isInitialFocus: {
|
|
35
38
|
description: 'boolean - if true, the input will be focused on mount'
|
|
36
39
|
},
|
|
@@ -55,13 +58,6 @@ var _default = {
|
|
|
55
58
|
placeholder: {
|
|
56
59
|
description: 'text'
|
|
57
60
|
},
|
|
58
|
-
type: {
|
|
59
|
-
description: "'text', 'number', 'password', 'color', 'date', 'datetime-local', 'month', 'time', 'email', 'range'",
|
|
60
|
-
control: {
|
|
61
|
-
type: 'select',
|
|
62
|
-
options: ['text', 'number', 'password', 'color', 'date', 'datetime-local', 'month', 'time', 'email', 'range']
|
|
63
|
-
}
|
|
64
|
-
},
|
|
65
61
|
icon: {
|
|
66
62
|
description: 'JSX'
|
|
67
63
|
},
|
|
@@ -91,7 +87,7 @@ var _default = {
|
|
|
91
87
|
exports.default = _default;
|
|
92
88
|
|
|
93
89
|
var Template = function Template(args) {
|
|
94
|
-
var _useState = (0, _react.useState)(''),
|
|
90
|
+
var _useState = (0, _react.useState)('15000'),
|
|
95
91
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
96
92
|
value = _useState2[0],
|
|
97
93
|
setValue = _useState2[1];
|
|
@@ -105,8 +101,8 @@ var Template = function Template(args) {
|
|
|
105
101
|
var NumericInputTemplate = Template.bind({});
|
|
106
102
|
exports.NumericInputTemplate = NumericInputTemplate;
|
|
107
103
|
NumericInputTemplate.args = {
|
|
108
|
-
type: 'text',
|
|
109
104
|
disabled: false,
|
|
105
|
+
isFocusDefault: false,
|
|
110
106
|
error: '',
|
|
111
107
|
isPriceInput: false,
|
|
112
108
|
mask: '',
|
|
@@ -115,7 +111,7 @@ NumericInputTemplate.args = {
|
|
|
115
111
|
numStep: 100,
|
|
116
112
|
min: '0',
|
|
117
113
|
max: '15000',
|
|
118
|
-
symbolsLimit:
|
|
114
|
+
symbolsLimit: 5,
|
|
119
115
|
placeholder: 'Placeholder',
|
|
120
116
|
icon: /*#__PURE__*/_react.default.createElement(_reactFeather.User, null)
|
|
121
117
|
};
|
|
@@ -115,7 +115,9 @@ var RangeCalendar = function RangeCalendar(props) {
|
|
|
115
115
|
onMouseLeave: function onMouseLeave() {
|
|
116
116
|
return onHover(null);
|
|
117
117
|
}
|
|
118
|
-
},
|
|
118
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
119
|
+
className: "calendar__day-num"
|
|
120
|
+
}, day && day.date.getDate()));
|
|
119
121
|
};
|
|
120
122
|
|
|
121
123
|
var handlePrev = function handlePrev() {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.range-calendar {
|
|
1
|
+
.range-calendar, .calendar {
|
|
2
2
|
width: 195px;
|
|
3
3
|
min-height: 195px;
|
|
4
4
|
display: flex;
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
display: flex;
|
|
13
13
|
justify-content: space-between;
|
|
14
14
|
align-items: center;
|
|
15
|
-
|
|
15
|
+
|
|
16
16
|
&__title {
|
|
17
17
|
line-height: 20px;
|
|
18
18
|
font-weight: 500;
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
&__next, &__prev {
|
|
28
28
|
width: 16px;
|
|
29
29
|
height: 16px;
|
|
30
|
-
background-color: #E2E6F8;
|
|
30
|
+
//background-color: #E2E6F8;
|
|
31
31
|
border-radius: 5px;
|
|
32
32
|
color: #171D33;
|
|
33
33
|
}
|
|
@@ -98,4 +98,4 @@
|
|
|
98
98
|
}
|
|
99
99
|
}
|
|
100
100
|
}
|
|
101
|
-
}
|
|
101
|
+
}
|
|
@@ -36,8 +36,10 @@ function _default(props) {
|
|
|
36
36
|
allowNext = _props$allowNext === void 0 ? true : _props$allowNext,
|
|
37
37
|
params = props.params,
|
|
38
38
|
className = props.className;
|
|
39
|
-
var minDate = params.minDate,
|
|
40
|
-
|
|
39
|
+
var _params$minDate = params.minDate,
|
|
40
|
+
minDate = _params$minDate === void 0 ? '01/01/1900' : _params$minDate,
|
|
41
|
+
_params$maxDate = params.maxDate,
|
|
42
|
+
maxDate = _params$maxDate === void 0 ? (0, _moment.default)().format('MM/DD/YYYY') : _params$maxDate;
|
|
41
43
|
|
|
42
44
|
var _useState = (0, _react.useState)({}),
|
|
43
45
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
@@ -113,7 +115,7 @@ function _default(props) {
|
|
|
113
115
|
};
|
|
114
116
|
|
|
115
117
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
116
|
-
className: "calendar ".concat(className)
|
|
118
|
+
className: "calendar ".concat(className ? className : "")
|
|
117
119
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
118
120
|
className: "calendar-header"
|
|
119
121
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -132,7 +134,7 @@ function _default(props) {
|
|
|
132
134
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
133
135
|
key: "day-of-week_".concat(dayOfWeek),
|
|
134
136
|
className: "calendar__day calendar__day--title"
|
|
135
|
-
}, (0, _moment.default)().weekday(dayOfWeek).format('dd')
|
|
137
|
+
}, (0, _moment.default)().weekday(dayOfWeek).format('dd'));
|
|
136
138
|
})), Object.keys(days).map(function (week, index) {
|
|
137
139
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
138
140
|
key: "week_".concat(index),
|
|
@@ -425,7 +425,17 @@
|
|
|
425
425
|
// box-shadow: 0 0 3px 0 rgb(0 123 255 / 50%);
|
|
426
426
|
// }
|
|
427
427
|
// }
|
|
428
|
+
.calendar-header {
|
|
429
|
+
display: flex;
|
|
430
|
+
justify-content: center;
|
|
431
|
+
align-items: center;
|
|
428
432
|
|
|
433
|
+
&__prev,
|
|
434
|
+
&__next{
|
|
435
|
+
display: flex;
|
|
436
|
+
height: auto;
|
|
437
|
+
}
|
|
438
|
+
}
|
|
429
439
|
.calendar {
|
|
430
440
|
background: #ffffff;
|
|
431
441
|
border: 1px solid #e2e5ec;
|
|
@@ -507,15 +517,21 @@
|
|
|
507
517
|
}
|
|
508
518
|
|
|
509
519
|
&-container {
|
|
510
|
-
width: 200px;
|
|
520
|
+
min-width: 200px;
|
|
521
|
+
position: relative;
|
|
522
|
+
.calendar {
|
|
523
|
+
position: absolute;
|
|
524
|
+
z-index: 9;
|
|
525
|
+
top: 100%;
|
|
526
|
+
padding: 10px 16px;
|
|
527
|
+
border: 1px solid var(--border-color);
|
|
528
|
+
}
|
|
511
529
|
}
|
|
512
530
|
|
|
513
531
|
&-dropdown {
|
|
514
532
|
appearance: none;
|
|
515
533
|
background-color: white;
|
|
516
534
|
cursor: pointer;
|
|
517
|
-
color: gray;
|
|
518
|
-
|
|
519
535
|
width: 100%;
|
|
520
536
|
height: 28px;
|
|
521
537
|
|
|
@@ -21,7 +21,7 @@ var formatInput = {
|
|
|
21
21
|
return isFraction ? intPart + value.slice(value.indexOf('.')) : intPart;
|
|
22
22
|
},
|
|
23
23
|
removeComma: function removeComma(value) {
|
|
24
|
-
return
|
|
24
|
+
return parseInt(value.toString().replace(/\,/g, ''));
|
|
25
25
|
}
|
|
26
26
|
},
|
|
27
27
|
onlyNumbers: function onlyNumbers(value) {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "intelicoreact",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"description": "",
|
|
3
|
+
"version": "0.0.9",
|
|
4
|
+
"description": "fix input-calendar",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"scripts": {
|
|
7
7
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
@@ -23,6 +23,5 @@
|
|
|
23
23
|
"@babel/polyfill": "^7.12.1",
|
|
24
24
|
"@babel/preset-env": "^7.15.6",
|
|
25
25
|
"anme": "^1.0.0"
|
|
26
|
-
|
|
27
26
|
}
|
|
28
27
|
}
|