@cashub/ui 0.48.28 → 0.49.0-beta.0

package/src/table/__stories__/InfiniteGridTable.stories.js

@@ -0,0 +1,120 @@
+import { useState, useEffect } from 'react';
+import InfiniteGridTable from '../InfiniteGridTable';
+import columns from '../__mock__/columns';
+import data from '../__mock__/data';
+
+const largeData = data.concat(data, data, data, data);
+const metadata = {
+  title: 'Table / InfiniteGridTable',
+  component: InfiniteGridTable,
+  argTypes: {
+    columns: {
+      description: '',
+    },
+    data: {
+      description: '',
+    },
+    sortColumn: {
+      description: '',
+    },
+    sortType: {
+      description: '',
+    },
+    onSortChange: {
+      description: '',
+    },
+    backgroundReverse: {
+      description: '',
+    },
+    translation: {
+      description: '',
+    },
+  },
+};
+
+const Default = (args) => {
+  const { onSortChange, ...restArgs } = args;
+  const [page, setPage] = useState(1);
+  const [limit] = useState(largeData.length);
+  const [currentListData, setCurrentListData] = useState([]);
+  const [sort_Column, setSort_Column] = useState(args.sortColumn);
+  const [sort_Type, setSort_Type] = useState(args.sortType);
+  const [containerHeight, setContainerHeight] = useState(0);
+  const [scrollTop, setScrollTop] = useState(0);
+
+  const handleSortChange = (columnName) => {
+    let sortType = null;
+    if (columnName === sort_Column) {
+      sortType = sort_Type === 'asc' ? 'desc' : 'asc';
+    }
+    setPage(1);
+    setSort_Column(columnName);
+    setSort_Type(sortType ? sortType : sort_Type);
+    onSortChange(columnName);
+  };
+
+  useEffect(() => {
+    setSort_Column(args.sortColumn);
+    setSort_Type(args.sortType);
+  }, [args.sortColumn, args.sortType]);
+
+  useEffect(() => {
+    const start = (page - 1) * limit;
+    const end = page * limit;
+    const tmpListData = largeData.slice(start, end);
+
+    setCurrentListData((previous) => {
+      return [...previous, ...tmpListData];
+    });
+  }, [page, limit]);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setContainerHeight(window.innerHeight);
+    };
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrollTop(window.scrollY);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  return (
+    <InfiniteGridTable
+      {...restArgs}
+      containerHeight={containerHeight}
+      scrollTop={scrollTop}
+      columns={columns}
+      data={currentListData}
+      onSortChange={handleSortChange}
+      sortColumn={sort_Column}
+      sortType={sort_Type}
+    />
+  );
+};
+Default.args = {
+  sortColumn: 'name',
+  sortType: 'asc',
+  backgroundReverse: false,
+  translation: {
+    info: '顯示 _START_ 到 _END_ 筆, 總共 _TOTAL_ 筆',
+    empty: '列表中無可用數據',
+  },
+};
+
+export default metadata;
+export { Default };

package/src/table/__stories__/PermissionTable.stories.js

@@ -0,0 +1,52 @@
+import PermissionTable from '../PermissionTable';
+
+const metadata = {
+  title: 'Table/PermissionTable',
+  component: PermissionTable,
+  // todo: adjust subcomponents's props on docs page
+  subcomponents: {
+    'PermissionTable.TH': PermissionTable.TH,
+    'PermissionTable.TD': PermissionTable.TD,
+  },
+};
+
+const Default = () => {
+  const tableLabel = ['', 'Cross Level', 'Enterprise', 'Merchant', 'API'];
+  const tableContent = [
+    'Only Enterprise',
+    'content',
+    'content',
+    'content',
+    'content',
+  ];
+
+  return (
+    <PermissionTable>
+      <thead>
+        <tr>
+          {tableLabel.map((item) => {
+            return (
+              <PermissionTable.TH clickable alignCenter>
+                {item}
+              </PermissionTable.TH>
+            );
+          })}
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          {tableContent.map((item) => {
+            return (
+              <PermissionTable.TD clickable alignCenter bold>
+                {item}
+              </PermissionTable.TD>
+            );
+          })}
+        </tr>
+      </tbody>
+    </PermissionTable>
+  );
+};
+
+export default metadata;
+export { Default };

package/src/table/__stories__/SimpleGridTable.stories.js

