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.
Files changed (45) hide show
  1. package/dist/Atomic/FormElements/Dropdown/Dropdown.js +43 -19
  2. package/dist/Atomic/FormElements/Dropdown/Dropdown.scss +6 -0
  3. package/dist/Atomic/FormElements/Dropdown/Dropdown.stories.js +34 -7
  4. package/dist/Atomic/FormElements/Dropdown/components/DropdownLoader.js +20 -0
  5. package/dist/Atomic/FormElements/Dropdown/components/Loader.scss +57 -0
  6. package/dist/Atomic/FormElements/Input/Input.js +42 -18
  7. package/dist/Atomic/FormElements/Input/Input.stories.js +4 -0
  8. package/dist/Atomic/FormElements/InputCalendar/InputCalendar.js +33 -31
  9. package/dist/Atomic/FormElements/InputCalendar/InputCalendar.stories.js +29 -19
  10. package/dist/Atomic/FormElements/InputDateRange/InputDateRange.js +8 -2
  11. package/dist/Atomic/FormElements/InputDateRange/InputDateRange.scss +2 -4
  12. package/dist/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +2 -0
  13. package/dist/Atomic/FormElements/InputDateRange/components/Datepicker.js +35 -20
  14. package/dist/Atomic/FormElements/InputDateRange/components/OpenedPart.js +8 -2
  15. package/dist/Atomic/FormElements/InputDateRange/dependencies.js +1 -1
  16. package/dist/Atomic/FormElements/NumericInput/NumericInput.js +125 -87
  17. package/dist/Atomic/FormElements/NumericInput/NumericInput.stories.js +6 -10
  18. package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.js +3 -1
  19. package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.scss +4 -4
  20. package/dist/Atomic/UI/Calendar/Calendar.js +6 -4
  21. package/dist/Atomic/UI/Calendar/Calendar.scss +19 -3
  22. package/dist/Functions/inputExecutor.js +1 -1
  23. package/package.json +2 -3
  24. package/src/Atomic/FormElements/Dropdown/Dropdown.js +66 -35
  25. package/src/Atomic/FormElements/Dropdown/Dropdown.scss +6 -0
  26. package/src/Atomic/FormElements/Dropdown/Dropdown.stories.js +22 -8
  27. package/src/Atomic/FormElements/Dropdown/components/DropdownLoader.js +16 -0
  28. package/src/Atomic/FormElements/Dropdown/components/Loader.scss +57 -0
  29. package/src/Atomic/FormElements/Input/Input.js +56 -39
  30. package/src/Atomic/FormElements/Input/Input.stories.js +4 -0
  31. package/src/Atomic/FormElements/InputCalendar/InputCalendar.js +18 -17
  32. package/src/Atomic/FormElements/InputCalendar/InputCalendar.stories.js +17 -14
  33. package/src/Atomic/FormElements/InputDateRange/InputDateRange.js +5 -0
  34. package/src/Atomic/FormElements/InputDateRange/InputDateRange.scss +2 -4
  35. package/src/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +2 -0
  36. package/src/Atomic/FormElements/InputDateRange/components/Datepicker.js +41 -20
  37. package/src/Atomic/FormElements/InputDateRange/components/OpenedPart.js +5 -1
  38. package/src/Atomic/FormElements/InputDateRange/dependencies.js +1 -1
  39. package/src/Atomic/FormElements/NumericInput/NumericInput.js +107 -64
  40. package/src/Atomic/FormElements/NumericInput/NumericInput.stories.js +6 -22
  41. package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.js +1 -1
  42. package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.scss +4 -4
  43. package/src/Atomic/UI/Calendar/Calendar.js +3 -3
  44. package/src/Atomic/UI/Calendar/Calendar.scss +19 -3
  45. 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 (prevEndHour.current === 0 && newHour !== 0) {
287
- newEndDate = (0, _momentTimezone.default)(endDate).subtract(1, 'days');
288
- } else if (prevEndHour.current !== 0 && newHour === 0) {
289
- newEndDate = (0, _momentTimezone.default)(endDate).add(1, 'days');
290
- } else {
291
- newEndDate = endDate;
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
- setStartDateInput(newDate);
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
- setEndDateInput(newDate);
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
 
@@ -154,7 +154,7 @@ var INTERVALS = {
154
154
  }
155
155
  },
156
156
  last6Months: {
157
- label: 'Last 6 Months',
157
+ label: '6 Months',
158
158
  start: function start() {
159
159
  return (0, _momentTimezone.default)().subtract(6, 'month').startOf('month');
160
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
- 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];
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 previousValueRef = (0, _react.useRef)(value);
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)(false),
87
+ var _useState5 = (0, _react.useState)(0),
84
88
  _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
85
- isAttemptToChange = _useState6[0],
86
- setIsAttemptToChange = _useState6[1];
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
- isToHighlightError = _useState8[0],
91
- setIsToHighlightError = _useState8[1];
94
+ isFocused = _useState8[0],
95
+ setIsFocused = _useState8[1];
92
96
 
93
- var _useState9 = (0, _react.useState)(0),
97
+ var _useState9 = (0, _react.useState)(false),
94
98
  _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
95
- intMemoVal = _useState10[0],
96
- setIntMemoVal = _useState10[1];
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
- setIntMemoVal(parseFloat(inputValue));
120
- onChange(inputValue.toString());
133
+ setInputValue(inputValue.toString());
121
134
  },
122
- toggleEdit: function toggleEdit() {
123
- setEditing(!isEditing);
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 _value, _previousValueRef$cur;
151
+ var _previousValueRef$cur;
148
152
 
149
- var changedValue = '' + ((_value = value) !== null && _value !== void 0 ? _value : '');
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
- 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
- };
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
- document.addEventListener('click', handleClickOutside, true);
190
- return function () {
191
- return document.removeEventListener('click', handleClickOutside, true);
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
- if (isNaN(intMemoVal)) setIntMemoVal(min || '');
196
- }, [intMemoVal]);
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 (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
- } : {});
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: 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
- onClick: function onClick() {
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
- onClick: function onClick() {
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: !value
283
+ hidden: !inputValue
248
284
  }),
249
- onClick: handle.toggleEdit
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: 2,
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
- }, day && day.date.getDate());
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
- maxDate = params.maxDate;
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').charAt(0));
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 parseFloat(value.toString().replace(/\,/g, ''));
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.8",
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
  }