@colisweb/rescript-toolkit 4.10.10 → 4.11.0

package/locale/fr.json

@@ -84,6 +84,11 @@
     "defaultMessage": "Valeur non valide.",
     "message": "Valeur non valide."
   },
+  {
+    "id": "_7494b947",
+    "defaultMessage": "Valider",
+    "message": "Valider"
+  },
   {
     "id": "_7790a47d",
     "defaultMessage": "<lat></lat>, <lng></lng>",
@@ -164,6 +169,11 @@
     "defaultMessage": "Doit etre un entier positif",
     "message": "Doit etre un entier positif"
   },
+  {
+    "id": "_d12c3b0d",
+    "defaultMessage": "Annuler",
+    "message": "Annuler"
+  },
   {
     "id": "_d2c9771a",
     "defaultMessage": "Mauvais format (req: {exemple})",

package/package.json

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

package/src/ui/Toolkit__Ui.res

@@ -30,6 +30,7 @@ module DropdownList = Toolkit__Ui_DropdownList
 module Layout = Toolkit__Ui_Layout
 module SpinnerFullScreen = Toolkit__Ui_SpinnerFullScreen
 module MultiSelect = Toolkit__Ui_MultiSelect
+module MultiSelectWithValidation = Toolkit__Ui_MultiSelectWithValidation
 module Notice = Toolkit__Ui_Notice
 module NativeDatePicker = Toolkit__Ui_NativeDatePicker
 module ErrorBoundary = Toolkit__Ui_ErrorBoundary

package/src/ui/Toolkit__Ui_Dropdown.res

@@ -5,6 +5,16 @@ type position = [
   | #left
 ]
 
+type dropdownContext = {hide: unit => unit}
+
+let dropdownContext = React.createContext({
+  hide: () => (),
+})
+
+module Provider = {
+  let make = React.Context.provider(dropdownContext)
+}
+
 @react.component
 let make = (
   ~label: React.element,
@@ -97,7 +107,7 @@ let make = (
               dropdownClassName,
             ])}
             style={adjustmentStyle->Option.getWithDefault(ReactDOM.Style.make())}>
-            children
+            <Provider value={{hide: hide}}> children </Provider>
           </div>
         : React.null}
     </Toolkit__Ui_Button>

package/src/ui/Toolkit__Ui_Dropdown.resi

@@ -5,6 +5,10 @@ type position = [
   | #left
 ]
 
