@cashub/ui-elv 1.0.2 → 1.0.3

package/esm/table/__mock__/data.js

@@ -0,0 +1,530 @@
+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: '',
+  tag: [{
+    name: 'tag1',
+    tag_id: 1001
+  }, {
+    name: 'tag2',
+    tag_id: 1002
+  }, {
+    name: 'tag3',
+    tag_id: 1003
+  }, {
+    name: 'tag4',
+    tag_id: 1004
+  }]
+}, {
+  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: '',
+  tag: [{
+    name: 'tag1',
+    tag_id: 1001
+  }, {
+    name: 'tag2',
+    tag_id: 1002
+  }, {
+    name: 'tag3',
+    tag_id: 1003
+  }]
+}, {
+  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: '',
+  tag: [{
+    name: 'tag1',
+    tag_id: 1001
+  }, {
+    name: 'tag2',
+    tag_id: 1002
+  }]
+}, {
+  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: '',
+  tag: [{
+    name: 'tag1',
+    tag_id: 1001
+  }]
+}, {
+  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: '',
+  tag: [{
+    name: 'tag1',
+    tag_id: 1001
+  }, {
+    name: 'tag2',
+    tag_id: 1002
+  }]
+}, {
+  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: '',
+  tag: [{
+    name: 'tag1',
+    tag_id: 1001
+  }, {
+    name: 'tag2',
+    tag_id: 1002
+  }, {
+    name: 'tag3',
+    tag_id: 1003
+  }, {
+    name: 'tag4',
+    tag_id: 1004
+  }]
+}, {
+  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: '',
+  tag: [{
+    name: 'tag1',
+    tag_id: 1001
+  }, {
+    name: 'tag2',
+    tag_id: 1002
+  }, {
+    name: 'tag3',
+    tag_id: 1003
+  }]
+}, {
+  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: '',
+  tag: [{
+    name: 'tag1',
+    tag_id: 1001
+  }, {
+    name: 'tag2',
+    tag_id: 1002
+  }]
+}, {
+  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: '',
+  tag: [{
+    name: 'tag1',
+    tag_id: 1001
+  }]
+}, {
+  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: '',
+  tag: [{
+    name: 'tag1',
+    tag_id: 1001
+  }, {
+    name: 'tag2',
+    tag_id: 1002
+  }, {
+    name: 'tag3',
+    tag_id: 1003
+  }, {
+    name: 'tag4',
+    tag_id: 1004
+  }]
+}, {
+  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: '',
+  tag: [{
+    name: 'tag1',
+    tag_id: 1001
+  }, {
+    name: 'tag2',
+    tag_id: 1002
+  }, {
+    name: 'tag3',
+    tag_id: 1003
+  }]
+}, {
+  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: '',
+  tag: [{
+    name: 'tag1',
+    tag_id: 1001
+  }, {
+    name: 'tag2',
+    tag_id: 1002
+  }]
+}, {
+  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: '',
+  tag: [{
+    name: 'tag1',
+    tag_id: 1001
+  }]
+}, {
+  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: '',
+  tag: [{
+    name: 'tag1',
+    tag_id: 1001
+  }, {
+    name: 'tag2',
+    tag_id: 1002
+  }, {
+    name: 'tag3',
+    tag_id: 1003
+  }, {
+    name: 'tag4',
+    tag_id: 1004
+  }]
+}, {
+  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: '',
+  tag: [{
+    name: 'tag1',
+    tag_id: 1001
+  }, {
+    name: 'tag2',
+    tag_id: 1002
+  }, {
+    name: 'tag3',
+    tag_id: 1003
+  }]
+}, {
+  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: '',
+  tag: [{
+    name: 'tag1',
+    tag_id: 1001
+  }, {
+    name: 'tag2',
+    tag_id: 1002
+  }]
+}, {
+  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: '',
+  tag: [{
+    name: 'tag1',
+    tag_id: 1001
+  }]
+}, {
+  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: '',
+  tag: [{
+    name: 'tag1',
+    tag_id: 1001
+  }, {
+    name: 'tag2',
+    tag_id: 1002
+  }, {
+    name: 'tag3',
+    tag_id: 1003
+  }, {
+    name: 'tag4',
+    tag_id: 1004
+  }]
+}, {
+  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: '',
+  tag: [{
+    name: 'tag1',
+    tag_id: 1001
+  }, {
+    name: 'tag2',
+    tag_id: 1002
+  }, {
+    name: 'tag3',
+    tag_id: 1003
+  }]
+}, {
+  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: '',
+  tag: [{
+    name: 'tag1',
+    tag_id: 1001
+  }, {
+    name: 'tag2',
+    tag_id: 1002
+  }]
+}, {
+  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: '',
+  tag: [{
+    name: 'tag1',
+    tag_id: 1001
+  }]
+}, {
+  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: '',
+  tag: [{
+    name: 'tag1',
+    tag_id: 1001
+  }, {
+    name: 'tag2',
+    tag_id: 1002
+  }, {
+    name: 'tag3',
+    tag_id: 1003
+  }, {
+    name: 'tag4',
+    tag_id: 1004
+  }]
+}, {
+  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: '',
+  tag: [{
+    name: 'tag1',
+    tag_id: 1001
+  }, {
+    name: 'tag2',
+    tag_id: 1002
+  }, {
+    name: 'tag3',
+    tag_id: 1003
+  }]
+}, {
+  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: '',
+  tag: [{
+    name: 'tag1',
+    tag_id: 1001
+  }, {
+    name: 'tag2',
+    tag_id: 1002
+  }]
+}, {
+  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: '',
+  tag: [{
+    name: 'tag1',
+    tag_id: 1001
+  }]
+}, {
+  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: '',
+  tag: [{
+    name: 'tag1',
+    tag_id: 1001
+  }, {
+    name: 'tag2',
+    tag_id: 1002
+  }, {
+    name: 'tag3',
+    tag_id: 1003
+  }, {
+    name: 'tag4',
+    tag_id: 1004
+  }]
+}, {
+  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: '',
+  tag: [{
+    name: 'tag1',
+    tag_id: 1001
+  }, {
+    name: 'tag2',
+    tag_id: 1002
+  }, {
+    name: 'tag3',
+    tag_id: 1003
+  }]
+}, {
+  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: '',
+  tag: [{
+    name: 'tag1',
+    tag_id: 1001
+  }, {
+    name: 'tag2',
+    tag_id: 1002
+  }]
+}, {
+  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: '',
+  tag: [{
+    name: 'tag1',
+    tag_id: 1001
+  }]
+}, {
+  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: '',
+  tag: [{
+    name: 'tag1',
+    tag_id: 1001
+  }, {
+    name: 'tag2',
+    tag_id: 1002
+  }, {
+    name: 'tag3',
+    tag_id: 1003
+  }, {
+    name: 'tag4',
+    tag_id: 1004
+  }]
+}];
+export default data;

