intelicoreact 0.0.4 → 0.0.8

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 (147) 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/DateTime/DateTime.stories.js +1 -1
  5. package/dist/Atomic/FormElements/Dropdown/Dropdown.js +64 -32
  6. package/dist/Atomic/FormElements/Dropdown/Dropdown.scss +26 -3
  7. package/dist/Atomic/FormElements/Dropdown/Dropdown.stories.js +40 -9
  8. package/dist/Atomic/FormElements/Input/Input.js +141 -97
  9. package/dist/Atomic/FormElements/Input/Input.scss +18 -15
  10. package/dist/Atomic/FormElements/Input/Input.stories.js +46 -29
  11. package/dist/Atomic/FormElements/InputCalendar/InputCalendar.js +89 -0
  12. package/dist/Atomic/FormElements/{Calendar/Calendar.stories.js → InputCalendar/InputCalendar.stories.js} +19 -20
  13. package/dist/Atomic/FormElements/InputDateRange/InputDateRange.js +234 -0
  14. package/dist/Atomic/FormElements/InputDateRange/InputDateRange.scss +626 -0
  15. package/dist/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +91 -0
  16. package/dist/Atomic/FormElements/InputDateRange/components/Datepicker.js +491 -0
  17. package/dist/Atomic/FormElements/InputDateRange/components/OpenedPart.js +156 -0
  18. package/dist/Atomic/FormElements/InputDateRange/components/SelectItem.js +46 -0
  19. package/dist/Atomic/FormElements/InputDateRange/dependencies.js +249 -0
  20. package/dist/Atomic/FormElements/Label/Label.js +3 -10
  21. package/dist/Atomic/FormElements/Label/Label.scss +2 -0
  22. package/dist/Atomic/FormElements/Label/Label.stories.js +5 -4
  23. package/dist/Atomic/FormElements/Modal/Modal.stories.js +64 -18
  24. package/dist/Atomic/FormElements/NumericInput/NumericInput.js +254 -0
  25. package/dist/Atomic/FormElements/NumericInput/NumericInput.scss +135 -0
  26. package/dist/Atomic/FormElements/NumericInput/NumericInput.stories.js +121 -0
  27. package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.js +167 -0
  28. package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.scss +101 -0
  29. package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.stories.js +81 -0
  30. package/dist/Atomic/FormElements/Table/Table.scss +1 -1
  31. package/dist/Atomic/FormElements/Textarea/Textarea.scss +1 -1
  32. package/dist/Atomic/MainMenu/MainMenu.scss +2 -2
  33. package/dist/Atomic/UI/Accordion/Accordion.scss +2 -2
  34. package/dist/Atomic/UI/Arrow/Arrow.js +80 -0
  35. package/dist/Atomic/UI/Arrow/Arrow.scss +19 -0
  36. package/dist/Atomic/UI/Arrow/Arrow.stories.js +46 -0
  37. package/dist/Atomic/UI/Button/Button.js +4 -2
  38. package/dist/Atomic/UI/Button/Button.scss +26 -0
  39. package/dist/Atomic/UI/Button/Button.stories.js +2 -2
  40. package/dist/Atomic/UI/Calendar/Calendar.js +146 -0
  41. package/dist/Atomic/UI/Calendar/Calendar.scss +544 -0
  42. package/dist/Atomic/UI/Calendar/Calendar.stories.js +38 -0
  43. package/dist/Atomic/UI/Price/Price.js +1 -0
  44. package/dist/Atomic/UI/Status/Status.scss +1 -1
  45. package/dist/Constants/index.constants.js +8 -0
  46. package/dist/Functions/inputExecutor.js +58 -0
  47. package/dist/Functions/useClickOutside.js +25 -0
  48. package/dist/Functions/utils.js +10 -2
  49. package/dist/Molecular/Datepicker/Datepicker.js +451 -0
  50. package/dist/Molecular/Datepicker/Datepicker.scss +8 -0
  51. package/dist/Molecular/Datepicker/Datepicker.stories.js +44 -0
  52. package/dist/Molecular/Datepicker/components/Calendar.js +156 -0
  53. package/dist/Molecular/FormElements/FormElement.js +40 -0
  54. package/dist/Molecular/FormElements/FormElement.scss +8 -0
  55. package/dist/Molecular/FormElements/FormElement.stories.js +73 -0
  56. package/dist/scss/_vars.scss +3 -1
  57. package/dist/scss/main.scss +3 -3
  58. package/package.json +9 -4
  59. package/src/Atomic/FormElements/CheckboxInput/CheckboxInput.js +12 -2
  60. package/src/Atomic/FormElements/CheckboxInput/CheckboxInput.scss +91 -60
  61. package/src/Atomic/FormElements/CheckboxInput/CheckboxInput.stories.js +4 -3
  62. package/src/Atomic/FormElements/DateTime/DateTime.stories.js +1 -1
  63. package/src/Atomic/FormElements/Dropdown/Dropdown.js +57 -19
  64. package/src/Atomic/FormElements/Dropdown/Dropdown.scss +26 -3
  65. package/src/Atomic/FormElements/Dropdown/Dropdown.stories.js +37 -15
  66. package/src/Atomic/FormElements/Input/Input.js +136 -79
  67. package/src/Atomic/FormElements/Input/Input.scss +18 -15
  68. package/src/Atomic/FormElements/Input/Input.stories.js +48 -31
  69. package/src/Atomic/FormElements/InputCalendar/InputCalendar.js +43 -0
  70. package/src/Atomic/FormElements/InputCalendar/InputCalendar.stories.js +27 -0
  71. package/src/Atomic/FormElements/InputDateRange/InputDateRange.js +214 -0
  72. package/src/Atomic/FormElements/InputDateRange/InputDateRange.scss +626 -0
  73. package/src/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +61 -0
  74. package/src/Atomic/FormElements/InputDateRange/components/Datepicker.js +412 -0
  75. package/src/Atomic/FormElements/InputDateRange/components/OpenedPart.js +114 -0
  76. package/src/Atomic/FormElements/InputDateRange/components/SelectItem.js +24 -0
  77. package/src/Atomic/FormElements/InputDateRange/dependencies.js +161 -0
  78. package/src/Atomic/FormElements/Label/Label.js +3 -4
  79. package/src/Atomic/FormElements/Label/Label.scss +2 -0
  80. package/src/Atomic/FormElements/Label/Label.stories.js +5 -4
  81. package/src/Atomic/FormElements/Modal/Modal.stories.js +60 -15
  82. package/src/Atomic/FormElements/NumericInput/NumericInput.js +220 -0
  83. package/src/Atomic/FormElements/NumericInput/NumericInput.scss +135 -0
  84. package/src/Atomic/FormElements/NumericInput/NumericInput.stories.js +94 -0
  85. package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.js +146 -0
  86. package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.scss +101 -0
  87. package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.stories.js +54 -0
  88. package/src/Atomic/FormElements/Table/Table.scss +1 -1
  89. package/src/Atomic/FormElements/Textarea/Textarea.scss +1 -1
  90. package/src/Atomic/MainMenu/MainMenu.scss +2 -2
  91. package/src/Atomic/UI/Accordion/Accordion.scss +2 -2
  92. package/src/Atomic/UI/Arrow/Arrow.js +41 -0
  93. package/src/Atomic/UI/Arrow/Arrow.scss +19 -0
  94. package/src/Atomic/UI/Arrow/Arrow.stories.js +32 -0
  95. package/src/Atomic/UI/Button/Button.js +3 -3
  96. package/src/Atomic/UI/Button/Button.scss +26 -0
  97. package/src/Atomic/UI/Button/Button.stories.js +4 -3
  98. package/src/Atomic/{FormElements → UI}/Calendar/Calendar.js +26 -23
  99. package/src/Atomic/UI/Calendar/Calendar.scss +544 -0
  100. package/src/Atomic/UI/Calendar/Calendar.stories.js +24 -0
  101. package/src/Atomic/UI/Price/Price.js +1 -0
  102. package/src/Atomic/UI/Status/Status.scss +1 -1
  103. package/src/Constants/index.constants.js +41 -0
  104. package/src/Functions/inputExecutor.js +62 -0
  105. package/src/Functions/useClickOutside.js +15 -0
  106. package/src/Functions/utils.js +10 -1
  107. package/src/Molecular/Datepicker/Datepicker.js +346 -0
  108. package/src/Molecular/Datepicker/Datepicker.scss +8 -0
  109. package/src/Molecular/Datepicker/Datepicker.stories.js +27 -0
  110. package/src/Molecular/Datepicker/components/Calendar.js +118 -0
  111. package/src/Molecular/FormElements/FormElement.js +18 -0
  112. package/src/Molecular/FormElements/FormElement.scss +8 -0
  113. package/src/Molecular/FormElements/FormElement.stories.js +59 -0
  114. package/src/scss/_vars.scss +3 -1
  115. package/src/scss/main.scss +3 -3
  116. package/dist/Atomic/FormElements/Calendar/Calendar.js +0 -127
  117. package/dist/Atomic/FormElements/Calendar/Calendar.scss +0 -498
  118. package/dist/scss/anme/_anme-bootstrap-grid.scss +0 -748
  119. package/dist/scss/anme/_anme-elements.scss +0 -269
  120. package/dist/scss/anme/_anme-grid.scss +0 -111
  121. package/dist/scss/anme/_anme-justify.scss +0 -111
  122. package/dist/scss/anme/_anme-mixins-media.scss +0 -116
  123. package/dist/scss/anme/_anme-mixins.scss +0 -166
  124. package/dist/scss/anme/_anme-normalize.scss +0 -8
  125. package/dist/scss/anme/_anme-overall.scss +0 -34
  126. package/dist/scss/anme/_anme-padding-margins.scss +0 -419
  127. package/dist/scss/anme/_anme-table.scss +0 -81
  128. package/dist/scss/anme/_anme-theme.scss +0 -275
  129. package/dist/scss/anme/_anme-vars.scss +0 -91
  130. package/dist/scss/anme/_code-styling.scss +0 -23
  131. package/dist/scss/anme/styles.scss +0 -12
  132. package/src/Atomic/FormElements/Calendar/Calendar.scss +0 -498
  133. package/src/Atomic/FormElements/Calendar/Calendar.stories.js +0 -26
  134. package/src/scss/anme/_anme-bootstrap-grid.scss +0 -748
  135. package/src/scss/anme/_anme-elements.scss +0 -269
  136. package/src/scss/anme/_anme-grid.scss +0 -111
  137. package/src/scss/anme/_anme-justify.scss +0 -111
  138. package/src/scss/anme/_anme-mixins-media.scss +0 -116
  139. package/src/scss/anme/_anme-mixins.scss +0 -166
  140. package/src/scss/anme/_anme-normalize.scss +0 -8
  141. package/src/scss/anme/_anme-overall.scss +0 -34
  142. package/src/scss/anme/_anme-padding-margins.scss +0 -419
  143. package/src/scss/anme/_anme-table.scss +0 -81
  144. package/src/scss/anme/_anme-theme.scss +0 -275
  145. package/src/scss/anme/_anme-vars.scss +0 -91
  146. package/src/scss/anme/_code-styling.scss +0 -23
  147. package/src/scss/anme/styles.scss +0 -12
