intelicoreact 0.0.6 → 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 (117) hide show
  1. package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.js +6 -2
  2. package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.scss +91 -60
  3. package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.stories.js +2 -1
  4. package/dist/Atomic/FormElements/Dropdown/Dropdown.js +84 -28
  5. package/dist/Atomic/FormElements/Dropdown/Dropdown.scss +27 -3
  6. package/dist/Atomic/FormElements/Dropdown/Dropdown.stories.js +50 -7
  7. package/dist/Atomic/FormElements/Dropdown/components/DropdownLoader.js +20 -0
  8. package/dist/Atomic/FormElements/Dropdown/components/Loader.scss +57 -0
  9. package/dist/Atomic/FormElements/Input/Input.js +124 -50
  10. package/dist/Atomic/FormElements/Input/Input.stories.js +19 -15
  11. package/dist/Atomic/FormElements/InputCalendar/InputCalendar.js +33 -31
  12. package/dist/Atomic/FormElements/InputCalendar/InputCalendar.stories.js +29 -19
  13. package/dist/Atomic/FormElements/InputDateRange/{components/InputDateRange.js → InputDateRange.js} +54 -62
  14. package/dist/Atomic/FormElements/InputDateRange/{components/InputDateRange.scss → InputDateRange.scss} +254 -228
  15. package/dist/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +15 -160
  16. package/dist/Atomic/FormElements/InputDateRange/components/Datepicker.js +72 -34
  17. package/dist/Atomic/FormElements/InputDateRange/components/OpenedPart.js +26 -11
  18. package/dist/Atomic/FormElements/InputDateRange/components/SelectItem.js +14 -6
  19. package/dist/Atomic/FormElements/InputDateRange/{index.js → dependencies.js} +19 -18
  20. package/dist/Atomic/FormElements/NumericInput/NumericInput.js +292 -0
  21. package/dist/Atomic/FormElements/NumericInput/NumericInput.scss +135 -0
  22. package/dist/Atomic/FormElements/NumericInput/NumericInput.stories.js +117 -0
  23. package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.js +10 -3
  24. package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.scss +4 -4
  25. package/dist/Atomic/FormElements/Table/Table.scss +1 -1
  26. package/dist/Atomic/FormElements/Textarea/Textarea.scss +1 -1
  27. package/dist/Atomic/MainMenu/MainMenu.scss +2 -2
  28. package/dist/Atomic/UI/Accordion/Accordion.scss +2 -2
  29. package/dist/Atomic/UI/Arrow/Arrow.js +6 -6
  30. package/dist/Atomic/UI/Arrow/Arrow.scss +0 -3
  31. package/dist/Atomic/UI/Calendar/Calendar.js +8 -5
  32. package/dist/Atomic/UI/Calendar/Calendar.scss +19 -3
  33. package/dist/Atomic/UI/Calendar/Calendar.stories.js +3 -2
  34. package/dist/Atomic/UI/Status/Status.scss +1 -1
  35. package/dist/Constants/index.constants.js +8 -0
  36. package/dist/Functions/inputExecutor.js +58 -0
  37. package/dist/Molecular/Datepicker/Datepicker.js +451 -0
  38. package/dist/Molecular/Datepicker/Datepicker.scss +8 -0
  39. package/dist/Molecular/Datepicker/Datepicker.stories.js +44 -0
  40. package/dist/{Atomic/FormElements/Calendar → Molecular/Datepicker/components}/Calendar.js +50 -39
  41. package/dist/scss/_vars.scss +3 -1
  42. package/dist/scss/main.scss +1 -1
  43. package/package.json +5 -4
  44. package/src/Atomic/FormElements/CheckboxInput/CheckboxInput.js +12 -2
  45. package/src/Atomic/FormElements/CheckboxInput/CheckboxInput.scss +91 -60
  46. package/src/Atomic/FormElements/CheckboxInput/CheckboxInput.stories.js +4 -3
  47. package/src/Atomic/FormElements/Dropdown/Dropdown.js +104 -39
  48. package/src/Atomic/FormElements/Dropdown/Dropdown.scss +27 -3
  49. package/src/Atomic/FormElements/Dropdown/Dropdown.stories.js +42 -15
  50. package/src/Atomic/FormElements/Dropdown/components/DropdownLoader.js +16 -0
  51. package/src/Atomic/FormElements/Dropdown/components/Loader.scss +57 -0
  52. package/src/Atomic/FormElements/Input/Input.js +108 -37
  53. package/src/Atomic/FormElements/Input/Input.stories.js +43 -22
  54. package/src/Atomic/FormElements/InputCalendar/InputCalendar.js +18 -17
  55. package/src/Atomic/FormElements/InputCalendar/InputCalendar.stories.js +17 -14
  56. package/src/Atomic/FormElements/InputDateRange/InputDateRange.js +219 -0
  57. package/src/Atomic/FormElements/InputDateRange/{components/InputDateRange.scss → InputDateRange.scss} +254 -228
  58. package/src/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +38 -117
  59. package/src/Atomic/FormElements/InputDateRange/components/Datepicker.js +92 -53
  60. package/src/Atomic/FormElements/InputDateRange/components/OpenedPart.js +14 -5
  61. package/src/Atomic/FormElements/InputDateRange/components/SelectItem.js +5 -3
  62. package/src/Atomic/FormElements/InputDateRange/{index.js → dependencies.js} +16 -12
  63. package/src/Atomic/FormElements/NumericInput/NumericInput.js +263 -0
  64. package/src/Atomic/FormElements/NumericInput/NumericInput.scss +135 -0
  65. package/src/Atomic/FormElements/NumericInput/NumericInput.stories.js +78 -0
  66. package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.js +6 -3
  67. package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.scss +4 -4
  68. package/src/Atomic/FormElements/Table/Table.scss +1 -1
  69. package/src/Atomic/FormElements/Textarea/Textarea.scss +1 -1
  70. package/src/Atomic/MainMenu/MainMenu.scss +2 -2
  71. package/src/Atomic/UI/Accordion/Accordion.scss +2 -2
  72. package/src/Atomic/UI/Arrow/Arrow.js +4 -4
  73. package/src/Atomic/UI/Arrow/Arrow.scss +0 -3
  74. package/src/Atomic/UI/Calendar/Calendar.js +4 -4
  75. package/src/Atomic/UI/Calendar/Calendar.scss +19 -3
  76. package/src/Atomic/UI/Calendar/Calendar.stories.js +2 -1
  77. package/src/Atomic/UI/Status/Status.scss +1 -1
  78. package/src/Constants/index.constants.js +41 -0
  79. package/src/Functions/inputExecutor.js +53 -0
  80. package/src/Functions/utils.js +4 -1
  81. package/src/Molecular/Datepicker/Datepicker.js +346 -0
  82. package/src/Molecular/Datepicker/Datepicker.scss +8 -0
  83. package/src/Molecular/Datepicker/Datepicker.stories.js +27 -0
  84. package/src/Molecular/Datepicker/components/Calendar.js +118 -0
  85. package/src/scss/_vars.scss +3 -1
  86. package/src/scss/main.scss +1 -1
  87. package/dist/Atomic/FormElements/Calendar/Calendar.scss +0 -543
  88. package/dist/Atomic/FormElements/Calendar/Calendar.stories.js +0 -33
  89. package/dist/scss/anme/_anme-bootstrap-grid.scss +0 -748
  90. package/dist/scss/anme/_anme-elements.scss +0 -269
  91. package/dist/scss/anme/_anme-grid.scss +0 -111
  92. package/dist/scss/anme/_anme-justify.scss +0 -111
  93. package/dist/scss/anme/_anme-mixins-media.scss +0 -116
  94. package/dist/scss/anme/_anme-mixins.scss +0 -166
  95. package/dist/scss/anme/_anme-normalize.scss +0 -8
  96. package/dist/scss/anme/_anme-overall.scss +0 -34
  97. package/dist/scss/anme/_anme-padding-margins.scss +0 -419
  98. package/dist/scss/anme/_anme-table.scss +0 -81
  99. package/dist/scss/anme/_anme-theme.scss +0 -275
  100. package/dist/scss/anme/_anme-vars.scss +0 -91
  101. package/dist/scss/anme/_code-styling.scss +0 -23
  102. package/dist/scss/anme/styles.scss +0 -12
  103. package/src/Atomic/FormElements/InputDateRange/components/InputDateRange.js +0 -230
  104. package/src/scss/anme/_anme-bootstrap-grid.scss +0 -748
  105. package/src/scss/anme/_anme-elements.scss +0 -269
  106. package/src/scss/anme/_anme-grid.scss +0 -111
  107. package/src/scss/anme/_anme-justify.scss +0 -111
  108. package/src/scss/anme/_anme-mixins-media.scss +0 -116
  109. package/src/scss/anme/_anme-mixins.scss +0 -166
  110. package/src/scss/anme/_anme-normalize.scss +0 -8
  111. package/src/scss/anme/_anme-overall.scss +0 -34
  112. package/src/scss/anme/_anme-padding-margins.scss +0 -419
  113. package/src/scss/anme/_anme-table.scss +0 -81
  114. package/src/scss/anme/_anme-theme.scss +0 -275
  115. package/src/scss/anme/_anme-vars.scss +0 -91
  116. package/src/scss/anme/_code-styling.scss +0 -23
  117. package/src/scss/anme/styles.scss +0 -12
