@cashub/ui 0.22.7 → 0.22.9

package/src/table/Table.js

@@ -0,0 +1,441 @@
+import { useCallback, useMemo, useRef } from 'react';
+import styled, { css } from 'styled-components';
+import media from '../styles/mixin/media';
+import { useCalculateDataRange, useGenerateSort } from './hooks';
+import TH from './subComponent/TableHeadCell';
+import TableFooter from './subComponent/TableFooter';
+import TableFooterInfo from './subComponent/TableFooterInfo';
+import TableFooterPager from './subComponent/TableFooterPager';
+import Paginate from '../paginate/Paginate';
+import Select from '../select/Select';
+import Popover from '../popover/Popover';
+
+const Table = ({
+  columns,
+  data,
+  currentPage,
+  limit,
+  total,
+  onPageChange,
+  onLimitChange,
+  sortColumn,
+  sortType,
+  onSortChange,
+  select,
+  selected,
+  onRowClick,
+  backgroundReverse,
+  translation,
+  beforeCreateRow,
+  popoverContainer,
+  centerFooter = false,
+}) => {
+  const tableRef = useRef(null);
+  const { start, end } = useCalculateDataRange(currentPage, limit, total);
+
+  const texts = useMemo(() => {
+    const defaultTexts = {
+      info: 'Showing _START_ to _END_ of _TOTAL_ entries',
+      empty: 'No data available in table',
+    };
+
+    return { ...defaultTexts, ...translation };
+  }, [translation]);
+
+  const handleSortChange = useCallback(
+    (columnName) => {
+      if (onSortChange) {
+        onSortChange(columnName);
+      }
+    },
+    [onSortChange],
+  );
+
+  const handleRowClick = useCallback(
+    (event, rowData) => {
+      if (onRowClick) {
+        onRowClick(event, rowData);
+      }
+    },
+    [onRowClick],
+  );
+
+  const showFullValue = useCallback(
+    (event, customPop) => {
+      let { id } = event.target;
+      if (!id) {
+        ({ id } = event.currentTarget);
+        event.target.id = id;
+      }
+
+      const { offsetWidth, scrollWidth, innerText } = event.target;
+      if (scrollWidth >= offsetWidth && innerText) {
+        event.stopPropagation();
+        Popover({
+          id,
+          container: popoverContainer,
+          target: event.target,
+          content: customPop ? customPop : innerText,
+          boundary: tableRef.current,
+        });
+      }
+    },
+    [popoverContainer],
+  );
+
+  // generate sort icon area
+  const generateSort = useGenerateSort(sortColumn, sortType);
+
+  const tableHeads = useMemo(() => {
+    return columns.map((column, index) => {
+      const { title, fieldName, width, sortable, align } = column;
+
+      return (
+        <TH
+          width={width}
+          key={`TH${index}`}
+          sortable={sortable}
+          onClick={() => {
+            sortable && handleSortChange(fieldName);
+          }}
+          align={align}
+        >
+          <div>
+            <span id={fieldName} onClick={showFullValue}>
+              {title}
+            </span>
+
+            {sortable && generateSort(fieldName)}
+          </div>
+        </TH>
+      );
+    });
+  }, [columns, handleSortChange, generateSort, showFullValue]);
+
+  const tableRows = useMemo(() => {
+    if (data.length === 0) {
+      return null;
+    }
+
+    const { matcher, type } = select || {};
+    return data.map((row, rowIndex) => {
+      let active = false;
+      let rowConfig = {};
+
+      if (beforeCreateRow) {
+        rowConfig = beforeCreateRow(row) || {};
+      }
+
+      // row data cell
+      const tds = columns.map((column, columnIndex) => {
+        const { title, fieldName, render, custom, customPop, ...props } =
+          column;
+        const key = rowIndex + columnIndex.toString();
+        let value = row[fieldName];
+
+        // 如果有matcher，比對當前 column 的 fieldName 是不是等於 matcher
+        if (matcher && fieldName === matcher) {
+          if (type === 'single' && selected === value) {
+            active = true;
+          }
+          if (type === 'multiple' && selected.includes(value)) {
+            active = true;
+          }
+        }
+
+        // convert to an empty string
+        if (value === null || value === undefined) {
+          value = '';
+        }
+
+        let isCustom = false;
+        let renderedData = null;
+        if (custom && render) {
+          // call render function to get custom data(fully)
+          isCustom = true;
+          renderedData = render(row);
+        } else {
+          // call render function to get custom data(part)
+          renderedData = (
+            <span id={key} onClick={(event) => showFullValue(event, customPop)}>
+              {render ? render(value, row) : String(value)}
+            </span>
+          );
+        }
+
+        return (
+          <TableDataCell
+            key={columnIndex}
+            data-label={title}
+            backgroundReverse={backgroundReverse}
+            border={rowConfig.border}
+            custom={isCustom}
+            {...props}
+          >
+            {renderedData}
+          </TableDataCell>
+        );
+      });
+
+      return (
+        <BodyTR
+          key={rowIndex}
+          clickable={onRowClick}
+          active={active}
+          primary={rowConfig.primary}
+          border={rowConfig.border}
+          backgroundReverse={backgroundReverse}
+          onClick={(event) => {
+            handleRowClick(event, row);
+          }}
+        >
+          {tds}
+        </BodyTR>
+      );
+    });
+  }, [
+    backgroundReverse,
+    beforeCreateRow,
+    columns,
+    data,
+    handleRowClick,
+    onRowClick,
+    select,
+    selected,
+    showFullValue,
+  ]);
+
+  const generateEmptyMessage = useCallback(() => {
+    return (
+      <BodyTR noData backgroundReverse={backgroundReverse}>
+        <TableDataCell
+          noData
+          center
+          colSpan={columns.length}
+          backgroundReverse={backgroundReverse}
+        >
+          {texts.empty}
+        </TableDataCell>
+      </BodyTR>
+    );
+  }, [backgroundReverse, columns, texts]);
+
+  return (
+    <>
+      <ResponsiveTable ref={tableRef}>
+        <TableHead>
+          <tr>{tableHeads}</tr>
+        </TableHead>
+        <tbody>{tableRows || generateEmptyMessage()}</tbody>
+      </ResponsiveTable>
+      <TableFooter center={centerFooter}>
+        <TableFooterInfo>
+          {texts.info
+            .replace('_START_', start)
+            .replace('_END_', end)
+            .replace('_TOTAL_', total)}
+        </TableFooterInfo>
+        <TableFooterPager center={centerFooter}>
+          <Paginate
+            currentPage={currentPage}
+            totalCount={total}
+            pageSize={limit}
+            onPageChange={onPageChange}
+          />
+          {/* fix: page limit style */}
+          <Select
+            fill
+            fillReverse={backgroundReverse}
+            allowSearch={false}
+            options={[
+              { id: 10, text: '10' },
+              { id: 20, text: '20' },
+              { id: 30, text: '30' },
+              { id: 40, text: '40' },
+              { id: 50, text: '50' },
+            ]}
+            selected={limit}
+            onSelect={onLimitChange}
+          />
+        </TableFooterPager>
+      </TableFooter>
+    </>
+  );
+};
+
+const ResponsiveTable = styled.table`
+  width: 100%;
+  border-collapse: separate;
+  margin-top: calc(var(--spacing-s) * -1);
+  border-spacing: 0 var(--spacing-s);
+  color: var(--font-on-background);
+  table-layout: fixed;
+`;
+
+const TableHead = styled.thead`
+  ${media.mobile`
+    display: none;
+  `}
+`;
+
+const BodyTR = styled.tr`
+  &:hover {
+    > td {
+      border-color: var(--color-primary);
+      border-width: var(--border-width);
+    }
+  }
+
+  ${({ active, primary }) =>
+    (active || primary) &&
+    css`
+      > td {
+        background: var(--color-background3);
+      }
+    `}
+
+  ${({ clickable }) => clickable && 'pointer: cursor;'}
+    
+  ${media.mobile`
+    overflow: hidden;
+    position: relative;
+    transition: .3s;
+    display: block;
+    margin-bottom: 0.75rem;
+    padding: var(--spacing-xs) var(--spacing-s);
+    background: var(
+      --color-background${({ backgroundReverse }) => {
+        return backgroundReverse ? 1 : 2;
+      }}
+    );
+    border-radius: var(--border-radius);
+    transition: .3s;
+    border: 1px solid transparent;
+
+    &:hover {
+      border: var(--border-width) solid var(--color-primary);
+    }
+
+    ${({ active, primary }) =>
+      (active || primary) &&
+      css`
+        background: var(--color-background3);
+      `}
+
+    ${({ border }) =>
+      border &&
+      css`
+        border-color: var(--font-on-background);
+        border-width: 3px;
+      `}
+
+    ${({ noData }) =>
+      noData &&
+      css`
+        height: 168px;
+
+        > td {
+          &:first-child:before {
+            display: none;
+          }
+        }
+      `}
+  `}
+`;
+
+const TableDataCell = styled.td.attrs(({ border }) => {
+  return {
+    borderWidth: border ? '3px' : 'var(--border-width)',
+    borderColor: border ? 'var(--font-on-background)' : 'transparent',
+  };
+})`
+  height: 48px;
+  background: ${({ backgroundReverse }) => {
+    return backgroundReverse
+      ? 'var(--color-background1)'
+      : 'var(--color-background2)';
+  }};
+  padding: 0 var(--spacing-xs);
+  max-width: 0px;
+  text-align: ${({ center }) => (center ? 'center' : 'left')};
+  vertical-align: middle;
+  transition: border-color 0.3s;
+
+  ${({ borderWidth, borderColor }) => {
+    return css`
+      border-top: ${borderWidth} solid ${borderColor};
+      border-bottom: ${borderWidth} solid ${borderColor};
+      &:first-child {
+        border-left: ${borderWidth} solid ${borderColor};
+        border-top-left-radius: var(--border-radius-l);
+        border-bottom-left-radius: var(--border-radius-l);
+        padding-left: var(--spacing);
+      }
+
+      &:last-child {
+        border-right: ${borderWidth} solid ${borderColor};
+        border-top-right-radius: var(--border-radius-l);
+        border-bottom-right-radius: var(--border-radius-l);
+        padding-right: var(--spacing);
+      }
+    `;
+  }}
+  > span {
+    display: inline-block;
+    width: 100%;
+    overflow: hidden;
+    white-space: pre;
+    text-overflow: ellipsis;
+  }
+
+  ${({ noData }) =>
+    noData &&
+    css`
+      padding: 20px 0;
+    `}
+
+  ${media.mobile`
+    display: flex;
+    height: auto;
+    margin-bottom: var(--spacing-xs);
+    background: transparent !important;
+    border: none !important;
+    min-width: 100%;
+    
+    &:first-child {
+      padding: var(--spacing-xs) 0 0 var(--spacing-xs);
+    }
+
+    &:last-child {
+      padding-right: var(--spacing-xs);
+    }
+
+    &:before {
+      content: attr(data-label) ": ";
+      font-weight: bold;
+      padding-right:  var(--spacing-xs);
+    }
+
+    > span {
+      flex: 1;
+    }
+    
+    ${({ custom }) =>
+      custom &&
+      css`
+        &:last-child:before {
+          display: none;
+        }
+
+        &:last-child {
+          padding: 0;
+          position: absolute;
+          right: 0.75rem;
+          top: var(--spacing-xs);
+          justify-content: flex-end;
+        }
+      `}
+  `}
+`;
+
+export default Table;

package/src/table/__mock__/columns.js

@@ -0,0 +1,28 @@
+const columns = [
+  {
+    title: 'Name',
+    fieldName: 'name',
+    sortable: true,
+    width: '400px',
+  },
+  {
+    title: 'Contact Name',
+    fieldName: 'contact',
+    sortable: true,
+    width: '400px',
+  },
+  {
+    title: 'Contact Email',
+    fieldName: 'contactEmail',
+    sortable: false,
+    width: '500px',
+  },
+  {
+    title: 'telephone',
+    fieldName: 'telephone',
+    sortable: false,
+    width: '400px',
+  },
+];
+
+export default columns;