@cashub/ui 0.49.0-beta.0 → 0.49.0-beta.2

package/src/table/Table.js

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

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