@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
7
7
  Object.defineProperty(exports, "__esModule", {
8
8
  value: true
9
9
  });
10
- exports.default = exports.getActualDateRange = exports.CUSTOM_INTERVAL_KEY_TEXT = exports.CUSTOM_INTERVAL_KEY = exports.ALL_TIME_KEY = exports.INTERVALS = exports.useToggle = exports.useClickOutside = void 0;
10
+ exports.getActualDateRange = exports.CUSTOM_INTERVAL_KEY_TEXT = exports.CUSTOM_INTERVAL_KEY = exports.ALL_TIME_KEY = exports.INTERVALS = exports.useToggle = exports.useClickOutside = void 0;
11
11
 
12
12
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
13
13
 
@@ -15,7 +15,7 @@ var _react = _interopRequireWildcard(require("react"));
15
15
 
16
16
  var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
17
17
 
18
- var _InputDateRange = _interopRequireDefault(require("./components/InputDateRange"));
18
+ var _InputDateRange = _interopRequireDefault(require("./InputDateRange"));
19
19
 
20
20
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
21
21
 
@@ -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
  },
@@ -202,11 +202,9 @@ var getActualDateRange = function getActualDateRange(inputDateRange) {
202
202
  var _INTERVALS$inputDateR, _INTERVALS$inputDateR2, _INTERVALS$inputDateR3, _INTERVALS$inputDateR4;
203
203
 
204
204
  var actualIntervalKey = function () {
205
- if (inputDateRange.intervalKey && inputDateRange.intervalKey !== CUSTOM_INTERVAL_KEY) {
205
+ if (inputDateRange.intervalKey && Object.keys(INTERVALS).includes(inputDateRange.intervalKey)) {
206
206
  return inputDateRange.intervalKey;
207
- }
208
-
209
- if (inputDateRange.start && inputDateRange.end) {
207
+ } else if (inputDateRange.start && inputDateRange.end) {
210
208
  for (var _i = 0, _Object$entries = Object.entries(INTERVALS); _i < _Object$entries.length; _i++) {
211
209
  var _Object$entries$_i = (0, _slicedToArray2.default)(_Object$entries[_i], 2),
212
210
  key = _Object$entries$_i[0],
@@ -216,16 +214,26 @@ var getActualDateRange = function getActualDateRange(inputDateRange) {
216
214
  return key;
217
215
  }
218
216
  }
217
+
218
+ return CUSTOM_INTERVAL_KEY;
219
219
  }
220
220
 
221
- return null;
221
+ return ALL_TIME_KEY;
222
222
  }();
223
223
 
224
+ if (actualIntervalKey === ALL_TIME_KEY) return {
225
+ intervalKey: ALL_TIME_KEY,
226
+ start: null,
227
+ end: null,
228
+ compare: inputDateRange.compare,
229
+ startPrevDate: null,
230
+ endPrevDate: null
231
+ };
224
232
  var actualValues = {
225
233
  // intervalKey: inputDateRange.intervalKey || customIntervalKey,
226
234
  intervalKey: actualIntervalKey || CUSTOM_INTERVAL_KEY,
227
- start: inputDateRange.intervalKey === CUSTOM_INTERVAL_KEY ? inputDateRange === null || inputDateRange === void 0 ? void 0 : inputDateRange.start : (_INTERVALS$inputDateR = INTERVALS[inputDateRange.intervalKey]) === null || _INTERVALS$inputDateR === void 0 ? void 0 : (_INTERVALS$inputDateR2 = _INTERVALS$inputDateR.start()) === null || _INTERVALS$inputDateR2 === void 0 ? void 0 : _INTERVALS$inputDateR2.toDate(),
228
- end: inputDateRange.intervalKey === CUSTOM_INTERVAL_KEY ? inputDateRange === null || inputDateRange === void 0 ? void 0 : inputDateRange.end : (_INTERVALS$inputDateR3 = INTERVALS[inputDateRange.intervalKey]) === null || _INTERVALS$inputDateR3 === void 0 ? void 0 : (_INTERVALS$inputDateR4 = _INTERVALS$inputDateR3.end()) === null || _INTERVALS$inputDateR4 === void 0 ? void 0 : _INTERVALS$inputDateR4.toDate(),
235
+ start: inputDateRange.intervalKey === CUSTOM_INTERVAL_KEY ? inputDateRange === null || inputDateRange === void 0 ? void 0 : inputDateRange.start : (_INTERVALS$inputDateR = INTERVALS[inputDateRange.intervalKey]) === null || _INTERVALS$inputDateR === void 0 ? void 0 : (_INTERVALS$inputDateR2 = _INTERVALS$inputDateR.start()) === null || _INTERVALS$inputDateR2 === void 0 ? void 0 : _INTERVALS$inputDateR2.format('YYYY-MM-DDTHH:mm'),
236
+ end: inputDateRange.intervalKey === CUSTOM_INTERVAL_KEY ? inputDateRange === null || inputDateRange === void 0 ? void 0 : inputDateRange.end : (_INTERVALS$inputDateR3 = INTERVALS[inputDateRange.intervalKey]) === null || _INTERVALS$inputDateR3 === void 0 ? void 0 : (_INTERVALS$inputDateR4 = _INTERVALS$inputDateR3.end()) === null || _INTERVALS$inputDateR4 === void 0 ? void 0 : _INTERVALS$inputDateR4.format('YYYY-MM-DDTHH:mm'),
229
237
  compare: inputDateRange.compare
230
238
  };
231
239
 
@@ -238,11 +246,4 @@ var getActualDateRange = function getActualDateRange(inputDateRange) {
238
246
  return actualValues;
239
247
  };
240
248
 
241
- exports.getActualDateRange = getActualDateRange;
242
-
243
- var component = function component(props) {
244
- return /*#__PURE__*/_react.default.createElement(_InputDateRange.default, props);
245
- };
246
-
247
- var _default = component;
248
- exports.default = _default;
249
+ exports.getActualDateRange = getActualDateRange;
@@ -0,0 +1,292 @@
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 timerOutside;
41
+ var timerFocus;
42
+
43
+ var NumericInput = function NumericInput(_ref) {
44
+ var onChange = _ref.onChange,
45
+ disabled = _ref.disabled,
46
+ withDelete = _ref.withDelete,
47
+ _ref$numStep = _ref.numStep,
48
+ numStep = _ref$numStep === void 0 ? 1 : _ref$numStep,
49
+ _ref$min = _ref.min,
50
+ min = _ref$min === void 0 ? 0 : _ref$min,
51
+ max = _ref.max,
52
+ value = _ref.value,
53
+ placeholder = _ref.placeholder,
54
+ className = _ref.className,
55
+ onBlur = _ref.onBlur,
56
+ onFocus = _ref.onFocus,
57
+ onKeyUp = _ref.onKeyUp,
58
+ mask = _ref.mask,
59
+ maskChar = _ref.maskChar,
60
+ formatChars = _ref.formatChars,
61
+ error = _ref.error,
62
+ icon = _ref.icon,
63
+ symbolsLimit = _ref.symbolsLimit,
64
+ isNotBlinkErrors = _ref.isNotBlinkErrors,
65
+ blinkTime = _ref.blinkTime,
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
70
+
71
+ var inputRef = (0, _react.useRef)(null);
72
+ var decRef = (0, _react.useRef)(null);
73
+ var incRef = (0, _react.useRef)(null);
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];
86
+
87
+ var _useState5 = (0, _react.useState)(0),
88
+ _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
89
+ intMemoVal = _useState6[0],
90
+ setIntMemoVal = _useState6[1];
91
+
92
+ var _useState7 = (0, _react.useState)(false),
93
+ _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
94
+ isFocused = _useState8[0],
95
+ setIsFocused = _useState8[1];
96
+
97
+ var _useState9 = (0, _react.useState)(false),
98
+ _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
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];
111
+
112
+ var onlyNumbers = _inputExecutor.formatInput.onlyNumbers;
113
+ var _formatInput$priceInp = _inputExecutor.formatInput.priceInput,
114
+ addCommas = _formatInput$priceInp.addCommas,
115
+ removeComma = _formatInput$priceInp.removeComma; // HANDLES
116
+
117
+ var handle = {
118
+ change: function change(e) {
119
+ var inputValue = e.target ? onlyNumbers(e.target.value) : e;
120
+
121
+ if (inputValue && (decRef.current.contains(e.target) || incRef.current.contains(e.target))) {
122
+ inputValue = parseFloat(inputValue);
123
+
124
+ if (min && +min > inputValue) {
125
+ inputValue = min;
126
+ } else if (max && +max < inputValue) inputValue = max;
127
+ }
128
+
129
+ if (symbolsLimit) {
130
+ inputValue = inputValue.toString().substring(0, +symbolsLimit);
131
+ }
132
+
133
+ setInputValue(inputValue.toString());
134
+ },
135
+ clear: function clear() {
136
+ handle.change(min || '');
137
+ },
138
+ focus: function focus(e) {
139
+ if (isFocused) return;
140
+ setIsFocused(true);
141
+ if (onFocus) onFocus(e);
142
+ },
143
+ blur: function blur(e) {
144
+ if (!isFocused) return;
145
+ setIsFocused(false);
146
+ setEditing(false);
147
+ if (onBlur) onBlur(e);
148
+ },
149
+ keyUp: function keyUp(e) {
150
+ if (!isNotBlinkErrors) {
151
+ var _previousValueRef$cur;
152
+
153
+ var changedValue = '' + (value !== null && value !== void 0 ? value : '');
154
+ var previousValue = '' + ((_previousValueRef$cur = previousValueRef.current) !== null && _previousValueRef$cur !== void 0 ? _previousValueRef$cur : '');
155
+
156
+ var currentSet = function () {
157
+ if (previousValue.length < changedValue.length) return value.toString().slice(previousValue.length - changedValue.length);else return changedValue.toString().includes(e.key) ? e.key : '';
158
+ }();
159
+
160
+ if (!_index.KEYBOARD_SERVICE_KEYS.includes(e.key) && changedValue === previousValue) setIsAttemptToChange(true);
161
+ if (_index.KEYBOARD_SERVICE_KEYS.includes(e.key) || !currentSet) previousValueRef.current = value;else previousValueRef.current = previousValue + currentSet[0];
162
+ }
163
+
164
+ if (onKeyUp) onKeyUp(e.keyCode, e.target.value);
165
+ },
166
+ decrement: function decrement(e) {
167
+ handle.change(intMemoVal - +numStep);
168
+ },
169
+ increment: function increment(e) {
170
+ handle.change(intMemoVal + +numStep);
171
+ }
172
+ }; //Check Outside Click
173
+
174
+ (0, _react.useEffect)(function () {
175
+ var handleClickOutside = function handleClickOutside(event) {
176
+ if (!wrapRef.current.contains(event.target)) {
177
+ setIsFocused(false);
178
+ }
179
+ };
180
+
181
+ document.addEventListener('mousedown', handleClickOutside, true);
182
+ return function () {
183
+ return document.removeEventListener('mousedown', handleClickOutside, true);
184
+ };
185
+ }, []);
186
+ (0, _react.useEffect)(function () {
187
+ if (!isNotBlinkErrors && isAttemptToChange) {
188
+ setIsAttemptToChange(false);
189
+ setIsToHighlightError(true);
190
+ setTimeout(function () {
191
+ setIsToHighlightError(false);
192
+ }, blinkTime || DEFAULT_BLINK_TIME);
193
+ }
194
+ }, [isAttemptToChange]); //On Input Value Change
195
+
196
+ (0, _react.useEffect)(function () {
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
+
207
+ (0, _react.useEffect)(function () {
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]);
226
+ (0, _react.useEffect)(function () {
227
+ if (inputRef !== null && inputRef !== void 0 && inputRef.current && typeof isFocusDefault === 'boolean') setIsFocused(isFocusDefault);
228
+ setEditing(isFocusDefault);
229
+ }, [inputRef, isFocusDefault]);
230
+
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
+
254
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, uniProps, {
255
+ ref: inputRef,
256
+ type: "text"
257
+ })), /*#__PURE__*/_react.default.createElement("div", {
258
+ className: "input__nums"
259
+ }, /*#__PURE__*/_react.default.createElement("button", {
260
+ ref: decRef,
261
+ onMouseDown: function onMouseDown(e) {
262
+ return handle.decrement(e);
263
+ },
264
+ className: (0, _classnames.default)("input__num-btn", {
265
+ disabled: +value <= min
266
+ })
267
+ }, /*#__PURE__*/_react.default.createElement(_reactFeather.Minus, null)), /*#__PURE__*/_react.default.createElement("button", {
268
+ ref: incRef,
269
+ onMouseDown: function onMouseDown(e) {
270
+ return handle.increment(e);
271
+ },
272
+ className: (0, _classnames.default)("input__num-btn", {
273
+ disabled: +value >= max
274
+ })
275
+ }, /*#__PURE__*/_react.default.createElement(_reactFeather.Plus, null))));
276
+ }
277
+
278
+ return /*#__PURE__*/_react.default.createElement("div", {
279
+ ref: wrapRef,
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))
281
+ }, renderInput(), icon, withDelete && /*#__PURE__*/_react.default.createElement("span", {
282
+ className: (0, _classnames.default)("input__close", {
283
+ hidden: !inputValue
284
+ }),
285
+ onClick: function onClick() {
286
+ return handle.clear();
287
+ }
288
+ }));
289
+ };
290
+
291
+ var _default = NumericInput;
292
+ exports.default = _default;
@@ -0,0 +1,135 @@
1
+ .input {
2
+ position: relative;
3
+ word-break: break-all;
4
+ border: none;
5
+ background: none;
6
+ padding: 0 10px;
7
+ width: 100%;
8
+ &::-webkit-outer-spin-button,
9
+ &::-webkit-inner-spin-button {
10
+ -webkit-appearance: none;
11
+ }
12
+
13
+ &__wrap {
14
+ display: flex;
15
+ align-items: center;
16
+ border: 1px solid #e2e5ec;
17
+ box-sizing: border-box;
18
+ background-color: #fff;
19
+ height: 28px;
20
+ border-radius: 4px;
21
+
22
+ &_focus {
23
+ border-color: #6b81dd;
24
+ filter: drop-shadow(0px 0px 4px rgba(93, 120, 255, 0.5));
25
+ }
26
+
27
+ &_disabled {
28
+ background: #f7f8fa;
29
+ opacity: 0.5;
30
+ border-color: #a6acb1;
31
+ pointer-events: none;
32
+ }
33
+
34
+ &_error {
35
+ border-color: #f06d8d;
36
+ }
37
+ }
38
+
39
+ &_disabled {
40
+ background: #f7f8fa;
41
+ opacity: 0.5;
42
+ border-color: #a6acb1;
43
+ pointer-events: none;
44
+ }
45
+
46
+ &_error {
47
+ border-color: #f06d8d;
48
+ }
49
+
50
+ svg {
51
+ margin-right: 4px;
52
+ }
53
+
54
+ &__input {
55
+ width: 100%;
56
+ height: 100%;
57
+ box-sizing: border-box;
58
+ font-size: 13px;
59
+ font-weight: 400;
60
+ color: #1e1e2d;
61
+ border: none;
62
+ padding: 0 5px;
63
+ border-radius: 4px;
64
+ }
65
+
66
+ &__close {
67
+ position: relative;
68
+ opacity: 0.6;
69
+ width: 14px;
70
+ height: 14px;
71
+ background: none;
72
+ cursor: pointer;
73
+ margin-right: 4px;
74
+ visibility: hidden;
75
+ pointer-events: none;
76
+ &:hover {
77
+ opacity: 1;
78
+ }
79
+
80
+ &:before,
81
+ &:after {
82
+ content: '';
83
+ position: absolute;
84
+ top: 0;
85
+ left: 0;
86
+ right: 0;
87
+ margin: auto;
88
+ height: 14px;
89
+ width: 2px;
90
+ background-color: #9aa0b9;
91
+ }
92
+
93
+ &:before {
94
+ transform: rotate(45deg);
95
+ }
96
+
97
+ &:after {
98
+ transform: rotate(-45deg);
99
+ }
100
+ }
101
+
102
+ &__nums {
103
+ display: flex;
104
+ align-items: center;
105
+ height: 100%;
106
+ }
107
+
108
+ &__num-btn {
109
+ cursor: pointer;
110
+ display: flex;
111
+ align-items: center;
112
+ justify-content: center;
113
+ height: 100%;
114
+ width: 24px;
115
+ border-left: 1px solid #e2e5ec;
116
+ background: none;
117
+ font-size: 20px;
118
+ user-select: none;
119
+ &.disabled {
120
+ opacity: 0.3;
121
+ }
122
+ svg {
123
+ margin-right: 0;
124
+ }
125
+ }
126
+
127
+ &-label {
128
+ margin-bottom: 5px;
129
+ }
130
+ }
131
+
132
+ .input__wrap:hover .input__close {
133
+ visibility: visible;
134
+ pointer-events: all;
135
+ }
@@ -0,0 +1,117 @@
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.NumericInputTemplate = exports.default = void 0;
11
+
12
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
13
+
14
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
+
16
+ var _react = _interopRequireWildcard(require("react"));
17
+
18
+ var _reactFeather = require("react-feather");
19
+
20
+ var _NumericInput = _interopRequireDefault(require("./NumericInput"));
21
+
22
+ 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); }
23
+
24
+ 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; }
25
+
26
+ global.lng = 'en';
27
+ var _default = {
28
+ title: 'Form Elements/NumericInput',
29
+ component: _NumericInput.default,
30
+ argTypes: {
31
+ disabled: {
32
+ description: 'boolean'
33
+ },
34
+ isFocusDefault: {
35
+ description: 'boolean - if true, input will be focused on mount'
36
+ },
37
+ isInitialFocus: {
38
+ description: 'boolean - if true, the input will be focused on mount'
39
+ },
40
+ error: {
41
+ description: 'text - coloring input if is errored'
42
+ },
43
+ isPriceInput: {
44
+ description: 'boolean - if true, the input will be styled as PriceInput'
45
+ },
46
+ withDelete: {
47
+ description: 'boolean - add clear-cross by hover'
48
+ },
49
+ numStep: {
50
+ description: 'number/text - plus/minus buttons factor (default: 1)'
51
+ },
52
+ min: {
53
+ description: 'number/text - minimal number for numeric input'
54
+ },
55
+ max: {
56
+ description: 'number/text - maximal number for numeric input'
57
+ },
58
+ placeholder: {
59
+ description: 'text'
60
+ },
61
+ icon: {
62
+ description: 'JSX'
63
+ },
64
+ value: {
65
+ description: '(* - required prop)'
66
+ },
67
+ className: {
68
+ description: 'string'
69
+ },
70
+ mask: {
71
+ description: 'string: force input to masked https://www.npmjs.com/package/react-input-mask'
72
+ },
73
+ symbolsLimit: {
74
+ description: 'Set limit of symbols in input, overhead will be ignored'
75
+ },
76
+ onBlur: {
77
+ description: 'custom callback on blur'
78
+ },
79
+ onFocus: {
80
+ description: 'custom callback on focus'
81
+ },
82
+ onKeyUp: {
83
+ description: 'custom callback on keyup, returns event keyCode'
84
+ }
85
+ }
86
+ };
87
+ exports.default = _default;
88
+
89
+ var Template = function Template(args) {
90
+ var _useState = (0, _react.useState)('15000'),
91
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
92
+ value = _useState2[0],
93
+ setValue = _useState2[1];
94
+
95
+ return /*#__PURE__*/_react.default.createElement(_NumericInput.default, (0, _extends2.default)({}, args, {
96
+ value: value,
97
+ onChange: setValue
98
+ }));
99
+ };
100
+
101
+ var NumericInputTemplate = Template.bind({});
102
+ exports.NumericInputTemplate = NumericInputTemplate;
103
+ NumericInputTemplate.args = {
104
+ disabled: false,
105
+ isFocusDefault: false,
106
+ error: '',
107
+ isPriceInput: false,
108
+ mask: '',
109
+ withDelete: true,
110
+ isNumeric: false,
111
+ numStep: 100,
112
+ min: '0',
113
+ max: '15000',
114
+ symbolsLimit: 5,
115
+ placeholder: 'Placeholder',
116
+ icon: /*#__PURE__*/_react.default.createElement(_reactFeather.User, null)
117
+ };
@@ -43,7 +43,8 @@ var RangeCalendar = function RangeCalendar(props) {
43
43
  onHover = _props$onHover === void 0 ? function () {} : _props$onHover,
44
44
  startPrevDate = props.startPrevDate,
45
45
  endPrevDate = props.endPrevDate,
46
- limitRange = props.limitRange;
46
+ limitRange = props.limitRange,
47
+ isShortWeekNames = props.isShortWeekNames;
47
48
 
48
49
  var _useState = (0, _react.useState)({}),
49
50
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -114,7 +115,9 @@ var RangeCalendar = function RangeCalendar(props) {
114
115
  onMouseLeave: function onMouseLeave() {
115
116
  return onHover(null);
116
117
  }
117
- }, day && day.date.getDate());
118
+ }, /*#__PURE__*/_react.default.createElement("span", {
119
+ className: "calendar__day-num"
120
+ }, day && day.date.getDate()));
118
121
  };
