@sima-land/ui-nucleons 44.2.3 → 44.2.4
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.
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@use '../colors';
|
|
2
|
+
|
|
1
3
|
.root {
|
|
2
4
|
position: relative;
|
|
3
5
|
display: inline-block;
|
|
@@ -17,4 +19,23 @@
|
|
|
17
19
|
opacity: 0;
|
|
18
20
|
margin: 0;
|
|
19
21
|
padding: 0;
|
|
22
|
+
&:not(:checked) + svg .mark {
|
|
23
|
+
display: none;
|
|
24
|
+
}
|
|
25
|
+
&:not(:checked) + svg .square {
|
|
26
|
+
fill: #fff;
|
|
27
|
+
stroke: colors.$basic-gray24;
|
|
28
|
+
}
|
|
29
|
+
&:checked + svg .square {
|
|
30
|
+
fill: colors.$basic-blue;
|
|
31
|
+
stroke: colors.$basic-blue;
|
|
32
|
+
}
|
|
33
|
+
&:disabled:not(:checked) + svg .square {
|
|
34
|
+
fill: colors.$basic-gray4;
|
|
35
|
+
stroke: colors.$basic-gray24;
|
|
36
|
+
}
|
|
37
|
+
&:disabled:checked + svg .square {
|
|
38
|
+
fill: colors.$basic-gray12;
|
|
39
|
+
stroke: colors.$basic-gray12;
|
|
40
|
+
}
|
|
20
41
|
}
|
package/checkbox/index.js
CHANGED
|
@@ -39,10 +39,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
39
39
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
40
|
exports.Checkbox = void 0;
|
|
41
41
|
const react_1 = __importStar(require("react"));
|
|
42
|
-
const checked_svg_1 = __importDefault(require("./svg/checked.svg"));
|
|
43
|
-
const unchecked_svg_1 = __importDefault(require("./svg/unchecked.svg"));
|
|
44
|
-
const disabled_checked_svg_1 = __importDefault(require("./svg/disabled-checked.svg"));
|
|
45
|
-
const disabled_unchecked_svg_1 = __importDefault(require("./svg/disabled-unchecked.svg"));
|
|
46
42
|
const bind_1 = __importDefault(require("classnames/bind"));
|
|
47
43
|
const checkbox_module_scss_1 = __importDefault(require("./checkbox.module.scss"));
|
|
48
44
|
const cx = bind_1.default.bind(checkbox_module_scss_1.default);
|
|
@@ -50,21 +46,13 @@ const cx = bind_1.default.bind(checkbox_module_scss_1.default);
|
|
|
50
46
|
* Компонент стилизованного переключателя (input[type=checkbox]).
|
|
51
47
|
*/
|
|
52
48
|
exports.Checkbox = (0, react_1.forwardRef)((_a, ref) => {
|
|
53
|
-
var { className, style, 'data-testid': testId = 'checkbox',
|
|
49
|
+
var { className, style, 'data-testid': testId = 'checkbox' } = _a,
|
|
54
50
|
// input props
|
|
55
|
-
|
|
56
|
-
const [isChecked, toggleCheck] = (0, react_1.useState)(Boolean(checked));
|
|
57
|
-
(0, react_1.useEffect)(() => {
|
|
58
|
-
toggleCheck(Boolean(checked));
|
|
59
|
-
}, [checked]);
|
|
51
|
+
restProps = __rest(_a, ["className", "style", 'data-testid']);
|
|
60
52
|
return (react_1.default.createElement("span", { className: cx('root', className), style: style },
|
|
61
|
-
react_1.default.createElement("input", Object.assign({}, restProps, { "data-testid": testId, ref: ref, type: 'checkbox', className: cx('input'),
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
!isChecked && !disabled && react_1.default.createElement(unchecked_svg_1.default, null),
|
|
66
|
-
isChecked && !disabled && react_1.default.createElement(checked_svg_1.default, null),
|
|
67
|
-
!isChecked && disabled && react_1.default.createElement(disabled_unchecked_svg_1.default, null),
|
|
68
|
-
isChecked && disabled && react_1.default.createElement(disabled_checked_svg_1.default, null)));
|
|
53
|
+
react_1.default.createElement("input", Object.assign({}, restProps, { "data-testid": testId, ref: ref, type: 'checkbox', className: cx('input') })),
|
|
54
|
+
react_1.default.createElement("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none' },
|
|
55
|
+
react_1.default.createElement("rect", { x: '0.5', y: '0.5', width: '15', height: '15', rx: '1.5', className: cx('square') }),
|
|
56
|
+
react_1.default.createElement("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M10.8 5.21967L6.4 9.18934L5.36569 8.21967C5.05327 7.92678 4.54673 7.92678 4.23431 8.21967C3.9219 8.51256 3.9219 8.98744 4.23431 9.28033L5.83431 10.7803C6.14673 11.0732 6.65327 11.0732 6.96569 10.7803L11.7657 6.28033C12.0781 5.98744 12.0781 5.51256 11.7657 5.21967C11.4533 4.92678 11.1124 4.92678 10.8 5.21967Z', fill: 'white', className: cx('mark') }))));
|
|
69
57
|
});
|
|
70
58
|
exports.Checkbox.displayName = 'Checkbox';
|
package/package.json
CHANGED
package/checkbox/svg/checked.svg
DELETED
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<rect width="16" height="16" rx="2" fill="#1F84DB"/>
|
|
3
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8 5.21967L6.4 9.18934L5.36569 8.21967C5.05327 7.92678 4.54673 7.92678 4.23431 8.21967C3.9219 8.51256 3.9219 8.98744 4.23431 9.28033L5.83431 10.7803C6.14673 11.0732 6.65327 11.0732 6.96569 10.7803L11.7657 6.28033C12.0781 5.98744 12.0781 5.51256 11.7657 5.21967C11.4533 4.92678 11.1124 4.92678 10.8 5.21967Z" fill="white"/>
|
|
4
|
-
</svg>
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<rect width="16" height="16" rx="2" fill="#E0E0E0"/>
|
|
3
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8 5.21967L6.4 9.18934L5.36569 8.21967C5.05327 7.92678 4.54673 7.92678 4.23431 8.21967C3.9219 8.51256 3.9219 8.98744 4.23431 9.28033L5.83431 10.7803C6.14673 11.0732 6.65327 11.0732 6.96569 10.7803L11.7657 6.28033C12.0781 5.98744 12.0781 5.51256 11.7657 5.21967C11.4533 4.92678 11.1124 4.92678 10.8 5.21967Z" fill="#F5F5F5"/>
|
|
4
|
-
</svg>
|