@cashub/ui 0.22.9 → 0.22.10

package/src/table/__mock__/data.js

@@ -1,334 +0,0 @@
-const data = [
-  {
-    logoUrl:
-      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
-    name: 'User A',
-    contact: 'Admin A',
-    contactEmail: 'user-a@mail.com',
-    active: 1,
-    relatedActive: 1,
-    telephone: '0912345678',
-    description: '',
-  },
-  {
-    logoUrl:
-      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
-    name: 'User A',
-    contact: 'Admin A',
-    contactEmail: 'user-a@mail.com',
-    active: 1,
-    relatedActive: 1,
-    telephone: '0912345678',
-    description: '',
-  },
-  {
-    logoUrl:
-      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
-    name: 'User A',
-    contact: 'Admin A',
-    contactEmail: 'user-a@mail.com',
-    active: 1,
-    relatedActive: 1,
-    telephone: '0912345678',
-    description: '',
-  },
-  {
-    logoUrl:
-      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
-    name: 'User A',
-    contact: 'Admin A',
-    contactEmail: 'user-a@mail.com',
-    active: 1,
-    relatedActive: 1,
-    telephone: '0912345678',
-    description: '',
-  },
-  {
-    logoUrl:
-      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
-    name: 'User A',
-    contact: 'Admin A',
-    contactEmail: 'user-a@mail.com',
-    active: 1,
-    relatedActive: 1,
-    telephone: '0912345678',
-    description: '',
-  },
-  {
-    logoUrl:
-      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
-    name: 'User A',
-    contact: 'Admin A',
-    contactEmail: 'user-a@mail.com',
-    active: 1,
-    relatedActive: 1,
-    telephone: '0912345678',
-    description: '',
-  },
-  {
-    logoUrl:
-      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
-    name: 'User A',
-    contact: 'Admin A',
-    contactEmail: 'user-a@mail.com',
-    active: 1,
-    relatedActive: 1,
-    telephone: '0912345678',
-    description: '',
-  },
-  {
-    logoUrl:
-      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
-    name: 'User A',
-    contact: 'Admin A',
-    contactEmail: 'user-a@mail.com',
-    active: 1,
-    relatedActive: 1,
-    telephone: '0912345678',
-    description: '',
-  },
-  {
-    logoUrl:
-      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
-    name: 'User A',
-    contact: 'Admin A',
-    contactEmail: 'user-a@mail.com',
-    active: 1,
-    relatedActive: 1,
-    telephone: '0912345678',
-    description: '',
-  },
-  {
-    logoUrl:
-      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
-    name: 'User A',
-    contact: 'Admin A',
-    contactEmail: 'user-a@mail.com',
-    active: 1,
-    relatedActive: 1,
-    telephone: '0912345678',
-    description: '',
-  },
-  {
-    logoUrl:
-      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
-    name: 'User A',
-    contact: 'Admin A',
-    contactEmail: 'user-a@mail.com',
-    active: 1,
-    relatedActive: 1,
-    telephone: '0912345678',
-    description: '',
-  },
-  {
-    logoUrl:
-      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
-    name: 'User A',
-    contact: 'Admin A',
-    contactEmail: 'user-a@mail.com',
-    active: 1,
-    relatedActive: 1,
-    telephone: '0912345678',
-    description: '',
-  },
-  {
-    logoUrl:
-      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
-    name: 'User A',
-    contact: 'Admin A',
-    contactEmail: 'user-a@mail.com',
-    active: 1,
-    relatedActive: 1,
-    telephone: '0912345678',
-    description: '',
-  },
-  {
-    logoUrl:
-      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
-    name: 'User A',
-    contact: 'Admin A',
-    contactEmail: 'user-a@mail.com',
-    active: 1,
-    relatedActive: 1,
-    telephone: '0912345678',
-    description: '',
-  },
-  {
-    logoUrl:
-      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
-    name: 'User A',
-    contact: 'Admin A',
-    contactEmail: 'user-a@mail.com',
-    active: 1,
-    relatedActive: 1,
-    telephone: '0912345678',
-    description: '',
-  },
-  {
-    logoUrl:
-      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
-    name: 'User A',
-    contact: 'Admin A',
-    contactEmail: 'user-a@mail.com',
-    active: 1,
-    relatedActive: 1,
-    telephone: '0912345678',
-    description: '',
-  },
-  {
-    logoUrl:
-      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
-    name: 'User A',
-    contact: 'Admin A',
-    contactEmail: 'user-a@mail.com',
-    active: 1,
-    relatedActive: 1,
-    telephone: '0912345678',
-    description: '',
-  },
-  {
-    logoUrl:
-      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
-    name: 'User A',
-    contact: 'Admin A',
-    contactEmail: 'user-a@mail.com',
-    active: 1,
-    relatedActive: 1,
-    telephone: '0912345678',
-    description: '',
-  },
-  {
-    logoUrl:
-      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
-    name: 'User A',
-    contact: 'Admin A',
-    contactEmail: 'user-a@mail.com',
-    active: 1,
-    relatedActive: 1,
-    telephone: '0912345678',
-    description: '',
-  },
-  {
-    logoUrl:
-      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
-    name: 'User A',
-    contact: 'Admin A',
-    contactEmail: 'user-a@mail.com',
-    active: 1,
-    relatedActive: 1,
-    telephone: '0912345678',
-    description: '',
-  },
-  {
-    logoUrl:
-      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
-    name: 'User A',
-    contact: 'Admin A',
-    contactEmail: 'user-a@mail.com',
-    active: 1,
-    relatedActive: 1,
-    telephone: '0912345678',
-    description: '',
-  },
-  {
-    logoUrl:
-      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
-    name: 'User A',
-    contact: 'Admin A',
-    contactEmail: 'user-a@mail.com',
-    active: 1,
-    relatedActive: 1,
-    telephone: '0912345678',
-    description: '',
-  },
-  {
-    logoUrl:
-      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
-    name: 'User A',
-    contact: 'Admin A',
-    contactEmail: 'user-a@mail.com',
-    active: 1,
-    relatedActive: 1,
-    telephone: '0912345678',
-    description: '',
-  },
-  {
-    logoUrl:
-      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
-    name: 'User A',
-    contact: 'Admin A',
-    contactEmail: 'user-a@mail.com',
-    active: 1,
-    relatedActive: 1,
-    telephone: '0912345678',
-    description: '',
-  },
-  {
-    logoUrl:
-      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
-    name: 'User A',
-    contact: 'Admin A',
-    contactEmail: 'user-a@mail.com',
-    active: 1,
-    relatedActive: 1,
-    telephone: '0912345678',
-    description: '',
-  },
-  {
-    logoUrl:
-      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
-    name: 'User A',
-    contact: 'Admin A',
-    contactEmail: 'user-a@mail.com',
-    active: 1,
-    relatedActive: 1,
-    telephone: '0912345678',
-    description: '',
-  },
-  {
-    logoUrl:
-      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
-    name: 'User A',
-    contact: 'Admin A',
-    contactEmail: 'user-a@mail.com',
-    active: 1,
-    relatedActive: 1,
-    telephone: '0912345678',
-    description: '',
-  },
-  {
-    logoUrl:
-      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
-    name: 'User A',
-    contact: 'Admin A',
-    contactEmail: 'user-a@mail.com',
-    active: 1,
-    relatedActive: 1,
-    telephone: '0912345678',
-    description: '',
-  },
-  {
-    logoUrl:
-      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
-    name: 'User A',
-    contact: 'Admin A',
-    contactEmail: 'user-a@mail.com',
-    active: 1,
-    relatedActive: 1,
-    telephone: '0912345678',
-    description: '',
-  },
-  {
-    logoUrl:
-      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
-    name: 'User A',
-    contact: 'Admin A',
-    contactEmail: 'user-a@mail.com',
-    active: 1,
-    relatedActive: 1,
-    telephone: '0912345678',
-    description: '',
-  },
-];
-
-export default data;

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