@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import SimpleGridTable from '../SimpleGridTable';
+
+const metadata = {
+  title: 'Table / SimpleGridTable',
+  component: SimpleGridTable,
+  argTypes: {
+    columns: {
+      description: '',
+    },
+    data: {
+      description: '',
+    },
+    backgroundReverse: {
+      description: '',
+    },
+    translation: {
+      description: '',
+    },
+  },
+};
+
+const Template = (args) => {
+  const [currentListData] = useState([
+    { name: 'CasHUB App', usage: '120.6 MB' },
+    { name: 'CasHUB Service', usage: '100 MB' },
+    { name: 'Remote', usage: '40 MB' },
+    { name: 'CCore', usage: '200 MB' },
+  ]);
+
+  return (
+    <SimpleGridTable
+      {...args}
+      columns={[
+        {
+          title: 'Application Name',
+          fieldName: 'name',
+        },
+        {
+          title: 'Data Usage',
+          fieldName: 'usage',
+        },
+      ]}
+      data={currentListData}
+    />
+  );
+};
+
+const Default = Template.bind({});
+Default.args = {
+  backgroundReverse: false,
+  translation: {
+    empty: '列表中無可用數據',
+  },
+};
+
+export default metadata;
+export { Default };

package/src/table/__stories__/Table.stories.js

@@ -0,0 +1,158 @@
+import { fn } from '@storybook/test';
+import { useState, useEffect } from 'react';
+import Table from '../Table';
+import columns from '../__mock__/columns';
+import data from '../__mock__/data';
+
+const metadata = {
+  title: 'Table/Table',
+  component: Table,
+  args: { beforeCreateRow: fn() },
+  argTypes: {
+    columns: {
+      description: 'Table columns,it is a array',
+    },
+    data: {
+      description: 'Table data,it is a array',
+    },
+    limit: {
+      description: 'One page can shows count of table rows',
+    },
+    total: {
+      description: 'Total table rows',
+    },
+    sortColumn: {
+      description: "Column's name by sorting",
+      control: 'string',
+    },
+    sortType: {
+      description: 'Sort rule',
+      control: 'radio',
+      options: ['asc', 'desc'],
+    },
+    select: {
+      description: 'Selected type and matcher,it is a object',
+    },
+    selected: {
+      description: 'Current selected option',
+    },
+    onPageChange: {
+      description: 'A callback that return selected page',
+    },
+    onLimitChange: {
+      description: 'A callback that return page and lmit count',
+    },
+    onSortChange: {
+      description: 'A callback that return page,sortColumn and sortType ',
+    },
+    beforeCreateRow: {
+      description: 'A callback that return config object',
+    },
+    onRowClick: {
+      description: 'A callback that return e.target',
+    },
+    enableRowDrag: {
+      description:
+        "Enable drag-and-drop feature on row. The row data will be set on the 'fromRow' key when drag starts.",
+    },
+    onRowDragEnter: {
+      description: 'A callback trigger on drag enter row and return row data',
+    },
+    onRowDragLeave: {
+      description: 'A callback trigger on drag leave row and return row data',
+    },
+    onRowDragOver: {
+      description: 'A callback trigger on drag over row and return row data',
+    },
+    onRowDrop: {
+      description: 'A callback trigger on drop on row and return row data',
+    },
+  },
+};
+
+const Template = (args) => {
+  const { onPageChange, onLimitChange, onSortChange } = args;
+  const [page, setPage] = useState(args.currentPage);
+  const [limit, setLimit] = useState(args.limit);
+  const [currentListData, setCurrentListData] = useState(data);
+  const [sort_Column, setSort_Column] = useState(args.sortColumn);
+  const [sort_Type, setSort_Type] = useState(args.sortType);
+
+  const handlePageChange = (page) => {
+    setPage(page);
+    onPageChange(page);
+  };
+
+  const handleLimitChange = (limit) => {
+    setPage(1);
+    setLimit(limit);
+    onLimitChange(limit);
+  };
+
+  const handleSortChange = (columnName) => {
+    let sortType = null;
+    if (columnName === sort_Column) {
+      sortType = sort_Type === 'asc' ? 'desc' : 'asc';
+    }
+    setPage(1);
+    setSort_Column(columnName);
+    setSort_Type(sortType ? sortType : sort_Type);
+    onSortChange(columnName);
+  };
+
+  useEffect(() => {
+    const start = (page - 1) * limit;
+    const end = page * limit;
+    const tmpListData = data.slice(start, end);
+
+    setCurrentListData(tmpListData);
+  }, [page, limit]);
+
+  useEffect(() => {
+    setPage(args.currentPage);
+  }, [args.currentPage]);
+
+  useEffect(() => {
+    setLimit(args.limit);
+  }, [args.limit]);
+
+  useEffect(() => {
+    setSort_Column(args.sortColumn);
+    setSort_Type(args.sortType);
+  }, [args.sortColumn, args.sortType]);
+
+  return (
+    <Table
+      {...args}
+      columns={columns}
+      data={currentListData}
+      currentPage={page}
+      limit={limit}
+      onPageChange={handlePageChange}
+      onLimitChange={handleLimitChange}
+      onSortChange={handleSortChange}
+      sortColumn={sort_Column}
+      sortType={sort_Type}
+    />
+  );
+};
+
+const Default = Template.bind({});
+Default.args = {
+  currentPage: 1,
+  limit: 10,
+  total: 30,
+  sortColumn: 'name',
+  sortType: 'asc',
+  enableRowDrag: false,
+  backgroundReverse: false,
+  centerFooter: false,
+  translation: {
+    info: '顯示 _START_ 到 _END_ 筆, 總共 _TOTAL_ 筆',
+    empty: '列表中無可用數據',
+  },
+  showPager: true,
+};
+
+export default metadata;
+export { Default };

