@cashub/ui-elv 1.0.2 → 1.0.4

package/esm/table/Table.js

@@ -0,0 +1,559 @@
+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';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const Table = _ref => {
+  let {
+    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
+  } = _ref;
+  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 /*#__PURE__*/_jsx(TH, {
+        width: width,
+        sortable: sortable,
+        onClick: () => {
+          sortable && handleSortChange(fieldName);
+        },
+        align: align,
+        children: /*#__PURE__*/_jsxs("div", {
+          children: [/*#__PURE__*/_jsx("span", {
+            id: fieldName,
+            onClick: showFullValue,
+            children: title
+          }), sortable && generateSort(fieldName)]
+        })
+      }, `TH${index}`);
+    });
+  }, [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 = /*#__PURE__*/_jsx("span", {
+            id: key,
+            onClick: event => showFullValue(event, customContent),
+            children: render ? render(value, row) : String(value)
+          });
+        }
+        return /*#__PURE__*/_jsxs(TableDataCell, {
+          "data-label": title,
+          enableRowDrag: columnIndex === columns.length - 1 && enableRowDrag,
+          backgroundReverse: backgroundReverse,
+          border: rowConfig.border,
+          custom: isCustom,
+          ...props,
+          children: [renderedData, enableRowDrag && columnIndex === columns.length - 1 && /*#__PURE__*/_jsx(DragHandle, {
+            draggable: true,
+            onDragStart: event => {
+              event.dataTransfer.setData('fromRow', JSON.stringify(row));
+            },
+            children: /*#__PURE__*/_jsxs("svg", {
+              stroke: "currentColor",
+              fill: "currentColor",
+              "stroke-width": "0",
+              viewBox: "0 0 24 24",
+              height: "1em",
+              width: "1em",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: [/*#__PURE__*/_jsx("path", {
+                fill: "none",
+                d: "M0 0h24v24H0V0z"
+              }), /*#__PURE__*/_jsx("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"
+              })]
+            })
+          })]
+        }, columnIndex);
+      });
+      return /*#__PURE__*/_jsx(BodyTR, {
+        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);
+        },
+        children: tds
+      }, rowIndex);
+    });
+  }, [backgroundReverse, beforeCreateRow, columns, data, handleRowClick, handleRowDragEnter, handleRowDragLeave, handleRowDragOver, handleRowDrop, onRowClick, enableRowDrag, select, selected, showFullValue]);
+  const generateEmptyMessage = useCallback(() => {
+    return /*#__PURE__*/_jsx(BodyTR, {
+      noData: true,
+      backgroundReverse: backgroundReverse,
+      children: /*#__PURE__*/_jsx(TableDataCell, {
+        noData: true,
+        center: true,
+        colSpan: columns.length,
+        backgroundReverse: backgroundReverse,
+        children: texts.empty
+      })
+    });
+  }, [backgroundReverse, columns, texts]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(ResponsiveTable, {
+      ref: tableRef,
+      enableRowDrag: enableRowDrag,
+      children: [/*#__PURE__*/_jsx(TableHead, {
+        children: /*#__PURE__*/_jsx("tr", {
+          children: tableHeads
+        })
+      }), /*#__PURE__*/_jsx("tbody", {
+        children: tableRows || generateEmptyMessage()
+      })]
+    }), /*#__PURE__*/_jsxs(TableFooter, {
+      center: centerFooter,
+      enableRowDrag: enableRowDrag,
+      children: [/*#__PURE__*/_jsx(TableFooterInfo, {
+        children: texts.info.replace('_START_', start).replace('_END_', end).replace('_TOTAL_', total)
+      }), showPager && /*#__PURE__*/_jsxs(TableFooterPager, {
+        center: centerFooter,
+        children: [/*#__PURE__*/_jsx(Paginate, {
+          currentPage: currentPage,
+          totalCount: total,
+          pageSize: limit,
+          onPageChange: onPageChange
+        }), /*#__PURE__*/_jsx(Select, {
+          fill: true,
+          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
+        })]
+      })]
+    })]
+  });
+};
+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;
+
+  ${_ref2 => {
+  let {
+    enableRowDrag
+  } = _ref2;
+  return 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);
+    }
+  }
+
+  ${_ref3 => {
+  let {
+    active,
+    primary
+  } = _ref3;
+  return (active || primary) && css`
+      > td {
+        background: var(--color-background3);
+      }
+    `;
+}}
+
+  ${_ref4 => {
+  let {
+    clickable
+  } = _ref4;
+  return 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${_ref5 => {
+  let {
+    backgroundReverse
+  } = _ref5;
+  return backgroundReverse ? 1 : 2;
+}}
+    );
+    border-radius: var(--border-radius);
+    transition: .3s;
+    border: 1px solid transparent;
+
+    &:hover {
+      border: var(--border-width) solid var(--color-primary);
+    }
+
+    ${_ref6 => {
+  let {
+    active,
+    primary
+  } = _ref6;
+  return (active || primary) && css`
+        background: var(--color-background3);
+      `;
+}}
+
+    ${_ref7 => {
+  let {
+    border
+  } = _ref7;
+  return border && css`
+        border-color: var(--font-on-background);
+        border-width: 3px;
+      `;
+}}
+
+    ${_ref8 => {
+  let {
+    noData
+  } = _ref8;
+  return noData && css`
+        height: 168px;
+
+        > td {
+          &:first-child:before {
+            display: none;
+          }
+        }
+      `;
+}}
+  `}
+`;
+const TableDataCell = styled.td.attrs(_ref9 => {
+  let {
+    border
+  } = _ref9;
+  return {
+    borderWidth: border ? '3px' : 'var(--border-width)',
+    borderColor: border ? 'var(--font-on-background)' : 'transparent'
+  };
+})`
+  height: 48px;
+  background: ${_ref10 => {
+  let {
+    backgroundReverse
+  } = _ref10;
+  return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
+}};
+  padding: 0 var(--spacing-xs);
+  max-width: 0px;
+  text-align: ${_ref11 => {
+  let {
+    center
+  } = _ref11;
+  return center ? 'center' : 'left';
+}};
+  vertical-align: middle;
+  transition: border-color 0.3s;
+
+  ${_ref12 => {
+  let {
+    borderWidth,
+    borderColor
+  } = _ref12;
+  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;
+  }
+
+  ${_ref13 => {
+  let {
+    noData
+  } = _ref13;
+  return noData && css`
+      padding: 20px 0;
+    `;
+}}
+
+  ${_ref14 => {
+  let {
+    enableRowDrag
+  } = _ref14;
+  return 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;
+    }
+    
+    ${_ref15 => {
+  let {
+    custom
+  } = _ref15;
+  return 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/esm/table/__mock__/columns.js

@@ -0,0 +1,64 @@
+import { Badge } from '../../badge';
+import { BsFillTagFill } from 'react-icons/bs/index.esm';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const columns = [{
+  title: 'Name',
+  fieldName: 'name',
+  sortable: true,
+  width: '400px'
+}, {
+  title: 'Tag',
+  fieldName: 'tag',
+  sortable: false,
+  width: '150px',
+  render(data) {
+    return data.length > 0 && /*#__PURE__*/_jsx(Badge, {
+      style: {
+        margin: '0'
+      },
+      success: true,
+      children: `${data.length} ${data.length > 1 ? 'Tags' : 'Tag'}`
+    });
+  },
+  customPop(_ref) {
+    let {
+      tag
+    } = _ref;
+    return /*#__PURE__*/_jsx("div", {
+      style: {
+        display: 'grid',
+        gap: 'var(--spacing-xs)'
+      },
+      children: tag.map(_ref2 => {
+        let {
+          name,
+          tag_id: id
+        } = _ref2;
+        return /*#__PURE__*/_jsxs("div", {
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 'var(--spacing-xs)'
+          },
+          children: [/*#__PURE__*/_jsx(BsFillTagFill, {}), "\xA0", name]
+        }, id);
+      })
+    });
+  }
+}, {
+  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;