@colisweb/rescript-toolkit 4.6.1 → 4.7.1

package/locale/fr.json

@@ -39,6 +39,11 @@
     "defaultMessage": "Volume total",
     "message": "Volume total"
   },
+  {
+    "id": "_2f765479",
+    "defaultMessage": "Choisir",
+    "message": "Choisir"
+  },
   {
     "id": "_337be526",
     "defaultMessage": "Jeudi",
@@ -89,6 +94,11 @@
     "defaultMessage": "<lat></lat>, <lng></lng>",
     "message": "<lat></lat>, <lng></lng>"
   },
+  {
+    "id": "_7e01b0f2",
+    "defaultMessage": "Réinitialiser",
+    "message": "Réinitialiser"
+  },
   {
     "id": "_8f8eb0df",
     "defaultMessage": "Vendredi",
@@ -184,6 +194,11 @@
     "defaultMessage": "Doit être un entier positif ou un nombre a virgule",
     "message": "Doit être un entier positif ou un nombre a virgule"
   },
+  {
+    "id": "_e2eadf60",
+    "defaultMessage": "Choisissez une date",
+    "message": "Choisissez une date"
+  },
   {
     "id": "_e5c29cb8",
     "defaultMessage": "(Optionnel)",

package/package.json

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

package/src/form/Toolkit__Form.res

@@ -721,4 +721,134 @@ module Make = (StateLenses: Config) => {
         </>}
       />
   }
+
+  module DatePicker = {
+    module Picker = {
+      @react.component
+      let make = (
+        ~value,
+        ~handleChange,
+        ~containerClassName,
+        ~placeholder,
+        ~disabledBefore: option<Js.Date.t>=?,
+      ) => {
+        let (date, setDate) = React.useState((): option<Js.Date.t> => value)
+        let intl = useIntl()
+
+        <div>
+          <Toolkit__Ui_PortalDropdown
+            buttonClassName="!border-0 w-full !p-0"
+            label={switch value {
+            | None =>
+              <div className={cx(["text-left w-full", containerClassName])}>
+                <div className="border p-2 rounded text-neutral-400 font-normal">
+                  {placeholder->Option.getWithDefault(
+                    <FormattedMessage defaultMessage={"Choisissez une date"} />,
+                  )}
+                </div>
+              </div>
+            | Some(date) =>
+              <div
+                className={cx([
+                  "border rounded-lg p-2 flex flex-row items-center justify-between gap-6 font-normal text-neutral-700 w-full",
+                  containerClassName,
+                ])}>
+                <span>
+                  <FormattedDate
+                    value={date} weekday=#long day=#numeric month=#long year=#numeric
+                  />
+                </span>
+                <div
+                  className="border inline-flex items-center justify-center w-8 h-8 rounded border-primary-700 text-primary-700">
+                  <ReactIcons.FaPencilAlt size={18} />
+                </div>
+              </div>
+            }}>
+            {disclosure => {
+              <div className="flex flex-col">
+                <ReactDayPicker.ReactDayPicker.DayPicker
+                  className="cw-Datepicker"
+                  showOutsideDays=true
+                  modifiers={disabledBefore->Option.mapWithDefault(
+                    Js.Obj.empty()->Obj.magic,
+                    disabledBefore => {
+                      {
+                        "disabled": {
+                          "before": disabledBefore,
+                        },
+                      }->Obj.magic
+                    },
+                  )}
+                  locale={intl->Intl.locale}
+                  months=Toolkit__LocalesHelpers.DatePicker.Fr.months
+                  weekdaysShort=Toolkit__LocalesHelpers.DatePicker.Fr.weekdaysShort
+                  firstDayOfWeek=1
+                  selectedDays=(date->Obj.magic, {from: Js.Nullable.null, to_: Js.Nullable.null})
+                  onDayClick={(
+                    (day, modifiers) => {
+                      let disabled: option<bool> = (modifiers->Obj.magic)["disabled"]
+
+                      switch disabled {
+                      | Some(true) => ()
+                      | _ => setDate(_ => Some(day))
+                      }
+                    }
+                  )->Obj.magic}
+                />
+                <div className="flex flex-row justify-between">
+                  <Toolkit__Ui_Button
+                    type_="button"
+                    disabled={date->Option.isNone}
+                    onClick={_ => {
+                      setDate(_ => None)
+                    }}>
+                    <FormattedMessage defaultMessage={"Réinitialiser"} />
+                  </Toolkit__Ui_Button>
+                  <Toolkit__Ui_Button
+                    color=#primary
+                    type_="button"
+                    disabled={date->Option.isNone}
+                    onClick={_ => {
+                      disclosure.hide()
+                      handleChange(date)
+                    }}>
+                    <FormattedMessage defaultMessage={"Choisir"} />
+                  </Toolkit__Ui_Button>
+                </div>
+              </div>
+            }}
+          </Toolkit__Ui_PortalDropdown>
+        </div>
+      }
+    }
+    @react.component
+    let make = (
+      ~field,
+      ~label=?,
+      ~id,
+      ~isOptional=?,
+      ~containerClassName="",
+      ~placeholder=?,
+      ~disabledBefore=?,
+    ) => {
+      <Form.Field
+        field
+        render={({handleChange, value, error}) => <>
+          {switch label {
+          | None => React.null
+          | Some(label) =>
+            <Toolkit__Ui_Label
+              htmlFor=id
+              optionalMessage={isOptional->Option.getWithDefault(false)
+                ? <FormattedMessage defaultMessage="(Optionnel)" />
+                : React.null}>
+              label
+            </Toolkit__Ui_Label>
+          }}
+          <Picker value handleChange containerClassName placeholder ?disabledBefore />
+          <ErrorMessage ?error />
+        </>}
+      />
+    }
+  }
 }

package/src/ui/styles.css

@@ -297,4 +297,8 @@ input[type="number"] {
   @apply opacity-100;
 }
 
+.cw-Datepicker.DayPicker .DayPicker-Day.DayPicker-Day--selected {
+  @apply !bg-primary-500 !rounded-full text-white;
+}
+
 /* purgecss end ignore */