@colisweb/rescript-toolkit 2.18.1 → 2.21.0
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/package.json
CHANGED
|
@@ -24,15 +24,23 @@ let make = (
|
|
|
24
24
|
~checked=?,
|
|
25
25
|
~className="",
|
|
26
26
|
~size: size=#sm,
|
|
27
|
-
|
|
27
|
+
~checkboxClassName="",
|
|
28
|
+
~checkedClassname="",
|
|
29
|
+
~checkedCheckboxClassName="",
|
|
30
|
+
~inverseLabel=false,
|
|
31
|
+
~hideLabel=false,
|
|
32
|
+
) => {
|
|
33
|
+
let (isChecked, setChecked) = React.useState(() => checked->Option.getWithDefault(false))
|
|
28
34
|
<label
|
|
29
35
|
className={cx([
|
|
30
36
|
Styles.label,
|
|
31
|
-
"
|
|
37
|
+
"items-center",
|
|
38
|
+
inverseLabel ? "inline-flex flex-row-reverse justify-end" : "flex flex-row",
|
|
32
39
|
disabled->Option.getWithDefault(false)
|
|
33
40
|
? "cursor-not-allowed opacity-75 text-gray-600"
|
|
34
41
|
: "cursor-pointer",
|
|
35
42
|
className,
|
|
43
|
+
isChecked ? checkedClassname : "",
|
|
36
44
|
])}>
|
|
37
45
|
<input
|
|
38
46
|
type_="checkbox"
|
|
@@ -43,6 +51,7 @@ let make = (
|
|
|
43
51
|
let checked = target["checked"]
|
|
44
52
|
let value = target["value"]
|
|
45
53
|
|
|
54
|
+
setChecked(_ => checked)
|
|
46
55
|
onChange->Option.forEach(fn => fn(checked, value))
|
|
47
56
|
}}
|
|
48
57
|
?disabled
|
|
@@ -51,13 +60,16 @@ let make = (
|
|
|
51
60
|
/>
|
|
52
61
|
<span
|
|
53
62
|
className={cx([
|
|
54
|
-
"checkmark rounded border text-white
|
|
63
|
+
"checkmark rounded border text-white border-neutral-300 transform transition-all ease-in-out flex items-center justify-center flex-shrink-0",
|
|
55
64
|
switch size {
|
|
56
65
|
| #xs => "w-4 h-4"
|
|
57
66
|
| #sm => "w-6 h-6"
|
|
58
67
|
| #md => "w-8 h-8"
|
|
59
68
|
| #lg => "w-10 h-10"
|
|
60
69
|
},
|
|
70
|
+
hideLabel ? "" : inverseLabel ? "ml-3" : "mr-3",
|
|
71
|
+
checkboxClassName,
|
|
72
|
+
isChecked ? checkedCheckboxClassName : "",
|
|
61
73
|
])}>
|
|
62
74
|
<BsReactIcons.FaCheck
|
|
63
75
|
className="transform transition-all ease-in-out"
|
|
@@ -69,5 +81,6 @@ let make = (
|
|
|
69
81
|
}}
|
|
70
82
|
/>
|
|
71
83
|
</span>
|
|
72
|
-
{children->Option.
|
|
84
|
+
{children->Option.mapWithDefault(React.null, children => hideLabel ? React.null : children)}
|
|
73
85
|
</label>
|
|
86
|
+
}
|