+type dropdownContext = {hide: unit => unit}
+
+let dropdownContext: React.Context.t<dropdownContext>
+
 @react.component
 let make: (
   ~label: React.element,

package/src/ui/Toolkit__Ui_MultiSelect.res

@@ -123,7 +123,7 @@ let make = (
         let {label, value} = item
 
         <div
-          key={`multiselectoption-${label}-${value}`}
+          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" : "",

package/src/ui/Toolkit__Ui_MultiSelectWithValidation.res

@@ -0,0 +1,195 @@
+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>
+  }
+}
+
+@react.component
+let make = (
+  ~options: options,
+  ~placeholder: React.element,
+  ~buttonClassName="",
+  ~dropdownClassName="",
+  ~itemClassName="",
+  ~searchPlaceholder: option<string>=?,
+  ~allowFilter=true,
+  ~defaultValue: array<item>=[],
+  ~onValidate: array<item> => unit,
+  ~disabled: option<bool>=?,
+  ~onCancel: option<unit => unit>=?,
+) => {
+  let (selectedOptions, setSelectedOptions) = React.useState(() => defaultValue)
+  let previousDefaultValue = Toolkit__Hooks.usePrevious(defaultValue)
+  let (search, setSearch) = React.useState(() => "")
+  let allowFilter = options->Array.length > 5 && allowFilter
+
+  React.useEffect2(() => {
+    let prev =
+      previousDefaultValue
+      ->Option.getWithDefault([])
+      ->Array.map(({value}) => value)
+      ->Js.Array2.joinWith("")
+    let new = defaultValue->Array.map(({value}) => value)->Js.Array2.joinWith("")
+
+    if prev != new {
+      setSelectedOptions(_ => defaultValue)
+    }
+
+    None
+  }, (previousDefaultValue, defaultValue))
+
+  let filterOptionsBySearch = (~options, ~search) => {
+    options->Array.keep(({label}) =>
+      // normalize nfd -> replace by re remove split by commponents the accent letters and deletes the accent component only, leaving the un-accented letter
+      search == "" ||
+        label
+        ->Js.String2.toLowerCase
+        ->Js.String2.normalizeByForm("NFD")
+        ->Js.String2.replaceByRe(%re("/[\u0300-\u036f]/g"), "")
+        ->Js.String2.includes(search)
+    )
+  }
+
+  <Toolkit__Ui_Dropdown
+    ?disabled
+    buttonClassName
+    onClose={_ => setSelectedOptions(_ => defaultValue)}
+    dropdownClassName
+    position=#bottom
+    label={switch selectedOptions {
+    | [] =>
+      <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>
+    | options =>
+      <div
+        className="table table-fixed w-full"
+        title={options->Array.map(({label}) => label)->Js.Array2.joinWith(", ")}>
+        <span className="table-cell truncate text-left">
+          {options->Array.map(({label}) => label)->Js.Array2.joinWith(", ")->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}
+              onKeyDown={event => {
+                if event->ReactEvent.Keyboard.key === "Enter" && search !== "" {
+                  let selectedOptions = filterOptionsBySearch(~options, ~search)
+                  setSelectedOptions(_ => {
+                    selectedOptions
+                  })
+                }
+              }}
+              value={search}
+              onChange={event => {
+                let target = event->ReactEvent.Form.currentTarget
+                // normalize nfd -> replace by re remove split by commponents the accent letters and deletes the accent component only, leaving the un-accented letter
+                setSearch(_ =>
+                  target["value"]
+                  ->Js.String2.toLowerCase
+                  ->Js.String2.normalizeByForm("NFD")
+                  ->Js.String2.replaceByRe(%re("/[\u0300-\u036f]/g"), "")
+                )
+              }}
+            />
+          </div>
+        : React.null}
+      {options
+      ->Array.keep(({label}) =>
+        // normalize nfd -> replace by re remove split by commponents the accent letters and deletes the accent component only, leaving the un-accented letter
+        search == "" ||
+          label
+          ->Js.String2.toLowerCase
+          ->Js.String2.normalizeByForm("NFD")
+          ->Js.String2.replaceByRe(%re("/[\u0300-\u036f]/g"), "")
+          ->Js.String2.includes(search)
+      )
+      ->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_Checkbox
+            value
+            className="w-full flex-shrink-0 relative"
+            checked={selectedOptions->Array.some(item =>
+              item.label == label && item.value == value
+            )}
+            onChange={(checked, _value) => {
+              if checked {
+                setSelectedOptions(selectedOptions => {
+                  let value = selectedOptions->Array.concat([item])
+
+                  value
+                })
+              } else {
+                setSelectedOptions(selectedOptions => {
+                  let value =
+                    selectedOptions->Array.keep(
+                      selectedItem => selectedItem.value != value && selectedItem.label != label,
+                    )
+
+                  value
+                })
+              }
+            }}>
+            {item.itemLabel->Option.getWithDefault(label->React.string)}
+          </Toolkit__Ui_Checkbox>
+        </div>
+      })
+      ->React.array}
+    </div>
+    <Footer
+      onCancel={() => {
+        setSelectedOptions(_ => defaultValue)
+        onCancel->Option.forEach(fn => fn())
+      }}
+      onValidateClick={() => onValidate(selectedOptions)}
+    />
+  </Toolkit__Ui_Dropdown>
+}

package/src/ui/Toolkit__Ui_MultiSelectWithValidation.resi

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