@colisweb/rescript-toolkit 1.27.0 → 1.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "1.27.0",
+  "version": "1.28.0",
   "scripts": {
     "clean": "rescript clean",
     "build": "rescript build",

package/src/hooks/Toolkit__Hooks.res

@@ -132,7 +132,7 @@ let useClipboard = (~onCopyNotificationMessage: option<string>=?, value: string)
   let (hasCopied, setHasCopied) = React.useState(() => false)
   let onCopy = React.useCallback1(() => {
     onCopyNotificationMessage->Option.forEach(message =>
-      Toolkit__Ui_Snackbar.show(~title=message, ~variant=#success, ())
+      Toolkit__Ui_Snackbar.show(~title=message, ~variant=#success, ())->ignore
     )
 
     let didCopy = BsCopyToClipboard.copy(value)

package/src/ui/Toolkit__Ui_Snackbar.res

@@ -1,30 +1,43 @@
-type rec state = {
-  isVisible: bool,
-  options: option<options>,
-}
+type rec state = {list: array<options>}
 and options = {
+  id: id,
+  isVisible: bool,
   title: string,
   description: option<React.element>,
   closable: bool,
   variant: variant,
   timeout: int,
 }
+and id
 and variant = [#success | #warning | #danger]
 
 type action =
   | Show(options)
-  | Hide
+  | Hide(id)
+  | Remove(id)
 
-let store = Restorative.createStore({isVisible: false, options: None}, (state, action) =>
+let store = Restorative.createStore({list: []}, (state, action) =>
   switch action {
-  | Show(options) => {isVisible: true, options: Some(options)}
-  | Hide => {...state, isVisible: false}
+  | Show(options) => {list: state.list->Array.concat([options])}
+  | Hide(id) => {
+      list: state.list->Array.map(e =>
+        if e.id === id {
+          {...e, isVisible: false}
+        } else {
+          e
+        }
+      ),
+    }
+  | Remove(id) => {list: state.list->Array.keep(e => e.id !== id)}
   }
 )
 
-let show = (~title, ~description=?, ~closable=true, ~variant, ~timeout=5000, ()) =>
+let show = (~title, ~description=?, ~closable=true, ~variant, ~timeout=5000, ()) => {
+  let id: id = Js.Math.random()->Js.Float.toString->Obj.magic
   store.dispatch(
     Show({
+      id: id,
+      isVisible: true,
       title: title,
       description: description,
       closable: closable,
@@ -32,76 +45,95 @@ let show = (~title, ~description=?, ~closable=true, ~variant, ~timeout=5000, ())
       timeout: timeout,
     }),
   )
-let hide = () => store.dispatch(Hide)
+  id
+}
 
-module Provider = {
+let remove = id => store.dispatch(Remove(id))
+let hide = id => {
+  store.dispatch(Hide(id))
+  Js.Global.setTimeout(() => {
+    remove(id)
+  }, 160)->ignore
+}
+
+module Item = {
   @react.component
-  let make = () => {
-    let {isVisible, options} = store.useStore()
-    let timeoutRef = React.useRef(None)
+  let make = (~options) => {
+    let {id, isVisible, variant, title, description, closable, timeout} = options
 
-    React.useEffect1(() => {
-      if isVisible {
-        timeoutRef.current->Option.map(timeoutRef => timeoutRef->Js.Global.clearTimeout)->ignore
+    let (mounted, setMounted) = React.useState(() => false)
 
-        let id = Js.Global.setTimeout(
-          () => hide(),
-          options->Option.mapWithDefault(5000, option => option.timeout),
-        )
+    React.useEffect0(() => {
+      setMounted(_ => true)
+      let timeoutId = Js.Global.setTimeout(() => {
+        hide(id)
+      }, timeout)
+      Some(() => Js.Global.clearTimeout(timeoutId))
+    })
 
-        timeoutRef.current = Some(id)
-      }
-      None
-    }, [isVisible])
+    <div
+      className={cx([
+        "bg-white p-3 rounded shadow transition duration-500 ease-in-out mt-3 transform",
+        {
+          open Css
+          style(list{bottom(40->px)})
+        },
+        mounted ? "-translate-y-14 opacity-1" : "opacity-0",
+        isVisible ? "opacity-100 z-50" : "opacity-0  translate-x-[200px]",
+        {
+          switch variant {
+          | #success => "bg-success-500 text-white"
+          | #warning => "bg-warning-500 text-white"
+          | #danger => "bg-danger-500 text-white"
+          }
+        },
+      ])}>
+      <div className="flex flex-gap-3">
+        <div>
+          {switch variant {
+          | #success => <BsReactIcons.MdCheckCircle size=28 />
+          | #warning => <BsReactIcons.MdWarning size=28 />
+          | #danger => <BsReactIcons.MdError size=28 />
+          }}
+        </div>
+        <div>
+          <strong> {title->React.string} </strong>
+          {description->Option.mapWithDefault(React.null, description =>
+            <p
+              className={cx([
+                "text-sm",
+                {
+                  open Css
+                  style(list{maxWidth(250->px)})
+                },
+              ])}>
+              description
+            </p>
+          )}
+        </div>
+        {closable
+          ? <button className="self-start" onClick={_ => hide(id)}>
+              <BsReactIcons.MdClose />
+            </button>
+          : React.null}
+      </div>
+    </div>
+  }
+}
+
+module Provider = {
+  @react.component
+  let make = () => {
+    let {list} = store.useStore()
 
     <ReachUi.Portal>
       <div
-        className={cx([
-          "absolute bg-white p-3 rounded shadow transition duration-500 ease-in-out right-0 mr-6 transform",
-          {
-            open Css
-            style(list{bottom(40->px)})
-          },
-          isVisible ? "opacity-100 translate-y-0 z-50" : "opacity-0 translate-y-10",
-          options->Option.mapWithDefault("", options =>
-            switch options.variant {
-            | #success => "bg-success-500 text-white"
-            | #warning => "bg-warning-500 text-white"
-            | #danger => "bg-danger-500 text-white"
-            }
-          ),
-        ])}>
-        {options->Option.mapWithDefault(React.null, options =>
-          <div className="flex flex-gap-3">
-            <div>
-              {switch options.variant {
-              | #success => <BsReactIcons.MdCheckCircle size=28 />
-              | #warning => <BsReactIcons.MdWarning size=28 />
-              | #danger => <BsReactIcons.MdError size=28 />
-              }}
-            </div>
-            <div>
-              <strong> {options.title->React.string} </strong>
-              {options.description->Option.mapWithDefault(React.null, description =>
-                <p
-                  className={cx([
-                    "text-sm",
-                    {
-                      open Css
-                      style(list{maxWidth(250->px)})
-                    },
-                  ])}>
-                  description
-                </p>
-              )}
-            </div>
-            {options.closable
-              ? <button className="self-start" onClick={_ => hide()}>
-                  <BsReactIcons.MdClose />
-                </button>
-              : React.null}
-          </div>
-        )}
+        className="fixed right-0 top-0 transform translate-y-14 h-full p-4 flex flex-col items-end justify-end">
+        {list
+        ->Array.map(e => {
+          <Item key={e.id->Obj.magic} options=e />
+        })
+        ->React.array}
       </div>
     </ReachUi.Portal>
   }

package/src/ui/Toolkit__Ui_Snackbar.resi

@@ -1,4 +1,5 @@
 type variant = [#success | #warning | #danger]
+type id
 
 let show: (
   ~title: string,
@@ -7,8 +8,8 @@ let show: (
   ~variant: variant,
   ~timeout: int=?, // default: 5000
   unit,
-) => unit
-let hide: unit => unit
+) => id
+let hide: id => unit
 
 module Provider: {
   @react.component