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.
- package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.js +6 -2
- package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.scss +91 -60
- package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.stories.js +2 -1
- package/dist/Atomic/FormElements/DateTime/DateTime.stories.js +1 -1
- package/dist/Atomic/FormElements/Dropdown/Dropdown.js +64 -32
- package/dist/Atomic/FormElements/Dropdown/Dropdown.scss +26 -3
- package/dist/Atomic/FormElements/Dropdown/Dropdown.stories.js +40 -9
- package/dist/Atomic/FormElements/Input/Input.js +141 -97
- package/dist/Atomic/FormElements/Input/Input.scss +18 -15
- package/dist/Atomic/FormElements/Input/Input.stories.js +46 -29
- package/dist/Atomic/FormElements/InputCalendar/InputCalendar.js +89 -0
- package/dist/Atomic/FormElements/{Calendar/Calendar.stories.js → InputCalendar/InputCalendar.stories.js} +19 -20
- package/dist/Atomic/FormElements/InputDateRange/InputDateRange.js +234 -0
- package/dist/Atomic/FormElements/InputDateRange/InputDateRange.scss +626 -0
- package/dist/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +91 -0
- package/dist/Atomic/FormElements/InputDateRange/components/Datepicker.js +491 -0
- package/dist/Atomic/FormElements/InputDateRange/components/OpenedPart.js +156 -0
- package/dist/Atomic/FormElements/InputDateRange/components/SelectItem.js +46 -0
- package/dist/Atomic/FormElements/InputDateRange/dependencies.js +249 -0
- package/dist/Atomic/FormElements/Label/Label.js +3 -10
- package/dist/Atomic/FormElements/Label/Label.scss +2 -0
- package/dist/Atomic/FormElements/Label/Label.stories.js +5 -4
- package/dist/Atomic/FormElements/Modal/Modal.stories.js +64 -18
- package/dist/Atomic/FormElements/NumericInput/NumericInput.js +254 -0
- package/dist/Atomic/FormElements/NumericInput/NumericInput.scss +135 -0
- package/dist/Atomic/FormElements/NumericInput/NumericInput.stories.js +121 -0
- package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.js +167 -0
- package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.scss +101 -0
- package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.stories.js +81 -0
- package/dist/Atomic/FormElements/Table/Table.scss +1 -1
- package/dist/Atomic/FormElements/Textarea/Textarea.scss +1 -1
- package/dist/Atomic/MainMenu/MainMenu.scss +2 -2
- package/dist/Atomic/UI/Accordion/Accordion.scss +2 -2
- package/dist/Atomic/UI/Arrow/Arrow.js +80 -0
- package/dist/Atomic/UI/Arrow/Arrow.scss +19 -0
- package/dist/Atomic/UI/Arrow/Arrow.stories.js +46 -0
- package/dist/Atomic/UI/Button/Button.js +4 -2
- package/dist/Atomic/UI/Button/Button.scss +26 -0
- package/dist/Atomic/UI/Button/Button.stories.js +2 -2
- package/dist/Atomic/UI/Calendar/Calendar.js +146 -0
- package/dist/Atomic/UI/Calendar/Calendar.scss +544 -0
- package/dist/Atomic/UI/Calendar/Calendar.stories.js +38 -0
- package/dist/Atomic/UI/Price/Price.js +1 -0
- package/dist/Atomic/UI/Status/Status.scss +1 -1
- package/dist/Constants/index.constants.js +8 -0
- package/dist/Functions/inputExecutor.js +58 -0
- package/dist/Functions/useClickOutside.js +25 -0
- package/dist/Functions/utils.js +10 -2
- package/dist/Molecular/Datepicker/Datepicker.js +451 -0
- package/dist/Molecular/Datepicker/Datepicker.scss +8 -0
- package/dist/Molecular/Datepicker/Datepicker.stories.js +44 -0
- package/dist/Molecular/Datepicker/components/Calendar.js +156 -0
- package/dist/Molecular/FormElements/FormElement.js +40 -0
- package/dist/Molecular/FormElements/FormElement.scss +8 -0
- package/dist/Molecular/FormElements/FormElement.stories.js +73 -0
- package/dist/scss/_vars.scss +3 -1
- package/dist/scss/main.scss +3 -3
- package/package.json +9 -4
- package/src/Atomic/FormElements/CheckboxInput/CheckboxInput.js +12 -2
- package/src/Atomic/FormElements/CheckboxInput/CheckboxInput.scss +91 -60
- package/src/Atomic/FormElements/CheckboxInput/CheckboxInput.stories.js +4 -3
- package/src/Atomic/FormElements/DateTime/DateTime.stories.js +1 -1
- package/src/Atomic/FormElements/Dropdown/Dropdown.js +57 -19
- package/src/Atomic/FormElements/Dropdown/Dropdown.scss +26 -3
- package/src/Atomic/FormElements/Dropdown/Dropdown.stories.js +37 -15
- package/src/Atomic/FormElements/Input/Input.js +136 -79
- package/src/Atomic/FormElements/Input/Input.scss +18 -15
- package/src/Atomic/FormElements/Input/Input.stories.js +48 -31
- package/src/Atomic/FormElements/InputCalendar/InputCalendar.js +43 -0
- package/src/Atomic/FormElements/InputCalendar/InputCalendar.stories.js +27 -0
- package/src/Atomic/FormElements/InputDateRange/InputDateRange.js +214 -0
- package/src/Atomic/FormElements/InputDateRange/InputDateRange.scss +626 -0
- package/src/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +61 -0
- package/src/Atomic/FormElements/InputDateRange/components/Datepicker.js +412 -0
- package/src/Atomic/FormElements/InputDateRange/components/OpenedPart.js +114 -0
- package/src/Atomic/FormElements/InputDateRange/components/SelectItem.js +24 -0
- package/src/Atomic/FormElements/InputDateRange/dependencies.js +161 -0
- package/src/Atomic/FormElements/Label/Label.js +3 -4
- package/src/Atomic/FormElements/Label/Label.scss +2 -0
- package/src/Atomic/FormElements/Label/Label.stories.js +5 -4
- package/src/Atomic/FormElements/Modal/Modal.stories.js +60 -15
- package/src/Atomic/FormElements/NumericInput/NumericInput.js +220 -0
- package/src/Atomic/FormElements/NumericInput/NumericInput.scss +135 -0
- package/src/Atomic/FormElements/NumericInput/NumericInput.stories.js +94 -0
- package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.js +146 -0
- package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.scss +101 -0
- package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.stories.js +54 -0
- package/src/Atomic/FormElements/Table/Table.scss +1 -1
- package/src/Atomic/FormElements/Textarea/Textarea.scss +1 -1
- package/src/Atomic/MainMenu/MainMenu.scss +2 -2
- package/src/Atomic/UI/Accordion/Accordion.scss +2 -2
- package/src/Atomic/UI/Arrow/Arrow.js +41 -0
- package/src/Atomic/UI/Arrow/Arrow.scss +19 -0
- package/src/Atomic/UI/Arrow/Arrow.stories.js +32 -0
- package/src/Atomic/UI/Button/Button.js +3 -3
- package/src/Atomic/UI/Button/Button.scss +26 -0
- package/src/Atomic/UI/Button/Button.stories.js +4 -3
- package/src/Atomic/{FormElements → UI}/Calendar/Calendar.js +26 -23
- package/src/Atomic/UI/Calendar/Calendar.scss +544 -0
- package/src/Atomic/UI/Calendar/Calendar.stories.js +24 -0
- package/src/Atomic/UI/Price/Price.js +1 -0
- package/src/Atomic/UI/Status/Status.scss +1 -1
- package/src/Constants/index.constants.js +41 -0
- package/src/Functions/inputExecutor.js +62 -0
- package/src/Functions/useClickOutside.js +15 -0
- package/src/Functions/utils.js +10 -1
- package/src/Molecular/Datepicker/Datepicker.js +346 -0
- package/src/Molecular/Datepicker/Datepicker.scss +8 -0
- package/src/Molecular/Datepicker/Datepicker.stories.js +27 -0
- package/src/Molecular/Datepicker/components/Calendar.js +118 -0
- package/src/Molecular/FormElements/FormElement.js +18 -0
- package/src/Molecular/FormElements/FormElement.scss +8 -0
- package/src/Molecular/FormElements/FormElement.stories.js +59 -0
- package/src/scss/_vars.scss +3 -1
- package/src/scss/main.scss +3 -3
- package/dist/Atomic/FormElements/Calendar/Calendar.js +0 -127
- package/dist/Atomic/FormElements/Calendar/Calendar.scss +0 -498
- package/dist/scss/anme/_anme-bootstrap-grid.scss +0 -748
- package/dist/scss/anme/_anme-elements.scss +0 -269
- package/dist/scss/anme/_anme-grid.scss +0 -111
- package/dist/scss/anme/_anme-justify.scss +0 -111
- package/dist/scss/anme/_anme-mixins-media.scss +0 -116
- package/dist/scss/anme/_anme-mixins.scss +0 -166
- package/dist/scss/anme/_anme-normalize.scss +0 -8
- package/dist/scss/anme/_anme-overall.scss +0 -34
- package/dist/scss/anme/_anme-padding-margins.scss +0 -419
- package/dist/scss/anme/_anme-table.scss +0 -81
- package/dist/scss/anme/_anme-theme.scss +0 -275
- package/dist/scss/anme/_anme-vars.scss +0 -91
- package/dist/scss/anme/_code-styling.scss +0 -23
- package/dist/scss/anme/styles.scss +0 -12
- package/src/Atomic/FormElements/Calendar/Calendar.scss +0 -498
- package/src/Atomic/FormElements/Calendar/Calendar.stories.js +0 -26
- package/src/scss/anme/_anme-bootstrap-grid.scss +0 -748
- package/src/scss/anme/_anme-elements.scss +0 -269
- package/src/scss/anme/_anme-grid.scss +0 -111
- package/src/scss/anme/_anme-justify.scss +0 -111
- package/src/scss/anme/_anme-mixins-media.scss +0 -116
- package/src/scss/anme/_anme-mixins.scss +0 -166
- package/src/scss/anme/_anme-normalize.scss +0 -8
- package/src/scss/anme/_anme-overall.scss +0 -34
- package/src/scss/anme/_anme-padding-margins.scss +0 -419
- package/src/scss/anme/_anme-table.scss +0 -81
- package/src/scss/anme/_anme-theme.scss +0 -275
- package/src/scss/anme/_anme-vars.scss +0 -91
- package/src/scss/anme/_code-styling.scss +0 -23
- 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;
|