intelicoreact 0.0.49 → 0.0.61
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/DateTime/DateTime.stories.js +1 -1
- package/dist/Atomic/FormElements/Dropdown/Dropdown.js +5 -7
- package/dist/Atomic/FormElements/Input/Input.js +10 -11
- package/dist/Atomic/FormElements/Input/Input.stories.js +5 -1
- package/dist/Atomic/FormElements/{Calendar/Calendar.stories.js → InputCalendar/InputCalendar.js} +40 -26
- package/dist/Atomic/FormElements/InputCalendar/InputCalendar.stories.js +46 -0
- package/dist/Atomic/FormElements/InputDateRange/InputDateRange.js +249 -0
- package/dist/Atomic/FormElements/InputDateRange/InputDateRange.scss +568 -0
- package/dist/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +87 -0
- package/dist/Atomic/FormElements/InputDateRange/components/Datepicker.js +486 -0
- package/dist/Atomic/FormElements/InputDateRange/components/OpenedPart.js +154 -0
- package/dist/Atomic/FormElements/InputDateRange/components/SelectItem.js +38 -0
- package/dist/Atomic/FormElements/InputDateRange/dependencies.js +241 -0
- package/dist/Atomic/FormElements/Modal/Modal.stories.js +64 -18
- package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.js +162 -0
- package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.scss +101 -0
- package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.stories.js +81 -0
- 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/{FormElements → UI}/Calendar/Calendar.js +20 -9
- package/dist/Atomic/UI/Calendar/Calendar.scss +544 -0
- package/dist/Atomic/UI/Calendar/Calendar.stories.js +37 -0
- package/dist/Atomic/UI/Price/Price.js +1 -0
- package/dist/Functions/utils.js +10 -2
- package/package.json +7 -5
- package/src/Atomic/FormElements/DateTime/DateTime.stories.js +1 -1
- package/src/Atomic/FormElements/Dropdown/Dropdown.js +2 -3
- package/src/Atomic/FormElements/Input/Input.js +10 -9
- package/src/Atomic/FormElements/Input/Input.stories.js +3 -1
- 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 +234 -0
- package/src/Atomic/FormElements/InputDateRange/InputDateRange.scss +568 -0
- package/src/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +58 -0
- package/src/Atomic/FormElements/InputDateRange/components/Datepicker.js +406 -0
- package/src/Atomic/FormElements/InputDateRange/components/OpenedPart.js +112 -0
- package/src/Atomic/FormElements/InputDateRange/components/SelectItem.js +22 -0
- package/src/Atomic/FormElements/InputDateRange/dependencies.js +153 -0
- package/src/Atomic/FormElements/Modal/Modal.stories.js +60 -15
- package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.js +143 -0
- package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.scss +101 -0
- package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.stories.js +54 -0
- 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 +13 -10
- package/src/Atomic/UI/Calendar/Calendar.scss +544 -0
- package/src/Atomic/UI/Calendar/Calendar.stories.js +23 -0
- package/src/Atomic/UI/Price/Price.js +1 -0
- package/src/Functions/utils.js +6 -0
- package/dist/Atomic/FormElements/Calendar/Calendar.scss +0 -543
- package/src/Atomic/FormElements/Calendar/Calendar.scss +0 -543
- package/src/Atomic/FormElements/Calendar/Calendar.stories.js +0 -38
|
@@ -86,8 +86,6 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
86
86
|
var filteredOptions = [].concat((0, _toConsumableArray2.default)(filteredItems), (0, _toConsumableArray2.default)(filteredGroups));
|
|
87
87
|
|
|
88
88
|
var handleClickOutside = function handleClickOutside(event) {
|
|
89
|
-
console.log(dropdownRef.current.contains(event.target));
|
|
90
|
-
|
|
91
89
|
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
|
92
90
|
setIsOpen(false);
|
|
93
91
|
setSearchValue(null);
|
|
@@ -160,7 +158,10 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
160
158
|
className: (0, _classnames.default)(RC, className),
|
|
161
159
|
ref: dropdownRef
|
|
162
160
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
163
|
-
className: "".concat(RC, "__trigger input__wrap ").concat(!value ? 'placeholder' : '', " ").concat(error ? 'error' : '')
|
|
161
|
+
className: "".concat(RC, "__trigger input__wrap ").concat(!value ? 'placeholder' : '', " ").concat(error ? 'error' : ''),
|
|
162
|
+
onClick: function onClick() {
|
|
163
|
+
return !isSearchable ? setIsOpen(!isOpen) : null;
|
|
164
|
+
}
|
|
164
165
|
}, isSearchable ? /*#__PURE__*/_react.default.createElement("input", {
|
|
165
166
|
className: "".concat(RC, "__input"),
|
|
166
167
|
value: searchValue !== null && searchValue !== void 0 ? searchValue : selectedLabel,
|
|
@@ -172,10 +173,7 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
172
173
|
return setIsOpen(true);
|
|
173
174
|
}
|
|
174
175
|
}) : /*#__PURE__*/_react.default.createElement("span", {
|
|
175
|
-
className: "text"
|
|
176
|
-
onClick: function onClick() {
|
|
177
|
-
return setIsOpen(!isOpen);
|
|
178
|
-
}
|
|
176
|
+
className: "text"
|
|
179
177
|
}, selectedLabel || placeholder), /*#__PURE__*/_react.default.createElement("span", {
|
|
180
178
|
className: (0, _classnames.default)("".concat(RC, "__arrow"), (0, _defineProperty2.default)({}, "".concat(RC, "__arrow_active"), isOpen)),
|
|
181
179
|
onClick: function onClick() {
|
|
@@ -49,7 +49,8 @@ var Input = function Input(_ref) {
|
|
|
49
49
|
onKeyUp = _ref.onKeyUp,
|
|
50
50
|
mask = _ref.mask,
|
|
51
51
|
error = _ref.error,
|
|
52
|
-
icon = _ref.icon
|
|
52
|
+
icon = _ref.icon,
|
|
53
|
+
symbolsLimit = _ref.symbolsLimit;
|
|
53
54
|
|
|
54
55
|
// STATES
|
|
55
56
|
var _useState = (0, _react.useState)(false),
|
|
@@ -65,10 +66,8 @@ var Input = function Input(_ref) {
|
|
|
65
66
|
var inputRef = (0, _react.useRef)(null); // HANDLES
|
|
66
67
|
|
|
67
68
|
var handle = {
|
|
68
|
-
change: function change(
|
|
69
|
-
var
|
|
70
|
-
|
|
71
|
-
var inputValue = ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value) || event;
|
|
69
|
+
change: function change(e) {
|
|
70
|
+
var inputValue = e.target ? e.target.value : e;
|
|
72
71
|
|
|
73
72
|
if (isNumeric || type === 'number' && inputValue !== '') {
|
|
74
73
|
inputValue = parseFloat(inputValue) || '';
|
|
@@ -76,7 +75,7 @@ var Input = function Input(_ref) {
|
|
|
76
75
|
if (min && +min > inputValue) {
|
|
77
76
|
inputValue = min;
|
|
78
77
|
} else if (max && +max < inputValue) inputValue = max;
|
|
79
|
-
}
|
|
78
|
+
} else if (symbolsLimit && inputValue.length > +symbolsLimit) inputValue = inputValue.substring(0, +symbolsLimit);
|
|
80
79
|
|
|
81
80
|
onChange(inputValue.toString());
|
|
82
81
|
},
|
|
@@ -84,17 +83,17 @@ var Input = function Input(_ref) {
|
|
|
84
83
|
setEditing(!isEditing);
|
|
85
84
|
onChange('');
|
|
86
85
|
},
|
|
87
|
-
focus: function focus() {
|
|
86
|
+
focus: function focus(e) {
|
|
88
87
|
setIsFocused(true);
|
|
89
|
-
if (onFocus) onFocus();
|
|
88
|
+
if (onFocus) onFocus(e);
|
|
90
89
|
},
|
|
91
|
-
blur: function blur() {
|
|
90
|
+
blur: function blur(e) {
|
|
92
91
|
setIsFocused(false);
|
|
93
92
|
setEditing(false);
|
|
94
|
-
if (onBlur) onBlur();
|
|
93
|
+
if (onBlur) onBlur(e);
|
|
95
94
|
},
|
|
96
95
|
keyUp: function keyUp(e) {
|
|
97
|
-
return onKeyUp ? onKeyUp(e.keyCode) : null;
|
|
96
|
+
return onKeyUp ? onKeyUp(e.keyCode, event) : null;
|
|
98
97
|
}
|
|
99
98
|
};
|
|
100
99
|
(0, _react.useEffect)(function () {
|
|
@@ -71,6 +71,9 @@ var _default = {
|
|
|
71
71
|
mask: {
|
|
72
72
|
description: 'string: force input to masked https://www.npmjs.com/package/react-input-mask'
|
|
73
73
|
},
|
|
74
|
+
symbolsLimit: {
|
|
75
|
+
description: 'Set limit of symbols in input, overhead will be ignored'
|
|
76
|
+
},
|
|
74
77
|
onBlur: {
|
|
75
78
|
description: 'custom callback on blur'
|
|
76
79
|
},
|
|
@@ -109,5 +112,6 @@ InputTemplate.args = {
|
|
|
109
112
|
max: '5',
|
|
110
113
|
placeholder: 'Placeholder',
|
|
111
114
|
mask: '',
|
|
112
|
-
icon: /*#__PURE__*/_react.default.createElement(_reactFeather.User, null)
|
|
115
|
+
icon: /*#__PURE__*/_react.default.createElement(_reactFeather.User, null),
|
|
116
|
+
symbolsLimit: 225
|
|
113
117
|
};
|
package/dist/Atomic/FormElements/{Calendar/Calendar.stories.js → InputCalendar/InputCalendar.js}
RENAMED
|
@@ -7,54 +7,70 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
10
|
-
exports.
|
|
10
|
+
exports.default = void 0;
|
|
11
11
|
|
|
12
12
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
13
13
|
|
|
14
14
|
var _react = _interopRequireWildcard(require("react"));
|
|
15
15
|
|
|
16
|
-
var
|
|
16
|
+
var _moment = _interopRequireDefault(require("moment"));
|
|
17
17
|
|
|
18
|
-
var
|
|
18
|
+
var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
|
|
19
19
|
|
|
20
|
-
var _Calendar = _interopRequireDefault(require("
|
|
20
|
+
var _Calendar = _interopRequireDefault(require("../../UI/Calendar/Calendar"));
|
|
21
21
|
|
|
22
|
-
var
|
|
22
|
+
var _useClickOutside = require("../../../Functions/useClickOutside");
|
|
23
23
|
|
|
24
24
|
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); }
|
|
25
25
|
|
|
26
26
|
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; }
|
|
27
27
|
|
|
28
|
-
|
|
29
|
-
var
|
|
30
|
-
|
|
31
|
-
component: _Calendar.default
|
|
32
|
-
};
|
|
33
|
-
exports.default = _default;
|
|
28
|
+
var InputCalendar = function InputCalendar(_ref) {
|
|
29
|
+
var data = _ref.data,
|
|
30
|
+
params = _ref.params;
|
|
34
31
|
|
|
35
|
-
var
|
|
36
|
-
var _useState = (0, _react.useState)(args.date),
|
|
32
|
+
var _useState = (0, _react.useState)(data),
|
|
37
33
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
38
34
|
date = _useState2[0],
|
|
39
|
-
|
|
35
|
+
setDate = _useState2[1];
|
|
40
36
|
|
|
41
|
-
var _useState3 = (0, _react.useState)(
|
|
37
|
+
var _useState3 = (0, _react.useState)(date),
|
|
42
38
|
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
43
|
-
|
|
44
|
-
|
|
39
|
+
inputValue = _useState4[0],
|
|
40
|
+
setInputValue = _useState4[1];
|
|
41
|
+
|
|
42
|
+
var _useState5 = (0, _react.useState)(false),
|
|
43
|
+
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
44
|
+
isOpened = _useState6[0],
|
|
45
|
+
setIsOpened = _useState6[1];
|
|
45
46
|
|
|
46
47
|
var calendarRef = (0, _react.useRef)(null);
|
|
47
48
|
(0, _useClickOutside.useClickOutside)(calendarRef, function () {
|
|
48
49
|
return setIsOpened(false);
|
|
49
50
|
});
|
|
51
|
+
|
|
52
|
+
var changeInputValue = function changeInputValue(value) {
|
|
53
|
+
if (!value.includes('_') && value) {
|
|
54
|
+
setDate((0, _moment.default)(value).format('L'));
|
|
55
|
+
setInputValue((0, _moment.default)(value).format('L'));
|
|
56
|
+
} else {
|
|
57
|
+
setInputValue(value);
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
var changeCalendarDay = function changeCalendarDay(value) {
|
|
62
|
+
setDate(value);
|
|
63
|
+
setInputValue(value);
|
|
64
|
+
};
|
|
65
|
+
|
|
50
66
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
51
67
|
className: "calendar-container",
|
|
52
68
|
ref: calendarRef
|
|
53
69
|
}, /*#__PURE__*/_react.default.createElement(_reactInputMask.default, {
|
|
54
70
|
mask: "99/99/9999",
|
|
55
|
-
value:
|
|
71
|
+
value: inputValue,
|
|
56
72
|
onChange: function onChange(e) {
|
|
57
|
-
return
|
|
73
|
+
return changeInputValue(e.target.value);
|
|
58
74
|
},
|
|
59
75
|
className: "calendar-dropdown",
|
|
60
76
|
onFocus: function onFocus() {
|
|
@@ -63,13 +79,11 @@ var Template = function Template(args) {
|
|
|
63
79
|
}), isOpened ? /*#__PURE__*/_react.default.createElement(_Calendar.default, {
|
|
64
80
|
date: date,
|
|
65
81
|
setDate: function setDate(newDate) {
|
|
66
|
-
return
|
|
67
|
-
}
|
|
82
|
+
return changeCalendarDay(newDate);
|
|
83
|
+
},
|
|
84
|
+
params: params
|
|
68
85
|
}) : null);
|
|
69
86
|
};
|
|
70
87
|
|
|
71
|
-
var
|
|
72
|
-
exports.
|
|
73
|
-
CalendarSimple.args = {
|
|
74
|
-
date: '10/11/2021'
|
|
75
|
-
};
|
|
88
|
+
var _default = InputCalendar;
|
|
89
|
+
exports.default = _default;
|
|
@@ -0,0 +1,46 @@
|
|
|
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.Calendar = exports.default = void 0;
|
|
11
|
+
|
|
12
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
+
|
|
14
|
+
var _yup = require("yup");
|
|
15
|
+
|
|
16
|
+
var _InputCalendar = _interopRequireDefault(require("./InputCalendar"));
|
|
17
|
+
|
|
18
|
+
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); }
|
|
19
|
+
|
|
20
|
+
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; }
|
|
21
|
+
|
|
22
|
+
global.lng = 'en';
|
|
23
|
+
var _default = {
|
|
24
|
+
title: 'Form Elements/InputCalendar',
|
|
25
|
+
component: _InputCalendar.default
|
|
26
|
+
};
|
|
27
|
+
exports.default = _default;
|
|
28
|
+
|
|
29
|
+
var Template = function Template(args) {
|
|
30
|
+
var params = {
|
|
31
|
+
minDate: args === null || args === void 0 ? void 0 : args.minDate,
|
|
32
|
+
maxDate: args === null || args === void 0 ? void 0 : args.maxDate
|
|
33
|
+
};
|
|
34
|
+
return /*#__PURE__*/_react.default.createElement(_InputCalendar.default, {
|
|
35
|
+
data: args.date,
|
|
36
|
+
params: params
|
|
37
|
+
});
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
var Calendar = Template.bind({});
|
|
41
|
+
exports.Calendar = Calendar;
|
|
42
|
+
Calendar.args = {
|
|
43
|
+
date: '10/14/2021',
|
|
44
|
+
minDate: '10/11/2021',
|
|
45
|
+
maxDate: '10/25/2021'
|
|
46
|
+
};
|
|
@@ -0,0 +1,249 @@
|
|
|
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 _momentTimezone = _interopRequireDefault(require("moment-timezone"));
|
|
23
|
+
|
|
24
|
+
var _dependencies = require("./dependencies");
|
|
25
|
+
|
|
26
|
+
var _OpenedPart = _interopRequireDefault(require("./components/OpenedPart"));
|
|
27
|
+
|
|
28
|
+
var _Arrow = _interopRequireDefault(require("../../UI/Arrow/Arrow"));
|
|
29
|
+
|
|
30
|
+
require("./InputDateRange.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 InputDateRange = function InputDateRange(props) {
|
|
41
|
+
var _ref, _INTERVALS$actualValu;
|
|
42
|
+
|
|
43
|
+
var txt = props.txt,
|
|
44
|
+
id = props.id,
|
|
45
|
+
label = props.label,
|
|
46
|
+
className = props.className,
|
|
47
|
+
buttonsTypes = props.buttonsTypes,
|
|
48
|
+
value = props.value,
|
|
49
|
+
_props$onChange = props.onChange,
|
|
50
|
+
onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
|
|
51
|
+
error = props.error,
|
|
52
|
+
disabled = props.disabled,
|
|
53
|
+
isHoverable = props.isHoverable,
|
|
54
|
+
short = props.short,
|
|
55
|
+
_props$isCompact = props.isCompact,
|
|
56
|
+
isCompact = _props$isCompact === void 0 ? false : _props$isCompact,
|
|
57
|
+
_props$isIntervalsHid = props.isIntervalsHidden,
|
|
58
|
+
isIntervalsHidden = _props$isIntervalsHid === void 0 ? false : _props$isIntervalsHid,
|
|
59
|
+
_props$isCompareHidde = props.isCompareHidden,
|
|
60
|
+
isCompareHidden = _props$isCompareHidde === void 0 ? false : _props$isCompareHidde,
|
|
61
|
+
_props$hideArrows = props.hideArrows,
|
|
62
|
+
hideArrows = _props$hideArrows === void 0 ? false : _props$hideArrows,
|
|
63
|
+
isOptionsRight = props.isOptionsRight,
|
|
64
|
+
limitRange = props.limitRange,
|
|
65
|
+
isUseAbs = props.isUseAbs,
|
|
66
|
+
absTooltip = props.absTooltip;
|
|
67
|
+
var actualValues = (0, _dependencies.getActualDateRange)(value);
|
|
68
|
+
|
|
69
|
+
var _useToggle = (0, _dependencies.useToggle)(false),
|
|
70
|
+
isToggled = _useToggle.isToggled,
|
|
71
|
+
toggle = _useToggle.toggle,
|
|
72
|
+
toggleOn = _useToggle.toggleOn,
|
|
73
|
+
toggleOff = _useToggle.toggleOff;
|
|
74
|
+
|
|
75
|
+
var _useState = (0, _react.useState)(actualValues === null || actualValues === void 0 ? void 0 : actualValues.intervalKey),
|
|
76
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
77
|
+
current = _useState2[0],
|
|
78
|
+
setCurrent = _useState2[1];
|
|
79
|
+
|
|
80
|
+
var _useState3 = (0, _react.useState)(actualValues === null || actualValues === void 0 ? void 0 : actualValues.compare),
|
|
81
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
82
|
+
isCompare = _useState4[0],
|
|
83
|
+
setIsCompare = _useState4[1];
|
|
84
|
+
|
|
85
|
+
var ref = !isUseAbs ? (0, _dependencies.useClickOutside)(toggleOff) : (0, _react.useRef)(null);
|
|
86
|
+
var internalContainerRef = (0, _react.useRef)(null);
|
|
87
|
+
var isEndDateNearFuture = (0, _momentTimezone.default)(actualValues === null || actualValues === void 0 ? void 0 : actualValues.end).isSameOrAfter((0, _momentTimezone.default)());
|
|
88
|
+
|
|
89
|
+
var Range = function Range() {
|
|
90
|
+
var SYMBOLS_QUANTITY_IF_TIME_ADDED = 13;
|
|
91
|
+
var start = actualValues.start,
|
|
92
|
+
end = actualValues.end;
|
|
93
|
+
if (!start || !end) return null;
|
|
94
|
+
var startTime = (0, _momentTimezone.default)(start).format('HH:mm');
|
|
95
|
+
var endTime = (0, _momentTimezone.default)(end).format('HH:mm');
|
|
96
|
+
var firstPart = "".concat((0, _momentTimezone.default)(start).format('ll'), " ").concat(startTime !== '00:00' ? "(".concat(startTime, ")") : '');
|
|
97
|
+
var secondPart = "".concat((endTime !== '00:00' ? (0, _momentTimezone.default)(end) : (0, _momentTimezone.default)(end).subtract(1, 'days')).format('ll'), " ").concat(endTime !== '00:00' ? "(".concat(endTime, ")") : '');
|
|
98
|
+
|
|
99
|
+
var getClasses = function getClasses(base) {
|
|
100
|
+
return (0, _classnames.default)('date-range-input__range-text', {
|
|
101
|
+
'date-range-input__range-text_little': base.length > SYMBOLS_QUANTITY_IF_TIME_ADDED
|
|
102
|
+
});
|
|
103
|
+
};
|
|
104
|
+
|
|
105
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
|
|
106
|
+
className: getClasses(firstPart)
|
|
107
|
+
}, firstPart, endTime === '00:00' && (0, _momentTimezone.default)(end).isSame((0, _momentTimezone.default)(start).add(1, 'days'), 'day') ? '' : " - "), endTime === '00:00' && (0, _momentTimezone.default)(end).isSame((0, _momentTimezone.default)(start).add(1, 'days'), 'day') ? null : /*#__PURE__*/_react.default.createElement("span", {
|
|
108
|
+
className: getClasses(secondPart)
|
|
109
|
+
}, secondPart));
|
|
110
|
+
};
|
|
111
|
+
|
|
112
|
+
var slideInterval = function slideInterval() {
|
|
113
|
+
var _getActualDateRange;
|
|
114
|
+
|
|
115
|
+
var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'forward';
|
|
116
|
+
var start = actualValues.start,
|
|
117
|
+
end = actualValues.end;
|
|
118
|
+
var intervalHoursCount = (0, _momentTimezone.default)(end).diff(start, 'hours');
|
|
119
|
+
var newEnd;
|
|
120
|
+
var newStart;
|
|
121
|
+
var endHours = (0, _momentTimezone.default)(end).hours();
|
|
122
|
+
var startHours = (0, _momentTimezone.default)(start).hours();
|
|
123
|
+
|
|
124
|
+
if (direction === 'forward') {
|
|
125
|
+
newStart = (0, _momentTimezone.default)(end).add(endHours === 0 ? 0 : 1, 'day').hours(startHours).toDate();
|
|
126
|
+
newEnd = (0, _momentTimezone.default)(newStart).add(intervalHoursCount, 'hours');
|
|
127
|
+
} else {
|
|
128
|
+
newEnd = (0, _momentTimezone.default)(start).subtract(endHours === 0 ? 0 : 1, 'day').hours(endHours).toDate();
|
|
129
|
+
newStart = (0, _momentTimezone.default)(newEnd).subtract(intervalHoursCount, 'hours');
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
var startPrevDate = (0, _momentTimezone.default)(newStart).subtract(intervalHoursCount, 'hours').subtract(1, 'seconds');
|
|
133
|
+
var endPrevDate = (0, _momentTimezone.default)(newEnd).subtract(1, 'seconds');
|
|
134
|
+
onChange(_objectSpread(_objectSpread({}, value), {}, {
|
|
135
|
+
intervalKey: (_getActualDateRange = (0, _dependencies.getActualDateRange)({
|
|
136
|
+
start: newStart,
|
|
137
|
+
end: newEnd
|
|
138
|
+
})) === null || _getActualDateRange === void 0 ? void 0 : _getActualDateRange.intervalKey,
|
|
139
|
+
start: newStart,
|
|
140
|
+
end: newEnd,
|
|
141
|
+
startPrevDate: startPrevDate,
|
|
142
|
+
endPrevDate: endPrevDate
|
|
143
|
+
}));
|
|
144
|
+
};
|
|
145
|
+
|
|
146
|
+
var handleArrowClick = function handleArrowClick(type) {
|
|
147
|
+
slideInterval(type === 'right' ? 'forward' : 'back');
|
|
148
|
+
toggleOff();
|
|
149
|
+
};
|
|
150
|
+
|
|
151
|
+
var absData = (0, _react.useMemo)(function () {
|
|
152
|
+
var _internalContainerRef, _internalContainerRef2, _internalContainerRef3, _internalContainerRef4;
|
|
153
|
+
|
|
154
|
+
return {
|
|
155
|
+
body: _OpenedPart.default,
|
|
156
|
+
props: _objectSpread(_objectSpread({}, props), {}, {
|
|
157
|
+
key: "".concat(actualValues.start, "-").concat(actualValues.end, "-").concat(actualValues.intervalKey, "-").concat(current, "-").concat(isCompare),
|
|
158
|
+
actualValues: actualValues,
|
|
159
|
+
current: current,
|
|
160
|
+
setCurrent: setCurrent,
|
|
161
|
+
isCompare: isCompare,
|
|
162
|
+
setIsCompare: setIsCompare,
|
|
163
|
+
toggleOff: toggleOff,
|
|
164
|
+
onChange: onChange
|
|
165
|
+
}),
|
|
166
|
+
clickOutsideCallback: function clickOutsideCallback() {
|
|
167
|
+
return toggleOff();
|
|
168
|
+
},
|
|
169
|
+
top: ((_internalContainerRef = internalContainerRef.current) === null || _internalContainerRef === void 0 ? void 0 : (_internalContainerRef2 = _internalContainerRef.getBoundingClientRect()) === null || _internalContainerRef2 === void 0 ? void 0 : _internalContainerRef2.bottom) || 0,
|
|
170
|
+
left: ((_internalContainerRef3 = internalContainerRef.current) === null || _internalContainerRef3 === void 0 ? void 0 : (_internalContainerRef4 = _internalContainerRef3.getBoundingClientRect()) === null || _internalContainerRef4 === void 0 ? void 0 : _internalContainerRef4.left) || 0
|
|
171
|
+
};
|
|
172
|
+
}, [isToggled, value, actualValues, current, isCompare]);
|
|
173
|
+
(0, _react.useEffect)(function () {
|
|
174
|
+
if (current && isUseAbs && absTooltip) onChange(current, 'absTooltip/props/current');
|
|
175
|
+
}, [current]);
|
|
176
|
+
(0, _react.useEffect)(function () {
|
|
177
|
+
if (isUseAbs) onChange(isToggled ? absData : null, 'absTooltip');
|
|
178
|
+
}, [isToggled]);
|
|
179
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
180
|
+
ref: internalContainerRef,
|
|
181
|
+
className: (0, _classnames.default)('date-range-input', className, {
|
|
182
|
+
'date-range-input_compact': isCompact,
|
|
183
|
+
'date-range-input_hide-arrows': hideArrows,
|
|
184
|
+
'date-range-input_focused': isToggled,
|
|
185
|
+
'date-range-input_error': error,
|
|
186
|
+
'date-range-input_disabled': disabled
|
|
187
|
+
})
|
|
188
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
189
|
+
className: "date-range-input__label"
|
|
190
|
+
}, label), /*#__PURE__*/_react.default.createElement("div", {
|
|
191
|
+
className: "date-range-input__wraper",
|
|
192
|
+
ref: ref,
|
|
193
|
+
onMouseEnter: isHoverable && toggleOn,
|
|
194
|
+
onMouseLeave: isHoverable && toggleOff
|
|
195
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
196
|
+
className: (0, _classnames.default)('date-range-input__absolut-wraper', {
|
|
197
|
+
'date-range-input__absolut-wraper_right-position': isOptionsRight
|
|
198
|
+
})
|
|
199
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
200
|
+
className: (0, _classnames.default)('date-range-input__static-part')
|
|
201
|
+
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
202
|
+
id: id,
|
|
203
|
+
className: (0, _classnames.default)('date-range-input__toggle-button') // className={cn(
|
|
204
|
+
// 'date-range-input__toggle-button',
|
|
205
|
+
// { 'form-select__input--disabled': disabled },
|
|
206
|
+
// { 'form-select__input--opened': isToggled },
|
|
207
|
+
// { 'form-select__input--focused': isToggled },
|
|
208
|
+
// className,
|
|
209
|
+
// )}
|
|
210
|
+
,
|
|
211
|
+
disabled: disabled,
|
|
212
|
+
onClick: !disabled && !isHoverable ? toggle : undefined
|
|
213
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
214
|
+
className: "date-range-input__interval-key"
|
|
215
|
+
}, /*#__PURE__*/_react.default.createElement("span", null, (_ref = (txt === null || txt === void 0 ? void 0 : txt.labels) && txt.labels[actualValues === null || actualValues === void 0 ? void 0 : actualValues.intervalKey]) !== null && _ref !== void 0 ? _ref : ((_INTERVALS$actualValu = _dependencies.INTERVALS[actualValues === null || actualValues === void 0 ? void 0 : actualValues.intervalKey]) === null || _INTERVALS$actualValu === void 0 ? void 0 : _INTERVALS$actualValu.label) || _dependencies.CUSTOM_INTERVAL_KEY_TEXT), current !== _dependencies.ALL_TIME_KEY && /*#__PURE__*/_react.default.createElement("span", null, ":")), !isCompact && /*#__PURE__*/_react.default.createElement("div", {
|
|
216
|
+
className: (0, _classnames.default)('date-range-input__range', {})
|
|
217
|
+
}, /*#__PURE__*/_react.default.createElement(Range, null))), !isCompact && !hideArrows && /*#__PURE__*/_react.default.createElement("div", {
|
|
218
|
+
className: (0, _classnames.default)('date-range-input__arrows-block')
|
|
219
|
+
}, /*#__PURE__*/_react.default.createElement(_Arrow.default, {
|
|
220
|
+
type: "left",
|
|
221
|
+
className: "date-range-input__arrow",
|
|
222
|
+
onClick: function onClick() {
|
|
223
|
+
return handleArrowClick('left');
|
|
224
|
+
},
|
|
225
|
+
disabled: disabled || (actualValues === null || actualValues === void 0 ? void 0 : actualValues.intervalKey) === _dependencies.ALL_TIME_KEY
|
|
226
|
+
}), /*#__PURE__*/_react.default.createElement(_Arrow.default, {
|
|
227
|
+
type: "right",
|
|
228
|
+
className: "date-range-input__arrow",
|
|
229
|
+
onClick: function onClick() {
|
|
230
|
+
return handleArrowClick('right');
|
|
231
|
+
},
|
|
232
|
+
disabled: disabled || (actualValues === null || actualValues === void 0 ? void 0 : actualValues.intervalKey) === _dependencies.ALL_TIME_KEY || (actualValues === null || actualValues === void 0 ? void 0 : actualValues.intervalKey) === 'today' || (0, _momentTimezone.default)(actualValues === null || actualValues === void 0 ? void 0 : actualValues.end).add((0, _momentTimezone.default)(actualValues === null || actualValues === void 0 ? void 0 : actualValues.end).diff(actualValues === null || actualValues === void 0 ? void 0 : actualValues.start, 'hours'), 'hours').isAfter((0, _momentTimezone.default)().add(1, 'day').startOf('day'))
|
|
233
|
+
}))), isToggled && !isUseAbs && /*#__PURE__*/_react.default.createElement(_OpenedPart.default, (0, _extends2.default)({}, props, {
|
|
234
|
+
ref: internalContainerRef,
|
|
235
|
+
actualValues: actualValues,
|
|
236
|
+
current: current,
|
|
237
|
+
setCurrent: setCurrent,
|
|
238
|
+
isCompare: isCompare,
|
|
239
|
+
setIsCompare: setIsCompare,
|
|
240
|
+
toggleOff: toggleOff,
|
|
241
|
+
onChange: onChange
|
|
242
|
+
})))), error && /*#__PURE__*/_react.default.createElement("span", {
|
|
243
|
+
className: "date-range-input__error-block"
|
|
244
|
+
}, error));
|
|
245
|
+
};
|
|
246
|
+
|
|
247
|
+
var _default = /*#__PURE__*/_react.default.memo(InputDateRange);
|
|
248
|
+
|
|
249
|
+
exports.default = _default;
|