intelicoreact 0.0.64 → 0.0.72
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/Dropdown/Dropdown.js +48 -17
- package/dist/Atomic/FormElements/Dropdown/Dropdown.scss +21 -3
- package/dist/Atomic/FormElements/Dropdown/Dropdown.stories.js +22 -6
- package/dist/Atomic/FormElements/Input/Input.js +15 -4
- package/dist/Atomic/FormElements/Input/Input.stories.js +7 -1
- package/dist/Atomic/FormElements/InputDateRange/InputDateRange.js +17 -50
- package/dist/Atomic/FormElements/InputDateRange/InputDateRange.scss +98 -73
- package/dist/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +5 -157
- package/dist/Atomic/FormElements/InputDateRange/components/Datepicker.js +17 -12
- package/dist/Atomic/FormElements/InputDateRange/components/OpenedPart.js +5 -3
- package/dist/Atomic/FormElements/InputDateRange/components/SelectItem.js +3 -3
- package/dist/Atomic/FormElements/InputDateRange/dependencies.js +7 -7
- package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.js +7 -2
- 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 +7 -8
- package/dist/Atomic/UI/Calendar/Calendar.js +3 -2
- package/dist/Atomic/UI/Calendar/Calendar.stories.js +3 -2
- package/dist/Atomic/UI/Status/Status.scss +1 -1
- 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/scss/_vars.scss +3 -1
- package/dist/scss/main.scss +1 -1
- package/package.json +6 -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/Dropdown/Dropdown.js +53 -19
- package/src/Atomic/FormElements/Dropdown/Dropdown.scss +21 -3
- package/src/Atomic/FormElements/Dropdown/Dropdown.stories.js +28 -15
- package/src/Atomic/FormElements/Input/Input.js +4 -0
- package/src/Atomic/FormElements/Input/Input.stories.js +7 -1
- package/src/Atomic/FormElements/InputDateRange/InputDateRange.js +187 -220
- package/src/Atomic/FormElements/InputDateRange/InputDateRange.scss +98 -73
- package/src/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +35 -122
- package/src/Atomic/FormElements/InputDateRange/components/Datepicker.js +14 -8
- package/src/Atomic/FormElements/InputDateRange/components/OpenedPart.js +6 -4
- package/src/Atomic/FormElements/InputDateRange/components/SelectItem.js +1 -1
- package/src/Atomic/FormElements/InputDateRange/dependencies.js +6 -6
- package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.js +5 -2
- 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 +5 -5
- package/src/Atomic/UI/Calendar/Calendar.js +2 -2
- package/src/Atomic/UI/Calendar/Calendar.stories.js +2 -1
- package/src/Atomic/UI/Status/Status.scss +1 -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/scss/_vars.scss +3 -1
- package/src/scss/main.scss +1 -1
- 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/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
|
@@ -21,7 +21,8 @@ var CheckboxInput = function CheckboxInput(_ref) {
|
|
|
21
21
|
value = _ref.value,
|
|
22
22
|
_onChange = _ref.onChange,
|
|
23
23
|
disabled = _ref.disabled,
|
|
24
|
-
className = _ref.className
|
|
24
|
+
className = _ref.className,
|
|
25
|
+
isStark = _ref.isStark;
|
|
25
26
|
return /*#__PURE__*/_react.default.createElement("label", {
|
|
26
27
|
className: (0, _classnames.default)('checkbox-input', className, (0, _defineProperty2.default)({}, "checkbox-input_disabled", disabled)),
|
|
27
28
|
htmlFor: id
|
|
@@ -35,7 +36,10 @@ var CheckboxInput = function CheckboxInput(_ref) {
|
|
|
35
36
|
return _onChange(!value, e);
|
|
36
37
|
},
|
|
37
38
|
checked: value,
|
|
38
|
-
disabled: disabled
|
|
39
|
+
disabled: disabled,
|
|
40
|
+
ref: function ref(elem) {
|
|
41
|
+
if (elem) elem.indeterminate = isStark;
|
|
42
|
+
}
|
|
39
43
|
}), /*#__PURE__*/_react.default.createElement("span", {
|
|
40
44
|
className: "checkbox-input__mark"
|
|
41
45
|
})), label && /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -1,76 +1,107 @@
|
|
|
1
1
|
.checkbox-input {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
display: flex;
|
|
3
|
+
align-items: center;
|
|
4
|
+
cursor: pointer;
|
|
5
|
+
|
|
6
|
+
&_disabled {
|
|
7
|
+
opacity: 0.5;
|
|
8
|
+
pointer-events: none;
|
|
9
|
+
cursor: auto;
|
|
10
|
+
}
|
|
5
11
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
cursor: auto;
|
|
12
|
+
&:hover {
|
|
13
|
+
.checkbox-input__input {
|
|
14
|
+
background-color: rgba(#6b81dd, 0.2);
|
|
10
15
|
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
&__input {
|
|
19
|
+
position: relative;
|
|
20
|
+
height: 14px;
|
|
21
|
+
width: 14px;
|
|
22
|
+
min-width: 14px;
|
|
23
|
+
border: 1px solid #9aa0b9;
|
|
24
|
+
border-radius: 2px;
|
|
25
|
+
overflow: hidden;
|
|
26
|
+
margin-right: 5px;
|
|
27
|
+
cursor: pointer;
|
|
28
|
+
transition: background-color 0.2s ease;
|
|
29
|
+
background-color: #ffff;
|
|
11
30
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
background-color: rgba(#6b81dd, .2);
|
|
15
|
-
}
|
|
31
|
+
&_checked {
|
|
32
|
+
border-color: #6b81dd;
|
|
16
33
|
}
|
|
17
34
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
min-width: 14px;
|
|
23
|
-
border: 1px solid #9AA0B9;
|
|
24
|
-
border-radius: 2px;
|
|
25
|
-
overflow: hidden;
|
|
26
|
-
margin-right: 5px;
|
|
27
|
-
cursor: pointer;
|
|
28
|
-
transition: background-color .2s ease;
|
|
29
|
-
background-color: #ffff;
|
|
35
|
+
.checkbox-input__checkbox:checked ~ .checkbox-input__mark {
|
|
36
|
+
display: block;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
30
39
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
40
|
+
&__checkbox {
|
|
41
|
+
opacity: 0;
|
|
42
|
+
position: absolute;
|
|
43
|
+
height: 0;
|
|
44
|
+
width: 0;
|
|
45
|
+
}
|
|
34
46
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
47
|
+
&__mark {
|
|
48
|
+
display: none;
|
|
49
|
+
position: absolute;
|
|
50
|
+
width: 14px;
|
|
51
|
+
height: 14px;
|
|
52
|
+
background-color: #6b81dd;
|
|
38
53
|
|
|
54
|
+
&:after {
|
|
55
|
+
content: "";
|
|
56
|
+
position: absolute;
|
|
57
|
+
top: -2px;
|
|
58
|
+
bottom: 0;
|
|
59
|
+
left: 0;
|
|
60
|
+
right: 0;
|
|
61
|
+
margin: auto;
|
|
62
|
+
width: 4px;
|
|
63
|
+
height: 8px;
|
|
64
|
+
border: solid white;
|
|
65
|
+
border-radius: 2px;
|
|
66
|
+
border-width: 0 2px 2px 0;
|
|
67
|
+
transform: rotate(45deg);
|
|
39
68
|
}
|
|
69
|
+
}
|
|
40
70
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
width: 0;
|
|
46
|
-
}
|
|
71
|
+
&__label {
|
|
72
|
+
font-size: 13px;
|
|
73
|
+
user-select: none;
|
|
74
|
+
}
|
|
47
75
|
|
|
48
|
-
|
|
49
|
-
|
|
76
|
+
input[type="checkbox" i] {
|
|
77
|
+
&:indeterminate {
|
|
78
|
+
display: block;
|
|
79
|
+
width: 100%;
|
|
80
|
+
height: 100%;
|
|
81
|
+
&:after {
|
|
82
|
+
content: "";
|
|
50
83
|
position: absolute;
|
|
51
|
-
|
|
52
|
-
|
|
84
|
+
top: 0;
|
|
85
|
+
bottom: 0;
|
|
86
|
+
left: 0;
|
|
87
|
+
right: 0;
|
|
88
|
+
margin: auto;
|
|
89
|
+
width: 100%;
|
|
90
|
+
height: 100%;
|
|
53
91
|
background-color: #6b81dd;
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
border-width: 0 2px 2px 0;
|
|
68
|
-
transform: rotate(45deg);
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
&__label{
|
|
73
|
-
font-size: 13px;
|
|
74
|
-
user-select: none;
|
|
92
|
+
}
|
|
93
|
+
&:before {
|
|
94
|
+
content: "";
|
|
95
|
+
position: absolute;
|
|
96
|
+
top: 50%;
|
|
97
|
+
left: 50%;
|
|
98
|
+
transform: translate(-50%, -50%);
|
|
99
|
+
width: 65%;
|
|
100
|
+
border: solid white;
|
|
101
|
+
border-radius: 2px;
|
|
102
|
+
border-width: 0 2px 2px 0;
|
|
103
|
+
z-index: 1;
|
|
104
|
+
}
|
|
75
105
|
}
|
|
106
|
+
}
|
|
76
107
|
}
|
|
@@ -21,8 +21,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
21
21
|
|
|
22
22
|
var _reactFeather = require("react-feather");
|
|
23
23
|
|
|
24
|
-
var _Label = _interopRequireDefault(require("../Label/Label"));
|
|
25
|
-
|
|
26
24
|
require("./Dropdown.scss");
|
|
27
25
|
|
|
28
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); }
|
|
@@ -36,7 +34,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
36
34
|
var RC = 'dropdown';
|
|
37
35
|
|
|
38
36
|
var Dropdown = function Dropdown(_ref) {
|
|
39
|
-
var _options$find;
|
|
37
|
+
var _options$find, _filteredOptions$find;
|
|
40
38
|
|
|
41
39
|
var options = _ref.options,
|
|
42
40
|
value = _ref.value,
|
|
@@ -44,7 +42,8 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
44
42
|
onChange = _ref.onChange,
|
|
45
43
|
placeholder = _ref.placeholder,
|
|
46
44
|
className = _ref.className,
|
|
47
|
-
isSearchable = _ref.isSearchable
|
|
45
|
+
isSearchable = _ref.isSearchable,
|
|
46
|
+
entity = _ref.entity;
|
|
48
47
|
|
|
49
48
|
var _useState = (0, _react.useState)(false),
|
|
50
49
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
@@ -57,6 +56,7 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
57
56
|
setSearchValue = _useState4[1];
|
|
58
57
|
|
|
59
58
|
var dropdownRef = (0, _react.useRef)(null);
|
|
59
|
+
if (!options) return null;
|
|
60
60
|
var filteredGroups = options.filter(function (item) {
|
|
61
61
|
var _item$items;
|
|
62
62
|
|
|
@@ -84,6 +84,37 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
84
84
|
return item === null || item === void 0 ? void 0 : (_item$label = item.label) === null || _item$label === void 0 ? void 0 : _item$label.toLowerCase().includes((searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase()) || '');
|
|
85
85
|
});
|
|
86
86
|
var filteredOptions = [].concat((0, _toConsumableArray2.default)(filteredItems), (0, _toConsumableArray2.default)(filteredGroups));
|
|
87
|
+
var modalBtnTrigger = entity && entity !== '' && typeof entity === 'string';
|
|
88
|
+
|
|
89
|
+
var onChangeHandler = function onChangeHandler(item) {
|
|
90
|
+
setIsOpen(false);
|
|
91
|
+
setSearchValue(null);
|
|
92
|
+
onChange(item.value);
|
|
93
|
+
}; // decorator
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
var getDepends = function getDepends(getDependsTrigger) {
|
|
97
|
+
var newOnChange = function newOnChange(e) {
|
|
98
|
+
if (e.value === 'open_modal') {
|
|
99
|
+
onChange('open_modal');
|
|
100
|
+
} else {
|
|
101
|
+
onChangeHandler(e);
|
|
102
|
+
}
|
|
103
|
+
}; // add pseudo option
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
var newOptions = [{
|
|
107
|
+
label: "New ".concat(entity),
|
|
108
|
+
value: 'open_modal',
|
|
109
|
+
className: 'dropdown__list-item--modal'
|
|
110
|
+
}].concat((0, _toConsumableArray2.default)(filteredOptions));
|
|
111
|
+
return {
|
|
112
|
+
onChange: function onChange(changeItem) {
|
|
113
|
+
return getDependsTrigger ? newOnChange(changeItem) : onChangeHandler(changeItem);
|
|
114
|
+
},
|
|
115
|
+
options: getDependsTrigger ? newOptions : options
|
|
116
|
+
};
|
|
117
|
+
};
|
|
87
118
|
|
|
88
119
|
var handleClickOutside = function handleClickOutside(event) {
|
|
89
120
|
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
|
@@ -92,12 +123,6 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
92
123
|
}
|
|
93
124
|
};
|
|
94
125
|
|
|
95
|
-
var onChangeHandler = function onChangeHandler(item) {
|
|
96
|
-
setIsOpen(false);
|
|
97
|
-
setSearchValue(null);
|
|
98
|
-
onChange(item.value);
|
|
99
|
-
};
|
|
100
|
-
|
|
101
126
|
var onSearchHandler = function onSearchHandler(name) {
|
|
102
127
|
setSearchValue(name);
|
|
103
128
|
};
|
|
@@ -108,11 +133,13 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
108
133
|
}) : text;
|
|
109
134
|
};
|
|
110
135
|
|
|
136
|
+
var depend = getDepends(modalBtnTrigger);
|
|
137
|
+
|
|
111
138
|
var getMarkupForElement = function getMarkupForElement(item) {
|
|
112
139
|
return item.label.toLowerCase().includes((searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase()) || '') ? /*#__PURE__*/_react.default.createElement("button", {
|
|
113
140
|
key: item.value,
|
|
114
141
|
onClick: function onClick() {
|
|
115
|
-
return
|
|
142
|
+
return depend.onChange(item);
|
|
116
143
|
},
|
|
117
144
|
className: (0, _classnames.default)("".concat(RC, "__list-item"), (0, _defineProperty2.default)({}, "".concat(RC, "__list-item_active"), item.value === value), (0, _defineProperty2.default)({}, "".concat(RC, "__list-item_disabled"), item.disabled))
|
|
118
145
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
@@ -126,11 +153,12 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
126
153
|
};
|
|
127
154
|
|
|
128
155
|
(0, _react.useEffect)(function () {
|
|
156
|
+
if (!value) setSearchValue(null);
|
|
129
157
|
document.addEventListener('click', handleClickOutside, true);
|
|
130
158
|
return function () {
|
|
131
159
|
return document.removeEventListener('click', handleClickOutside, true);
|
|
132
160
|
};
|
|
133
|
-
});
|
|
161
|
+
}, [value]);
|
|
134
162
|
|
|
135
163
|
var filteredOptionList = function filteredOptionList(filteredOption) {
|
|
136
164
|
var _filteredOption$items;
|
|
@@ -164,13 +192,16 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
164
192
|
}
|
|
165
193
|
}, isSearchable ? /*#__PURE__*/_react.default.createElement("input", {
|
|
166
194
|
className: "".concat(RC, "__input"),
|
|
167
|
-
value: searchValue
|
|
195
|
+
value: searchValue || ((_filteredOptions$find = filteredOptions.find(function (el) {
|
|
196
|
+
return el.value === value;
|
|
197
|
+
})) === null || _filteredOptions$find === void 0 ? void 0 : _filteredOptions$find.label) || '',
|
|
168
198
|
onChange: function onChange(e) {
|
|
169
|
-
|
|
199
|
+
onSearchHandler(e.target.value);
|
|
170
200
|
},
|
|
171
201
|
placeholder: placeholder,
|
|
172
|
-
onFocus: function onFocus() {
|
|
173
|
-
|
|
202
|
+
onFocus: function onFocus(e) {
|
|
203
|
+
e.target.select();
|
|
204
|
+
setIsOpen(true);
|
|
174
205
|
}
|
|
175
206
|
}) : /*#__PURE__*/_react.default.createElement("span", {
|
|
176
207
|
className: "text"
|
|
@@ -181,7 +212,7 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
181
212
|
}
|
|
182
213
|
}, isOpen ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, null) : /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, null))), isOpen && filteredOptions.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
|
|
183
214
|
className: "".concat(RC, "__list")
|
|
184
|
-
},
|
|
215
|
+
}, depend.options.map(function (filteredOption) {
|
|
185
216
|
var _filteredOption$items2;
|
|
186
217
|
|
|
187
218
|
return (_filteredOption$items2 = filteredOption.items) !== null && _filteredOption$items2 !== void 0 && _filteredOption$items2.length ? filteredOptionList(filteredOption) : getMarkupForElement(filteredOption);
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
flex-direction: column;
|
|
6
6
|
position: relative;
|
|
7
7
|
width: 100%;
|
|
8
|
+
border-radius: 7px;
|
|
8
9
|
|
|
9
10
|
&__trigger {
|
|
10
11
|
background: #ffffff;
|
|
@@ -28,8 +29,8 @@
|
|
|
28
29
|
&.error {
|
|
29
30
|
border-color: $color--secondary;
|
|
30
31
|
}
|
|
31
|
-
&.placeholder .text{
|
|
32
|
-
opacity: .7;
|
|
32
|
+
&.placeholder .text {
|
|
33
|
+
opacity: 0.7;
|
|
33
34
|
}
|
|
34
35
|
}
|
|
35
36
|
|
|
@@ -85,7 +86,24 @@
|
|
|
85
86
|
width: 100%;
|
|
86
87
|
height: 24px;
|
|
87
88
|
white-space: nowrap;
|
|
88
|
-
|
|
89
|
+
overflow-x: hidden;
|
|
90
|
+
|
|
91
|
+
&--modal {
|
|
92
|
+
color: #1f7499;
|
|
93
|
+
font-size: 14px;
|
|
94
|
+
line-height: 20px;
|
|
95
|
+
letter-spacing: 0.2px;
|
|
96
|
+
position: relative;
|
|
97
|
+
&:after {
|
|
98
|
+
content: "";
|
|
99
|
+
position: absolute;
|
|
100
|
+
bottom: -2px;
|
|
101
|
+
height: 1px;
|
|
102
|
+
width: 300%;
|
|
103
|
+
transform: translateX(-50%);
|
|
104
|
+
background-color: #e8e9ec;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
89
107
|
&:hover,
|
|
90
108
|
&_active {
|
|
91
109
|
background: $color--gray--gentle;
|
|
@@ -37,10 +37,17 @@ var _default = {
|
|
|
37
37
|
},
|
|
38
38
|
onChange: {
|
|
39
39
|
description: 'callback return selected value'
|
|
40
|
+
},
|
|
41
|
+
entity: {
|
|
42
|
+
description: 'string'
|
|
40
43
|
}
|
|
41
44
|
}
|
|
42
45
|
};
|
|
43
46
|
exports.default = _default;
|
|
47
|
+
var buttonStyles = {
|
|
48
|
+
border: 'solid 1px #000',
|
|
49
|
+
padding: '5px'
|
|
50
|
+
};
|
|
44
51
|
|
|
45
52
|
var Template = function Template(args) {
|
|
46
53
|
var _useState = (0, _react.useState)(''),
|
|
@@ -48,26 +55,31 @@ var Template = function Template(args) {
|
|
|
48
55
|
value = _useState2[0],
|
|
49
56
|
setValue = _useState2[1];
|
|
50
57
|
|
|
51
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
58
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
52
59
|
style: {
|
|
53
60
|
width: 200
|
|
54
61
|
}
|
|
55
62
|
}, /*#__PURE__*/_react.default.createElement(_Dropdown.default, (0, _extends2.default)({}, args, {
|
|
56
63
|
value: value,
|
|
57
64
|
onChange: setValue
|
|
58
|
-
})))
|
|
65
|
+
}))), /*#__PURE__*/_react.default.createElement("button", {
|
|
66
|
+
style: buttonStyles,
|
|
67
|
+
className: "mt10",
|
|
68
|
+
onClick: function onClick() {
|
|
69
|
+
console.log('click!');
|
|
70
|
+
setValue('');
|
|
71
|
+
}
|
|
72
|
+
}, "Reset"));
|
|
59
73
|
};
|
|
60
74
|
|
|
61
75
|
var DropdownTemplate = Template.bind({});
|
|
62
76
|
exports.DropdownTemplate = DropdownTemplate;
|
|
63
77
|
DropdownTemplate.args = {
|
|
78
|
+
entity: 'entity',
|
|
79
|
+
value: 'drop6',
|
|
64
80
|
placeholder: 'Placeholder',
|
|
65
81
|
isSearchable: true,
|
|
66
82
|
options: [{
|
|
67
|
-
label: 'Dropdown1',
|
|
68
|
-
value: 'drop1',
|
|
69
|
-
className: 'status status--approved'
|
|
70
|
-
}, {
|
|
71
83
|
label: 'Dropdown2',
|
|
72
84
|
value: 'drop2'
|
|
73
85
|
}, {
|
|
@@ -77,6 +89,10 @@ DropdownTemplate.args = {
|
|
|
77
89
|
}, {
|
|
78
90
|
label: 'Dropdown4',
|
|
79
91
|
value: 'drop4'
|
|
92
|
+
}, {
|
|
93
|
+
label: 'Dropdown1',
|
|
94
|
+
value: 'drop1',
|
|
95
|
+
className: 'status status--approved'
|
|
80
96
|
}, {
|
|
81
97
|
label: 'Dropdown5',
|
|
82
98
|
value: 'drop5'
|
|
@@ -9,10 +9,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
9
9
|
});
|
|
10
10
|
exports.default = void 0;
|
|
11
11
|
|
|
12
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
13
|
-
|
|
14
12
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
15
13
|
|
|
14
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
15
|
+
|
|
16
16
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
17
17
|
|
|
18
18
|
var _react = _interopRequireWildcard(require("react"));
|
|
@@ -29,6 +29,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
29
29
|
|
|
30
30
|
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; }
|
|
31
31
|
|
|
32
|
+
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; }
|
|
33
|
+
|
|
34
|
+
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; }
|
|
35
|
+
|
|
32
36
|
var Input = function Input(_ref) {
|
|
33
37
|
var onChange = _ref.onChange,
|
|
34
38
|
disabled = _ref.disabled,
|
|
@@ -48,6 +52,8 @@ var Input = function Input(_ref) {
|
|
|
48
52
|
onFocus = _ref.onFocus,
|
|
49
53
|
onKeyUp = _ref.onKeyUp,
|
|
50
54
|
mask = _ref.mask,
|
|
55
|
+
maskChar = _ref.maskChar,
|
|
56
|
+
formatChars = _ref.formatChars,
|
|
51
57
|
error = _ref.error,
|
|
52
58
|
icon = _ref.icon,
|
|
53
59
|
symbolsLimit = _ref.symbolsLimit;
|
|
@@ -99,7 +105,8 @@ var Input = function Input(_ref) {
|
|
|
99
105
|
(0, _react.useEffect)(function () {
|
|
100
106
|
if (isEditing) inputRef.current.focus();
|
|
101
107
|
}, [isEditing, isFocused]);
|
|
102
|
-
|
|
108
|
+
|
|
109
|
+
var uniProps = _objectSpread(_objectSpread({
|
|
103
110
|
className: "input ".concat(className),
|
|
104
111
|
placeholder: placeholder,
|
|
105
112
|
value: value || '',
|
|
@@ -110,7 +117,11 @@ var Input = function Input(_ref) {
|
|
|
110
117
|
onKeyUp: handle.keyUp,
|
|
111
118
|
min: min,
|
|
112
119
|
max: max
|
|
113
|
-
}
|
|
120
|
+
}, maskChar ? {
|
|
121
|
+
maskChar: maskChar
|
|
122
|
+
} : {}), formatChars ? {
|
|
123
|
+
formatChars: formatChars
|
|
124
|
+
} : {});
|
|
114
125
|
|
|
115
126
|
function renderInput() {
|
|
116
127
|
if (mask) {
|
|
@@ -111,7 +111,13 @@ InputTemplate.args = {
|
|
|
111
111
|
min: '0',
|
|
112
112
|
max: '5',
|
|
113
113
|
placeholder: 'Placeholder',
|
|
114
|
-
mask: '',
|
|
114
|
+
// mask: 'nnnnn0129',
|
|
115
|
+
// maskChar: '_',
|
|
116
|
+
// formatChars: {
|
|
117
|
+
// 'n': '[0-9]',
|
|
118
|
+
// 's': '[A-Za-z]',
|
|
119
|
+
// '*': '[A-Za-z0-9]'
|
|
120
|
+
// },
|
|
115
121
|
icon: /*#__PURE__*/_react.default.createElement(_reactFeather.User, null),
|
|
116
122
|
symbolsLimit: 225
|
|
117
123
|
};
|
|
@@ -44,26 +44,18 @@ var InputDateRange = function InputDateRange(props) {
|
|
|
44
44
|
id = props.id,
|
|
45
45
|
label = props.label,
|
|
46
46
|
className = props.className,
|
|
47
|
-
buttonsTypes = props.buttonsTypes,
|
|
48
47
|
value = props.value,
|
|
49
48
|
_props$onChange = props.onChange,
|
|
50
49
|
onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
|
|
51
50
|
error = props.error,
|
|
52
51
|
disabled = props.disabled,
|
|
53
52
|
isHoverable = props.isHoverable,
|
|
54
|
-
short = props.short,
|
|
55
53
|
_props$isCompact = props.isCompact,
|
|
56
54
|
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
55
|
_props$hideArrows = props.hideArrows,
|
|
62
56
|
hideArrows = _props$hideArrows === void 0 ? false : _props$hideArrows,
|
|
63
57
|
isOptionsRight = props.isOptionsRight,
|
|
64
|
-
|
|
65
|
-
isUseAbs = props.isUseAbs,
|
|
66
|
-
absTooltip = props.absTooltip;
|
|
58
|
+
isUseAbs = props.isUseAbs;
|
|
67
59
|
var actualValues = (0, _dependencies.getActualDateRange)(value);
|
|
68
60
|
|
|
69
61
|
var _useToggle = (0, _dependencies.useToggle)(false),
|
|
@@ -84,7 +76,6 @@ var InputDateRange = function InputDateRange(props) {
|
|
|
84
76
|
|
|
85
77
|
var ref = !isUseAbs ? (0, _dependencies.useClickOutside)(toggleOff) : (0, _react.useRef)(null);
|
|
86
78
|
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
79
|
|
|
89
80
|
var handleChange = function handleChange(input) {
|
|
90
81
|
var newValue = (0, _dependencies.getActualDateRange)(input);
|
|
@@ -105,6 +96,10 @@ var InputDateRange = function InputDateRange(props) {
|
|
|
105
96
|
return formatedValue;
|
|
106
97
|
};
|
|
107
98
|
|
|
99
|
+
(0, _react.useEffect)(function () {
|
|
100
|
+
handleChange(_objectSpread({}, value));
|
|
101
|
+
}, []);
|
|
102
|
+
|
|
108
103
|
var Range = function Range() {
|
|
109
104
|
var SYMBOLS_QUANTITY_IF_TIME_ADDED = 13;
|
|
110
105
|
var start = actualValues.start,
|
|
@@ -135,7 +130,8 @@ var InputDateRange = function InputDateRange(props) {
|
|
|
135
130
|
var start = actualValues.start,
|
|
136
131
|
end = actualValues.end;
|
|
137
132
|
var intervalHoursCount = (0, _momentTimezone.default)(end).diff(start, 'hours');
|
|
138
|
-
var newEnd
|
|
133
|
+
var newEnd;
|
|
134
|
+
var newStart;
|
|
139
135
|
var endHours = (0, _momentTimezone.default)(end).hours();
|
|
140
136
|
var startHours = (0, _momentTimezone.default)(start).hours();
|
|
141
137
|
|
|
@@ -164,33 +160,7 @@ var InputDateRange = function InputDateRange(props) {
|
|
|
164
160
|
var handleArrowClick = function handleArrowClick(type) {
|
|
165
161
|
slideInterval(type === 'right' ? 'forward' : 'back');
|
|
166
162
|
toggleOff();
|
|
167
|
-
};
|
|
168
|
-
// () => ({
|
|
169
|
-
// body: OpenedPart,
|
|
170
|
-
// props: {
|
|
171
|
-
// ...props,
|
|
172
|
-
// key: `${actualValues.start}-${actualValues.end}-${actualValues.intervalKey}-${current}-${isCompare}`,
|
|
173
|
-
// actualValues,
|
|
174
|
-
// current,
|
|
175
|
-
// setCurrent,
|
|
176
|
-
// isCompare,
|
|
177
|
-
// setIsCompare,
|
|
178
|
-
// toggleOff,
|
|
179
|
-
// onChange,
|
|
180
|
-
// },
|
|
181
|
-
// clickOutsideCallback: () => toggleOff(),
|
|
182
|
-
// top: internalContainerRef.current?.getBoundingClientRect()?.bottom || 0,
|
|
183
|
-
// left: internalContainerRef.current?.getBoundingClientRect()?.left || 0,
|
|
184
|
-
// }),
|
|
185
|
-
// [isToggled, value, actualValues, current, isCompare],
|
|
186
|
-
// );
|
|
187
|
-
// useEffect(() => {
|
|
188
|
-
// if (current && isUseAbs && absTooltip) onChange(current, 'absTooltip/props/current');
|
|
189
|
-
// }, [current]);
|
|
190
|
-
// useEffect(() => {
|
|
191
|
-
// if (isUseAbs) onChange(isToggled ? absData : null, 'absTooltip');
|
|
192
|
-
// }, [isToggled]);
|
|
193
|
-
|
|
163
|
+
};
|
|
194
164
|
|
|
195
165
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
196
166
|
ref: internalContainerRef,
|
|
@@ -206,8 +176,12 @@ var InputDateRange = function InputDateRange(props) {
|
|
|
206
176
|
}, label), /*#__PURE__*/_react.default.createElement("div", {
|
|
207
177
|
className: "date-range-input__wraper",
|
|
208
178
|
ref: ref,
|
|
209
|
-
onMouseEnter: isHoverable
|
|
210
|
-
|
|
179
|
+
onMouseEnter: isHoverable ? toggleOn : function () {
|
|
180
|
+
return null;
|
|
181
|
+
},
|
|
182
|
+
onMouseLeave: isHoverable ? toggleOff : function () {
|
|
183
|
+
return null;
|
|
184
|
+
}
|
|
211
185
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
212
186
|
className: (0, _classnames.default)('date-range-input__absolut-wraper', {
|
|
213
187
|
'date-range-input__absolut-wraper_right-position': isOptionsRight
|
|
@@ -216,14 +190,7 @@ var InputDateRange = function InputDateRange(props) {
|
|
|
216
190
|
className: (0, _classnames.default)('date-range-input__static-part')
|
|
217
191
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
218
192
|
id: id,
|
|
219
|
-
className: (0, _classnames.default)('date-range-input__toggle-button')
|
|
220
|
-
// 'date-range-input__toggle-button',
|
|
221
|
-
// { 'form-select__input--disabled': disabled },
|
|
222
|
-
// { 'form-select__input--opened': isToggled },
|
|
223
|
-
// { 'form-select__input--focused': isToggled },
|
|
224
|
-
// className,
|
|
225
|
-
// )}
|
|
226
|
-
,
|
|
193
|
+
className: (0, _classnames.default)('date-range-input__toggle-button'),
|
|
227
194
|
disabled: disabled,
|
|
228
195
|
onClick: !disabled && !isHoverable ? toggle : undefined
|
|
229
196
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -236,14 +203,14 @@ var InputDateRange = function InputDateRange(props) {
|
|
|
236
203
|
type: "left",
|
|
237
204
|
className: "date-range-input__arrow",
|
|
238
205
|
onClick: function onClick() {
|
|
239
|
-
return handleArrowClick(
|
|
206
|
+
return handleArrowClick('left');
|
|
240
207
|
},
|
|
241
208
|
disabled: disabled || (actualValues === null || actualValues === void 0 ? void 0 : actualValues.intervalKey) === _dependencies.ALL_TIME_KEY
|
|
242
209
|
}), /*#__PURE__*/_react.default.createElement(_Arrow.default, {
|
|
243
210
|
type: "right",
|
|
244
211
|
className: "date-range-input__arrow",
|
|
245
212
|
onClick: function onClick() {
|
|
246
|
-
return handleArrowClick(
|
|
213
|
+
return handleArrowClick('right');
|
|
247
214
|
},
|
|
248
215
|
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'))
|
|
249
216
|
}))), isToggled && !isUseAbs && /*#__PURE__*/_react.default.createElement(_OpenedPart.default, (0, _extends2.default)({}, props, {
|