package/esm/table/hooks/index.js

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

package/esm/table/hooks/useCalculateDataRange.js

@@ -0,0 +1,22 @@
+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/esm/table/hooks/useGenerateSort.js

@@ -0,0 +1,32 @@
+import { useCallback } from 'react';
+import TableSort from '../subComponent/TableSort';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 /*#__PURE__*/_jsxs(TableSort, {
+      children: [/*#__PURE__*/_jsx(TableSort.UpIcon, {
+        $active: isActiveAsc
+      }), /*#__PURE__*/_jsx(TableSort.DownIcon, {
+        $active: isActiveDesc
+      })]
+    });
+  }, [sortColumn, sortType]);
+};
+export default useGenerateSort;

package/esm/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/esm/table/subComponent/BaseTableHeadCell.js

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

package/esm/table/subComponent/GridTableFooter.js

@@ -0,0 +1,17 @@
+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: ${_ref => {
+  let {
+    backgroundReverse
+  } = _ref;
+  return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
+}};
+`;
+export default GridTableFooter;

package/esm/table/subComponent/GridTableHeadCell.js

@@ -0,0 +1,13 @@
+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: ${_ref => {
+  let {
+    backgroundReverse
+  } = _ref;
+  return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
+}};
+`;
+export default GridTableHeadCell;