@colisweb/rescript-toolkit 2.18.0 → 2.20.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
|
@@ -164,8 +164,12 @@ module Make = (StateLenses: Config) => {
|
|
|
164
164
|
| "password" =>
|
|
165
165
|
<Toolkit__Ui_Tooltip
|
|
166
166
|
label={showPassword
|
|
167
|
-
? <ReactIntl.FormattedMessage
|
|
168
|
-
|
|
167
|
+
? <ReactIntl.FormattedMessage
|
|
168
|
+
id="toolkit.hidePassword" defaultMessage="Hide password"
|
|
169
|
+
/>
|
|
170
|
+
: <ReactIntl.FormattedMessage
|
|
171
|
+
id="toolkit.showPassword" defaultMessage="Show password"
|
|
172
|
+
/>}>
|
|
169
173
|
<button
|
|
170
174
|
type_="button"
|
|
171
175
|
className="p-1 bg-neutral-300 rounded-r border border-gray-300 text-neutral-800"
|
|
@@ -24,15 +24,22 @@ let make = (
|
|
|
24
24
|
~checked=?,
|
|
25
25
|
~className="",
|
|
26
26
|
~size: size=#sm,
|
|
27
|
-
|
|
27
|
+
~checkboxClassName="",
|
|
28
|
+
~checkedClassname="",
|
|
29
|
+
~checkedCheckboxClassName="",
|
|
30
|
+
~inverseLabel=false,
|
|
31
|
+
) => {
|
|
32
|
+
let (isChecked, setChecked) = React.useState(() => checked->Option.getWithDefault(false))
|
|
28
33
|
<label
|
|
29
34
|
className={cx([
|
|
30
35
|
Styles.label,
|
|
31
|
-
"
|
|
36
|
+
"items-center",
|
|
37
|
+
inverseLabel ? "inline-flex flex-row-reverse justify-end" : "flex flex-row",
|
|
32
38
|
disabled->Option.getWithDefault(false)
|
|
33
39
|
? "cursor-not-allowed opacity-75 text-gray-600"
|
|
34
40
|
: "cursor-pointer",
|
|
35
41
|
className,
|
|
42
|
+
isChecked ? checkedClassname : "",
|
|
36
43
|
])}>
|
|
37
44
|
<input
|
|
38
45
|
type_="checkbox"
|
|
@@ -43,6 +50,7 @@ let make = (
|
|
|
43
50
|
let checked = target["checked"]
|
|
44
51
|
let value = target["value"]
|
|
45
52
|
|
|
53
|
+
setChecked(_ => checked)
|
|
46
54
|
onChange->Option.forEach(fn => fn(checked, value))
|
|
47
55
|
}}
|
|
48
56
|
?disabled
|
|
@@ -51,13 +59,16 @@ let make = (
|
|
|
51
59
|
/>
|
|
52
60
|
<span
|
|
53
61
|
className={cx([
|
|
54
|
-
"checkmark rounded border text-white
|
|
62
|
+
"checkmark rounded border text-white border-neutral-300 transform transition-all ease-in-out flex items-center justify-center flex-shrink-0",
|
|
55
63
|
switch size {
|
|
56
64
|
| #xs => "w-4 h-4"
|
|
57
65
|
| #sm => "w-6 h-6"
|
|
58
66
|
| #md => "w-8 h-8"
|
|
59
67
|
| #lg => "w-10 h-10"
|
|
60
68
|
},
|
|
69
|
+
inverseLabel ? "ml-3" : "mr-3",
|
|
70
|
+
checkboxClassName,
|
|
71
|
+
isChecked ? checkedCheckboxClassName : "",
|
|
61
72
|
])}>
|
|
62
73
|
<BsReactIcons.FaCheck
|
|
63
74
|
className="transform transition-all ease-in-out"
|
|
@@ -71,3 +82,4 @@ let make = (
|
|
|
71
82
|
</span>
|
|
72
83
|
{children->Option.getWithDefault(React.null)}
|
|
73
84
|
</label>
|
|
85
|
+
}
|