package/src/table/hooks/index.js

@@ -0,0 +1,2 @@
+export { default as useCalculateDataRange } from './useCalculateDataRange';
+export { default as useGenerateSort } from './useGenerateSort';

package/src/table/hooks/useCalculateDataRange.js

@@ -0,0 +1,26 @@
+import { useState, useEffect } from 'react';
+
+const useCalculateDataRange = (page, limit, total) => {
+  const [start, setStart] = useState(0);
+  const [end, setEnd] = useState(0);
+
+  useEffect(() => {
+    let start = 0;
+    let end = page * limit;
+
+    if (total !== 0) {
+      start = (page - 1) * limit + 1;
+    }
+
+    if (end > total) {
+      end = total;
+    }
+
+    setStart(start);
+    setEnd(end);
+  }, [page, limit, total]);
+
+  return { start, end };
+};
+
+export default useCalculateDataRange;

package/src/table/hooks/useGenerateSort.js

@@ -0,0 +1,37 @@
+import { useCallback } from 'react';
+import TableSort from '../subComponent/TableSort';
+
+const useGenerateSort = (sortColumn, sortType) => {
+  return useCallback(
+    (fieldName) => {
+      let isActiveAsc = false;
+      let isActiveDesc = false;
+      if (Array.isArray(sortColumn) && Array.isArray(sortType)) {
+        const sortColumnIndex = sortColumn.indexOf(fieldName);
+        if (sortColumnIndex !== -1) {
+          if (sortType[sortColumnIndex] === 'asc') {
+            isActiveAsc = true;
+          }
+
+          if (sortType[sortColumnIndex] === 'desc') {
+            isActiveDesc = true;
+          }
+        }
+      } else if (fieldName === sortColumn && sortType === 'asc') {
+        isActiveAsc = true;
+      } else if (fieldName === sortColumn && sortType === 'desc') {
+        isActiveDesc = true;
+      }
+
+      return (
+        <TableSort>
+          <TableSort.UpIcon $active={isActiveAsc} />
+          <TableSort.DownIcon $active={isActiveDesc} />
+        </TableSort>
+      );
+    },
+    [sortColumn, sortType],
+  );
+};
+
+export default useGenerateSort;

package/src/table/index.js

@@ -0,0 +1,6 @@
+export { default as GridTable } from './GridTable';
+export { default as InfiniteGridTable } from './InfiniteGridTable';
+export { default as Table } from './Table';
+export { default as PermissionTable } from './PermissionTable';
+export { default as SimpleGridTable } from './SimpleGridTable';
+export { default as ImageBox } from './ImageBox';

package/src/table/subComponent/BaseTableHeadCell.js

@@ -0,0 +1,48 @@
+import styled, { css } from 'styled-components';
+
+const BaseTableHeadCell = styled.th`
+  position: relative;
+  font-size: var(--font-body1);
+  font-weight: var(--font-bold);
+  width: ${({ width }) => width || 'auto'};
+  padding: var(--spacing-s) var(--spacing-xs);
+
+  > div {
+    display: flex;
+
+    > span {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+
+  ${({ sortable }) => {
+    return (
+      sortable &&
+      css`
+        cursor: pointer;
+
+        > div > span {
+          max-width: calc(100% - 1rem);
+          padding-right: var(--spacing-xs);
+        }
+      `
+    );
+  }}
+
+  ${({ align }) => {
+    switch (align) {
+      case 'center':
+        return css`
+          > div {
+            justify-content: center;
+          }
+        `;
+      default:
+        break;
+    }
+  }}
+`;
+
+export default BaseTableHeadCell;

