@colisweb/rescript-toolkit 4.13.0 → 4.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "4.13.0",
+  "version": "4.14.0",
   "type": "module",
   "scripts": {
     "clean": "rescript clean",

package/src/ui/Toolkit__Ui.res

@@ -31,6 +31,7 @@ module Layout = Toolkit__Ui_Layout
 module SpinnerFullScreen = Toolkit__Ui_SpinnerFullScreen
 module MultiSelect = Toolkit__Ui_MultiSelect
 module MultiSelectWithValidation = Toolkit__Ui_MultiSelectWithValidation
+module SelectWithValidation = Toolkit__Ui_SelectWithValidation
 module Notice = Toolkit__Ui_Notice
 module NativeDatePicker = Toolkit__Ui_NativeDatePicker
 module ErrorBoundary = Toolkit__Ui_ErrorBoundary

package/src/ui/Toolkit__Ui_SelectWithValidation.res

@@ -0,0 +1,150 @@
+open ReactIntl
+
+type item = {
+  itemLabel?: React.element,
+  label: string,
+  value: string,
+}
+
+type options = array<item>
+
+module Footer = {
+  @react.component
+  let make = (~onCancel, ~onValidateClick) => {
+    let dropdownContext = React.useContext(Toolkit__Ui_Dropdown.dropdownContext)
+
+    <footer className="bg-white p-1 flex flex-row justify-between">
+      <Toolkit__Ui_Button
+        type_="button"
+        onClick={_ => {
+          dropdownContext.hide()
+          onCancel()
+        }}>
+        <FormattedMessage defaultMessage={"Annuler"} />
+      </Toolkit__Ui_Button>
+      <Toolkit__Ui_Button
+        color=#primary
+        type_="button"
+        onClick={_ => {
+          onValidateClick()
+          dropdownContext.hide()
+        }}>
+        <FormattedMessage defaultMessage={"Valider"} />
+      </Toolkit__Ui_Button>
+    </footer>
+  }
+}
+
+module Options = {
+  @react.component
+  let make = (~options, ~deferredSearch, ~itemClassName, ~setSelectedOption, ~selectedOption) => {
+    options
+    ->Array.keep(({label}) =>
+      deferredSearch == "" ||
+        label->Toolkit__Primitives.String.normalizeForSearch->Js.String2.includes(deferredSearch)
+    )
+    ->Array.mapWithIndex((i, item) => {
+      let {label, value} = item
+
+      <div
+        key={`multiselectoption-${label}-${value}-${i->Int.toString}`}
+        className={cx([
+          "group flex flex-row items-center gap-2 pt-3 text-left relative",
+          i > 0 ? "mt-3" : "",
+          itemClassName,
+        ])}>
+        <Toolkit__Ui_Radio
+          value
+          className="w-full flex-shrink-0 relative"
+          checked={selectedOption->Option.mapWithDefault(false, selectedOption => {
+            item.label == selectedOption.label && item.value == selectedOption.value
+          })}
+          onChange={_ => {
+            setSelectedOption(_ => {
+              Some(item)
+            })
+          }}>
+          {item.itemLabel->Option.getWithDefault(label->React.string)}
+        </Toolkit__Ui_Radio>
+      </div>
+    })
+    ->React.array
+  }
+}
+
+@react.component
+let make = (
+  ~options: options,
+  ~placeholder: React.element,
+  ~buttonClassName="",
+  ~dropdownClassName="",
+  ~itemClassName="",
+  ~searchPlaceholder: option<string>=?,
+  ~allowFilter=true,
+  ~defaultValue: option<item>=?,
+  ~onValidate: item => unit,
+  ~disabled: option<bool>=?,
+  ~onCancel: option<unit => unit>=?,
+) => {
+  let (selectedOption, setSelectedOption) = React.useState(() => defaultValue)
+  let previousDefaultValue = Toolkit__Hooks.usePrevious(defaultValue)
+  let (search, setSearch) = React.useState(() => "")
+  let deferredSearch = React.useDeferredValue(search)
+  let allowFilter = options->Array.length > 5 && allowFilter
+
+  React.useEffect2(() => {
+    switch (previousDefaultValue, defaultValue) {
+    | (Some(Some(v)), Some(v2)) if v !== v2 => setSelectedOption(_ => defaultValue)
+    | _ => ()
+    }
+
+    None
+  }, (previousDefaultValue, defaultValue))
+
+  <Toolkit__Ui_Dropdown
+    ?disabled
+    buttonClassName
+    onClose={_ => setSelectedOption(_ => defaultValue)}
+    dropdownClassName
+    position=#bottom
+    label={switch selectedOption {
+    | None =>
+      <p className="flex flex-row gap-2 w-full items-center relative">
+        <span className="ml-1"> {placeholder} </span>
+        <span className="absolute inset-y-0 right-0 flex items-center">
+          <ReactIcons.FaAngleDown />
+        </span>
+      </p>
+    | Some({label}) =>
+      <div className="table table-fixed w-full" title={label}>
+        <span className="table-cell truncate text-left"> {label->React.string} </span>
+      </div>
+    }}>
+    <div className="py-2 pl-2 pr-1 max-h-[300px] overflow-y-scroll">
+      {allowFilter
+        ? <div className="mb-3">
+            <Toolkit__Ui_TextInput
+              id="search"
+              autoFocus={true}
+              placeholder=?{searchPlaceholder}
+              allowWhiteSpace={true}
+              value={search}
+              onChange={event => {
+                let target = event->ReactEvent.Form.currentTarget
+
+                setSearch(_ => target["value"]->Toolkit__Primitives.String.normalizeForSearch)
+              }}
+            />
+          </div>
+        : React.null}
+      <Options deferredSearch options setSelectedOption selectedOption itemClassName />
+    </div>
+    <Footer
+      onCancel={() => {
+        setSelectedOption(_ => defaultValue)
+        onCancel->Option.forEach(fn => fn())
+      }}
+      onValidateClick={() => selectedOption->Option.forEach(onValidate)}
+    />
+  </Toolkit__Ui_Dropdown>
+}

package/src/ui/Toolkit__Ui_SelectWithValidation.resi

@@ -0,0 +1,17 @@
+type item = {itemLabel?: React.element, label: string, value: string}
+type options = array<item>
+
+@react.component
+let make: (
+  ~options: options,
+  ~placeholder: React.element,
+  ~buttonClassName: string=?,
+  ~dropdownClassName: string=?,
+  ~itemClassName: string=?,
+  ~searchPlaceholder: string=?,
+  ~allowFilter: bool=?,
+  ~defaultValue: item=?,
+  ~onValidate: item => unit,
+  ~disabled: bool=?,
+  ~onCancel: unit => unit=?,
+) => React.element

package/src/vendors/Browser.res

@@ -46,6 +46,8 @@ module DomElement = {
     bottom: float,
   }
   @send external getBoundingClientRect: Dom.element => rect = "getBoundingClientRect"
+
+  @send external focus: Dom.element => unit = "focus"
 }
 
 @val

package/src/vendors/Browser.resi

@@ -33,6 +33,7 @@ module DomElement: {
     bottom: float,
   }
   let getBoundingClientRect: Dom.element => rect
+  let focus: Dom.element => unit
 }
 
 let innerWidth: int