@colisweb/rescript-toolkit 4.24.4 → 4.26.0

package/package.json

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

package/src/hooks/Toolkit__Hooks.res

@@ -37,6 +37,16 @@ let useUpdate = () => {
   React.useCallback1(() => setState(SafeIncrement.increment), [])
 }
 
+let useDebounceValue = (value, ~debounceDuration=200) => {
+  let (state, setState) = React.useState(() => value)
+
+  useDebounce(() => {
+    setState(_ => value)
+  }, debounceDuration, [value])->ignore
+
+  state
+}
+
 let useGetSet = initialStateGetter => {
   let state = React.useRef(initialStateGetter())
   let update = useUpdate()

package/src/ui/Toolkit__Ui_WeekdayNavigation.res

@@ -49,6 +49,7 @@ let make = (
   ~periodLength=7,
   ~children,
   ~onChange: option<state => unit>=?,
+  ~disabledBefore: option<Js.Date.t>=?,
 ) => {
   let {isSm} = Toolkit__Hooks.useMediaQuery()
 
@@ -56,13 +57,20 @@ let make = (
     (state, action) =>
       switch action {
       | PreviousPeriod =>
+        let previousPeriodStart = state.period.start->DateFns.subDays(periodLength)
+        let selectedDay =
+          disabledBefore->Option.mapWithDefault(previousPeriodStart, disabledBefore =>
+            previousPeriodStart->DateFns.isBefore(disabledBefore)
+              ? disabledBefore
+              : previousPeriodStart
+          )
         UpdateWithSideEffects(
           {
             period: {
               start: state.period.start->DateFns.subDays(periodLength)->DateFns.startOfDay,
               end_: state.period.start->DateFns.subDays(1),
             },
-            selectedDay: state.period.start->DateFns.subDays(periodLength)->DateFns.startOfDay,
+            selectedDay,
           },
           ({state}) => {
             updateQueryParams(state)
@@ -114,19 +122,32 @@ let make = (
         }
       }
 
+      let selectedDayWithDefault =
+        selectedDay->Option.getWithDefault(startOfWeek->Option.getWithDefault(defaultPeriod.start))
+
+      let selectedDayNotInDisabledRange =
+        disabledBefore->Option.mapWithDefault(selectedDayWithDefault, disabledBefore =>
+          selectedDayWithDefault->DateFns.isBefore(disabledBefore)
+            ? disabledBefore
+            : selectedDayWithDefault
+        )
+
       {
         period: startOfWeek->Option.mapWithDefault(defaultPeriod, start => {
           start,
           end_: isSm ? start->DateFns.addDays(periodLength - 1) : start->DateFns.addDays(2),
         }),
-        selectedDay: selectedDay->Option.getWithDefault(
-          startOfWeek->Option.getWithDefault(defaultPeriod.start),
-        ),
+        selectedDay: selectedDayNotInDisabledRange,
       }
     },
   )
   let intl = useIntl()
 
+  let days = DateFns.eachDayOfInterval({
+    start: period.start,
+    end_: period.end_,
+  })
+
   <div className={containerClassName}>
     <div className={cx(["border-neutral-300 flex justify-center items-center py-3", className])}>
       <Toolkit__Ui_IconButton
@@ -135,19 +156,25 @@ let make = (
         color=#neutral
         onClick={_ => dispatch(PreviousPeriod)}
         ariaLabel="previous week"
+        disabled=?{disabledBefore->Option.map(disabledBefore => {
+          let isPreviousPeriodOutOfBounds =
+            period.start->DateFns.subDays(1)->DateFns.isBefore(disabledBefore)
+          isPreviousPeriodOutOfBounds
+        })}
         icon={<ReactIcons.MdKeyboardArrowLeft size=30 />}
       />
       <div className="flex items-center mx-2">
-        {DateFns.eachDayOfInterval({
-          start: period.start,
-          end_: period.end_,
-        })
+        {days
         ->Array.mapWithIndex((i, day) => {
           let formattedDay =
             intl->Intl.formatDateWithOptions(day, dateTimeFormatOptions(~weekday=#long, ()))
 
           let isSelected = DateFns.isSameDay(selectedDay, day)
 
+          let isDisabled =
+            disabledBefore->Option.mapWithDefault(false, disabledBefore =>
+              day->DateFns.isBefore(disabledBefore)
+            )
           <React.Fragment key={i->Int.toString ++ "-day"}>
             {i == 0 || day->DateFns.isFirstDayOfMonth
               ? <p className="text-xs text-neutral-700 uppercase">
@@ -155,8 +182,11 @@ let make = (
                 </p>
               : React.null}
             <div
-              onClick={_ => dispatch(UpdateSelectedDay(day))}
-              className="flex flex-col items-stretch w-16 mx-1 font-display">
+              onClick={_ => isDisabled ? () : dispatch(UpdateSelectedDay(day))}
+              className={cx([
+                "flex flex-col items-stretch w-16 mx-1 font-display",
+                isDisabled ? "opacity-50 cursor-not-allowed" : "",
+              ])}>
               <p
                 className={cx([
                   "flex flex-col items-center justify-center uppercase text-xs w-full rounded-sm leading-tight py-1",