@colisweb/rescript-toolkit 5.41.1 → 5.42.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
|
@@ -51,12 +51,11 @@ let make = (
|
|
|
51
51
|
)
|
|
52
52
|
}
|
|
53
53
|
|
|
54
|
-
<
|
|
54
|
+
<Toolkit__Ui_PortalDropdown
|
|
55
55
|
?disabled
|
|
56
56
|
buttonClassName
|
|
57
|
-
|
|
57
|
+
onClickOutside=?{onClose}
|
|
58
58
|
dropdownClassName
|
|
59
|
-
position=#bottom
|
|
60
59
|
label={switch selectedOptions {
|
|
61
60
|
| [] =>
|
|
62
61
|
<p className="flex flex-row gap-2 w-full items-center relative">
|
|
@@ -90,96 +89,97 @@ let make = (
|
|
|
90
89
|
</button>
|
|
91
90
|
</>
|
|
92
91
|
}}>
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
92
|
+
{_ =>
|
|
93
|
+
<div className="py-2 pl-2 pr-1">
|
|
94
|
+
{allowFilter
|
|
95
|
+
? <div className="mb-3">
|
|
96
|
+
<Toolkit__Ui_TextInput
|
|
97
|
+
id="search"
|
|
98
|
+
autoFocus={true}
|
|
99
|
+
placeholder=?{searchPlaceholder}
|
|
100
|
+
allowWhiteSpace={true}
|
|
101
|
+
onKeyDown={event => {
|
|
102
|
+
if event->ReactEvent.Keyboard.key === "Enter" && search !== "" {
|
|
103
|
+
let selectedOptions = filterOptionsBySearch(~options, ~search)
|
|
104
|
+
onChange(selectedOptions)
|
|
105
|
+
setSelectedOptions(_ => {
|
|
106
|
+
selectedOptions
|
|
107
|
+
})
|
|
108
|
+
}
|
|
109
|
+
}}
|
|
110
|
+
value={search}
|
|
111
|
+
onChange={event => {
|
|
112
|
+
let target = event->ReactEvent.Form.currentTarget
|
|
113
|
+
// normalize nfd -> replace by re remove split by commponents the accent letters and deletes the accent component only, leaving the un-accented letter
|
|
114
|
+
setSearch(_ => target["value"])
|
|
115
|
+
}}
|
|
116
|
+
/>
|
|
117
|
+
</div>
|
|
118
|
+
: React.null}
|
|
119
|
+
{options
|
|
120
|
+
->Array.keep(({label}) =>
|
|
121
|
+
// normalize nfd -> replace by re remove split by commponents the accent letters and deletes the accent component only, leaving the un-accented letter
|
|
122
|
+
search == "" || Toolkit__Primitives.String.normalizedIncludes(label, search)
|
|
123
|
+
)
|
|
124
|
+
->Array.mapWithIndex((i, item) => {
|
|
125
|
+
let {label, value} = item
|
|
126
126
|
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
127
|
+
<div
|
|
128
|
+
key={`multiselectoption-${label}-${value}-${i->Int.toString}`}
|
|
129
|
+
className={cx([
|
|
130
|
+
"group flex flex-row items-center gap-2 pt-3 text-left relative",
|
|
131
|
+
i > 0 ? "mt-3" : "",
|
|
132
|
+
itemClassName,
|
|
133
|
+
])}>
|
|
134
|
+
<Toolkit__Ui_Checkbox
|
|
135
|
+
value
|
|
136
|
+
className="w-full flex-shrink-0 relative"
|
|
137
|
+
checked={selectedOptions->Array.some(item =>
|
|
138
|
+
item.label == label && item.value == value
|
|
139
|
+
)}
|
|
140
|
+
onChange={(checked, _value) => {
|
|
141
|
+
if checked {
|
|
142
|
+
setSelectedOptions(selectedOptions => {
|
|
143
|
+
let value = selectedOptions->Array.concat([item])
|
|
144
144
|
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
145
|
+
onChange(value)
|
|
146
|
+
value
|
|
147
|
+
})
|
|
148
|
+
} else {
|
|
149
|
+
setSelectedOptions(selectedOptions => {
|
|
150
|
+
let value =
|
|
151
|
+
selectedOptions->Array.keep(
|
|
152
|
+
selectedItem => selectedItem.value != value && selectedItem.label != label,
|
|
153
|
+
)
|
|
154
154
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
155
|
+
onChange(value)
|
|
156
|
+
value
|
|
157
|
+
})
|
|
158
|
+
}
|
|
159
|
+
}}>
|
|
160
|
+
{item.itemLabel->Option.getWithDefault(label->React.string)}
|
|
161
|
+
</Toolkit__Ui_Checkbox>
|
|
162
|
+
{displaySelectOnlyOption
|
|
163
|
+
? <div className="group-hover:block hidden absolute right-0">
|
|
164
|
+
<Toolkit__Ui_Button
|
|
165
|
+
onClick={_ => {
|
|
166
|
+
setSelectedOptions(_ => {
|
|
167
|
+
let value = [item]
|
|
168
168
|
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
</
|
|
169
|
+
onChange(value)
|
|
170
|
+
value
|
|
171
|
+
})
|
|
172
|
+
}}
|
|
173
|
+
color=#neutralLight
|
|
174
|
+
size=#sm
|
|
175
|
+
className="hover:underline hover:!bg-neutral-200 hover:!border-neutral-200 hover:!text-primary-700">
|
|
176
|
+
<FormattedMessage defaultMessage="Seulement" />
|
|
177
|
+
</Toolkit__Ui_Button>
|
|
178
|
+
</div>
|
|
179
|
+
: React.null}
|
|
180
|
+
</div>
|
|
181
|
+
})
|
|
182
|
+
->React.array}
|
|
183
|
+
</div>}
|
|
184
|
+
</Toolkit__Ui_PortalDropdown>
|
|
185
185
|
}
|
|
@@ -18,6 +18,7 @@ let make = (
|
|
|
18
18
|
~buttonColor: Toolkit__Ui_Button.color=#white,
|
|
19
19
|
~buttonSize: Toolkit__Ui_Button.size=#md,
|
|
20
20
|
~buttonVariant: Toolkit__Ui_Button.variant=#default,
|
|
21
|
+
~disabled=?,
|
|
21
22
|
) => {
|
|
22
23
|
let dropDownRef = React.useRef(Js.Nullable.null)
|
|
23
24
|
let buttonRef = React.useRef(Js.Nullable.null)
|
|
@@ -47,6 +48,7 @@ let make = (
|
|
|
47
48
|
|
|
48
49
|
<div className={cx(["relative", containerClassName])}>
|
|
49
50
|
<Toolkit__Ui_Button
|
|
51
|
+
?disabled
|
|
50
52
|
variant=buttonVariant
|
|
51
53
|
size=buttonSize
|
|
52
54
|
type_="button"
|