intelicoreact 0.1.19 → 0.1.22
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/Dropdown/Dropdown.js +7 -1
- package/dist/Atomic/FormElements/RadioInput/RadioInput.js +1 -1
- package/dist/Atomic/FormElements/RangeList/RangeList.js +296 -0
- package/dist/Atomic/FormElements/RangeList/RangeList.scss +124 -0
- package/dist/Atomic/FormElements/RangeList/RangeList.stories.js +101 -0
- package/dist/Atomic/FormElements/RangeList/partial/AnyOuterClass.scss +31 -0
- package/dist/Atomic/FormElements/Switcher/Switcher.stories.js +2 -2
- package/dist/Atomic/FormElements/Switcher/partial/{inner-class.scss → AnyOuterClass.scss} +1 -1
- package/dist/Atomic/FormElements/TextSwitcher/TextSwitcher.stories.js +2 -2
- package/dist/Atomic/FormElements/TextSwitcher/partial/{inner-class.module.scss → AnyOuterClass.scss} +1 -1
- package/dist/Atomic/UI/Status/Status.scss +2 -0
- package/dist/Functions/useFormTools/form-drivers/ArrayWithObjects.js +69 -0
- package/dist/Functions/useFormTools/form-drivers/ObjectWithIterableObjects.js +166 -0
- package/dist/Functions/useFormTools/form-drivers/ObjectWithNamedKeyObjects.js +89 -0
- package/dist/Functions/useFormTools/functions/General.js +158 -0
- package/dist/Functions/useFormTools/functions/RenderFields.js +113 -0
- package/dist/Functions/useFormTools/functions/usePrevious.js +19 -0
- package/dist/Functions/useFormTools/index.js +759 -0
- package/dist/Molecular/SwitcherHide/SwitcherHide.stories.js +2 -2
- package/dist/Molecular/SwitcherHide/partial/{inner-class.scss → AnyOuterClass.scss} +1 -1
- package/dist/Molecular/SwitcherRadio/SwitcherRadio.js +23 -15
- package/dist/Molecular/SwitcherRadio/SwitcherRadio.scss +19 -15
- package/dist/Molecular/SwitcherRadio/SwitcherRadio.stories.js +26 -13
- package/dist/Molecular/SwitcherRadio/partial/AnyOuterClass.scss +6 -0
- package/dist/Molecular/SwitcherRangeList/SwitcherRangeList.js +16 -0
- package/dist/Molecular/SwitcherRangeList/SwitcherRangeList.scss +12 -0
- package/dist/Molecular/SwitcherRangeList/SwitcherRangeList.stories.js +19 -0
- package/dist/Molecular/SwitcherRangeList/partial/AnyOuterClass.scss +6 -0
- package/dist/Molecular/{FilterSelect/FilterSelect.js → SwitcherTagsDropdown/SwitcherTagsDropdown.js} +82 -43
- package/dist/Molecular/SwitcherTagsDropdown/SwitcherTagsDropdown.scss +48 -0
- package/dist/Molecular/SwitcherTagsDropdown/SwitcherTagsDropdown.stories.js +109 -0
- package/dist/Molecular/SwitcherTagsDropdown/partial/AnyOuterClass.scss +12 -0
- package/dist/Molecular/SwitcherTextarea/SwitcherTextarea.stories.js +2 -2
- package/dist/Molecular/SwitcherTextarea/partial/{inner-class.scss → AnyOuterClass.scss} +1 -1
- package/package.json +1 -1
- package/dist/Functions/useFormTools.js +0 -429
- package/dist/Molecular/FilterSelect/FilterSelect.scss +0 -39
- package/dist/Molecular/FilterSelect/FilterSelect.stories.js +0 -81
|
@@ -219,7 +219,13 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
219
219
|
className: (0, _classnames.default)(RC, className, {
|
|
220
220
|
disabled: disabled
|
|
221
221
|
}),
|
|
222
|
-
ref: dropdownRef
|
|
222
|
+
ref: dropdownRef,
|
|
223
|
+
onFocus: function onFocus() {
|
|
224
|
+
return setIsOpen(true);
|
|
225
|
+
},
|
|
226
|
+
onBlur: function onBlur() {
|
|
227
|
+
return setIsOpen(false);
|
|
228
|
+
}
|
|
223
229
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
224
230
|
className: "".concat(RC, "__trigger input__wrap ").concat(isOpen ? 'input__wrap--focus' : '', " ").concat(!value ? 'placeholder' : '', " ").concat(error ? 'error' : ''),
|
|
225
231
|
onClick: function onClick() {
|
|
@@ -0,0 +1,296 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
|
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
+
|
|
12
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
13
|
+
|
|
14
|
+
var _react = require("react");
|
|
15
|
+
|
|
16
|
+
var _fi = require("react-icons/fi");
|
|
17
|
+
|
|
18
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
19
|
+
|
|
20
|
+
var _Button = _interopRequireDefault(require("./../../UI/Button/Button"));
|
|
21
|
+
|
|
22
|
+
var _Input = _interopRequireDefault(require("../Input/Input"));
|
|
23
|
+
|
|
24
|
+
require("./RangeList.scss");
|
|
25
|
+
|
|
26
|
+
// import { numberFilter, numberFilterWithoutDots, rounded } from '../../../Functions/utils';
|
|
27
|
+
var RC = 'range-list';
|
|
28
|
+
|
|
29
|
+
var RangeListCell = function RangeListCell(_ref) {
|
|
30
|
+
var children = _ref.children,
|
|
31
|
+
idx = _ref.idx,
|
|
32
|
+
className = _ref.className;
|
|
33
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
34
|
+
className: (0, _classnames.default)("".concat(RC, "__cell"), className, (0, _defineProperty2.default)({}, "".concat(RC, "__cell-").concat(idx), idx))
|
|
35
|
+
}, children);
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
var RangeListRow = function RangeListRow(_ref2) {
|
|
39
|
+
var from = _ref2.from,
|
|
40
|
+
to = _ref2.to,
|
|
41
|
+
idx = _ref2.idx;
|
|
42
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
43
|
+
className: (0, _classnames.default)("".concat(RC, "__row"), "".concat(RC, "__values"), (0, _defineProperty2.default)({}, "".concat(RC, "__values_first-value"), idx === 0))
|
|
44
|
+
}, /*#__PURE__*/React.createElement(RangeListCell, {
|
|
45
|
+
idx: 1,
|
|
46
|
+
className: "".concat(RC, "__cell-value")
|
|
47
|
+
}, from), /*#__PURE__*/React.createElement(RangeListCell, {
|
|
48
|
+
idx: 2,
|
|
49
|
+
className: "".concat(RC, "__cell-value")
|
|
50
|
+
}, to), /*#__PURE__*/React.createElement(RangeListCell, {
|
|
51
|
+
idx: 3,
|
|
52
|
+
className: "".concat(RC, "__cell-action")
|
|
53
|
+
}, /*#__PURE__*/React.createElement(_fi.FiTrash2, null)));
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
var RangeList = function RangeList(props) {
|
|
57
|
+
// const { item, value: inputvalue, fields, onChange, type, isInteger, id: filterId, label, className } = props;
|
|
58
|
+
var className = props.className,
|
|
59
|
+
value = props.value;
|
|
60
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
61
|
+
className: (0, _classnames.default)(RC, className)
|
|
62
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
63
|
+
className: (0, _classnames.default)("".concat(RC, "__row"), "".concat(RC, "__labels"))
|
|
64
|
+
}, /*#__PURE__*/React.createElement(RangeListCell, {
|
|
65
|
+
className: "".concat(RC, "__cell-label")
|
|
66
|
+
}, "From"), /*#__PURE__*/React.createElement(RangeListCell, {
|
|
67
|
+
className: "".concat(RC, "__cell-label")
|
|
68
|
+
}, "To")), /*#__PURE__*/React.createElement("div", {
|
|
69
|
+
className: (0, _classnames.default)("".concat(RC, "__row"), "".concat(RC, "__inputs"))
|
|
70
|
+
}, /*#__PURE__*/React.createElement(RangeListCell, {
|
|
71
|
+
className: "".concat(RC, "__cell-input")
|
|
72
|
+
}, /*#__PURE__*/React.createElement(_Input.default, {
|
|
73
|
+
value: 56
|
|
74
|
+
})), /*#__PURE__*/React.createElement(RangeListCell, {
|
|
75
|
+
className: "".concat(RC, "__cell-input")
|
|
76
|
+
}, /*#__PURE__*/React.createElement(_Input.default, {
|
|
77
|
+
value: 72
|
|
78
|
+
})), /*#__PURE__*/React.createElement(RangeListCell, {
|
|
79
|
+
className: "".concat(RC, "__cell-button")
|
|
80
|
+
}, /*#__PURE__*/React.createElement(_Button.default, null, "Add"))), value.map(function (row, idx) {
|
|
81
|
+
return /*#__PURE__*/React.createElement(RangeListRow, (0, _extends2.default)({}, row, {
|
|
82
|
+
idx: idx
|
|
83
|
+
}));
|
|
84
|
+
}));
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
var _default = RangeList; // import { useState } from 'react';
|
|
88
|
+
// import { FiTrash2 } from 'react-icons/fi';
|
|
89
|
+
// import cn from 'classnames';
|
|
90
|
+
// import Button from 'intelicoreact/dist/Atomic/UI/Button/Button';
|
|
91
|
+
// import { numberFilter, numberFilterWithoutDots, rounded } from '../../../Functions/utils';
|
|
92
|
+
// import Input from '../Input/Input';
|
|
93
|
+
// import './RangeList.scss';
|
|
94
|
+
// const RC = 'range-list';
|
|
95
|
+
// const RangeList = (props) => {
|
|
96
|
+
// const { item, value: inputvalue, fields, onChange, type, isInteger, id: filterId, label, className } = props;
|
|
97
|
+
// const [form, setForm] = useState(fields);
|
|
98
|
+
// const [error, setError] = useState('');
|
|
99
|
+
// const keyFrom = 'from';
|
|
100
|
+
// const keyTo = 'to';
|
|
101
|
+
// const additive = type === 'rangeList' && !isInteger ? 0.01 : 1;
|
|
102
|
+
// let value = inputvalue || [];
|
|
103
|
+
// value?.sort((a, b) => a[keyFrom] - b[keyFrom]);
|
|
104
|
+
// function removeRow(index) {
|
|
105
|
+
// value.splice(index, 1);
|
|
106
|
+
// setForm([...form]);
|
|
107
|
+
// onChange(value, 'value');
|
|
108
|
+
// }
|
|
109
|
+
// function addRange() {
|
|
110
|
+
// const from = parseFloat(rounded(form[0].value));
|
|
111
|
+
// let to = parseFloat(form[1].value);
|
|
112
|
+
// if (isNaN(to)) to = '';
|
|
113
|
+
// //const result = parseFloat(rounded(form[2]?.value)) || '0';
|
|
114
|
+
// if ((form[0] && isNaN(form[0]?.value)) || (form[1] && isNaN(form[1]?.value))) {
|
|
115
|
+
// setError('All fields required');
|
|
116
|
+
// return false;
|
|
117
|
+
// } else if (to !== '' && to <= from) {
|
|
118
|
+
// setError('Set a valid range');
|
|
119
|
+
// return false;
|
|
120
|
+
// } else if (isNaN(from) || (!from && isNaN(to)) || from < 0 || (!from && to <= 0)) {
|
|
121
|
+
// setError('Only numbers >=0 are allowed');
|
|
122
|
+
// return false;
|
|
123
|
+
// } else if (to && to - from < 0.05) {
|
|
124
|
+
// setError('range must be more than 0.05');
|
|
125
|
+
// return false;
|
|
126
|
+
// } else if (form[2]?.unit === '%') {
|
|
127
|
+
// setError(`${form[2]?.label} max 100`);
|
|
128
|
+
// return false;
|
|
129
|
+
// } else if (from > 999999 || (!!to && to > 999999)) {
|
|
130
|
+
// setError('You need to set a smaller number!');
|
|
131
|
+
// return false;
|
|
132
|
+
// } else if (from === to) {
|
|
133
|
+
// setError('You need to set a range');
|
|
134
|
+
// return false;
|
|
135
|
+
// } else if (!to) {
|
|
136
|
+
// setError('Set a valid range');
|
|
137
|
+
// return false;
|
|
138
|
+
// } else if (!!to && from > to) {
|
|
139
|
+
// setError('You need to set a valid range');
|
|
140
|
+
// return false;
|
|
141
|
+
// } else if (filterId && label === 'Age' && to > 99) {
|
|
142
|
+
// setError('99 is the maximum allowed value');
|
|
143
|
+
// return false;
|
|
144
|
+
// } else if (filterId && label === 'Age' && from < 18) {
|
|
145
|
+
// setError('18 is the minimum allowed value');
|
|
146
|
+
// return false;
|
|
147
|
+
// }
|
|
148
|
+
// const duplicate = value?.filter((e) => Number(e[keyFrom]) === from && Number(e[keyTo]) === to);
|
|
149
|
+
// if (duplicate.length) {
|
|
150
|
+
// setError('This range was already added');
|
|
151
|
+
// return false;
|
|
152
|
+
// }
|
|
153
|
+
// const newRanges = [];
|
|
154
|
+
// const prevItems = [];
|
|
155
|
+
// const postItems = [];
|
|
156
|
+
// const getRangeObject = (nFrom, nTo) => ({
|
|
157
|
+
// [keyFrom]: parseFloat(nFrom?.toFixed(3)),
|
|
158
|
+
// [keyTo]: nTo.toFixed ? parseFloat(nTo?.toFixed(3)) : nTo || '',
|
|
159
|
+
// });
|
|
160
|
+
// const [crossFrom, crossTo] = getFilter(value)?.reduce((res, data) => {
|
|
161
|
+
// if (data[keyFrom] === from) data[keyFrom] = from + additive;
|
|
162
|
+
// if (data[keyTo] === to) data[keyTo] = to - additive;
|
|
163
|
+
// if (isNaN(data[keyFrom])) data[keyFrom] = 0;
|
|
164
|
+
// if (data[keyTo] > 0 && from > data[keyTo]) {
|
|
165
|
+
// prevItems.push(data);
|
|
166
|
+
// } else if (to && data[keyFrom] > to) {
|
|
167
|
+
// postItems.push(data);
|
|
168
|
+
// } else if (!(from < data[keyFrom] && (!to || data[keyTo] < to))) {
|
|
169
|
+
// res.push(data);
|
|
170
|
+
// }
|
|
171
|
+
// return res;
|
|
172
|
+
// }, []);
|
|
173
|
+
// if (crossFrom && crossTo) {
|
|
174
|
+
// if (to === crossTo.from) {
|
|
175
|
+
// newRanges.push(...[getRangeObject(crossFrom[keyFrom], from), getRangeObject(to, crossTo[keyTo])]);
|
|
176
|
+
// } else {
|
|
177
|
+
// newRanges.push(...[getRangeObject(crossFrom[keyFrom], from), getRangeObject(from + additive, to)]);
|
|
178
|
+
// if (to) {
|
|
179
|
+
// newRanges.push(getRangeObject(to + additive, crossTo[keyTo]));
|
|
180
|
+
// }
|
|
181
|
+
// }
|
|
182
|
+
// } else if (crossFrom) {
|
|
183
|
+
// if (crossFrom[keyFrom] < from && crossFrom[keyTo] > to) {
|
|
184
|
+
// newRanges.push(getRangeObject(crossFrom[keyFrom], from));
|
|
185
|
+
// if (to) {
|
|
186
|
+
// newRanges.push(...[getRangeObject(from + additive, to), getRangeObject(to + additive, crossFrom[keyTo])]);
|
|
187
|
+
// } else {
|
|
188
|
+
// newRanges.push(getRangeObject(from + additive, ''));
|
|
189
|
+
// }
|
|
190
|
+
// } else if (crossFrom[keyFrom] > from) {
|
|
191
|
+
// newRanges.push(...[getRangeObject(from, to), getRangeObject(to + additive, crossFrom[keyTo])]);
|
|
192
|
+
// } else if (crossFrom && to - from > 1) {
|
|
193
|
+
// newRanges.push(...[getRangeObject(crossFrom[keyFrom], from), getRangeObject(from + additive, to)]);
|
|
194
|
+
// } else newRanges.push(getRangeObject(crossFrom[keyFrom], to));
|
|
195
|
+
// } else {
|
|
196
|
+
// newRanges.push(getRangeObject(from, to));
|
|
197
|
+
// }
|
|
198
|
+
// newRanges.unshift(...prevItems);
|
|
199
|
+
// newRanges.push(...postItems);
|
|
200
|
+
// value = newRanges;
|
|
201
|
+
// onChange(value);
|
|
202
|
+
// form.map((field) => (field.value = ''));
|
|
203
|
+
// setForm([...form]);
|
|
204
|
+
// }
|
|
205
|
+
// const handleFieldFocus = (key) => {
|
|
206
|
+
// if (key === keyTo && !form[0].value) {
|
|
207
|
+
// form[0].value = 0;
|
|
208
|
+
// setForm([...form]);
|
|
209
|
+
// }
|
|
210
|
+
// };
|
|
211
|
+
// const removeFiltersDots = (value) => {
|
|
212
|
+
// if (filterId) return numberFilterWithoutDots(value);
|
|
213
|
+
// return value;
|
|
214
|
+
// };
|
|
215
|
+
// function renderField(field) {
|
|
216
|
+
// return (
|
|
217
|
+
// <td key={field.key} style={{ padding: 0 }}>
|
|
218
|
+
// {field.label && <label className={`${RC}__input-label`}>{field.label}</label>}
|
|
219
|
+
// <div>
|
|
220
|
+
// <Input
|
|
221
|
+
// value={removeFiltersDots(field.value) || ''}
|
|
222
|
+
// onFocus={() => handleFieldFocus(field.key)}
|
|
223
|
+
// placeholder={field.placeholder}
|
|
224
|
+
// onChange={(e) => {
|
|
225
|
+
// let value = e || field.key !== 'max' ? numberFilter(e) : '';
|
|
226
|
+
// if (field.isInt) value = numberFilterWithoutDots(value);
|
|
227
|
+
// if (value < 0) value = '';
|
|
228
|
+
// else if (field.key === 'bonus' && value > 100) value = 100;
|
|
229
|
+
// //if (!field.value) onChange();
|
|
230
|
+
// field.value = value;
|
|
231
|
+
// setForm([...form]);
|
|
232
|
+
// setError('');
|
|
233
|
+
// }}
|
|
234
|
+
// />
|
|
235
|
+
// </div>
|
|
236
|
+
// </td>
|
|
237
|
+
// );
|
|
238
|
+
// }
|
|
239
|
+
// const renderRowNumbers = (row, field, index) => {
|
|
240
|
+
// if (field.key === 'max' && row.max === 999999999) row.max = '';
|
|
241
|
+
// else {
|
|
242
|
+
// if (field.key === 'bonus' && !row.bonus) row.bonus = '0';
|
|
243
|
+
// row[field.key] = row[field.key] !== '' ? Number(row[field.key]) : row[field.key];
|
|
244
|
+
// }
|
|
245
|
+
// return (
|
|
246
|
+
// <td key={index} className="table__cell">
|
|
247
|
+
// {filterId ? row[field.key] : row[field.key].toLocaleString('en-US', { minimumFractionDigits: isInteger ? 0 : 2 })}
|
|
248
|
+
// {row[field.key] || field.key === 'bonus' ? field.unit : ''}
|
|
249
|
+
// </td>
|
|
250
|
+
// );
|
|
251
|
+
// };
|
|
252
|
+
// function renderRow(row, index) {
|
|
253
|
+
// return (
|
|
254
|
+
// <tr key={index} className="bordered-tr">
|
|
255
|
+
// {form?.map((field, index) => renderRowNumbers(row, field, index))}
|
|
256
|
+
// <td className="table__cell range-list--trash-icon">
|
|
257
|
+
// <FiTrash2 className="pointer color--froly" onClick={() => removeRow(index)} />
|
|
258
|
+
// </td>
|
|
259
|
+
// </tr>
|
|
260
|
+
// );
|
|
261
|
+
// }
|
|
262
|
+
// function getFilter(data) {
|
|
263
|
+
// return data?.slice()?.filter(({ from, to }) => {
|
|
264
|
+
// return !([0, null].includes(from) && [0, null].includes(to));
|
|
265
|
+
// });
|
|
266
|
+
// };
|
|
267
|
+
// return (
|
|
268
|
+
// <table className={cn('range-list', ' w100', className)}>
|
|
269
|
+
// <tbody>
|
|
270
|
+
// <tr>
|
|
271
|
+
// {form?.map((field) => renderField(field))}
|
|
272
|
+
// <td style={{ padding: 0 }}>
|
|
273
|
+
// <Button type="primary" onClick={addRange} label="+ Add" />
|
|
274
|
+
// </td>
|
|
275
|
+
// </tr>
|
|
276
|
+
// <tr>
|
|
277
|
+
// <td colSpan={4}>
|
|
278
|
+
// <span className="input-classic__error">{error}</span>
|
|
279
|
+
// </td>
|
|
280
|
+
// </tr>
|
|
281
|
+
// {!value || !getFilter(value)?.length ? (
|
|
282
|
+
// <tr className="tableCustom__tr--first bordered-tr read-only">
|
|
283
|
+
// <td colSpan={4} className="table__cell text-left">
|
|
284
|
+
// Not set
|
|
285
|
+
// </td>
|
|
286
|
+
// </tr>
|
|
287
|
+
// ) : value ? (
|
|
288
|
+
// getFilter(value).map((row, index) => renderRow(row, index))
|
|
289
|
+
// ) : null}
|
|
290
|
+
// </tbody>
|
|
291
|
+
// </table>
|
|
292
|
+
// );
|
|
293
|
+
// };
|
|
294
|
+
// export default RangeList;
|
|
295
|
+
|
|
296
|
+
exports.default = _default;
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
@import "./../../../scss/vars";
|
|
2
|
+
|
|
3
|
+
.range-list {
|
|
4
|
+
--border-color: black;
|
|
5
|
+
--button-size: 56px;
|
|
6
|
+
|
|
7
|
+
--labels-font-size: 16px;
|
|
8
|
+
--inputs-font-size: 14px;
|
|
9
|
+
--values-font-size: 16px;
|
|
10
|
+
--button-text-font-size: 14px;
|
|
11
|
+
|
|
12
|
+
--labels-color: black;
|
|
13
|
+
--inputs-color: black;
|
|
14
|
+
--values-color: black;
|
|
15
|
+
|
|
16
|
+
--background-color: transparent;
|
|
17
|
+
--labels-background-color: transparent;
|
|
18
|
+
--inputs-background-color: transparent;
|
|
19
|
+
--tag-input-background-color: #fff;
|
|
20
|
+
--values-background-color: #fff;
|
|
21
|
+
|
|
22
|
+
width: 500px;
|
|
23
|
+
height: fit-content;
|
|
24
|
+
background-color: transparent;
|
|
25
|
+
|
|
26
|
+
&__row {
|
|
27
|
+
display: grid;
|
|
28
|
+
width: 100%;
|
|
29
|
+
height: 30px;
|
|
30
|
+
grid-template-columns: 1fr 1fr var(--button-size);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
&__labels, &__inputs {
|
|
34
|
+
grid-column-gap: 2px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
&__labels {
|
|
38
|
+
margin-bottom: 10px;
|
|
39
|
+
background-color: var(--labels-background-color);
|
|
40
|
+
|
|
41
|
+
font-family: inherit;
|
|
42
|
+
font-style: inherit;
|
|
43
|
+
font-weight: 400;
|
|
44
|
+
font-size: var(--labels-font-size);
|
|
45
|
+
line-height: 24px;
|
|
46
|
+
color: var(--labels-color);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&__inputs {
|
|
50
|
+
margin-bottom: 6px;
|
|
51
|
+
background-color: var(--inputs-background-color);
|
|
52
|
+
|
|
53
|
+
font-family: inherit;
|
|
54
|
+
font-style: inherit;
|
|
55
|
+
font-weight: 400;
|
|
56
|
+
font-size: var(--inputs-font-size);
|
|
57
|
+
line-height: 24px;
|
|
58
|
+
color: var(--inputs-color);
|
|
59
|
+
|
|
60
|
+
& input {
|
|
61
|
+
background-color: var(--tag-input-background-color);
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
&__values {
|
|
66
|
+
background-color: var(--values-background-color);
|
|
67
|
+
border-bottom: 1px solid var(--border-color);
|
|
68
|
+
border-left: 1px solid var(--border-color);
|
|
69
|
+
border-right: 1px solid var(--border-color);
|
|
70
|
+
|
|
71
|
+
&_first-value {
|
|
72
|
+
border-top: 1px solid var(--border-color);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
font-family: inherit;
|
|
76
|
+
font-style: inherit;
|
|
77
|
+
font-weight: 400;
|
|
78
|
+
font-size: var(--values-font-size);
|
|
79
|
+
line-height: 24px;
|
|
80
|
+
color: var(--values-color);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
&__cell {
|
|
84
|
+
&>button {
|
|
85
|
+
width: 100%;
|
|
86
|
+
font-size: var(--button-text-font-size);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
&-label, &-input input, &-value {
|
|
90
|
+
font-family: inherit;
|
|
91
|
+
font-style: inherit;
|
|
92
|
+
font-weight: inherit;
|
|
93
|
+
font-size: inherit;
|
|
94
|
+
line-height: inherit;
|
|
95
|
+
color: inherit;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
&-label{
|
|
99
|
+
display: flex;
|
|
100
|
+
flex-flow: row nowrap;
|
|
101
|
+
justify-content: flex-start;
|
|
102
|
+
align-items: center;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
&-value {
|
|
106
|
+
padding: 0 7.5px;
|
|
107
|
+
border-right: 1px solid var(--border-color);
|
|
108
|
+
display: flex;
|
|
109
|
+
flex-flow: row nowrap;
|
|
110
|
+
justify-content: flex-start;
|
|
111
|
+
align-items: center;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
&-action {
|
|
115
|
+
display: flex;
|
|
116
|
+
flex-flow: row nowrap;
|
|
117
|
+
justify-content: center;
|
|
118
|
+
align-items: center;
|
|
119
|
+
cursor: pointer;
|
|
120
|
+
|
|
121
|
+
color: $color--froly;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
}
|
|
@@ -0,0 +1,101 @@
|
|
|
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.RangeListTemplate = 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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
17
|
+
|
|
18
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
19
|
+
|
|
20
|
+
var _RangeList = _interopRequireDefault(require("./RangeList"));
|
|
21
|
+
|
|
22
|
+
require("./partial/AnyOuterClass.scss");
|
|
23
|
+
|
|
24
|
+
var _excluded = ["includeOuterStyles"];
|
|
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
|
+
global.lng = 'en';
|
|
31
|
+
var _default = {
|
|
32
|
+
title: 'RangeList',
|
|
33
|
+
component: _RangeList.default
|
|
34
|
+
};
|
|
35
|
+
exports.default = _default;
|
|
36
|
+
var rootStyles = {
|
|
37
|
+
with: '100%',
|
|
38
|
+
padding: '20px',
|
|
39
|
+
backgroundColor: '#f7fafc'
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
var Template = function Template(args) {
|
|
43
|
+
var includeOuterStyles = args.includeOuterStyles,
|
|
44
|
+
restArgs = (0, _objectWithoutProperties2.default)(args, _excluded);
|
|
45
|
+
|
|
46
|
+
var _useState = (0, _react.useState)([{
|
|
47
|
+
from: 1,
|
|
48
|
+
to: 2
|
|
49
|
+
}, {
|
|
50
|
+
from: 5,
|
|
51
|
+
to: 7
|
|
52
|
+
}, {
|
|
53
|
+
from: 8,
|
|
54
|
+
to: 9
|
|
55
|
+
}]),
|
|
56
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
57
|
+
value = _useState2[0],
|
|
58
|
+
setValue = _useState2[1]; // { from: 1, to: 2 }, { from: 5, to: 7 }, { from: 8, to: 9 }
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
62
|
+
style: rootStyles
|
|
63
|
+
}, /*#__PURE__*/_react.default.createElement(_RangeList.default, (0, _extends2.default)({}, restArgs, {
|
|
64
|
+
className: includeOuterStyles ? 'any-outer-class__range-list' : null,
|
|
65
|
+
value: value,
|
|
66
|
+
onChange: function (_onChange) {
|
|
67
|
+
function onChange(_x) {
|
|
68
|
+
return _onChange.apply(this, arguments);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
onChange.toString = function () {
|
|
72
|
+
return _onChange.toString();
|
|
73
|
+
};
|
|
74
|
+
|
|
75
|
+
return onChange;
|
|
76
|
+
}(function (e) {
|
|
77
|
+
return onChange(e, 'value');
|
|
78
|
+
})
|
|
79
|
+
})));
|
|
80
|
+
}; // const { fields, onChange, type, isInteger, id: filterId, label, className } = props;
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
var RangeListTemplate = Template.bind({});
|
|
84
|
+
exports.RangeListTemplate = RangeListTemplate;
|
|
85
|
+
RangeListTemplate.args = {
|
|
86
|
+
includeOuterStyles: false // fields: [
|
|
87
|
+
// {label: 'From', key: 'from', type: 'number', init: '$'},
|
|
88
|
+
// {label: 'To', key: 'to', type: 'number', init: '$'}
|
|
89
|
+
// ],
|
|
90
|
+
// id: 306
|
|
91
|
+
// isActive: true
|
|
92
|
+
// isInteger: true
|
|
93
|
+
// isLabelBold: true
|
|
94
|
+
// isNoLabel: true
|
|
95
|
+
// label: "Age"
|
|
96
|
+
// listType: "rangeList"
|
|
97
|
+
// onChange: ƒ onChange(e)
|
|
98
|
+
// type: "switcherRangeList"
|
|
99
|
+
// value: (2) [{…}, {…}]
|
|
100
|
+
|
|
101
|
+
};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
// @import url('https://fonts.googleapis.com/css2?family=Palette+Mosaic&family=Roboto:wght@300;400;500&display=swap');
|
|
2
|
+
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
|
|
3
|
+
|
|
4
|
+
.any-outer-class__range-list {
|
|
5
|
+
// font-family: 'Palette Mosaic', cursive;
|
|
6
|
+
|
|
7
|
+
font-family: 'Roboto', sans-serif;
|
|
8
|
+
|
|
9
|
+
--border-color: #f4f7f9;
|
|
10
|
+
|
|
11
|
+
--labels-font-size: 12px;
|
|
12
|
+
--inputs-font-size: 13px;
|
|
13
|
+
--values-font-size: 13px;
|
|
14
|
+
--button-text-font-size: 13px;
|
|
15
|
+
|
|
16
|
+
--labels-color: #1E1E2D;
|
|
17
|
+
--inputs-color: #1e1e2d;
|
|
18
|
+
--values-color: #1E1E2D;
|
|
19
|
+
|
|
20
|
+
.range-list__labels {
|
|
21
|
+
line-height: 20px;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.range-list__inputs {
|
|
25
|
+
font-weight: 300;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.range-list__values {
|
|
29
|
+
font-weight: 300;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
@@ -17,7 +17,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
17
17
|
|
|
18
18
|
var _Switcher = _interopRequireDefault(require("./Switcher"));
|
|
19
19
|
|
|
20
|
-
require("./partial/
|
|
20
|
+
require("./partial/AnyOuterClass.scss");
|
|
21
21
|
|
|
22
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
23
|
|
|
@@ -48,5 +48,5 @@ SwitcherTemplate.args = {
|
|
|
48
48
|
label: 'Test label',
|
|
49
49
|
disabled: false,
|
|
50
50
|
isLabelBold: true,
|
|
51
|
-
className: '
|
|
51
|
+
className: 'any-outer-class__switcher'
|
|
52
52
|
};
|
|
@@ -17,7 +17,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
17
17
|
|
|
18
18
|
var _TextSwitcher = _interopRequireDefault(require("./TextSwitcher"));
|
|
19
19
|
|
|
20
|
-
|
|
20
|
+
require("./partial/AnyOuterClass.scss");
|
|
21
21
|
|
|
22
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
23
|
|
|
@@ -47,5 +47,5 @@ exports.TextSwitcherTemplate = TextSwitcherTemplate;
|
|
|
47
47
|
TextSwitcherTemplate.args = {
|
|
48
48
|
activeText: 'is',
|
|
49
49
|
inactiveText: 'some long text',
|
|
50
|
-
className:
|
|
50
|
+
className: 'any-outer-class__text-switcher'
|
|
51
51
|
};
|