contentoh-components-library 21.5.34 → 21.5.36

package/src/components/organisms/Table/index.js

@@ -1,84 +1,84 @@
-import React, { useState } from "react";
-import { CheckBox } from "../../atoms/CheckBox";
-import { Container, TH, TD } from "./styles";
-import { Tooltip } from "../../atoms/Tooltip";
-
-export const Table = ({ columns, data, withCheckbox, withTooltip=false }) => {
-  const [rowsChecked, setRowsChecked] = useState([]);
-
-  function handlerSelectAll(evt) {
-    if (evt.target.checked) {
-      setRowsChecked(data.map(({ id }) => id));
-    } else {
-      setRowsChecked([]);
-    }
-  }
-
-  function handlerSelect(evt, id) {
-    if (evt.target.checked) {
-      setRowsChecked((prev) => (prev.includes(id) ? prev : [...prev, id]));
-    } else {
-      setRowsChecked((prev) => prev.filter((f) => f !== id));
-    }
-  }
-
-  return (
-    <Container withCheckbox>
-      <table className="custom-table">
-        <thead>
-          <tr>
-            {withCheckbox ? (
-              <CheckBox
-                id={-1}
-                className="checkbox_fixed"
-                checked={rowsChecked.length === data.length}
-                onChange={handlerSelectAll}
-              />
-            ) : null}
-            {columns.map((column, i) => (
-              <TH
-                key={`${column.accessor}${i}`}
-                withCheckbox={withCheckbox}
-                {...column}
-              >
-              {column.description && withTooltip ? (
-                  <Tooltip
-                    componentTooltip={<span>{column.description}</span>}
-                    position="topCenter"
-                  >
-                    <span>{column.Header}</span>
-                  </Tooltip>
-                ) : (
-                  <span>{column.Header}</span>
-                )}
-              </TH>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {data.map((row) => (
-            <tr key={row.id}>
-              {withCheckbox ? (
-                <CheckBox
-                  id={row.id}
-                  className="checkbox_fixed"
-                  checked={rowsChecked.includes(row.id)}
-                  onChange={(e) => handlerSelect(e, row.id)}
-                />
-              ) : null}
-              {columns.map((column, i) => (
-                <TD
-                  key={`${column.accessor}${i}`}
-                  withCheckbox={withCheckbox}
-                  {...column}
-                >
-                  {row[column.accessor]}
-                </TD>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </Container>
-  );
-};
+import React, { useState } from "react";
+import { CheckBox } from "../../atoms/CheckBox";
+import { Container, TH, TD } from "./styles";
+import { Tooltip } from "../../atoms/Tooltip";
+
+export const Table = ({ columns, data, withCheckbox, withTooltip=false }) => {
+  const [rowsChecked, setRowsChecked] = useState([]);
+
+  function handlerSelectAll(evt) {
+    if (evt.target.checked) {
+      setRowsChecked(data.map(({ id }) => id));
+    } else {
+      setRowsChecked([]);
+    }
+  }
+
+  function handlerSelect(evt, id) {
+    if (evt.target.checked) {
+      setRowsChecked((prev) => (prev.includes(id) ? prev : [...prev, id]));
+    } else {
+      setRowsChecked((prev) => prev.filter((f) => f !== id));
+    }
+  }
+
+  return (
+    <Container withCheckbox>
+      <table className="custom-table">
+        <thead>
+          <tr>
+            {withCheckbox ? (
+              <CheckBox
+                id={-1}
+                className="checkbox_fixed"
+                checked={rowsChecked.length === data.length}
+                onChange={handlerSelectAll}
+              />
+            ) : null}
+            {columns.map((column, i) => (
+              <TH
+                key={`${column.accessor}${i}`}
+                withCheckbox={withCheckbox}
+                {...column}
+              >
+              {column.description && withTooltip ? (
+                  <Tooltip
+                    componentTooltip={<span>{column.description}</span>}
+                    position="topCenter"
+                  >
+                    <span>{column.Header}</span>
+                  </Tooltip>
+                ) : (
+                  <span>{column.Header}</span>
+                )}
+              </TH>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((row) => (
+            <tr key={row.id}>
+              {withCheckbox ? (
+                <CheckBox
+                  id={row.id}
+                  className="checkbox_fixed"
+                  checked={rowsChecked.includes(row.id)}
+                  onChange={(e) => handlerSelect(e, row.id)}
+                />
+              ) : null}
+              {columns.map((column, i) => (
+                <TD
+                  key={`${column.accessor}${i}`}
+                  withCheckbox={withCheckbox}
+                  {...column}
+                >
+                  {row[column.accessor]}
+                </TD>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </Container>
+  );
+};

package/src/components/organisms/Table/styles.js

@@ -1,119 +1,119 @@
-import styled, { css } from "styled-components";
-
-export const Container = styled.div`
-  background: #fff;
-  box-sizing: border-box;
-  height: 100%;
-  overflow-x: auto;
-  width: 100%;
-  margin-right: 30px;
-  .checkbox_fixed {
-    left: 0px;
-    position: sticky;
-    z-index: 5;
-  }
-
-  .custom-table {
-    border-collapse: collapse;
-    box-sizing: border-box;
-    position:relative;
-    width: 100%;
-    & > thead {
-      top: 0;
-      height: 45px;
-      position: sticky;
-      z-index: 6;
-      & > tr {
-        background-color: #f7f7fc;
-        border-radius: 5px 5px 0px 0px;
-        height: 45px;
-      }
-    }
-    & > tbody {
-      position:absolute;
-      z-index:7;
-    }
-    & > tbody > tr {
-      height: 70px;
-      &:last-child {
-        border-radius: 0px 0px 5px 5px;
-      }
-    }
-  }
-
-  .custom-table th,
-  .custom-table td {
-    padding: 8px;
-    border: 0;
-  }
-
-  .custom-table th {
-    border-radius: 5px 0 0 5px;
-    border: 0;
-    color: var(--black-main, #262626);
-    font-family: Roboto;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: normal;
-    text-align: left;
-  }
-
-  .custom-table tr {
-    background: var(--white-main, #fff);
-    border-bottom: 1px solid var(--grey-light, #f0f0f0);
-    border-left: 1px solid var(--grey-light, #f0f0f0);
-    border-right: 1px solid var(--grey-light, #f0f0f0);
-    & > td {
-      color: var(--grey-main, #707070);
-      font-family: Roboto;
-      font-size: 12px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: normal;
-      gap:5px;
-    }
-    display: flex;
-    align-items: center;
-    ${({ withCheckbox }) => withCheckbox && `padding-left: 10px;`}
-  }
-`;
-
-export const TH = styled.th`
-  background: inherit;
-  min-height: ${({ height }) => height ?? "auto"};
-  min-width: ${({ width }) => width ?? "auto"};
-  position: sticky;
-  left: ${({ fixedToLeft }) => (fixedToLeft >= 0 ? `${fixedToLeft}px` : "20px")};
-  ${({ fixedToLeft, withCheckbox }) =>
-    fixedToLeft >= 0 &&
-    css`
-      left: ${withCheckbox ? 20 + fixedToLeft : fixedToLeft}px;
-      z-index: 10;
-    `}
-`;
-
-export const TD = styled.td`
-  align-items: center;
-  background: inherit;
-  box-sizing: border-box;
-  display: flex;
-  height: 100%;
-  min-width: ${({ width }) => width ?? "auto"};
-  text-align: center;
-  vertical-align: middle;
-  z-index: 5;
-  position: sticky;
-  left: ${({ fixedToLeft }) => (fixedToLeft >= 0 ? `${fixedToLeft}px` : "20px")};
-  .content {
-    white-space: nowrap;
-    overflow: hidden;
-    /* text-overflow: ellipsis; */
-  }
-  ${({ fixedToLeft, withCheckbox }) =>
-    fixedToLeft >= 0 &&
-    css`
-      left: ${withCheckbox ? 20 + fixedToLeft : fixedToLeft}px;
-      z-index: 10;
-    `}
-`;
+import styled, { css } from "styled-components";
+
+export const Container = styled.div`
+  background: #fff;
+  box-sizing: border-box;
+  height: 100%;
+  overflow-x: auto;
+  width: 100%;
+  margin-right: 30px;
+  .checkbox_fixed {
+    left: 0px;
+    position: sticky;
+    z-index: 5;
+  }
+
+  .custom-table {
+    border-collapse: collapse;
+    box-sizing: border-box;
+    position:relative;
+    width: 100%;
+    & > thead {
+      top: 0;
+      height: 45px;
+      position: sticky;
+      z-index: 6;
+      & > tr {
+        background-color: #f7f7fc;
+        border-radius: 5px 5px 0px 0px;
+        height: 45px;
+      }
+    }
+    & > tbody {
+      position:absolute;
+      z-index:7;
+    }
+    & > tbody > tr {
+      height: 70px;
+      &:last-child {
+        border-radius: 0px 0px 5px 5px;
+      }
+    }
+  }
+
+  .custom-table th,
+  .custom-table td {
+    padding: 8px;
+    border: 0;
+  }
+
+  .custom-table th {
+    border-radius: 5px 0 0 5px;
+    border: 0;
+    color: var(--black-main, #262626);
+    font-family: Roboto;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    text-align: left;
+  }
+
+  .custom-table tr {
+    background: var(--white-main, #fff);
+    border-bottom: 1px solid var(--grey-light, #f0f0f0);
+    border-left: 1px solid var(--grey-light, #f0f0f0);
+    border-right: 1px solid var(--grey-light, #f0f0f0);
+    & > td {
+      color: var(--grey-main, #707070);
+      font-family: Roboto;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+      gap:5px;
+    }
+    display: flex;
+    align-items: center;
+    ${({ withCheckbox }) => withCheckbox && `padding-left: 10px;`}
+  }
+`;
+
+export const TH = styled.th`
+  background: inherit;
+  min-height: ${({ height }) => height ?? "auto"};
+  min-width: ${({ width }) => width ?? "auto"};
+  position: sticky;
+  left: ${({ fixedToLeft }) => (fixedToLeft >= 0 ? `${fixedToLeft}px` : "20px")};
+  ${({ fixedToLeft, withCheckbox }) =>
+    fixedToLeft >= 0 &&
+    css`
+      left: ${withCheckbox ? 20 + fixedToLeft : fixedToLeft}px;
+      z-index: 10;
+    `}
+`;
+
+export const TD = styled.td`
+  align-items: center;
+  background: inherit;
+  box-sizing: border-box;
+  display: flex;
+  height: 100%;
+  min-width: ${({ width }) => width ?? "auto"};
+  text-align: center;
+  vertical-align: middle;
+  z-index: 5;
+  position: sticky;
+  left: ${({ fixedToLeft }) => (fixedToLeft >= 0 ? `${fixedToLeft}px` : "20px")};
+  .content {
+    white-space: nowrap;
+    overflow: hidden;
+    /* text-overflow: ellipsis; */
+  }
+  ${({ fixedToLeft, withCheckbox }) =>
+    fixedToLeft >= 0 &&
+    css`
+      left: ${withCheckbox ? 20 + fixedToLeft : fixedToLeft}px;
+      z-index: 10;
+    `}
+`;

package/src/components/organisms/TableResizable/TableResizable.stories.js

@@ -1,17 +1,17 @@
-import { TableResizable } from ".";
-import { data } from "./utils.js";
-
-export default {
-  title: "Components/organisms/TableResizable",
-  component: TableResizable,
-};
-
-const Template = (args) => <TableResizable {...args} />;
-
-export const DefaultTableResizable = Template.bind({});
-DefaultTableResizable.args = {
-  headers: ["Col 1", "Col 2", "Col 3", "Col 4", "Col 5"],
-  tableContent: data,
-  minCellWidth: 120,
-  withResetSizeButton: true,
-};
+import { TableResizable } from ".";
+import { data } from "./utils.js";
+
+export default {
+  title: "Components/organisms/TableResizable",
+  component: TableResizable,
+};
+
+const Template = (args) => <TableResizable {...args} />;
+
+export const DefaultTableResizable = Template.bind({});
+DefaultTableResizable.args = {
+  headers: ["Col 1", "Col 2", "Col 3", "Col 4", "Col 5"],
+  tableContent: data,
+  minCellWidth: 120,
+  withResetSizeButton: true,
+};

package/src/components/organisms/TableResizable/index.js

@@ -1,119 +1,119 @@
-import React, { useState, useCallback, useEffect, useRef } from "react";
-import { RestartAlt } from "@mui/icons-material";
-import { Container } from "./styles.js";
-
-const createHeaders = (headers) => {
-  return headers.map((item) => ({
-    text: item,
-    ref: useRef(),
-  }));
-};
-
-/*
- * Read the blog post here:
- * https://letsbuildui.dev/articles/resizable-tables-with-react-and-css-grid
- */
-export const TableResizable = (props) => {
-  const {
-    gridTemplateColumns,
-    headers,
-    minCellWidth,
-    tableContent,
-    withResetSizeButton,
-  } = props;
-  // const [tableHeight, setTableHeight] = useState("auto");
-  const [activeIndex, setActiveIndex] = useState(null);
-  const tableElement = useRef(null);
-  const columns = createHeaders(headers);
-
-  // useEffect(() => {
-  //   setTableHeight(tableElement.current.offsetHeight);
-  // }, []);
-
-  const mouseDown = (index) => setActiveIndex(index);
-
-  const mouseMove = useCallback(
-    (e) => {
-      const gridColumns = columns.map((col, i) => {
-        if (i === activeIndex) {
-          const width = e.clientX - col.ref.current.offsetLeft;
-          if (width >= minCellWidth) return `${width}px`;
-        }
-        return `${col.ref.current.offsetWidth}px`;
-      });
-      const gridTemplateColumns = `${gridColumns.join(" ")}`;
-      tableElement.current.style.gridTemplateColumns = gridTemplateColumns;
-    },
-    [activeIndex, columns, minCellWidth]
-  );
-
-  const removeListeners = useCallback(() => {
-    window.removeEventListener("mousemove", mouseMove);
-    window.removeEventListener("mouseup", removeListeners);
-  }, [mouseMove]);
-
-  const mouseUp = useCallback(() => {
-    setActiveIndex(null);
-    removeListeners();
-  }, [setActiveIndex, removeListeners]);
-
-  useEffect(() => {
-    if (activeIndex > -1) {
-      window.addEventListener("mousemove", mouseMove);
-      window.addEventListener("mouseup", mouseUp);
-    }
-    return () => removeListeners();
-  }, [activeIndex, mouseMove, mouseUp, removeListeners]);
-
-  const resetTableCells = () => {
-    tableElement.current.style.gridTemplateColumns = "";
-  };
-
-  return (
-    <Container
-      gridTemplateColumns={gridTemplateColumns}
-      totalColumns={columns?.length}
-      totalRows={tableContent?.length}
-    >
-      {withResetSizeButton ? (
-        <button className="reset-button" onClick={resetTableCells}>
-          <RestartAlt sx={{ fontSize: 18 }} />
-        </button>
-      ) : null}
-      <div className="table-wrapper">
-        <table className="resizeable-table" ref={tableElement}>
-          <thead>
-            <tr>
-              {columns?.map(({ ref, text }, i) => (
-                <th ref={ref} key={i}>
-                  <span>{text}</span>
-                  <div
-                    style={{ height: "50px" /* tableHeight */ }}
-                    onMouseDown={() => mouseDown(i)}
-                    className={`resize-handle ${
-                      activeIndex === i ? "active" : "idle"
-                    }`}
-                  />
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {tableContent.map((row) => (
-              <tr key={row.key}>
-                {row?.columns?.map((column, indexColumn) => (
-                  <td
-                    className={typeof column === "object" ? "noOverflow" : ""}
-                    key={`${row.key}-${indexColumn}`}
-                  >
-                    <span>{column}</span>
-                  </td>
-                ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </Container>
-  );
-};
+import React, { useState, useCallback, useEffect, useRef } from "react";
+import { RestartAlt } from "@mui/icons-material";
+import { Container } from "./styles.js";
+
+const createHeaders = (headers) => {
+  return headers.map((item) => ({
+    text: item,
+    ref: useRef(),
+  }));
+};
+
+/*
+ * Read the blog post here:
+ * https://letsbuildui.dev/articles/resizable-tables-with-react-and-css-grid
+ */
+export const TableResizable = (props) => {
+  const {
+    gridTemplateColumns,
+    headers,
+    minCellWidth,
+    tableContent,
+    withResetSizeButton,
+  } = props;
+  // const [tableHeight, setTableHeight] = useState("auto");
+  const [activeIndex, setActiveIndex] = useState(null);
+  const tableElement = useRef(null);
+  const columns = createHeaders(headers);
+
+  // useEffect(() => {
+  //   setTableHeight(tableElement.current.offsetHeight);
+  // }, []);
+
+  const mouseDown = (index) => setActiveIndex(index);
+
+  const mouseMove = useCallback(
+    (e) => {
+      const gridColumns = columns.map((col, i) => {
+        if (i === activeIndex) {
+          const width = e.clientX - col.ref.current.offsetLeft;
+          if (width >= minCellWidth) return `${width}px`;
+        }
+        return `${col.ref.current.offsetWidth}px`;
+      });
+      const gridTemplateColumns = `${gridColumns.join(" ")}`;
+      tableElement.current.style.gridTemplateColumns = gridTemplateColumns;
+    },
+    [activeIndex, columns, minCellWidth]
+  );
+
+  const removeListeners = useCallback(() => {
+    window.removeEventListener("mousemove", mouseMove);
+    window.removeEventListener("mouseup", removeListeners);
+  }, [mouseMove]);
+
+  const mouseUp = useCallback(() => {
+    setActiveIndex(null);
+    removeListeners();
+  }, [setActiveIndex, removeListeners]);
+
+  useEffect(() => {
+    if (activeIndex > -1) {
+      window.addEventListener("mousemove", mouseMove);
+      window.addEventListener("mouseup", mouseUp);
+    }
+    return () => removeListeners();
+  }, [activeIndex, mouseMove, mouseUp, removeListeners]);
+
+  const resetTableCells = () => {
+    tableElement.current.style.gridTemplateColumns = "";
+  };
+
+  return (
+    <Container
+      gridTemplateColumns={gridTemplateColumns}
+      totalColumns={columns?.length}
+      totalRows={tableContent?.length}
+    >
+      {withResetSizeButton ? (
+        <button className="reset-button" onClick={resetTableCells}>
+          <RestartAlt sx={{ fontSize: 18 }} />
+        </button>
+      ) : null}
+      <div className="table-wrapper">
+        <table className="resizeable-table" ref={tableElement}>
+          <thead>
+            <tr>
+              {columns?.map(({ ref, text }, i) => (
+                <th ref={ref} key={i}>
+                  <span>{text}</span>
+                  <div
+                    style={{ height: "50px" /* tableHeight */ }}
+                    onMouseDown={() => mouseDown(i)}
+                    className={`resize-handle ${
+                      activeIndex === i ? "active" : "idle"
+                    }`}
+                  />
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {tableContent.map((row) => (
+              <tr key={row.key}>
+                {row?.columns?.map((column, indexColumn) => (
+                  <td
+                    className={typeof column === "object" ? "noOverflow" : ""}
+                    key={`${row.key}-${indexColumn}`}
+                  >
+                    <span>{column}</span>
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </Container>
+  );
+};