maru_design2 2.4.1 → 2.4.2
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/index.js +27 -12
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -2746,36 +2746,51 @@ function uuidv4(length) {
|
|
|
2746
2746
|
}
|
|
2747
2747
|
}
|
|
2748
2748
|
|
|
2749
|
-
var css_248z$a = ".maru-checkbox-wrapper
|
|
2749
|
+
var css_248z$a = ".maru-checkbox-wrapper {\n display: flex;\n align-items: center;\n flex-direction: row;\n width: fit-content;\n}\n\n.maru-checkbox-wrapper-4px {\n gap: 4px;\n}\n\n.maru-checkbox-wrapper-8px {\n gap: 8px;\n}\n\n.maru-checkbox-inner-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n position: relative;\n}\n\n.maru-checkbox {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n}\n\n.maru-checkbox-label {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 500;\n color: #5c5c5c;\n cursor: pointer;\n}\n.maru-checkbox-label.label-disabled {\n color: #8c8c8c;\n}\n\n.maru-checkbox:disabled,\n.label-disabled {\n cursor: default;\n}";
|
|
2750
2750
|
styleInject(css_248z$a);
|
|
2751
2751
|
|
|
2752
2752
|
var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
2753
|
+
var _b;
|
|
2753
2754
|
var checked = _a.checked,
|
|
2754
|
-
|
|
2755
|
-
color =
|
|
2756
|
-
|
|
2757
|
-
gap =
|
|
2755
|
+
_c = _a.color,
|
|
2756
|
+
color = _c === void 0 ? 'primary' : _c,
|
|
2757
|
+
_d = _a.gap,
|
|
2758
|
+
gap = _d === void 0 ? '4px' : _d,
|
|
2758
2759
|
label = _a.label,
|
|
2759
|
-
|
|
2760
|
-
size =
|
|
2760
|
+
_e = _a.size,
|
|
2761
|
+
size = _e === void 0 ? 18 : _e,
|
|
2761
2762
|
props = __rest(_a, ["checked", "color", "gap", "label", "size"]);
|
|
2762
2763
|
var keyColor = useColor(color).keyColor;
|
|
2763
2764
|
var hashId = uuidv4(4);
|
|
2765
|
+
var _f = useState((_b = checked !== null && checked !== void 0 ? checked : props.defaultChecked) !== null && _b !== void 0 ? _b : false),
|
|
2766
|
+
isChecked = _f[0],
|
|
2767
|
+
setIsChecked = _f[1];
|
|
2764
2768
|
var combineRef = useCombineRef(ref);
|
|
2769
|
+
useEffect(function () {
|
|
2770
|
+
var _a;
|
|
2771
|
+
setIsChecked((_a = checked !== null && checked !== void 0 ? checked : props.defaultChecked) !== null && _a !== void 0 ? _a : false);
|
|
2772
|
+
}, [checked, props.defaultChecked]);
|
|
2773
|
+
var handleChange = function handleChange(e) {
|
|
2774
|
+
setIsChecked(e.target.checked);
|
|
2775
|
+
if (props.onChange) {
|
|
2776
|
+
props.onChange(e);
|
|
2777
|
+
}
|
|
2778
|
+
};
|
|
2765
2779
|
return jsxs("div", __assign({
|
|
2766
|
-
className: "maru-checkbox-wrapper-".concat(gap)
|
|
2780
|
+
className: classNames('maru-checkbox-wrapper', "maru-checkbox-wrapper-".concat(gap), props.className)
|
|
2767
2781
|
}, {
|
|
2768
2782
|
children: [jsxs("div", __assign({
|
|
2769
2783
|
className: "maru-checkbox-inner-wrapper"
|
|
2770
2784
|
}, {
|
|
2771
|
-
children: [jsx("input", __assign({
|
|
2785
|
+
children: [jsx("input", __assign({}, props, {
|
|
2772
2786
|
ref: combineRef,
|
|
2773
2787
|
id: "maru-checkbox-".concat(hashId),
|
|
2774
2788
|
type: "checkbox",
|
|
2775
|
-
checked:
|
|
2789
|
+
checked: isChecked,
|
|
2790
|
+
onChange: handleChange,
|
|
2776
2791
|
className: "maru-checkbox"
|
|
2777
|
-
}
|
|
2778
|
-
name:
|
|
2792
|
+
})), jsx(Icon, {
|
|
2793
|
+
name: isChecked ? 'CheckboxOnThin' : 'CheckboxOffThin',
|
|
2779
2794
|
size: size,
|
|
2780
2795
|
color: props.disabled ? '#BDBDBD' : keyColor
|
|
2781
2796
|
})]
|