@cashub/ui 0.48.30 → 0.49.0-beta.0

package/src/table/Table.js

@@ -0,0 +1,553 @@
+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,
+  enableRowDrag,
+  onRowDragEnter,
+  onRowDragLeave,
+  onRowDragOver,
+  onRowDrop,
+  backgroundReverse,
+  translation,
+  beforeCreateRow,
+  popoverContainer,
+  centerFooter = false,
+  showPager = true,
+}) => {
+  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 handleRowDragEnter = useCallback(
+    (event, rowData) => {
+      if (onRowDragEnter) {
+        onRowDragEnter(event, rowData);
+      }
+    },
+    [onRowDragEnter],
+  );
+
+  const handleRowDragLeave = useCallback(
+    (event, rowData) => {
+      if (onRowDragLeave) {
+        onRowDragLeave(event, rowData);
+      }
+    },
+    [onRowDragLeave],
+  );
+
+  const handleRowDragOver = useCallback(
+    (event, rowData) => {
+      if (onRowDragOver) {
+        onRowDragOver(event, rowData);
+      }
+    },
+    [onRowDragOver],
+  );
+
+  const handleRowDrop = useCallback(
+    (event, rowData) => {
+      if (onRowDrop) {
+        onRowDrop(event, rowData);
+      }
+    },
+    [onRowDrop],
+  );
+
+  const showFullValue = useCallback(
+    (event, customContent) => {
+      let { id } = event.target;
+      if (!id) {
+        ({ id } = event.currentTarget);
+        event.target.id = id;
+      }
+
+      const { offsetWidth, scrollWidth, innerText } = event.target;
+      if ((scrollWidth >= offsetWidth || customContent) && innerText) {
+        event.stopPropagation();
+        Popover({
+          id,
+          container: popoverContainer,
+          target: event.target,
+          content: customContent ? customContent : 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;
+        const customContent = customPop ? customPop(row) : 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, customContent)}
+            >
+              {render ? render(value, row) : String(value)}
+            </span>
+          );
+        }
+
+        return (
+          <TableDataCell
+            key={columnIndex}
+            data-label={title}
+            enableRowDrag={columnIndex === columns.length - 1 && enableRowDrag}
+            backgroundReverse={backgroundReverse}
+            border={rowConfig.border}
+            custom={isCustom}
+            {...props}
+          >
+            {renderedData}
+
+            {enableRowDrag && columnIndex === columns.length - 1 && (
+              <DragHandle
+                draggable
+                onDragStart={(event) => {
+                  event.dataTransfer.setData('fromRow', JSON.stringify(row));
+                }}
+              >
+                <svg
+                  stroke='currentColor'
+                  fill='currentColor'
+                  stroke-width='0'
+                  viewBox='0 0 24 24'
+                  height='1em'
+                  width='1em'
+                  xmlns='http://www.w3.org/2000/svg'
+                >
+                  <path fill='none' d='M0 0h24v24H0V0z'></path>
+                  <path d='M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'></path>
+                </svg>
+              </DragHandle>
+            )}
+          </TableDataCell>
+        );
+      });
+
+      return (
+        <BodyTR
+          key={rowIndex}
+          clickable={onRowClick}
+          active={active}
+          primary={rowConfig.primary}
+          border={rowConfig.border}
+          backgroundReverse={backgroundReverse}
+          onClick={(event) => {
+            handleRowClick(event, row);
+          }}
+          onDragEnter={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            handleRowDragEnter(event, row);
+          }}
+          onDragLeave={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            handleRowDragLeave(event, row);
+          }}
+          onDragOver={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            handleRowDragOver(event, row);
+          }}
+          onDrop={(event) => {
+            handleRowDrop(event, row);
+          }}
+        >
+          {tds}
+        </BodyTR>
+      );
+    });
+  }, [
+    backgroundReverse,
+    beforeCreateRow,
+    columns,
+    data,
+    handleRowClick,
+    handleRowDragEnter,
+    handleRowDragLeave,
+    handleRowDragOver,
+    handleRowDrop,
+    onRowClick,
+    enableRowDrag,
+    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} enableRowDrag={enableRowDrag}>
+        <TableHead>
+          <tr>{tableHeads}</tr>
+        </TableHead>
+        <tbody>{tableRows || generateEmptyMessage()}</tbody>
+      </ResponsiveTable>
+      <TableFooter center={centerFooter} enableRowDrag={enableRowDrag}>
+        <TableFooterInfo>
+          {texts.info
+            .replace('_START_', start)
+            .replace('_END_', end)
+            .replace('_TOTAL_', total)}
+        </TableFooterInfo>
+        {showPager && (
+          <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;
+
+  ${({ enableRowDrag }) =>
+    enableRowDrag && 'padding-right: calc(1.5rem + 0.5rem);'}
+`;
+
+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;
+    `}
+
+  ${({ enableRowDrag }) => enableRowDrag && 'position: relative;'}
+
+  ${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;
+        }
+      `}
+  `}
+`;
+
+const DragHandle = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--spacing);
+  height: var(--spacing);
+  position: absolute;
+  left: calc(100% + var(--spacing-xs));
+  cursor: grab;
+  top: 50%;
+  transform: translateY(-50%);
+`;
+
+export default Table;

package/src/table/__mock__/columns.js

@@ -0,0 +1,67 @@
+import { Badge } from '../../badge';
+import { BsFillTagFill } from 'react-icons/bs';
+
+const columns = [
+  {
+    title: 'Name',
+    fieldName: 'name',
+    sortable: true,
+    width: '400px',
+  },
+  {
+    title: 'Tag',
+    fieldName: 'tag',
+    sortable: false,
+    width: '150px',
+    render(data) {
+      return (
+        data.length > 0 && (
+          <Badge style={{ margin: '0' }} success>
+            {`${data.length} ${data.length > 1 ? 'Tags' : 'Tag'}`}
+          </Badge>
+        )
+      );
+    },
+    customPop({ tag }) {
+      return (
+        <div style={{ display: 'grid', gap: 'var(--spacing-xs)' }}>
+          {tag.map(({ name, tag_id: id }) => {
+            return (
+              <div
+                key={id}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 'var(--spacing-xs)',
+                }}
+              >
+                <BsFillTagFill />
+                &nbsp;{name}
+              </div>
+            );
+          })}
+        </div>
+      );
+    },
+  },
+  {
+    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;