v5.2.4 (#613)

* Refactor ButtonGroup

* v5.2.4

Author: kapantzak

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "5.2.3",
+  "version": "5.2.4",
   "description": "netdata UI kit",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",

src/components/button/buttonGroup.js

@@ -1,7 +1,9 @@
-import React, { Children, isValidElement, cloneElement, useCallback } from "react"
+import React, { Children, isValidElement, cloneElement } from "react"
 import Flex from "@/components/templates/flex"
 import { Button } from "./button"
 
+const noop = () => {}
+
 const getButtonGroupProps = (itemIndex, itemsLength) => {
   const groupFirst = itemIndex == 0
   const groupLast = itemIndex == itemsLength - 1
@@ -30,20 +32,34 @@ const Content = ({ children }) => {
   )
 }
 
-const RadioButtons = ({ items, checked, buttonProps = {}, onChange }) => {
+const RadioButtons = ({ items, value, isMulti, buttonProps = {}, onChange }) => {
   return (
     <>
-      {items.map(({ label, value, title }, index) => {
+      {items.map((item, index) => {
         const buttonGroupProps = getButtonGroupProps(index, items.length)
-        const isChecked = checked === value || (Array.isArray(checked) && checked.includes(value))
+        const isSelected =
+          value === item.value || (Array.isArray(value) && value.includes(item.value))
+
+        const onClick = () => {
+          if (isMulti) {
+            const newValue = Array.isArray(value)
+              ? value.includes(item.value)
+                ? value.filter(v => v !== item.value)
+                : [...value, item.value]
+              : [item.value]
+            onChange(newValue)
+          } else {
+            onChange(item.value)
+          }
+        }
 
         return (
           <Button
-            key={value}
-            label={label}
-            onClick={() => onChange(value)}
-            {...(title ? { title } : {})}
-            {...(!isChecked ? { flavour: "hollow" } : {})}
+            key={item.value}
+            label={item.label}
+            onClick={onClick}
+            {...(item.title ? { title: item.title } : {})}
+            {...(!isSelected ? { flavour: "hollow" } : {})}
             {...buttonGroupProps}
             {...buttonProps}
           />
@@ -53,10 +69,24 @@ const RadioButtons = ({ items, checked, buttonProps = {}, onChange }) => {
   )
 }
 
-export const ButtonGroup = ({ items, checked, onChange, children, buttonProps, ...props }) => (
+export const ButtonGroup = ({
+  items,
+  value,
+  isMulti,
+  onChange = noop,
+  children,
+  buttonProps,
+  ...props
+}) => (
   <Flex alignItems="center" {...props}>
     {items?.length ? (
-      <RadioButtons items={items} checked={checked} onChange={onChange} buttonProps={buttonProps} />
+      <RadioButtons
+        items={items}
+        value={value}
+        isMulti={isMulti}
+        onChange={onChange}
+        buttonProps={buttonProps}
+      />
     ) : (
       <Content>{children}</Content>
     )}

src/components/button/buttonGroup.stories.js

@@ -1,39 +1,17 @@
-import React, { useCallback, useState } from "react"
+import React, { useState } from "react"
 import { ButtonGroup } from "."
 
 export const RadioButtonGroup = args => {
-  const [checked, setChecked] = useState(args.checked)
+  const [value, setValue] = useState(args.value)
 
-  return (
-    <ButtonGroup
-      items={args.items.map(item => ({ ...item }))}
-      checked={checked}
-      buttonProps={args}
-      onChange={setChecked}
-    />
-  )
+  return <ButtonGroup items={args.items} value={value} buttonProps={args} onChange={setValue} />
 }
 
 export const MultiButtonGroup = args => {
-  const [checked, setChecked] = useState([args.checked])
-
-  const onChange = useCallback(
-    value => {
-      setChecked(prev => {
-        if (prev.includes(value)) return prev.filter(v => v !== value)
-        return [...prev, value]
-      })
-    },
-    [setChecked]
-  )
+  const [value, setValue] = useState([args.value])
 
   return (
-    <ButtonGroup
-      items={args.items.map(item => ({ ...item }))}
-      checked={checked}
-      buttonProps={args}
-      onChange={onChange}
-    />
+    <ButtonGroup items={args.items} value={value} isMulti buttonProps={args} onChange={setValue} />
   )
 }
 
@@ -42,14 +20,14 @@ export default {
   tags: ["autodocs"],
   args: {
     items: [
-      { label: "One", value: 1 },
-      { label: "Two", value: 2 },
-      { label: "Three", value: 3 },
+      { label: "One", value: "1" },
+      { label: "Two", value: "2" },
+      { label: "Three", value: "3" },
     ],
-    checked: 1,
+    value: "1",
     buttonProps: {},
   },
   argTypes: {
-    checked: { control: "text" },
+    value: { control: "text" },
   },
 }

src/components/button/buttonGroup.test.js

@@ -30,7 +30,7 @@ describe("ButtonGroup", () => {
         { label: "Option 3", value: "opt3" },
       ]
 
-      renderWithProviders(<ButtonGroup items={items} checked="opt1" onChange={() => {}} />)
+      renderWithProviders(<ButtonGroup items={items} value="opt1" onChange={() => {}} />)
 
       expect(screen.getByText("Option 1")).toBeInTheDocument()
       expect(screen.getByText("Option 2")).toBeInTheDocument()
@@ -90,7 +90,7 @@ describe("ButtonGroup", () => {
         { label: "Option 2", value: "opt2" },
       ]
 
-      renderWithProviders(<ButtonGroup items={items} checked="opt1" onChange={handleChange} />)
+      renderWithProviders(<ButtonGroup items={items} value="opt1" onChange={handleChange} />)
 
       await user().click(screen.getByText("Option 2"))
       expect(handleChange).toHaveBeenCalledWith("opt2")
@@ -103,7 +103,7 @@ describe("ButtonGroup", () => {
       ]
 
       const { container } = renderWithProviders(
-        <ButtonGroup items={items} checked="checked" onChange={() => {}} />
+        <ButtonGroup items={items} value="checked" onChange={() => {}} />
       )
 
       const buttons = container.querySelectorAll("button")
@@ -119,7 +119,7 @@ describe("ButtonGroup", () => {
       renderWithProviders(
         <ButtonGroup
           items={items}
-          checked="btn1"
+          value="btn1"
           onChange={() => {}}
           buttonProps={{ disabled: true }}
         />
@@ -137,7 +137,7 @@ describe("ButtonGroup", () => {
         { label: "Cancel", value: "cancel" },
       ]
 
-      renderWithProviders(<ButtonGroup items={items} checked="save" onChange={() => {}} />)
+      renderWithProviders(<ButtonGroup items={items} value="save" onChange={() => {}} />)
 
       expect(screen.getByTitle("Save the document")).toBeInTheDocument()
     })
@@ -192,7 +192,7 @@ describe("ButtonGroup", () => {
 
     it("handles empty items array", () => {
       const { container } = renderWithProviders(
-        <ButtonGroup items={[]} checked={null} onChange={() => {}} />
+        <ButtonGroup items={[]} value={null} onChange={() => {}} />
       )
 
       expect(container.firstChild).toBeInTheDocument()