package/src/table/subComponent/GridTableFooter.js

@@ -0,0 +1,18 @@
+import TableFooter from './TableFooter';
+import styled from 'styled-components';
+
+const GridTableFooter = styled(TableFooter)`
+  position: sticky;
+  bottom: 0;
+  height: 48px;
+  padding: 0 var(--spacing-xs);
+  border-top: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
+  background: ${({ backgroundReverse }) => {
+    return backgroundReverse
+      ? 'var(--color-background1)'
+      : 'var(--color-background2)';
+  }};
+`;
+
+export default GridTableFooter;

package/src/table/subComponent/GridTableHeadCell.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import BaseTableHeadCell from './BaseTableHeadCell';
+
+const GridTableHeadCell = styled(BaseTableHeadCell)`
+  border-top: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
+  background: ${({ backgroundReverse }) => {
+    return backgroundReverse
+      ? 'var(--color-background1)'
+      : 'var(--color-background2)';
+  }};
+`;
+
+export default GridTableHeadCell;

package/src/table/subComponent/Resizer.js

@@ -0,0 +1,81 @@
+import { useState, useCallback, useEffect } from 'react';
+import styled from 'styled-components';
+
+const Resizer = ({ index, onResize }) => {
+  const [parentNode, setParentNode] = useState(null);
+
+  const handleMouseMove = useCallback(
+    (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+
+      let targetWidth = event.clientX - parentNode.getBoundingClientRect().left;
+      if (targetWidth < 1) {
+        targetWidth = 1;
+      }
+      parentNode.style.width = `${targetWidth}px`;
+
+      if (typeof onResize === 'function') {
+        onResize(index, targetWidth);
+      }
+    },
+    [parentNode, index, onResize],
+  );
+
+  const handleMouseUp = useCallback(
+    (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+      setParentNode(null);
+    },
+    [handleMouseMove],
+  );
+
+  const initResize = ({ target }) => {
+    setParentNode(target.parentNode);
+  };
+
+  useEffect(() => {
+    if (parentNode) {
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+    }
+
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [parentNode, handleMouseMove, handleMouseUp]);
+
+  return (
+    <ColResize
+      onClick={(event) => {
+        event.stopPropagation();
+      }}
+      onMouseDown={initResize}
+    />
+  );
+};
+
+const ColResize = styled.div`
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1;
+  height: 100%;
+
+  &::after {
+    content: '';
+    width: 8px;
+    margin-right: -4px;
+    cursor: col-resize;
+  }
+
+  &:hover::after {
+    background: var(--color-hover);
+  }
+`;
+
+export default Resizer;

package/src/table/subComponent/TableFooter.js

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+const TableFooter = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  ${({ center }) =>
+    center &&
+    `
+    flex-direction: column;
+    justify-content: center;
+  `}
+
+  ${({ enableRowDrag }) =>
+    enableRowDrag && 'padding-right: calc(1.5rem + 0.5rem);'}
+`;
+
+export default TableFooter;

package/src/table/subComponent/TableFooterInfo.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+const TableFooterInfo = styled.p`
+  font-size: var(--font-body2);
+  color: var(--font-on-background);
+`;
+
+export default TableFooterInfo;

package/src/table/subComponent/TableFooterPager.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+const TableFooterPager = styled.div`
+  display: flex;
+
+  ${({ center }) => {
+    if (center) {
+      return `
+        flex-wrap: wrap;
+        justify-content: center;
+
+        > * {
+          margin-top: var(--spacing-xs);
+        }
+      `;
+    }
+
+    return `
+      > :last-child {
+        margin-left: var(--spacing-xs);
+      }
+    `;
+  }}
+`;
+
+export default TableFooterPager;

package/src/table/subComponent/TableHeadCell.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import BaseTableHeadCell from './BaseTableHeadCell';
+
+const TableHeadCell = styled(BaseTableHeadCell)`
+  &:first-child {
+    padding-left: var(--spacing);
+  }
+
+  &:last-child {
+    padding-right: var(--spacing);
+  }
+`;
+
+export default TableHeadCell;