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,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
|
+
}
|
|
@@ -25,24 +25,26 @@ var Switcher = function Switcher(_ref) {
|
|
|
25
25
|
isActive = _ref.isActive,
|
|
26
26
|
disabled = _ref.disabled,
|
|
27
27
|
onChange = _ref.onChange,
|
|
28
|
-
|
|
29
|
-
hint = _ref.hint
|
|
28
|
+
isLabelBold = _ref.isLabelBold,
|
|
29
|
+
hint = _ref.hint,
|
|
30
|
+
hintSide = _ref.hintSide;
|
|
30
31
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
31
|
-
className: "".concat(RC, "
|
|
32
|
+
className: (0, _classnames.default)(RC, className, (0, _defineProperty2.default)({}, "".concat(RC, "_disabled"), disabled))
|
|
32
33
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
33
|
-
className: (0, _classnames.default)(
|
|
34
|
+
className: (0, _classnames.default)("".concat(RC, "__button")),
|
|
34
35
|
onClick: function onClick() {
|
|
35
36
|
return onChange(!isActive);
|
|
36
37
|
}
|
|
37
38
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
38
|
-
className: (0, _classnames.default)("".concat(RC, "__button"), (0, _defineProperty2.default)({}, "".concat(RC, "
|
|
39
|
+
className: (0, _classnames.default)("".concat(RC, "__button-content"), (0, _defineProperty2.default)({}, "".concat(RC, "__button-content_active"), isActive))
|
|
39
40
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
40
41
|
className: "".concat(RC, "__ball")
|
|
41
42
|
})), label && /*#__PURE__*/_react.default.createElement("span", {
|
|
42
|
-
className: (0, _classnames.default)("".concat(RC, "__label"), (0, _defineProperty2.default)({}, "".concat(RC, "__label_bold"),
|
|
43
|
+
className: (0, _classnames.default)("".concat(RC, "__label"), (0, _defineProperty2.default)({}, "".concat(RC, "__label_bold"), isLabelBold))
|
|
43
44
|
}, label)), hint && /*#__PURE__*/_react.default.createElement(_Hint.default, {
|
|
44
45
|
className: "".concat(RC, "__hint"),
|
|
45
|
-
hint: hint
|
|
46
|
+
hint: hint,
|
|
47
|
+
side: hintSide
|
|
46
48
|
}));
|
|
47
49
|
};
|
|
48
50
|
|
|
@@ -1,18 +1,28 @@
|
|
|
1
1
|
@import "../../../scss/vars";
|
|
2
2
|
|
|
3
3
|
.switcher {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
|
|
5
|
+
&__button {
|
|
6
|
+
display: inline-flex;
|
|
7
|
+
align-items: center;
|
|
8
|
+
cursor: pointer;
|
|
9
|
+
|
|
10
|
+
font-family: inherit;
|
|
11
|
+
font-style: inherit;
|
|
12
|
+
font-weight: inherit;
|
|
13
|
+
font-size: inherit;
|
|
14
|
+
color: inherit;
|
|
15
|
+
}
|
|
7
16
|
|
|
8
17
|
&_disabled {
|
|
9
18
|
pointer-events: none;
|
|
10
19
|
opacity: 0.5;
|
|
11
20
|
}
|
|
12
21
|
|
|
13
|
-
&__button {
|
|
22
|
+
&__button-content {
|
|
14
23
|
background-color: rgba($color--gray, 0.5);
|
|
15
24
|
border-radius: 8px;
|
|
25
|
+
min-width: 26px;
|
|
16
26
|
width: 26px;
|
|
17
27
|
height: 16px;
|
|
18
28
|
padding: 1px;
|
|
@@ -36,10 +46,17 @@
|
|
|
36
46
|
}
|
|
37
47
|
|
|
38
48
|
&__label {
|
|
39
|
-
font-
|
|
49
|
+
font-family: inherit;
|
|
50
|
+
font-style: inherit;
|
|
51
|
+
font-weight: inherit;
|
|
52
|
+
font-size: inherit;
|
|
53
|
+
color: inherit;
|
|
54
|
+
line-height: 24px;
|
|
55
|
+
|
|
40
56
|
margin-left: 4px;
|
|
41
57
|
user-select: none;
|
|
42
|
-
|
|
58
|
+
text-align: left;
|
|
59
|
+
|
|
43
60
|
&_bold {
|
|
44
61
|
font-weight: 500;
|
|
45
62
|
}
|
|
@@ -52,5 +69,12 @@
|
|
|
52
69
|
|
|
53
70
|
&__hint {
|
|
54
71
|
margin-left: 5px;
|
|
72
|
+
.hint__button {
|
|
73
|
+
svg {
|
|
74
|
+
min-width: 16px;
|
|
75
|
+
width: 16px;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
55
78
|
}
|
|
56
79
|
}
|
|
80
|
+
|
|
@@ -17,6 +17,8 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
17
17
|
|
|
18
18
|
var _Switcher = _interopRequireDefault(require("./Switcher"));
|
|
19
19
|
|
|
20
|
+
require("./partial/AnyOuterClass.scss");
|
|
21
|
+
|
|
20
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); }
|
|
21
23
|
|
|
22
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; }
|
|
@@ -45,5 +47,6 @@ exports.SwitcherTemplate = SwitcherTemplate;
|
|
|
45
47
|
SwitcherTemplate.args = {
|
|
46
48
|
label: 'Test label',
|
|
47
49
|
disabled: false,
|
|
48
|
-
|
|
50
|
+
isLabelBold: true,
|
|
51
|
+
className: 'any-outer-class__switcher'
|
|
49
52
|
};
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
|
|
23
23
|
height: fit-content;
|
|
24
24
|
min-height: 28px;
|
|
25
|
-
padding:
|
|
25
|
+
padding: 1px 24px 1px 5px;
|
|
26
26
|
cursor: pointer;
|
|
27
27
|
background: #ffffff;
|
|
28
28
|
border: 1px solid #e2e5ec;
|
|
@@ -93,14 +93,12 @@
|
|
|
93
93
|
}
|
|
94
94
|
|
|
95
95
|
&__arrow {
|
|
96
|
+
width: 16px;
|
|
97
|
+
height: 16px;
|
|
96
98
|
position: absolute;
|
|
97
|
-
top:
|
|
99
|
+
top: calc(50% - 8px);
|
|
98
100
|
right: 5px;
|
|
99
101
|
|
|
100
|
-
display: flex;
|
|
101
|
-
align-items: center;
|
|
102
|
-
margin-right: 5px;
|
|
103
|
-
|
|
104
102
|
cursor: pointer;
|
|
105
103
|
|
|
106
104
|
&_active {
|
|
@@ -108,8 +106,8 @@
|
|
|
108
106
|
}
|
|
109
107
|
|
|
110
108
|
svg {
|
|
111
|
-
width:
|
|
112
|
-
height:
|
|
109
|
+
width: auto;
|
|
110
|
+
height: 100%;
|
|
113
111
|
}
|
|
114
112
|
}
|
|
115
113
|
|
|
@@ -141,7 +139,17 @@
|
|
|
141
139
|
}
|
|
142
140
|
|
|
143
141
|
.tag {
|
|
144
|
-
margin-
|
|
142
|
+
margin-top: 1px;
|
|
143
|
+
margin-bottom: 1px;
|
|
145
144
|
cursor: auto;
|
|
146
145
|
}
|
|
146
|
+
|
|
147
|
+
&_arrow-static {
|
|
148
|
+
.tags-dropdown__trigger {
|
|
149
|
+
position: static;
|
|
150
|
+
}
|
|
151
|
+
.tags-dropdown__arrow {
|
|
152
|
+
top: 6px;
|
|
153
|
+
}
|
|
154
|
+
}
|
|
147
155
|
}
|
|
@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
9
9
|
});
|
|
10
10
|
exports.TagsDropdownTemplate = exports.default = void 0;
|
|
11
11
|
|
|
12
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
+
|
|
12
14
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
13
15
|
|
|
14
16
|
var _react = _interopRequireWildcard(require("react"));
|
|
@@ -34,16 +36,16 @@ var Template = function Template(args) {
|
|
|
34
36
|
value = _useState2[0],
|
|
35
37
|
setValue = _useState2[1];
|
|
36
38
|
|
|
37
|
-
return /*#__PURE__*/_react.default.createElement(_TagsDropdown.default, {
|
|
38
|
-
options: options,
|
|
39
|
+
return /*#__PURE__*/_react.default.createElement(_TagsDropdown.default, (0, _extends2.default)({}, args, {
|
|
39
40
|
chosenOptions: value,
|
|
40
41
|
onChange: setValue
|
|
41
|
-
});
|
|
42
|
+
}));
|
|
42
43
|
};
|
|
43
44
|
|
|
44
45
|
var TagsDropdownTemplate = Template.bind({});
|
|
45
46
|
exports.TagsDropdownTemplate = TagsDropdownTemplate;
|
|
46
47
|
TagsDropdownTemplate.args = {
|
|
48
|
+
className: 'tags-dropdown_arrow-static',
|
|
47
49
|
options: [{
|
|
48
50
|
id: 1,
|
|
49
51
|
title: 'Tags Dropdown1',
|
|
@@ -18,25 +18,25 @@ require("./TextSwitcher.scss");
|
|
|
18
18
|
var RC = 'text-switcher';
|
|
19
19
|
|
|
20
20
|
var TextSwitcher = function TextSwitcher(_ref) {
|
|
21
|
-
var
|
|
21
|
+
var isActive = _ref.isActive,
|
|
22
22
|
_ref$activeText = _ref.activeText,
|
|
23
23
|
activeText = _ref$activeText === void 0 ? 'is' : _ref$activeText,
|
|
24
24
|
_ref$inactiveText = _ref.inactiveText,
|
|
25
25
|
inactiveText = _ref$inactiveText === void 0 ? 'is not' : _ref$inactiveText,
|
|
26
26
|
onChange = _ref.onChange,
|
|
27
27
|
className = _ref.className;
|
|
28
|
-
var isUndefined =
|
|
28
|
+
var isUndefined = isActive === undefined || isActive === null;
|
|
29
29
|
return /*#__PURE__*/_react.default.createElement("button", {
|
|
30
|
-
className: (0, _classnames.default)(RC, (0, _defineProperty2.default)({}, "".concat(RC, "_active"),
|
|
30
|
+
className: (0, _classnames.default)(RC, (0, _defineProperty2.default)({}, "".concat(RC, "_active"), isActive), className),
|
|
31
31
|
onClick: function onClick() {
|
|
32
|
-
return onChange(!
|
|
32
|
+
return onChange(!isActive);
|
|
33
33
|
}
|
|
34
34
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
35
35
|
className: "".concat(RC, "__btn")
|
|
36
36
|
}, activeText), inactiveText && /*#__PURE__*/_react.default.createElement("span", {
|
|
37
37
|
className: (0, _classnames.default)("".concat(RC, "__btn"), "".concat(RC, "__btn_off"))
|
|
38
38
|
}, inactiveText), !isUndefined && /*#__PURE__*/_react.default.createElement("div", {
|
|
39
|
-
className: (0, _classnames.default)("".concat(RC, "__slider"), (0, _defineProperty2.default)({}, "".concat(RC, "__slider_inactive"), !
|
|
39
|
+
className: (0, _classnames.default)("".concat(RC, "__slider"), (0, _defineProperty2.default)({}, "".concat(RC, "__slider_inactive"), !isActive))
|
|
40
40
|
}));
|
|
41
41
|
};
|
|
42
42
|
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
@import '../../../scss/vars';
|
|
2
2
|
|
|
3
3
|
.text-switcher {
|
|
4
|
+
box-sizing: border-box;
|
|
4
5
|
display: grid;
|
|
5
6
|
grid-template-columns: repeat(2, 1fr);
|
|
6
7
|
justify-content: center;
|
|
@@ -9,7 +10,11 @@
|
|
|
9
10
|
border-radius: 26px;
|
|
10
11
|
padding: 2px;
|
|
11
12
|
position: relative;
|
|
12
|
-
background: #fff;
|
|
13
|
+
background: #fff;
|
|
14
|
+
|
|
15
|
+
font-style: normal;
|
|
16
|
+
font-weight: 300;
|
|
17
|
+
font-size: 12px;
|
|
13
18
|
|
|
14
19
|
&__btn {
|
|
15
20
|
cursor: pointer;
|
|
@@ -18,7 +23,13 @@
|
|
|
18
23
|
padding: 0 14px;
|
|
19
24
|
height: 100%;
|
|
20
25
|
text-transform: uppercase;
|
|
21
|
-
|
|
26
|
+
|
|
27
|
+
font-family: inherit;
|
|
28
|
+
font-style: inherit;
|
|
29
|
+
font-weight:inherit;
|
|
30
|
+
font-size: inherit;
|
|
31
|
+
line-height: inherit;
|
|
32
|
+
|
|
22
33
|
color: $green;
|
|
23
34
|
position: relative;
|
|
24
35
|
z-index: 2;
|
|
@@ -48,3 +59,10 @@
|
|
|
48
59
|
border-color: $color--green-light;
|
|
49
60
|
}
|
|
50
61
|
}
|
|
62
|
+
|
|
63
|
+
.text-switcher_unsetted {
|
|
64
|
+
filter: grayscale(1);
|
|
65
|
+
.text-switcher__btn {
|
|
66
|
+
color: $color--gray !important;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
@@ -17,6 +17,8 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
17
17
|
|
|
18
18
|
var _TextSwitcher = _interopRequireDefault(require("./TextSwitcher"));
|
|
19
19
|
|
|
20
|
+
require("./partial/AnyOuterClass.scss");
|
|
21
|
+
|
|
20
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); }
|
|
21
23
|
|
|
22
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; }
|
|
@@ -44,5 +46,6 @@ var TextSwitcherTemplate = Template.bind({});
|
|
|
44
46
|
exports.TextSwitcherTemplate = TextSwitcherTemplate;
|
|
45
47
|
TextSwitcherTemplate.args = {
|
|
46
48
|
activeText: 'is',
|
|
47
|
-
inactiveText: 'some long text'
|
|
49
|
+
inactiveText: 'some long text',
|
|
50
|
+
className: 'any-outer-class__text-switcher'
|
|
48
51
|
};
|
|
@@ -21,22 +21,12 @@ var Textarea = function Textarea(_ref) {
|
|
|
21
21
|
var value = _ref.value,
|
|
22
22
|
_onChange = _ref.onChange,
|
|
23
23
|
placeholder = _ref.placeholder,
|
|
24
|
-
label = _ref.label,
|
|
25
|
-
hint = _ref.hint,
|
|
26
|
-
hintSide = _ref.hintSide,
|
|
27
|
-
isBold = _ref.isBold,
|
|
28
24
|
disabled = _ref.disabled,
|
|
29
25
|
className = _ref.className;
|
|
30
26
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
31
|
-
className: (0, _classnames.default)("".concat(RC
|
|
32
|
-
},
|
|
33
|
-
className: "".concat(RC, "
|
|
34
|
-
label: label,
|
|
35
|
-
hint: hint,
|
|
36
|
-
hintSide: hintSide,
|
|
37
|
-
isBold: isBold
|
|
38
|
-
}), /*#__PURE__*/_react.default.createElement("textarea", {
|
|
39
|
-
className: RC,
|
|
27
|
+
className: (0, _classnames.default)("".concat(RC), className)
|
|
28
|
+
}, /*#__PURE__*/_react.default.createElement("textarea", {
|
|
29
|
+
className: "".concat(RC, "__textarea"),
|
|
40
30
|
value: value,
|
|
41
31
|
onChange: function onChange(e) {
|
|
42
32
|
return _onChange(e.target.value);
|
|
@@ -2,34 +2,36 @@
|
|
|
2
2
|
@import "../../../scss/mixins";
|
|
3
3
|
|
|
4
4
|
.textarea {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
5
|
+
&__textarea {
|
|
6
|
+
border: 1px solid #e2e5ec;
|
|
7
|
+
background-color: #fff;
|
|
8
|
+
min-height: 99px;
|
|
9
|
+
min-width: 223px;
|
|
10
|
+
width: 100%;
|
|
11
|
+
outline: none;
|
|
12
|
+
resize: none;
|
|
13
|
+
padding: 5px 9px;
|
|
14
|
+
box-sizing: border-box;
|
|
15
|
+
font-size: 12px;
|
|
16
|
+
font-weight: 400;
|
|
17
|
+
font-family: Roboto, sans-serif;
|
|
18
|
+
|
|
19
|
+
&:focus {
|
|
20
|
+
border-color: $color--primary;
|
|
21
|
+
filter: drop-shadow(0px 0px 4px rgba(93, 120, 255, 0.5));
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&:disabled {
|
|
25
|
+
background: #f7f8fa;
|
|
26
|
+
opacity: 0.5;
|
|
27
|
+
border-color: #a6acb1;
|
|
28
|
+
pointer-events: none;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
@include custom-scroll;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
|
|
34
|
+
// &-label {
|
|
35
|
+
// margin-bottom: 5px;
|
|
36
|
+
// }
|
|
35
37
|
}
|
|
@@ -44,9 +44,6 @@ var TextareaTemplate = Template.bind({});
|
|
|
44
44
|
exports.TextareaTemplate = TextareaTemplate;
|
|
45
45
|
TextareaTemplate.args = {
|
|
46
46
|
disabled: false,
|
|
47
|
-
isBold: true,
|
|
48
47
|
placeholder: 'Placeholder',
|
|
49
|
-
|
|
50
|
-
hint: 'hint',
|
|
51
|
-
hintSide: 'bottom'
|
|
48
|
+
className: "any-class"
|
|
52
49
|
};
|
|
@@ -0,0 +1,69 @@
|
|
|
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 = ArrayWithObjects;
|
|
9
|
+
|
|
10
|
+
var _General2 = _interopRequireDefault(require("../functions/General"));
|
|
11
|
+
|
|
12
|
+
function ArrayWithObjects(_ref) {
|
|
13
|
+
var form = _ref.form,
|
|
14
|
+
setForm = _ref.setForm,
|
|
15
|
+
FormFields = _ref.FormFields;
|
|
16
|
+
|
|
17
|
+
var _General = (0, _General2.default)({
|
|
18
|
+
FormFields: FormFields
|
|
19
|
+
}),
|
|
20
|
+
joinData = _General.joinData,
|
|
21
|
+
getFieldData = _General.getFieldData,
|
|
22
|
+
updateFormField = _General.updateFormField,
|
|
23
|
+
getFormFields = _General.getFormFields,
|
|
24
|
+
_getFormFieldsAsArray = _General.getFormFieldsAsArray,
|
|
25
|
+
_getFormFieldsKeys = _General.getFormFieldsKeys;
|
|
26
|
+
|
|
27
|
+
var getFormField = function getFormField(key) {
|
|
28
|
+
var _getFormFields;
|
|
29
|
+
|
|
30
|
+
var argForm = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : form;
|
|
31
|
+
return (_getFormFields = getFormFields(argForm)) === null || _getFormFields === void 0 ? void 0 : _getFormFields.find(function (f) {
|
|
32
|
+
return f.key === key;
|
|
33
|
+
});
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
var setFormFields = function setFormFields(data) {
|
|
37
|
+
var isFunction = typeof data === 'function';
|
|
38
|
+
setForm(function (state) {
|
|
39
|
+
return isFunction ? data(state) : data;
|
|
40
|
+
});
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
var setFormField = function setFormField(data) {
|
|
44
|
+
var key = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
45
|
+
return setFormFields(function (fields) {
|
|
46
|
+
return updateFormField(fields, data, key);
|
|
47
|
+
});
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
var removeAllFormFields = function removeAllFormFields() {
|
|
51
|
+
return setFormFields([]);
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
return {
|
|
55
|
+
joinData: joinData,
|
|
56
|
+
getFieldData: getFieldData,
|
|
57
|
+
getFormFields: getFormFields,
|
|
58
|
+
getFormField: getFormField,
|
|
59
|
+
setFormFields: setFormFields,
|
|
60
|
+
setFormField: setFormField,
|
|
61
|
+
getFormFieldsAsArray: function getFormFieldsAsArray(fields) {
|
|
62
|
+
return _getFormFieldsAsArray(fields || getFormFields());
|
|
63
|
+
},
|
|
64
|
+
getFormFieldsKeys: function getFormFieldsKeys(fields) {
|
|
65
|
+
return _getFormFieldsKeys(fields || getFormFields());
|
|
66
|
+
},
|
|
67
|
+
removeAllFormFields: removeAllFormFields
|
|
68
|
+
};
|
|
69
|
+
}
|