intelicoreact 0.1.18 → 0.1.21
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/RadioInput/RadioInput.js +1 -1
- package/dist/Atomic/FormElements/RangeInputs/RangeInputs.js +10 -16
- package/dist/Atomic/FormElements/RangeInputs/RangeInputs.scss +37 -7
- package/dist/Atomic/FormElements/RangeInputs/RangeInputs.stories.js +5 -3
- 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.js +9 -7
- package/dist/Atomic/FormElements/Switcher/Switcher.scss +30 -6
- package/dist/Atomic/FormElements/Switcher/Switcher.stories.js +4 -1
- package/dist/Atomic/FormElements/Switcher/partial/AnyOuterClass.scss +6 -0
- package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.scss +17 -9
- package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.stories.js +5 -3
- package/dist/Atomic/FormElements/TextSwitcher/TextSwitcher.js +5 -5
- package/dist/Atomic/FormElements/TextSwitcher/TextSwitcher.scss +20 -2
- package/dist/Atomic/FormElements/TextSwitcher/TextSwitcher.stories.js +4 -1
- package/dist/Atomic/FormElements/TextSwitcher/partial/AnyOuterClass.scss +4 -0
- package/dist/Atomic/FormElements/Textarea/Textarea.js +3 -13
- package/dist/Atomic/FormElements/Textarea/Textarea.scss +30 -28
- package/dist/Atomic/FormElements/Textarea/Textarea.stories.js +1 -4
- 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.js +58 -0
- package/dist/Molecular/SwitcherHide/SwitcherHide.scss +31 -0
- package/dist/Molecular/SwitcherHide/SwitcherHide.stories.js +54 -0
- package/dist/Molecular/SwitcherHide/partial/AnyOuterClass.scss +6 -0
- package/dist/Molecular/SwitcherRadio/SwitcherRadio.js +69 -0
- package/dist/Molecular/SwitcherRadio/SwitcherRadio.scss +31 -0
- package/dist/Molecular/SwitcherRadio/SwitcherRadio.stories.js +96 -0
- package/dist/Molecular/SwitcherRadio/partial/AnyOuterClass.scss +6 -0
- package/dist/Molecular/SwitcherRange/SwitcherRange.js +72 -0
- package/dist/Molecular/SwitcherRange/SwitcherRange.scss +24 -0
- package/dist/Molecular/SwitcherRange/SwitcherRange.stories.js +59 -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/SwitcherTagsDropdown/SwitcherTagsDropdown.js +179 -0
- 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.js +81 -0
- package/dist/Molecular/SwitcherTextarea/SwitcherTextarea.scss +23 -0
- package/dist/Molecular/SwitcherTextarea/SwitcherTextarea.stories.js +70 -0
- package/dist/Molecular/SwitcherTextarea/partial/AnyOuterClass.scss +20 -0
- package/package.json +1 -1
- package/dist/Functions/useFormTools.js +0 -429
|
@@ -0,0 +1,179 @@
|
|
|
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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
13
|
+
|
|
14
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
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 _SwitcherHide = _interopRequireDefault(require("../SwitcherHide/SwitcherHide"));
|
|
23
|
+
|
|
24
|
+
var _TextSwitcher = _interopRequireDefault(require("../../Atomic/FormElements/TextSwitcher/TextSwitcher"));
|
|
25
|
+
|
|
26
|
+
var _TagsDropdown = _interopRequireDefault(require("../../Atomic/FormElements/TagsDropdown/TagsDropdown"));
|
|
27
|
+
|
|
28
|
+
var _Textarea = _interopRequireDefault(require("../../Atomic/FormElements/Textarea/Textarea"));
|
|
29
|
+
|
|
30
|
+
var _Button = _interopRequireDefault(require("../../Atomic/UI/Button/Button"));
|
|
31
|
+
|
|
32
|
+
require("./SwitcherTagsDropdown.scss");
|
|
33
|
+
|
|
34
|
+
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); }
|
|
35
|
+
|
|
36
|
+
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; }
|
|
37
|
+
|
|
38
|
+
var RC = 'switcher-tags-dropdown';
|
|
39
|
+
|
|
40
|
+
var SwitcherTagsDropdown = function SwitcherTagsDropdown(_ref) {
|
|
41
|
+
var className = _ref.className,
|
|
42
|
+
label = _ref.label,
|
|
43
|
+
isLabelBold = _ref.isLabelBold,
|
|
44
|
+
isValuesInTags = _ref.isValuesInTags,
|
|
45
|
+
isActive = _ref.isActive,
|
|
46
|
+
isIncluded = _ref.isIncluded,
|
|
47
|
+
_ref$options = _ref.options,
|
|
48
|
+
options = _ref$options === void 0 ? [] : _ref$options,
|
|
49
|
+
_ref$chosenOptions = _ref.chosenOptions,
|
|
50
|
+
chosenOptions = _ref$chosenOptions === void 0 ? [] : _ref$chosenOptions,
|
|
51
|
+
_ref$setIsActive = _ref.setIsActive,
|
|
52
|
+
setIsActive = _ref$setIsActive === void 0 ? function () {} : _ref$setIsActive,
|
|
53
|
+
_ref$setIsIncluded = _ref.setIsIncluded,
|
|
54
|
+
setIsIncluded = _ref$setIsIncluded === void 0 ? function () {} : _ref$setIsIncluded,
|
|
55
|
+
_ref$onChange = _ref.onChange,
|
|
56
|
+
onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
|
|
57
|
+
|
|
58
|
+
var _useState = (0, _react.useState)(false),
|
|
59
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
60
|
+
listView = _useState2[0],
|
|
61
|
+
setListView = _useState2[1];
|
|
62
|
+
|
|
63
|
+
var _useState3 = (0, _react.useState)(),
|
|
64
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
65
|
+
textValue = _useState4[0],
|
|
66
|
+
setTextValue = _useState4[1];
|
|
67
|
+
|
|
68
|
+
var singleLevelOptions = (0, _react.useMemo)(function () {
|
|
69
|
+
return options.reduce(function (acc, item) {
|
|
70
|
+
return [].concat((0, _toConsumableArray2.default)(acc), (0, _toConsumableArray2.default)(item.groupName ? item.list : [item]));
|
|
71
|
+
}, []);
|
|
72
|
+
}, [options]);
|
|
73
|
+
|
|
74
|
+
var apply = function apply() {
|
|
75
|
+
var _textValue$split;
|
|
76
|
+
|
|
77
|
+
var getFilterFunction = function getFilterFunction(valuesArr) {
|
|
78
|
+
return function (item) {
|
|
79
|
+
return valuesArr.find(function (el) {
|
|
80
|
+
var itemValue = item === null || item === void 0 ? void 0 : item.value.toString().toLowerCase();
|
|
81
|
+
var itemLabel = (item.title || item.label || item.name || item.value).toString().toLowerCase();
|
|
82
|
+
var chosenOption = el.toString().toLowerCase();
|
|
83
|
+
return (chosenOption === itemValue || chosenOption === itemLabel) && !item.disabled;
|
|
84
|
+
});
|
|
85
|
+
};
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
var textToArray = (textValue === null || textValue === void 0 ? void 0 : (_textValue$split = textValue.split) === null || _textValue$split === void 0 ? void 0 : _textValue$split.call(textValue, ',')).map(function (item) {
|
|
89
|
+
return item.toString().trim();
|
|
90
|
+
}).filter(function (item) {
|
|
91
|
+
return !!item;
|
|
92
|
+
});
|
|
93
|
+
var newOptions = options.filter(getFilterFunction(textToArray)).map(function (option) {
|
|
94
|
+
return option.value;
|
|
95
|
+
});
|
|
96
|
+
onChange(newOptions, 'chosenOptions');
|
|
97
|
+
setListView(false);
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
var enterHandler = function enterHandler(e, value) {
|
|
101
|
+
if (e.keyCode === 13) {
|
|
102
|
+
var option = options === null || options === void 0 ? void 0 : options.find(function (item) {
|
|
103
|
+
var _item$title;
|
|
104
|
+
|
|
105
|
+
return (item === null || item === void 0 ? void 0 : (_item$title = item.title) === null || _item$title === void 0 ? void 0 : _item$title.toLowerCase()) === (value === null || value === void 0 ? void 0 : value.toLowerCase()) && !item.disabled;
|
|
106
|
+
});
|
|
107
|
+
var isOptionChecked = chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.some(function (item) {
|
|
108
|
+
var _item$title2, _option$title;
|
|
109
|
+
|
|
110
|
+
return (item === null || item === void 0 ? void 0 : (_item$title2 = item.title) === null || _item$title2 === void 0 ? void 0 : _item$title2.toLowerCase()) === (option === null || option === void 0 ? void 0 : (_option$title = option.title) === null || _option$title === void 0 ? void 0 : _option$title.toLowerCase());
|
|
111
|
+
});
|
|
112
|
+
if (option && !isOptionChecked) onChange([].concat((0, _toConsumableArray2.default)(chosenOptions), [option]), 'chosenOptions');
|
|
113
|
+
}
|
|
114
|
+
};
|
|
115
|
+
|
|
116
|
+
(0, _react.useEffect)(function () {
|
|
117
|
+
var getLabel = function getLabel(el) {
|
|
118
|
+
return el.title || el.label || el.name || el.value;
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
var valuesArr = chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.map(function (item) {
|
|
122
|
+
return isValuesInTags ? item : getLabel(singleLevelOptions.find(function (option) {
|
|
123
|
+
return option.value === item;
|
|
124
|
+
}));
|
|
125
|
+
});
|
|
126
|
+
setTextValue(valuesArr.join(', '));
|
|
127
|
+
}, [chosenOptions, listView]);
|
|
128
|
+
return /*#__PURE__*/_react.default.createElement(_SwitcherHide.default, {
|
|
129
|
+
isActive: isActive,
|
|
130
|
+
onChange: setIsActive,
|
|
131
|
+
label: label,
|
|
132
|
+
className: (0, _classnames.default)(RC, className),
|
|
133
|
+
isLabelBold: isLabelBold
|
|
134
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
135
|
+
className: "".concat(RC, "__wrap switcher-hide__content")
|
|
136
|
+
}, /*#__PURE__*/_react.default.createElement(_TextSwitcher.default, {
|
|
137
|
+
activeText: "is",
|
|
138
|
+
inactiveText: "is not",
|
|
139
|
+
isActive: isIncluded !== null && isIncluded !== void 0 ? isIncluded : true,
|
|
140
|
+
onChange: setIsIncluded,
|
|
141
|
+
className: "".concat(RC, "__text-switcher")
|
|
142
|
+
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
143
|
+
className: "filter-select__wrap--buttons"
|
|
144
|
+
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
145
|
+
onClick: function onClick() {
|
|
146
|
+
return setListView(!listView);
|
|
147
|
+
},
|
|
148
|
+
className: "".concat(RC, "__btn")
|
|
149
|
+
}, listView ? 'Close' : 'List view'), listView && /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
150
|
+
label: "Apply",
|
|
151
|
+
className: "".concat(RC, "__apply"),
|
|
152
|
+
onClick: function onClick() {
|
|
153
|
+
return apply();
|
|
154
|
+
}
|
|
155
|
+
}), /*#__PURE__*/_react.default.createElement("button", {
|
|
156
|
+
onClick: function onClick() {
|
|
157
|
+
return onChange([], 'chosenOptions');
|
|
158
|
+
},
|
|
159
|
+
className: "".concat(RC, "__btn")
|
|
160
|
+
}, "Clear"))), listView ? /*#__PURE__*/_react.default.createElement(_Textarea.default, {
|
|
161
|
+
value: textValue,
|
|
162
|
+
onChange: function onChange(value) {
|
|
163
|
+
return setTextValue(value);
|
|
164
|
+
}
|
|
165
|
+
}) : /*#__PURE__*/_react.default.createElement(_TagsDropdown.default, {
|
|
166
|
+
options: options,
|
|
167
|
+
chosenOptions: chosenOptions,
|
|
168
|
+
onChange: onChange,
|
|
169
|
+
className: "".concat(RC, "__tags-dropdown"),
|
|
170
|
+
onKeyPress: function onKeyPress(e, value) {
|
|
171
|
+
return enterHandler(e, value);
|
|
172
|
+
},
|
|
173
|
+
tagClassname: (0, _classnames.default)("".concat(RC, "__tag"), (0, _defineProperty2.default)({}, "".concat(RC, "__tag_inactive"), !isIncluded)),
|
|
174
|
+
isValuesInTags: isValuesInTags
|
|
175
|
+
}));
|
|
176
|
+
};
|
|
177
|
+
|
|
178
|
+
var _default = SwitcherTagsDropdown;
|
|
179
|
+
exports.default = _default;
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
@import '../../scss/vars';
|
|
2
|
+
|
|
3
|
+
.switcher-tags-dropdown {
|
|
4
|
+
//width: 550px;
|
|
5
|
+
|
|
6
|
+
&__wrap {
|
|
7
|
+
display: flex;
|
|
8
|
+
align-items: center;
|
|
9
|
+
justify-content: space-between;
|
|
10
|
+
flex-wrap: wrap;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
&__btn {
|
|
14
|
+
color: $color--primary;
|
|
15
|
+
font-size: 12px;
|
|
16
|
+
cursor: pointer;
|
|
17
|
+
|
|
18
|
+
&:not(:last-child) {
|
|
19
|
+
margin-right: 8px;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&__tags-dropdown {
|
|
24
|
+
width: 100%;
|
|
25
|
+
|
|
26
|
+
.tags-dropdown__trigger {
|
|
27
|
+
position: static;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.switcher-tags-dropdown__tag {
|
|
31
|
+
background-color: $color--green-light;
|
|
32
|
+
|
|
33
|
+
&_inactive {
|
|
34
|
+
background-color: $color--error-bg;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.tags-dropdown__arrow {
|
|
39
|
+
top: 6px;
|
|
40
|
+
right: 5px;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&__apply {
|
|
45
|
+
height: 20px;
|
|
46
|
+
margin-right: 8px;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
@@ -0,0 +1,109 @@
|
|
|
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.SwitcherTagsDropdownTemplate = 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 _SwitcherTagsDropdown = _interopRequireDefault(require("./SwitcherTagsDropdown"));
|
|
21
|
+
|
|
22
|
+
require("./partial/AnyOuterClass.scss");
|
|
23
|
+
|
|
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
|
+
|
|
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
|
+
|
|
28
|
+
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; }
|
|
29
|
+
|
|
30
|
+
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; }
|
|
31
|
+
|
|
32
|
+
global.lng = 'en';
|
|
33
|
+
var _default = {
|
|
34
|
+
title: 'SwitcherTagsDropdown',
|
|
35
|
+
component: _SwitcherTagsDropdown.default
|
|
36
|
+
};
|
|
37
|
+
exports.default = _default;
|
|
38
|
+
|
|
39
|
+
var Template = function Template(args) {
|
|
40
|
+
var options = [{
|
|
41
|
+
id: 1,
|
|
42
|
+
title: 'Tags Dropdown1',
|
|
43
|
+
value: 'drop1',
|
|
44
|
+
disabled: false
|
|
45
|
+
}, {
|
|
46
|
+
id: 2,
|
|
47
|
+
title: 'Tags Dropdown2',
|
|
48
|
+
value: 'drop2',
|
|
49
|
+
disabled: false
|
|
50
|
+
}, {
|
|
51
|
+
id: 3,
|
|
52
|
+
title: 'Tags Dropdown3',
|
|
53
|
+
value: 'drop3',
|
|
54
|
+
disabled: true
|
|
55
|
+
}, {
|
|
56
|
+
id: 4,
|
|
57
|
+
title: 'Tags Dropdown4',
|
|
58
|
+
value: 'drop4',
|
|
59
|
+
disabled: false
|
|
60
|
+
}, {
|
|
61
|
+
id: 5,
|
|
62
|
+
title: 'Tags Dropdown5',
|
|
63
|
+
value: 'drop5',
|
|
64
|
+
disabled: false
|
|
65
|
+
}, {
|
|
66
|
+
id: 6,
|
|
67
|
+
title: 'Tags Dropdown6',
|
|
68
|
+
value: 'drop6',
|
|
69
|
+
disabled: false
|
|
70
|
+
}];
|
|
71
|
+
|
|
72
|
+
var _useState = (0, _react.useState)({
|
|
73
|
+
isActive: true,
|
|
74
|
+
isIncluded: true,
|
|
75
|
+
value: []
|
|
76
|
+
}),
|
|
77
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
78
|
+
values = _useState2[0],
|
|
79
|
+
setValues = _useState2[1];
|
|
80
|
+
|
|
81
|
+
var handleChange = function handleChange(val, prop) {
|
|
82
|
+
setValues(_objectSpread(_objectSpread({}, values), {}, (0, _defineProperty2.default)({}, prop, val)));
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
return /*#__PURE__*/_react.default.createElement(_SwitcherTagsDropdown.default, (0, _extends2.default)({}, args, {
|
|
86
|
+
options: options,
|
|
87
|
+
isActive: values.isActive,
|
|
88
|
+
setIsActive: function setIsActive(val) {
|
|
89
|
+
return handleChange(val, 'isActive');
|
|
90
|
+
},
|
|
91
|
+
isIncluded: values.isIncluded,
|
|
92
|
+
setIsIncluded: function setIsIncluded(val) {
|
|
93
|
+
return handleChange(val, 'isIncluded');
|
|
94
|
+
},
|
|
95
|
+
chosenOptions: values.value,
|
|
96
|
+
onChange: function onChange(val) {
|
|
97
|
+
return handleChange(val, 'value');
|
|
98
|
+
}
|
|
99
|
+
}));
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
var SwitcherTagsDropdownTemplate = Template.bind({});
|
|
103
|
+
exports.SwitcherTagsDropdownTemplate = SwitcherTagsDropdownTemplate;
|
|
104
|
+
SwitcherTagsDropdownTemplate.args = {
|
|
105
|
+
label: 'State',
|
|
106
|
+
isLabelBold: true,
|
|
107
|
+
isValuesInTags: true,
|
|
108
|
+
className: 'any-outer-class__switcher-tags-dropdown'
|
|
109
|
+
};
|
|
@@ -0,0 +1,81 @@
|
|
|
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 _react = _interopRequireDefault(require("react"));
|
|
11
|
+
|
|
12
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
13
|
+
|
|
14
|
+
var _SwitcherHide = _interopRequireDefault(require("../SwitcherHide/SwitcherHide"));
|
|
15
|
+
|
|
16
|
+
var _TextSwitcher = _interopRequireDefault(require("../../Atomic/FormElements/TextSwitcher/TextSwitcher"));
|
|
17
|
+
|
|
18
|
+
var _Textarea = _interopRequireDefault(require("../../Atomic/FormElements/Textarea/Textarea"));
|
|
19
|
+
|
|
20
|
+
require("./SwitcherTextarea.scss");
|
|
21
|
+
|
|
22
|
+
var RC = 'switcher-textarea';
|
|
23
|
+
|
|
24
|
+
var SwitcherTextarea = function SwitcherTextarea(_ref) {
|
|
25
|
+
var label = _ref.label,
|
|
26
|
+
isLabelBold = _ref.isLabelBold,
|
|
27
|
+
hint = _ref.hint,
|
|
28
|
+
className = _ref.className,
|
|
29
|
+
_ref$isActive = _ref.isActive,
|
|
30
|
+
isActive = _ref$isActive === void 0 ? true : _ref$isActive,
|
|
31
|
+
_ref$setIsActive = _ref.setIsActive,
|
|
32
|
+
setIsActive = _ref$setIsActive === void 0 ? function () {} : _ref$setIsActive,
|
|
33
|
+
_ref$isIncluded = _ref.isIncluded,
|
|
34
|
+
isIncluded = _ref$isIncluded === void 0 ? true : _ref$isIncluded,
|
|
35
|
+
_ref$setIsIncluded = _ref.setIsIncluded,
|
|
36
|
+
setIsIncluded = _ref$setIsIncluded === void 0 ? function () {} : _ref$setIsIncluded,
|
|
37
|
+
_ref$text = _ref.text,
|
|
38
|
+
text = _ref$text === void 0 ? '' : _ref$text,
|
|
39
|
+
_ref$setText = _ref.setText,
|
|
40
|
+
setText = _ref$setText === void 0 ? function () {} : _ref$setText,
|
|
41
|
+
_ref$activeText = _ref.activeText,
|
|
42
|
+
activeText = _ref$activeText === void 0 ? "is" : _ref$activeText,
|
|
43
|
+
_ref$inactiveText = _ref.inactiveText,
|
|
44
|
+
inactiveText = _ref$inactiveText === void 0 ? "is not" : _ref$inactiveText,
|
|
45
|
+
placeholder = _ref.placeholder,
|
|
46
|
+
disabled = _ref.disabled;
|
|
47
|
+
return /*#__PURE__*/_react.default.createElement(_SwitcherHide.default, {
|
|
48
|
+
isActive: isActive,
|
|
49
|
+
onChange: setIsActive,
|
|
50
|
+
label: label,
|
|
51
|
+
isLabelBold: isLabelBold,
|
|
52
|
+
className: (0, _classnames.default)(RC, className),
|
|
53
|
+
hint: hint,
|
|
54
|
+
disabled: disabled
|
|
55
|
+
}, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
56
|
+
className: "".concat(RC, "__wrap switcher-hide__content")
|
|
57
|
+
}, /*#__PURE__*/_react.default.createElement(_TextSwitcher.default, {
|
|
58
|
+
activeText: activeText,
|
|
59
|
+
inactiveText: inactiveText,
|
|
60
|
+
isActive: isIncluded !== null && isIncluded !== void 0 ? isIncluded : true,
|
|
61
|
+
onChange: function onChange(value) {
|
|
62
|
+
return setIsIncluded(value);
|
|
63
|
+
},
|
|
64
|
+
className: "".concat(RC, "__text-switcher")
|
|
65
|
+
}), /*#__PURE__*/_react.default.createElement("button", {
|
|
66
|
+
onClick: function onClick() {
|
|
67
|
+
return setText('');
|
|
68
|
+
},
|
|
69
|
+
className: "".concat(RC, "__btn")
|
|
70
|
+
}, "Clear")), /*#__PURE__*/_react.default.createElement(_Textarea.default, {
|
|
71
|
+
value: text,
|
|
72
|
+
placeholder: placeholder,
|
|
73
|
+
onChange: function onChange(value) {
|
|
74
|
+
return setText(value);
|
|
75
|
+
},
|
|
76
|
+
className: "".concat(RC, "__textarea")
|
|
77
|
+
})));
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
var _default = SwitcherTextarea;
|
|
81
|
+
exports.default = _default;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
@import './../../scss/vars';
|
|
2
|
+
|
|
3
|
+
.switcher-textarea {
|
|
4
|
+
&__wrap {
|
|
5
|
+
display: flex;
|
|
6
|
+
align-items: center;
|
|
7
|
+
justify-content: space-between;
|
|
8
|
+
flex-wrap: wrap;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
&__text-switcher {
|
|
12
|
+
height: 20px;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
&__btn {
|
|
16
|
+
color: $color--primary;
|
|
17
|
+
font-size: 12px;
|
|
18
|
+
cursor: pointer;
|
|
19
|
+
&:not(:last-child) {
|
|
20
|
+
margin-right: 8px;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
@@ -0,0 +1,70 @@
|
|
|
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.SwitcherTextareaTemplate = exports.default = void 0;
|
|
11
|
+
|
|
12
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
+
|
|
14
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
15
|
+
|
|
16
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
17
|
+
|
|
18
|
+
var _SwitcherTextarea = _interopRequireDefault(require("./SwitcherTextarea"));
|
|
19
|
+
|
|
20
|
+
require("./partial/AnyOuterClass.scss");
|
|
21
|
+
|
|
22
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
23
|
+
|
|
24
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
25
|
+
|
|
26
|
+
global.lng = 'en';
|
|
27
|
+
var _default = {
|
|
28
|
+
title: 'SwitcherTextarea',
|
|
29
|
+
component: _SwitcherTextarea.default
|
|
30
|
+
};
|
|
31
|
+
exports.default = _default;
|
|
32
|
+
|
|
33
|
+
var Template = function Template(args) {
|
|
34
|
+
var _useState = (0, _react.useState)(true),
|
|
35
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
36
|
+
isActive = _useState2[0],
|
|
37
|
+
setIsActive = _useState2[1];
|
|
38
|
+
|
|
39
|
+
var _useState3 = (0, _react.useState)(true),
|
|
40
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
41
|
+
isIncluded = _useState4[0],
|
|
42
|
+
setIsIncluded = _useState4[1];
|
|
43
|
+
|
|
44
|
+
var _useState5 = (0, _react.useState)(''),
|
|
45
|
+
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
46
|
+
text = _useState6[0],
|
|
47
|
+
setText = _useState6[1];
|
|
48
|
+
|
|
49
|
+
return /*#__PURE__*/_react.default.createElement(_SwitcherTextarea.default, (0, _extends2.default)({}, args, {
|
|
50
|
+
isActive: isActive,
|
|
51
|
+
setIsActive: setIsActive,
|
|
52
|
+
isIncluded: isIncluded,
|
|
53
|
+
setIsIncluded: setIsIncluded,
|
|
54
|
+
text: text,
|
|
55
|
+
setText: setText
|
|
56
|
+
}));
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
var SwitcherTextareaTemplate = Template.bind({});
|
|
60
|
+
exports.SwitcherTextareaTemplate = SwitcherTextareaTemplate;
|
|
61
|
+
SwitcherTextareaTemplate.args = {
|
|
62
|
+
label: 'label test',
|
|
63
|
+
hint: 'hint',
|
|
64
|
+
isLabelBold: true,
|
|
65
|
+
activeText: undefined,
|
|
66
|
+
inactiveText: undefined,
|
|
67
|
+
placeholder: 'Placeholder',
|
|
68
|
+
disabled: false,
|
|
69
|
+
className: 'any-outer-class__switcher-textarea'
|
|
70
|
+
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
.any-outer-class__switcher-textarea {
|
|
2
|
+
font-style: normal;
|
|
3
|
+
font-size: 12px;
|
|
4
|
+
line-height: 20px;
|
|
5
|
+
color: #1E1E2D;
|
|
6
|
+
|
|
7
|
+
.text-switcher {
|
|
8
|
+
font-size: 10px;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.textarea__textarea {
|
|
12
|
+
border-radius: 6px;
|
|
13
|
+
font-size: 13px;
|
|
14
|
+
|
|
15
|
+
&::placeholder {
|
|
16
|
+
color:dodgerblue;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
package/package.json
CHANGED