119
122
 
120
123
  var handlePrev = function handlePrev() {
@@ -125,6 +128,10 @@ var RangeCalendar = function RangeCalendar(props) {
125
128
  setDate((0, _momentTimezone.default)(date).add(1, 'month').toDate());
126
129
  };
127
130
 
131
+ var getFormatedWeekName = function getFormatedWeekName(input) {
132
+ return isShortWeekNames ? input.charAt(0) : input;
133
+ };
134
+
128
135
  return /*#__PURE__*/_react.default.createElement("div", {
129
136
  className: (0, _classnames.default)('range-calendar', className)
130
137
  }, /*#__PURE__*/_react.default.createElement("div", {
@@ -147,7 +154,7 @@ var RangeCalendar = function RangeCalendar(props) {
147
154
  return /*#__PURE__*/_react.default.createElement("div", {
148
155
  key: "day-of-week_".concat(dayOfWeek),
149
156
  className: "range-calendar__day range-calendar__day--title"
150
- }, (0, _momentTimezone.default)().weekday(dayOfWeek).format('dd').charAt(0));
157
+ }, getFormatedWeekName((0, _momentTimezone.default)().weekday(dayOfWeek).format('dd')));
151
158
  })), Object.keys(days).map(function (week, index) {
152
159
  return /*#__PURE__*/_react.default.createElement("div", {
153
160
  key: "week_".concat(index),