@@ -1,129 +0,0 @@
-import { useState, useEffect } from 'react';
-import GridTable from '../GridTable';
-import columns from '../__mock__/columns';
-import data from '../__mock__/data';
-
-const metadata = {
-  title: 'Table / GridTable',
-  component: GridTable,
-  argTypes: {
-    columns: {
-      description: '',
-    },
-    data: {
-      description: '',
-    },
-    currentPage: {
-      description: '',
-    },
-    limit: {
-      description: '',
-    },
-    total: {
-      description: '',
-    },
-    onPageChange: {
-      description: '',
-    },
-    onLimitChange: {
-      description: '',
-    },
-    sortColumn: {
-      description: '',
-    },
-    sortType: {
-      description: '',
-    },
-    onSortChange: {
-      description: '',
-    },
-    backgroundReverse: {
-      description: '',
-    },
-    translation: {
-      description: '',
-    },
-  },
-};
-
-const Default = (args) => {
-  const { onPageChange, onLimitChange, onSortChange, ...restArgs } = 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 (
-    <GridTable
-      {...restArgs}
-      columns={columns}
-      data={currentListData}
-      currentPage={page}
-      limit={limit}
-      onPageChange={handlePageChange}
-      onLimitChange={handleLimitChange}
-      onSortChange={handleSortChange}
-      sortColumn={sort_Column}
-      sortType={sort_Type}
-    />
-  );
-};
-Default.args = {
-  currentPage: 1,
-  limit: 10,
-  total: 30,
-  sortColumn: 'name',
-  sortType: 'asc',
-  backgroundReverse: false,
-  translation: {
-    info: '顯示 _START_ 到 _END_ 筆, 總共 _TOTAL_ 筆',
-    empty: '列表中無可用數據',
-  },
-};
-
-export default metadata;
-export { Default };

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

@@ -1,27 +0,0 @@
-import ImageBox from '../ImageBox';
-import Picture from '../../assets/images/default-user.jpg';
-
-const metadata = {
-  title: 'Table/ImageBox',
-  component: ImageBox,
-  decorators: [
-    (Story) => (
-      <div style={{ color: '#ffffff' }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-const Template = (args) => {
-  return <ImageBox {...args} />;
-};
-
-const Default = Template.bind({});
-Default.args = {
-  text: 'avatar',
-  image: [`${Picture}`],
-};
-
-export default metadata;
-export { Default };

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

@@ -1,52 +0,0 @@
-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__/Table.stories.js

@@ -1,138 +0,0 @@
-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,
-  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',
-    },
-  },
-};
-
-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',
-  backgroundReverse: false,
-  centerFooter: false,
-  translation: {
-    info: '顯示 _START_ 到 _END_ 筆, 總共 _TOTAL_ 筆',
-    empty: '列表中無可用數據',
-  },
-};
-
-export default metadata;
-export { Default };

package/src/table/hooks/index.js

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

package/src/table/hooks/useCalculateDataRange.js

@@ -1,26 +0,0 @@
-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;