Add actions to table (#201)

* Add actions to table

* Fix IconButton error

* Add gap to actions

* Add actions test cases

* Update naming checked to isSelected

* Update naming deleted to isDeleted

* Optimise table code

* Add delete table changes

* Add delete row changes

src/App.tsx

@@ -33,37 +33,55 @@ import {
   Text,
   EllipsisContent,
   Table,
+  TableRowType,
 } from "@/components";
 import { Dialog } from "@/components/Dialog/Dialog";
 import ConfirmationDialog from "@/components/ConfirmationDialog/ConfirmationDialog";
 
 const headers = [{ label: "Company" }, { label: "Contact" }, { label: "Country" }];
-const rows = [
-  {
-    id: "row-1",
-    items: [
-      { label: "Alfreds Futterkiste" },
-      { label: "Maria Anders" },
-      { label: "Germany" },
-    ],
-  },
-  {
-    id: "row-2",
-    items: [
-      { label: "Centro comercial Moctezuma" },
-      { label: "Francisco Chang" },
-      { label: "Mexico" },
-    ],
-  },
-];
 const App = () => {
   const [currentTheme, setCurrentTheme] = useState<ThemeName>("dark");
   const [selectedButton, setSelectedButton] = useState("center1");
   const [checked, setChecked] = useState(false);
   const [disabled] = useState(false);
   const [open, setOpen] = useState(false);
   const ref = useRef(null);
+  const [rows, setRows] = useState<Array<TableRowType>>([
+    {
+      id: "row-1",
+      items: [
+        { label: "Alfreds Futterkiste" },
+        { label: "Maria Anders" },
+        { label: "Germany" },
+      ],
+    },
+    {
+      id: "row-2",
+      items: [
+        { label: "Centro comercial Moctezuma" },
+        { label: "Francisco Chang" },
+        { label: "Mexico" },
+      ],
+    },
+    {
+      id: "row-3",
+      isDisabled: true,
+      items: [
+        { label: "Centro comercial Moctezuma" },
+        { label: "Francisco Chang" },
+        { label: "Mexico" },
+      ],
+    },
+  ]);
 
+  const onTableDelete = (row: TableRowType, index: number) => {
+    setRows(rows => {
+      rows[index] = row;
+      return [...rows];
+    });
+  };
+
+  console.log(currentTheme);
   return (
     <div style={{ padding: "6rem" }}>
       <ClickUIProvider
@@ -449,11 +467,12 @@ const App = () => {
           turpis ex imperdiet enim, ac finibus nunc ante non est. Ut mattis ex magna, ac
           faucibus mi egestas interdum.
         </EllipsisContent>
+        <Table
+          headers={headers}
+          rows={rows}
+          onDelete={onTableDelete}
+        />
       </ClickUIProvider>
-      <Table
-        headers={headers}
-        rows={rows}
-      />
     </div>
   );
 };

src/components/Table/Table.test.tsx

@@ -68,4 +68,34 @@ describe("Table", () => {
     fireEvent.click(selectAllCheckbox);
     expect(onSelect).toBeCalledTimes(2);
   });
+
+  it("should trigger onDelete on clicking closeButton", () => {
+    const onDelete = jest.fn();
+    const { queryByTestId, queryAllByTestId } = renderTable({
+      isSelectable: true,
+      onDelete,
+    });
+    expect(queryByTestId("table")).not.toBeNull();
+    expect(queryAllByTestId("table-row-delete")).toHaveLength(2);
+    expect(queryByTestId("table-row-edit")).toBeNull();
+    const rowCheckbox = queryAllByTestId("table-row-delete")[0];
+    expect(rowCheckbox).not.toBeNull();
+    fireEvent.click(rowCheckbox);
+    expect(onDelete).toBeCalledTimes(1);
+  });
+
+  it("should trigger onEdit on clicking editButton", () => {
+    const onEdit = jest.fn();
+    const { queryByTestId, queryAllByTestId } = renderTable({
+      isSelectable: true,
+      onEdit,
+    });
+    expect(queryByTestId("table")).not.toBeNull();
+    expect(queryAllByTestId("table-row-edit")).toHaveLength(2);
+    expect(queryByTestId("table-row-delete")).toBeNull();
+    const rowCheckbox = queryAllByTestId("table-row-edit")[0];
+    expect(rowCheckbox).not.toBeNull();
+    fireEvent.click(rowCheckbox);
+    expect(onEdit).toBeCalledTimes(1);
+  });
 });