@colisweb/rescript-toolkit 3.4.0 → 3.4.2

package/package.json

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

package/playground/components/Playground_ButtonGroup2.res

@@ -23,7 +23,7 @@ let make = () => {
             Js.log(tabValue)
           }}
           buttons={[
-            {label: "Option 1"->React.string, value: "test"},
+            {label: "Option 1"->React.string, value: "test", count: 10},
             {label: "Option 2"->React.string, onClick: _ => alert("clicked on option 2")},
             {label: "Option 3"->React.string},
           ]}

package/src/ui/Toolkit__Ui_ButtonGroup2.res

@@ -7,6 +7,7 @@ type button<'value> = {
   onClick?: ReactEvent.Mouse.t => unit,
   label: React.element,
   value?: 'value,
+  count?: int,
 }
 
 type buttons<'value> = array<button<'value>>
@@ -21,13 +22,18 @@ let make = (
 ) => {
   let isMd = size === #md
   let (activeIndex, setActiveIndex) = React.useState(() => defaultActiveIndex)
+  let previousIndex = Toolkit__Hooks.usePrevious(activeIndex)
 
-  React.useEffect1(() => {
-    onIndexChange->Option.forEach(fn =>
-      fn(activeIndex, (buttons[activeIndex]->Option.getUnsafe).value)
-    )
+  React.useEffect2(() => {
+    onIndexChange->Option.forEach(fn => {
+      switch previousIndex {
+      | Some(previousIndex) if previousIndex !== activeIndex =>
+        fn(activeIndex, (buttons[activeIndex]->Option.getUnsafe).value)
+      | _ => ()
+      }
+    })
     None
-  }, [activeIndex])
+  }, (activeIndex, previousIndex))
 
   <div
     className={cx([
@@ -48,6 +54,19 @@ let make = (
         }}
         className={cx([activeIndex === i ? "selected" : ""])}>
         {button.label}
+        {button.count->Option.mapWithDefault(React.null, count => {
+          <span
+            className={cx([
+              "ml-2 bg-gray-300/40 rounded px-1.5 ",
+              switch size {
+              | #md => "text-xs"
+              | #xl => "text-sm"
+              },
+              activeIndex === i ? "text-white fn" : "text-black",
+            ])}>
+            {count->React.int}
+          </span>
+        })}
       </button>
     })
     ->React.array}

package/src/ui/Toolkit__Ui_ButtonGroup2.resi

@@ -7,6 +7,7 @@ type button<'value> = {
   onClick?: ReactEvent.Mouse.t => unit,
   label: React.element,
   value?: 'value,
+  count?: int,
 }
 
 type buttons<'value> = array<button<'value>>