se-design 0.0.175 → 0.0.177
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/index21.js +31 -31
- package/dist/index21.js.map +1 -1
- package/package.json +1 -1
package/dist/index21.js
CHANGED
|
@@ -1,47 +1,47 @@
|
|
|
1
|
-
import
|
|
1
|
+
import o, { useState as k, useEffect as d } from "react";
|
|
2
2
|
/* empty css */
|
|
3
|
-
const
|
|
4
|
-
className:
|
|
5
|
-
automationId:
|
|
6
|
-
defaultChecked:
|
|
3
|
+
const g = ({
|
|
4
|
+
className: l = "",
|
|
5
|
+
automationId: n = "",
|
|
6
|
+
defaultChecked: i = !1,
|
|
7
7
|
disabled: t = !1,
|
|
8
8
|
onChange: m,
|
|
9
|
-
checkMarkType:
|
|
10
|
-
label:
|
|
11
|
-
disabledLabel:
|
|
9
|
+
checkMarkType: s = "",
|
|
10
|
+
label: r = "",
|
|
11
|
+
disabledLabel: a = ""
|
|
12
12
|
}) => {
|
|
13
|
-
const [e,
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
}, [
|
|
17
|
-
const
|
|
18
|
-
t || (
|
|
19
|
-
},
|
|
13
|
+
const [e, u] = k(i);
|
|
14
|
+
d(() => {
|
|
15
|
+
u(i);
|
|
16
|
+
}, [i]);
|
|
17
|
+
const b = () => {
|
|
18
|
+
t || (u((c) => !c), m?.(!e));
|
|
19
|
+
}, x = () => {
|
|
20
20
|
const c = "focus-visible:outline outline-2 outline-[var(--color-blue-400)] outline-offset-2 rounded";
|
|
21
|
-
return t ? e &&
|
|
22
|
-
}, f = () => t ? "checkbox-label-disabled" : "checkbox-label",
|
|
23
|
-
return /* @__PURE__ */
|
|
21
|
+
return t ? e && s === "tick" ? "disabled-tick" : e && s === "minus-checkbox" ? "disabled-minus-checkbox" : e && !s ? "disabled-tick" : "disabled" : s === "minus-checkbox" && e ? `minus-checkbox ${c}` : e ? `checked ${c}` : `unchecked ${c}`;
|
|
22
|
+
}, f = () => t ? "checkbox-label-disabled" : "checkbox-label", h = () => t && a ? a : r;
|
|
23
|
+
return /* @__PURE__ */ o.createElement("div", {
|
|
24
24
|
className: "se-design-checkbox-ctn"
|
|
25
|
-
}, /* @__PURE__ */
|
|
26
|
-
htmlFor:
|
|
27
|
-
className: `se-design-checkbox ${
|
|
28
|
-
"data-automation-id":
|
|
25
|
+
}, /* @__PURE__ */ o.createElement("label", {
|
|
26
|
+
htmlFor: `${n}-${r}`,
|
|
27
|
+
className: `se-design-checkbox ${l} ${x()}`,
|
|
28
|
+
"data-automation-id": n,
|
|
29
29
|
tabIndex: t ? -1 : 0
|
|
30
|
-
}, /* @__PURE__ */
|
|
31
|
-
id:
|
|
30
|
+
}, /* @__PURE__ */ o.createElement("input", {
|
|
31
|
+
id: `${n}-${r}`,
|
|
32
32
|
type: "checkbox",
|
|
33
33
|
checked: e,
|
|
34
|
-
onChange:
|
|
34
|
+
onChange: b,
|
|
35
35
|
disabled: t,
|
|
36
|
-
"data-automation-id":
|
|
37
|
-
}), /* @__PURE__ */
|
|
36
|
+
"data-automation-id": n
|
|
37
|
+
}), /* @__PURE__ */ o.createElement("span", {
|
|
38
38
|
className: "checkbox-item",
|
|
39
|
-
"data-automation-id":
|
|
40
|
-
}), /* @__PURE__ */
|
|
39
|
+
"data-automation-id": n
|
|
40
|
+
}), /* @__PURE__ */ o.createElement("span", {
|
|
41
41
|
className: f()
|
|
42
|
-
},
|
|
42
|
+
}, h())));
|
|
43
43
|
};
|
|
44
44
|
export {
|
|
45
|
-
|
|
45
|
+
g as Checkbox
|
|
46
46
|
};
|
|
47
47
|
//# sourceMappingURL=index21.js.map
|
package/dist/index21.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index21.js","sources":["../src/components/Checkbox/index.tsx"],"sourcesContent":["import React, { FC, useState, useEffect
|
|
1
|
+
{"version":3,"file":"index21.js","sources":["../src/components/Checkbox/index.tsx"],"sourcesContent":["import React, { FC, useState, useEffect } from 'react';\nimport './style.scss';\n\nexport interface CheckboxProps {\n className?: string;\n automationId?: string;\n defaultChecked?: boolean;\n onChange?: (checked: boolean) => void;\n disabled?: boolean;\n checkMarkType?: 'tick' | 'minus-checkbox' | '';\n label?: string;\n disabledLabel?: string;\n}\n\nexport const Checkbox: FC<CheckboxProps> = ({\n className = '',\n automationId = '',\n defaultChecked = false,\n disabled = false,\n onChange,\n checkMarkType = '',\n label = '',\n disabledLabel = ''\n}) => {\n const [isChecked, setIsChecked] = useState(defaultChecked);\n\n useEffect(() => {\n setIsChecked(defaultChecked);\n }, [defaultChecked]);\n\n const handleClick = () => {\n if (disabled) return;\n setIsChecked((prev) => (checkMarkType === 'minus-checkbox' ? !prev : !prev));\n onChange?.(!isChecked);\n };\n\n const getCheckBoxClassName = () => {\n const focusClass = 'focus-visible:outline outline-2 outline-[var(--color-blue-400)] outline-offset-2 rounded';\n\n // Handle disabled states with proper checked status\n if (disabled) {\n if (isChecked && checkMarkType === 'tick') return 'disabled-tick';\n if (isChecked && checkMarkType === 'minus-checkbox') return 'disabled-minus-checkbox';\n if (isChecked && !checkMarkType) return 'disabled-tick'; // Default to tick for checked disabled\n return 'disabled'; // Unchecked disabled\n }\n\n // Handle enabled states\n if (checkMarkType === 'minus-checkbox' && isChecked) return `minus-checkbox ${focusClass}`;\n return isChecked ? `checked ${focusClass}` : `unchecked ${focusClass}`;\n };\n\n const getLabelClassName = () => {\n return disabled ? 'checkbox-label-disabled' : 'checkbox-label';\n };\n\n const getLabelText = () => {\n if (disabled && disabledLabel) {\n return disabledLabel;\n }\n return label;\n };\n\n return (\n <div className=\"se-design-checkbox-ctn\">\n <label\n htmlFor={`${automationId}-${label}`}\n className={`se-design-checkbox ${className} ${getCheckBoxClassName()}`}\n data-automation-id={automationId}\n tabIndex={disabled ? -1 : 0}\n >\n <input\n id={`${automationId}-${label}`}\n type=\"checkbox\"\n checked={isChecked}\n onChange={handleClick}\n disabled={disabled}\n data-automation-id={automationId}\n />\n <span className=\"checkbox-item\" data-automation-id={automationId}></span>\n <span className={getLabelClassName()}>{getLabelText()}</span>\n </label>\n </div>\n );\n};\n"],"names":["Checkbox","className","automationId","defaultChecked","disabled","onChange","checkMarkType","label","disabledLabel","isChecked","setIsChecked","useState","useEffect","handleClick","prev","getCheckBoxClassName","focusClass","getLabelClassName","getLabelText","React","createElement","htmlFor","tabIndex","id","type","checked"],"mappings":";;AAcO,MAAMA,IAA8BA,CAAC;AAAA,EAC1CC,WAAAA,IAAY;AAAA,EACZC,cAAAA,IAAe;AAAA,EACfC,gBAAAA,IAAiB;AAAA,EACjBC,UAAAA,IAAW;AAAA,EACXC,UAAAA;AAAAA,EACAC,eAAAA,IAAgB;AAAA,EAChBC,OAAAA,IAAQ;AAAA,EACRC,eAAAA,IAAgB;AAClB,MAAM;AACJ,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAASR,CAAc;AAEzDS,EAAAA,EAAU,MAAM;AACdF,IAAAA,EAAaP,CAAc;AAAA,EAAA,GAC1B,CAACA,CAAc,CAAC;AAEnB,QAAMU,IAAcA,MAAM;AACxB,IAAIT,MACJM,EAAcI,OAA+C,CAACA,CAAa,GAC3ET,IAAW,CAACI,CAAS;AAAA,EAAA,GAGjBM,IAAuBA,MAAM;AACjC,UAAMC,IAAa;AAGnB,WAAIZ,IACEK,KAAaH,MAAkB,SAAe,kBAC9CG,KAAaH,MAAkB,mBAAyB,4BACxDG,KAAa,CAACH,IAAsB,kBACjC,aAILA,MAAkB,oBAAoBG,IAAkB,kBAAkBO,CAAU,KACjFP,IAAY,WAAWO,CAAU,KAAK,aAAaA,CAAU;AAAA,EAAA,GAGhEC,IAAoBA,MACjBb,IAAW,4BAA4B,kBAG1Cc,IAAeA,MACfd,KAAYI,IACPA,IAEFD;AAIPY,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKnB,WAAU;AAAA,EAAA,GACbmB,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEC,SAAS,GAAGnB,CAAY,IAAIK,CAAK;AAAA,IACjCN,WAAW,sBAAsBA,CAAS,IAAIc,EAAsB,CAAA;AAAA,IACpE,sBAAoBb;AAAAA,IACpBoB,UAAUlB,IAAW,KAAK;AAAA,EAAA,GAE1BgB,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEG,IAAI,GAAGrB,CAAY,IAAIK,CAAK;AAAA,IAC5BiB,MAAK;AAAA,IACLC,SAAShB;AAAAA,IACTJ,UAAUQ;AAAAA,IACVT,UAAAA;AAAAA,IACA,sBAAoBF;AAAAA,EAAAA,CACrB,GACDkB,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMnB,WAAU;AAAA,IAAgB,sBAAoBC;AAAAA,EAAAA,CAAoB,GACxEkB,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMnB,WAAWgB,EAAkB;AAAA,EAAA,GAAIC,EAAAA,CAAqB,CACvD,CACJ;AAET;"}
|