@colisweb/rescript-toolkit 3.1.7 → 3.2.1

package/package.json

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

package/playground/components/Playground_Button.res

@@ -71,7 +71,13 @@ let make = () => {
                       <div
                         key={(i + k)->Int.toString ++ "icon" ++ ((color :> string) ++ sizeText)}
                         className="flex flex-col justify-center items-center">
-                        <Toolkit__Ui_Button leftIcon=module(ReactIcons.FaCheck) variant color size>
+                        <Toolkit__Ui_Button
+                          leftIcon=module(ReactIcons.FaCheck)
+                          variant
+                          color
+                          size
+                          confirmationLabel={"Confirmation label on click"}
+                          onClick={_ => Js.log("test")}>
                           {"hello"->React.string}
                         </Toolkit__Ui_Button>
                         <span className="text-xxs"> {sizeText->React.string} </span>

package/src/ui/Toolkit__Ui_Alert.res

@@ -18,7 +18,7 @@ let make = (~title, ~description=?, ~status, ~className=?) =>
     | #error => <ReactIcons.MdWarning size=28 className="text-danger-600 flex-shrink-0" />
     | #warning =>
       <ReactIcons.FaExclamationTriangle size=28 className="text-warning-600 flex-shrink-0" />
-    | #info => <ReactIcons.FaExclamationCircle size=28 className="text-info-600 flex-shrink-0" />
+    | #info => <ReactIcons.FaInfoCircle size=28 className="text-info-600 flex-shrink-0" />
     }}
     <div className="mx-3">
       <div

package/src/ui/Toolkit__Ui_Button.res

@@ -128,8 +128,28 @@ let make = (
   ~rightIcon: option<module(Icon)>=?,
   ~iconClassName=?,
   ~testId="",
+  ~confirmationLabel: option<string>=?,
   ~buttonRef: option<ReactDOM.domRef>=?,
 ) => {
+  let (clicked, setClicked) = React.useState(() => false)
+
+  React.useEffect1(() => {
+    let timeoutId = Js.Global.setTimeout(() => {
+      setClicked(_ => false)
+    }, 3000)
+
+    Some(
+      () => {
+        timeoutId->Js.Global.clearTimeout
+      },
+    )
+  }, [clicked])
+
+  let variant = switch (confirmationLabel, onClick) {
+  | (Some(_), Some(_)) => clicked ? #default : variant
+  | _ => variant
+  }
+
   <Toolkit__Ui_Spread props={{"data-testid": cx([testId])}}>
     <button
       ref=?{buttonRef}
@@ -143,7 +163,13 @@ let make = (
       ?tabIndex
       ?onFocus
       ?onBlur
-      ?onClick
+      onClick={event => {
+        switch (confirmationLabel, onClick) {
+        | (None, Some(fn)) => fn(event)
+        | (Some(_), Some(fn)) => clicked ? fn(event) : setClicked(_ => true)
+        | _ => ()
+        }
+      }}
       className={cx([
         className,
         buttonStyle(~color, ~variant, ~size, ~disabled, ()),
@@ -164,7 +190,9 @@ let make = (
           />
         </span>
       })}
-      children
+      {confirmationLabel->Option.mapWithDefault(children, confirmationLabel => {
+        clicked ? confirmationLabel->React.string : children
+      })}
       {rightIcon->Option.mapWithDefault(React.null, icon => {
         let module(Icon) = icon
 

package/src/ui/Toolkit__Ui_Button.resi

@@ -38,5 +38,6 @@ let make: (
   ~rightIcon: module(ReactIcons.Icon)=?,
   ~iconClassName: string=?,
   ~testId: string=?,
+  ~confirmationLabel: string=?,
   ~buttonRef: ReactDOM.domRef=?,
 ) => React.element

package/src/vendors/ReactIcons.res

@@ -6039,3 +6039,9 @@ module VscFolderLibrary = {
   external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
     "VscFolderLibrary"
 }
+
+module FaRegTrashAlt = {
+  @module("react-icons/fa") @react.component
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
+    "FaRegTrashAlt"
+}