@@ -0,0 +1,254 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
6
+
7
+ Object.defineProperty(exports, "__esModule", {
8
+ value: true
9
+ });
10
+ exports.default = void 0;
11
+
12
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
13
+
14
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
15
+
16
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
17
+
18
+ var _react = _interopRequireWildcard(require("react"));
19
+
20
+ var _classnames = _interopRequireDefault(require("classnames"));
21
+
22
+ var _reactFeather = require("react-feather");
23
+
24
+ var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
25
+
26
+ var _index = require("../../../Constants/index.constants");
27
+
28
+ var _inputExecutor = require("../../../Functions/inputExecutor");
29
+
30
+ require("./NumericInput.scss");
31
+
32
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
33
+
34
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
35
+
36
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
37
+
38
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
39
+
40
+ var NumericInput = function NumericInput(_ref) {
41
+ var onChange = _ref.onChange,
42
+ disabled = _ref.disabled,
43
+ withDelete = _ref.withDelete,
44
+ _ref$numStep = _ref.numStep,
45
+ numStep = _ref$numStep === void 0 ? 1 : _ref$numStep,
46
+ _ref$min = _ref.min,
47
+ min = _ref$min === void 0 ? 0 : _ref$min,
48
+ max = _ref.max,
49
+ value = _ref.value,
50
+ placeholder = _ref.placeholder,
51
+ className = _ref.className,
52
+ _ref$type = _ref.type,
53
+ type = _ref$type === void 0 ? 'number' : _ref$type,
54
+ onBlur = _ref.onBlur,
55
+ onFocus = _ref.onFocus,
56
+ onKeyUp = _ref.onKeyUp,
57
+ mask = _ref.mask,
58
+ maskChar = _ref.maskChar,
59
+ formatChars = _ref.formatChars,
60
+ error = _ref.error,
61
+ icon = _ref.icon,
62
+ symbolsLimit = _ref.symbolsLimit,
63
+ isNotBlinkErrors = _ref.isNotBlinkErrors,
64
+ blinkTime = _ref.blinkTime,
65
+ isPriceInput = _ref.isPriceInput;
66
+ var DEFAULT_BLINK_TIME = 200; // STATES
67
+
68
+ var _useState = (0, _react.useState)(false),
69
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
70
+ isFocused = _useState2[0],
71
+ setIsFocused = _useState2[1];
72
+
73
+ var _useState3 = (0, _react.useState)(false),
74
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
75
+ isEditing = _useState4[0],
76
+ setEditing = _useState4[1];
77
+
78
+ var inputRef = (0, _react.useRef)(null);
79
+ var decRef = (0, _react.useRef)(null);
80
+ var incRef = (0, _react.useRef)(null);
81
+ var previousValueRef = (0, _react.useRef)(value);
82
+
83
+ var _useState5 = (0, _react.useState)(false),
84
+ _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
85
+ isAttemptToChange = _useState6[0],
86
+ setIsAttemptToChange = _useState6[1];
87
+
88
+ var _useState7 = (0, _react.useState)(false),
89
+ _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
90
+ isToHighlightError = _useState8[0],
91
+ setIsToHighlightError = _useState8[1];
92
+
93
+ var _useState9 = (0, _react.useState)(0),
94
+ _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
95
+ intMemoVal = _useState10[0],
96
+ setIntMemoVal = _useState10[1];
97
+
98
+ var onlyNumbers = _inputExecutor.formatInput.onlyNumbers;
99
+ var _formatInput$priceInp = _inputExecutor.formatInput.priceInput,
100
+ addCommas = _formatInput$priceInp.addCommas,
101
+ removeComma = _formatInput$priceInp.removeComma; // HANDLES
102
+
103
+ var handle = {
104
+ change: function change(e) {
105
+ var inputValue = e.target ? onlyNumbers(e.target.value) : e;
106
+
107
+ if (inputValue !== '') {
108
+ inputValue = parseFloat(inputValue) || '';
109
+
110
+ if (min && +min > inputValue) {
111
+ inputValue = min;
112
+ } else if (max && +max < inputValue) inputValue = max;
113
+ }
114
+
115
+ if (symbolsLimit) {
116
+ inputValue = inputValue.toString().substring(0, +symbolsLimit);
117
+ }
118
+
119
+ setIntMemoVal(parseFloat(inputValue));
120
+ onChange(inputValue.toString());
121
+ },
122
+ toggleEdit: function toggleEdit() {
123
+ setEditing(!isEditing);
124
+ onChange('');
125
+ },
126
+ focus: function focus(e) {
127
+ setIsFocused(true);
128
+ if (isPriceInput) onChange(removeComma(value));
129
+ if (onFocus) onFocus(e);
130
+ },
131
+ blur: function blur(e) {
132
+ setIsFocused(false);
133
+ setEditing(false);
134
+
135
+ if (isPriceInput) {
136
+ if (!isFinite(value)) {
137
+ value = intMemoVal;
138
+ }
139
+
140
+ onChange(addCommas(value));
141
+ }
142
+
143
+ if (onBlur) onBlur(e);
144
+ },
145
+ keyUp: function keyUp(e) {
146
+ if (!isNotBlinkErrors) {
147
+ var _value, _previousValueRef$cur;
148
+
149
+ var changedValue = '' + ((_value = value) !== null && _value !== void 0 ? _value : '');
150
+ var previousValue = '' + ((_previousValueRef$cur = previousValueRef.current) !== null && _previousValueRef$cur !== void 0 ? _previousValueRef$cur : '');
151
+
152
+ var currentSet = function () {
153
+ if (previousValue.length < changedValue.length) return value.toString().slice(previousValue.length - changedValue.length);else return changedValue.toString().includes(e.key) ? e.key : '';
154
+ }();
155
+
156
+ if (!_index.KEYBOARD_SERVICE_KEYS.includes(e.key) && changedValue === previousValue) setIsAttemptToChange(true);
157
+ if (_index.KEYBOARD_SERVICE_KEYS.includes(e.key) || !currentSet) previousValueRef.current = value;else previousValueRef.current = previousValue + currentSet[0];
158
+ }
159
+
160
+ if (onKeyUp) onKeyUp(e.keyCode, e.target.value);
161
+ },
162
+ decrement: function decrement() {
163
+ handle.change(intMemoVal - +numStep);
164
+ },
165
+ increment: function increment() {
166
+ handle.change(intMemoVal + +numStep);
167
+ }
168
+ };
169
+
170
+ var handleClickOutside = function handleClickOutside(event) {
171
+ if (inputRef.current && !inputRef.current.contains(event.target) && !decRef.current.contains(event.target) && !incRef.current.contains(event.target)) {
172
+ setTimeout(function () {
173
+ inputRef.current.focus();
174
+ inputRef.current.blur();
175
+ }, 0);
176
+ }
177
+ };
178
+
179
+ (0, _react.useEffect)(function () {
180
+ if (!isNotBlinkErrors && isAttemptToChange) {
181
+ setIsAttemptToChange(false);
182
+ setIsToHighlightError(true);
183
+ setTimeout(function () {
184
+ setIsToHighlightError(false);
185
+ }, blinkTime || DEFAULT_BLINK_TIME);
186
+ }
187
+ }, [isAttemptToChange]);
188
+ (0, _react.useEffect)(function () {
189
+ document.addEventListener('click', handleClickOutside, true);
190
+ return function () {
191
+ return document.removeEventListener('click', handleClickOutside, true);
192
+ };
193
+ }, []);
194
+ (0, _react.useEffect)(function () {
195
+ if (isNaN(intMemoVal)) setIntMemoVal(min || '');
196
+ }, [intMemoVal]);
197
+ (0, _react.useEffect)(function () {
198
+ if (isEditing || isFocused) inputRef.current.focus();
199
+ }, [isEditing, isFocused]);
200
+
201
+ var uniProps = _objectSpread(_objectSpread({
202
+ className: "input ".concat(className),
203
+ placeholder: placeholder,
204
+ value: value || '',
205
+ disabled: disabled,
206
+ onChange: handle.change,
207
+ onFocus: handle.focus,
208
+ onBlur: handle.blur,
209
+ onKeyUp: handle.keyUp,
210
+ min: min,
211
+ max: max
212
+ }, maskChar ? {
213
+ maskChar: maskChar
214
+ } : {}), formatChars ? {
215
+ formatChars: formatChars
216
+ } : {});
217
+
218
+ function renderInput() {
219
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, uniProps, {
220
+ ref: inputRef,
221
+ type: type
222
+ })), /*#__PURE__*/_react.default.createElement("div", {
223
+ className: "input__nums"
224
+ }, /*#__PURE__*/_react.default.createElement("button", {
225
+ ref: decRef,
226
+ onClick: function onClick() {
227
+ return handle.decrement();
228
+ },
229
+ className: (0, _classnames.default)("input__num-btn", {
230
+ disabled: +value <= min
231
+ })
232
+ }, /*#__PURE__*/_react.default.createElement(_reactFeather.Minus, null)), /*#__PURE__*/_react.default.createElement("button", {
233
+ ref: incRef,
234
+ onClick: function onClick() {
235
+ return handle.increment();
236
+ },
237
+ className: (0, _classnames.default)("input__num-btn", {
238
+ disabled: +value >= max
239
+ })
240
+ }, /*#__PURE__*/_react.default.createElement(_reactFeather.Plus, null))));
241
+ }
242
+
243
+ return /*#__PURE__*/_react.default.createElement("div", {
244
+ className: (0, _classnames.default)("input__wrap", (0, _defineProperty2.default)({}, "input__wrap_focus", isFocused), (0, _defineProperty2.default)({}, "input__wrap_error", error || isToHighlightError), (0, _defineProperty2.default)({}, "input__wrap_disabled", disabled))
245
+ }, renderInput(), icon, withDelete && /*#__PURE__*/_react.default.createElement("span", {
246
+ className: (0, _classnames.default)("input__close", {
247
+ hidden: !value
248
+ }),
249
+ onClick: handle.toggleEdit
250
+ }));
251
+ };
252
+
253
+ var _default = NumericInput;
254
+ exports.default = _default;
@@ -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,121 @@
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
+ isInitialFocus: {
35
+ description: 'boolean - if true, the input will be focused on mount'
36
+ },
37
+ error: {
38
+ description: 'text - coloring input if is errored'
39
+ },
40
+ isPriceInput: {
41
+ description: 'boolean - if true, the input will be styled as PriceInput'
42
+ },
43
+ withDelete: {
44
+ description: 'boolean - add clear-cross by hover'
45
+ },
46
+ numStep: {
47
+ description: 'number/text - plus/minus buttons factor (default: 1)'
48
+ },
49
+ min: {
50
+ description: 'number/text - minimal number for numeric input'
51
+ },
52
+ max: {
53
+ description: 'number/text - maximal number for numeric input'
54
+ },
55
+ placeholder: {
56
+ description: 'text'
57
+ },
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
+ icon: {
66
+ description: 'JSX'
67
+ },
68
+ value: {
69
+ description: '(* - required prop)'
70
+ },
71
+ className: {
72
+ description: 'string'
73
+ },
74
+ mask: {
75
+ description: 'string: force input to masked https://www.npmjs.com/package/react-input-mask'
76
+ },
77
+ symbolsLimit: {
78
+ description: 'Set limit of symbols in input, overhead will be ignored'
79
+ },
80
+ onBlur: {
81
+ description: 'custom callback on blur'
82
+ },
83
+ onFocus: {
84
+ description: 'custom callback on focus'
85
+ },
86
+ onKeyUp: {
87
+ description: 'custom callback on keyup, returns event keyCode'
88
+ }
89
+ }
90
+ };
91
+ exports.default = _default;
92
+
93
+ var Template = function Template(args) {
94
+ var _useState = (0, _react.useState)(''),
95
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
96
+ value = _useState2[0],
97
+ setValue = _useState2[1];
98
+
99
+ return /*#__PURE__*/_react.default.createElement(_NumericInput.default, (0, _extends2.default)({}, args, {
100
+ value: value,
101
+ onChange: setValue
102
+ }));
103
+ };
104
+
105
+ var NumericInputTemplate = Template.bind({});
106
+ exports.NumericInputTemplate = NumericInputTemplate;
107
+ NumericInputTemplate.args = {
108
+ type: 'text',
109
+ disabled: false,
110
+ error: '',
111
+ isPriceInput: false,
112
+ mask: '',
113
+ withDelete: true,
114
+ isNumeric: false,
115
+ numStep: 100,
116
+ min: '0',
117
+ max: '15000',
118
+ symbolsLimit: 2,
119
+ placeholder: 'Placeholder',
120
+ icon: /*#__PURE__*/_react.default.createElement(_reactFeather.User, null)
121
+ };
@@ -0,0 +1,167 @@
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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
13
+
14
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
+
16
+ var _react = _interopRequireWildcard(require("react"));
17
+
18
+ var _classnames = _interopRequireDefault(require("classnames"));
19
+
20
+ var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
21
+
22
+ var _Arrow = _interopRequireDefault(require("../../UI/Arrow/Arrow"));
23
+
24
+ require("./RangeCalendar.scss");
25
+
26
+ 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); }
27
+
28
+ 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; }
29
+
30
+ var RangeCalendar = function RangeCalendar(props) {
31
+ var className = props.className,
32
+ date = props.date,
33
+ setDate = props.setDate,
34
+ startDate = props.startDate,
35
+ endDate = props.endDate,
36
+ _props$allowPrev = props.allowPrev,
37
+ allowPrev = _props$allowPrev === void 0 ? true : _props$allowPrev,
38
+ _props$allowNext = props.allowNext,
39
+ allowNext = _props$allowNext === void 0 ? true : _props$allowNext,
40
+ _props$onClick = props.onClick,
41
+ onClick = _props$onClick === void 0 ? function () {} : _props$onClick,
42
+ _props$onHover = props.onHover,
43
+ onHover = _props$onHover === void 0 ? function () {} : _props$onHover,
44
+ startPrevDate = props.startPrevDate,
45
+ endPrevDate = props.endPrevDate,
46
+ limitRange = props.limitRange,
47
+ isShortWeekNames = props.isShortWeekNames;
48
+
49
+ var _useState = (0, _react.useState)({}),
50
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
51
+ days = _useState2[0],
52
+ setDays = _useState2[1];
53
+
54
+ var title = (0, _react.useMemo)(function () {
55
+ return "".concat((0, _momentTimezone.default)(date).format('MMM'), " ").concat((0, _momentTimezone.default)(date).format('YYYY'));
56
+ }, [date]);
57
+ (0, _react.useEffect)(function () {
58
+ var result = {};
59
+ var day = (0, _momentTimezone.default)(date).startOf('month');
60
+ var daysInMonth = day.daysInMonth();
61
+
62
+ for (var d = 0; d < daysInMonth; d += 1) {
63
+ var week = day.week();
64
+ if (day.month() === 11 && week === 1) week = 53;
65
+ if (day.month() === 0 && week === 53) week = 0;
66
+
67
+ if (!Object.prototype.hasOwnProperty.call(result, week)) {
68
+ result[week] = {};
69
+ }
70
+
71
+ result[week][day.weekday()] = {
72
+ date: day.toDate()
73
+ };
74
+ day.add(1, 'd');
75
+ }
76
+
77
+ setDays(result);
78
+ }, [date]);
79
+
80
+ var renderDay = function renderDay(week, dayOfWeek) {
81
+ var day = days[week][dayOfWeek];
82
+ var isFutureDay = day && (0, _momentTimezone.default)(day.date).isAfter((0, _momentTimezone.default)(), 'day');
83
+ var isPastDay = limitRange ? day && (0, _momentTimezone.default)(day.date).isBefore((0, _momentTimezone.default)().subtract(limitRange, 'days'), 'day') : null;
84
+ var isRangeStart = day && (0, _momentTimezone.default)(day.date).isSame(startDate, 'day');
85
+ var isRangeEnd = day && (0, _momentTimezone.default)(day.date).isSame((0, _momentTimezone.default)(endDate).subtract(1, 'hour'), 'day');
86
+ var isRangeInside = day && startDate && endDate && (0, _momentTimezone.default)(day.date).isAfter(startDate, 'day') && (0, _momentTimezone.default)(day.date).isBefore((0, _momentTimezone.default)(endDate).subtract(1, 'hour'), 'day');
87
+ var isPrevRangeEnd = day && ((0, _momentTimezone.default)(day.date).isSame(startPrevDate, 'day') || (0, _momentTimezone.default)(day.date).isSame((0, _momentTimezone.default)(endPrevDate).subtract(1, 'day'), 'day'));
88
+ var isPrevRangeInside = day && startPrevDate && endPrevDate && (0, _momentTimezone.default)(day.date).isAfter(startPrevDate, 'day') && (0, _momentTimezone.default)(day.date).isBefore((0, _momentTimezone.default)(endPrevDate).subtract(1, 'day'), 'day');
89
+ var classNames = (0, _classnames.default)('range-calendar__day', {
90
+ 'range-calendar__day--clickable': day
91
+ }, {
92
+ 'range-calendar__day--disabled': isFutureDay
93
+ }, {
94
+ 'range-calendar__day--disabled': isPastDay
95
+ }, {
96
+ 'range-calendar__day--range-start': isRangeStart
97
+ }, {
98
+ 'range-calendar__day--range-end': isRangeEnd
99
+ }, {
100
+ 'range-calendar__day--range-inside': isRangeInside
101
+ }, {
102
+ 'range-calendar__day--prev-range-end': isPrevRangeEnd
103
+ }, {
104
+ 'range-calendar__day--prev-range-inside': isPrevRangeInside
105
+ });
106
+ return /*#__PURE__*/_react.default.createElement("div", {
107
+ key: "".concat(week, "_").concat(dayOfWeek),
108
+ className: classNames,
109
+ onClick: day && !isFutureDay ? function (e) {
110
+ return onClick(day.date, e);
111
+ } : null,
112
+ onMouseOver: day && !isFutureDay ? function () {
113
+ return onHover(day.date);
114
+ } : null,
115
+ onMouseLeave: function onMouseLeave() {
116
+ return onHover(null);
117
+ }
118
+ }, day && day.date.getDate());
119
+ };
120
+
121
+ var handlePrev = function handlePrev() {
122
+ setDate((0, _momentTimezone.default)(date).subtract(1, 'month').toDate());
123
+ };
124
+
125
+ var handleNext = function handleNext() {
126
+ setDate((0, _momentTimezone.default)(date).add(1, 'month').toDate());
127
+ };
128
+
129
+ var getFormatedWeekName = function getFormatedWeekName(input) {
130
+ return isShortWeekNames ? input.charAt(0) : input;
131
+ };
132
+
133
+ return /*#__PURE__*/_react.default.createElement("div", {
134
+ className: (0, _classnames.default)('range-calendar', className)
135
+ }, /*#__PURE__*/_react.default.createElement("div", {
136
+ className: "range-calendar-header"
137
+ }, /*#__PURE__*/_react.default.createElement(_Arrow.default, {
138
+ type: "left",
139
+ disabled: !allowPrev,
140
+ onClick: handlePrev,
141
+ className: "range-calendar-header__prev"
142
+ }), /*#__PURE__*/_react.default.createElement("div", {
143
+ className: "range-calendar-header__title"
144
+ }, title), /*#__PURE__*/_react.default.createElement(_Arrow.default, {
145
+ type: "right",
146
+ disabled: !allowNext,
147
+ onClick: handleNext,
148
+ className: "range-calendar-header__next"
149
+ })), /*#__PURE__*/_react.default.createElement("div", {
150
+ className: "range-calendar__week range-calendar__week-title"
151
+ }, (0, _toConsumableArray2.default)(Array(7).keys()).map(function (dayOfWeek) {
152
+ return /*#__PURE__*/_react.default.createElement("div", {
153
+ key: "day-of-week_".concat(dayOfWeek),
154
+ className: "range-calendar__day range-calendar__day--title"
155
+ }, getFormatedWeekName((0, _momentTimezone.default)().weekday(dayOfWeek).format('dd')));
156
+ })), Object.keys(days).map(function (week, index) {
157
+ return /*#__PURE__*/_react.default.createElement("div", {
158
+ key: "week_".concat(index),
159
+ className: "range-calendar__week"
160
+ }, (0, _toConsumableArray2.default)(Array(7).keys()).map(function (dayOfWeek) {
161
+ return renderDay(week, dayOfWeek);
162
+ }));
163
+ }));
164
+ };
165
+
166
+ var _default = RangeCalendar;
167
+ exports.default = _default;