@cashub/ui 0.48.28 → 0.49.0-beta.0

package/src/table/InfiniteGridTable.js

@@ -0,0 +1,424 @@
+import {
+  useRef,
+  useState,
+  useMemo,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+} from 'react';
+import styled from 'styled-components';
+import { useGenerateSort } from './hooks';
+import scrollbar from '../styles/mixin/scrollbar';
+import TH from './subComponent/GridTableHeadCell';
+import Resizer from './subComponent/Resizer';
+import Popover from '../popover/Popover';
+
+const ROW_HEIGHT = 48;
+const OVER_SCAN_COUNT = 5;
+const InfiniteGridTable = ({
+  containerHeight,
+  scrollTop,
+  columns,
+  data,
+  sortColumn,
+  sortType,
+  onSortChange,
+  backgroundReverse,
+  translation,
+}) => {
+  const wrapperRef = useRef(null);
+  const tableRef = useRef(null);
+  const tableHeadRef = useRef(null);
+  const [wrapperTop, setWrapperTop] = useState(0);
+  const [tableColumns, setTableColumns] = useState(columns);
+  const [tableWidth, setTableWidth] = useState(0);
+  const [restWidth, setRestWidth] = useState(0);
+  const [theadHeight, setTheadHeight] = useState(0);
+
+  const texts = useMemo(() => {
+    const defaultTexts = {
+      info: 'Showing _START_ to _END_ of _TOTAL_ entries',
+      empty: 'No data available in table',
+    };
+
+    return { ...defaultTexts, ...translation };
+  }, [translation]);
+
+  const tableHeight = useMemo(() => {
+    // when data is empty, table will generate a row to show a message
+    const rowCounts = data.length || 1;
+
+    return theadHeight + rowCounts * ROW_HEIGHT;
+  }, [theadHeight, data.length]);
+
+  const visibleRowCounts = useMemo(() => {
+    return Math.ceil(containerHeight / ROW_HEIGHT);
+  }, [containerHeight]);
+
+  const startIndex = useMemo(() => {
+    const top = Math.max(0, scrollTop - wrapperTop);
+
+    return Math.max(0, Math.floor(top / ROW_HEIGHT) - OVER_SCAN_COUNT);
+  }, [wrapperTop, scrollTop]);
+
+  const endIndex = useMemo(() => {
+    return Math.min(
+      data.length,
+      startIndex + visibleRowCounts + OVER_SCAN_COUNT * 2,
+    );
+  }, [data.length, startIndex, visibleRowCounts]);
+
+  const visibleData = useMemo(() => {
+    return data.slice(startIndex, endIndex);
+  }, [data, startIndex, endIndex]);
+
+  const handleSortChange = useCallback(
+    (columnName) => {
+      if (onSortChange) {
+        onSortChange(columnName);
+      }
+    },
+    [onSortChange],
+  );
+
+  const calculateWrapperTop = useCallback(() => {
+    const { top } = wrapperRef.current.getBoundingClientRect();
+    setWrapperTop(top + window.scrollY);
+  }, []);
+
+  const calculateTableWidth = useCallback(() => {
+    setTableWidth(tableRef.current.offsetWidth);
+    setRestWidth((previousWidth) => {
+      const containerWidth = wrapperRef.current.offsetWidth;
+      const tableWidth = tableRef.current.offsetWidth - previousWidth;
+      if (containerWidth > tableWidth) {
+        return containerWidth - tableWidth;
+      }
+
+      return 0;
+    });
+  }, []);
+
+  const handleResize = useCallback(() => {
+    calculateWrapperTop();
+    calculateTableWidth();
+  }, [calculateWrapperTop, calculateTableWidth]);
+
+  const handleResizeColumn = useCallback((targetIndex, width) => {
+    setTableColumns((previous) => {
+      return previous.map((column, index) => {
+        if (index === targetIndex) {
+          return { ...column, width: `${width}px` };
+        }
+
+        return { ...column };
+      });
+    });
+  }, []);
+
+  const handleScroll = useCallback((event) => {
+    const { target } = event;
+    wrapperRef.current.scrollLeft = target.scrollLeft;
+  }, []);
+
+  const showFullValue = useCallback((event) => {
+    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,
+        target: event.target,
+        content: innerText,
+        boundary: tableRef.current,
+      });
+    }
+  }, []);
+
+  // generate sort icon area
+  const generateSort = useGenerateSort(sortColumn, sortType);
+
+  const tableHeads = useMemo(() => {
+    const tableHeads = tableColumns.map((column, index) => {
+      const { title, fieldName, width, sortable, align } = column;
+      let key = 'TH';
+      if (title) {
+        key += `${key}${title}`;
+      } else if (fieldName) {
+        key += `${key}${fieldName}`;
+      } else {
+        key += `${key}${index}`;
+      }
+
+      return (
+        <TH
+          key={key}
+          width={width}
+          align={align}
+          backgroundReverse={backgroundReverse}
+          sortable={sortable}
+          onClick={() => {
+            sortable && handleSortChange(fieldName);
+          }}
+        >
+          <div>
+            <span id={fieldName} onClick={showFullValue}>
+              {title}
+            </span>
+
+            {sortable && generateSort(fieldName)}
+          </div>
+          <Resizer index={index} onResize={handleResizeColumn} />
+        </TH>
+      );
+    });
+
+    tableHeads.push(
+      <TH
+        key='rest'
+        role='presentation'
+        width={restWidth}
+        backgroundReverse={backgroundReverse}
+      ></TH>,
+    );
+
+    return tableHeads;
+  }, [
+    backgroundReverse,
+    tableColumns,
+    handleSortChange,
+    generateSort,
+    showFullValue,
+    handleResizeColumn,
+    restWidth,
+  ]);
+
+  const tableRows = useMemo(() => {
+    if (visibleData.length === 0) {
+      return null;
+    }
+
+    return visibleData.map((row, rowIndex) => {
+      const tds = tableColumns.map((column, columnIndex) => {
+        const { title, fieldName, render, custom, width, ...props } = column;
+        const key = rowIndex + columnIndex.toString();
+
+        let renderedData = null;
+        if (custom && render) {
+          // call render function to get custom data(fully)
+          renderedData = render(row);
+        } else {
+          // call render function to get custom data(part)
+          renderedData = (
+            <span id={key} onClick={showFullValue}>
+              {render ? render(row[fieldName], row) : String(row[fieldName])}
+            </span>
+          );
+        }
+
+        return (
+          <TD
+            key={columnIndex}
+            data-label={title}
+            backgroundReverse={backgroundReverse}
+            $width={width}
+            {...props}
+          >
+            {renderedData}
+          </TD>
+        );
+      });
+
+      tds.push(
+        <TD
+          key='rest'
+          role='presentation'
+          width={restWidth}
+          backgroundReverse={backgroundReverse}
+        ></TD>,
+      );
+
+      const index = rowIndex + startIndex;
+      const top = index * ROW_HEIGHT + theadHeight;
+      return (
+        <tr
+          key={index}
+          data-index={index}
+          style={{
+            position: 'absolute',
+            display: 'flex',
+            left: 0,
+            top: `${top}px`,
+          }}
+        >
+          {tds}
+        </tr>
+      );
+    });
+  }, [
+    backgroundReverse,
+    tableColumns,
+    visibleData,
+    showFullValue,
+    restWidth,
+    startIndex,
+    theadHeight,
+  ]);
+
+  const generateEmptyMessage = useCallback(() => {
+    return (
+      <tr>
+        <TD
+          center
+          colSpan={tableColumns.length}
+          backgroundReverse={backgroundReverse}
+        >
+          {texts.empty}
+        </TD>
+      </tr>
+    );
+  }, [backgroundReverse, tableColumns, texts]);
+
+  // merge previous column width to columns array
+  useEffect(() => {
+    setTableColumns((previousColumns) => {
+      return columns.map((column) => {
+        const previousColumn = previousColumns.find((previousColumn) => {
+          const { title: previousTitle, fieldName: previousFieldName } =
+            previousColumn;
+          const { title, fieldName } = column;
+
+          return title === previousTitle && fieldName === previousFieldName;
+        });
+
+        const width = previousColumn?.width || column.width;
+        return { ...column, width };
+      });
+    });
+  }, [columns]);
+
+  useEffect(() => {
+    handleResize();
+  }, [tableColumns, handleResize]);
+
+  useEffect(() => {
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [handleResize]);
+
+  useEffect(() => {
+    if (tableRef.current) {
+      setTableWidth(tableRef.current.offsetWidth);
+    }
+  }, [columns]);
+
+  useLayoutEffect(() => {
+    if (tableHeadRef.current) {
+      const theadHeight = tableHeadRef.current.offsetHeight;
+      setTheadHeight(theadHeight);
+    }
+  }, []);
+
+  return (
+    <>
+      <TableWrapper
+        style={{ height: `${tableHeight}px` }}
+        ref={wrapperRef}
+        backgroundReverse={backgroundReverse}
+      >
+        <ResponsiveTable ref={tableRef}>
+          <thead ref={tableHeadRef}>
+            <tr>{tableHeads}</tr>
+          </thead>
+          <tbody>
+            {data.length === 0 ? generateEmptyMessage() : tableRows}
+          </tbody>
+        </ResponsiveTable>
+      </TableWrapper>
+      <Scrollbar
+        backgroundReverse={backgroundReverse}
+        width={tableWidth}
+        onScroll={handleScroll}
+      />
+    </>
+  );
+};
+
+const TableWrapper = styled.div`
+  overflow: hidden;
+  background: ${({ backgroundReverse }) => {
+    return backgroundReverse
+      ? 'var(--color-background1)'
+      : 'var(--color-background2)';
+  }};
+`;
+
+const ResponsiveTable = styled.table`
+  /* make fixed width work */
+  position: relative;
+  width: 0px;
+  color: var(--font-on-background);
+  table-layout: fixed;
+  border-collapse: collapse;
+`;
+
+const TD = styled.td`
+  align-content: center;
+  width: ${({ $width }) => $width};
+  height: 48px;
+  padding: 0 var(--spacing-xs);
+  border-top: 1px solid var(--border-color);
+  border-right: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
+  text-align: ${({ center }) => (center ? 'center' : 'left')};
+  background: ${({ backgroundReverse }) => {
+    return backgroundReverse
+      ? 'var(--color-background1)'
+      : 'var(--color-background2)';
+  }};
+
+  &:last-child {
+    border-right: none;
+    padding: 0;
+  }
+
+  > span {
+    display: inline-block;
+    width: 100%;
+    padding: 0 2px;
+    overflow: hidden;
+    white-space: pre;
+    text-overflow: ellipsis;
+  }
+`;
+
+const Scrollbar = styled.div`
+  position: sticky;
+  bottom: 0;
+  width: 100%;
+  overflow: auto;
+  background: ${({ backgroundReverse }) => {
+    return backgroundReverse
+      ? 'var(--color-background1)'
+      : 'var(--color-background2)';
+  }};
+
+  ::before {
+    display: block;
+    content: '';
+    width: ${({ width }) => `${width}px`};
+    height: 1px;
+  }
+
+  ${scrollbar({ size: 'large' })}
+`;
+
+export default InfiniteGridTable;

package/src/table/PermissionTable.js

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+
+const PermissionTable = styled.table`
+  width: 100%;
+  vertical-align: middle;
+  table-layout: fixed;
+  border: 0;
+  color: var(--font-on-background);
+`;
+
+const TH = styled.th`
+  padding: var(--spacing) 0;
+  border-bottom: 1px solid var(--border-color);
+  font-weight: var(--font-bold);
+
+  ${({ clickable }) => clickable && 'cursor: pointer;'}
+  ${({ alignCenter }) => alignCenter && 'text-align: center;'}
+`;
+
+const TD = styled.td`
+  padding: var(--spacing) 0;
+  border-bottom: 1px solid var(--border-color);
+
+  &:nth-child(even) {
+    background: var(--color-background1);
+  }
+
+  ${({ clickable }) => clickable && 'cursor: pointer;'}
+  ${({ alignCenter }) => alignCenter && 'text-align: center;'}
+  ${({ bold }) => bold && 'font-weight: var(--font-bold);'}
+`;
+
+export default Object.assign(PermissionTable, {
+  TH,
+  TD,
+});

package/src/table/SimpleGridTable.js

@@ -0,0 +1,135 @@
+import { useMemo, useCallback } from 'react';
+import styled from 'styled-components';
+import GridTableHeadCell from './subComponent/GridTableHeadCell';
+
+const SimpleGridTable = ({ columns, data, backgroundReverse, translation }) => {
+  const texts = useMemo(() => {
+    const defaultTexts = {
+      empty: 'No data available in table',
+    };
+
+    return { ...defaultTexts, ...translation };
+  }, [translation]);
+
+  const tableHeads = useMemo(() => {
+    const tableHeads = columns.map((column, index) => {
+      return (
+        <TH key={`TH${index}`} backgroundReverse={!backgroundReverse}>
+          {column.title}
+        </TH>
+      );
+    });
+
+    return tableHeads;
+  }, [backgroundReverse, columns]);
+
+  const tableRows = useMemo(() => {
+    if (data.length === 0) {
+      return null;
+    }
+
+    return data.map((row, rowIndex) => {
+      const tds = columns.map((column, columnIndex) => {
+        const { title, fieldName, render } = column;
+
+        return (
+          <TD
+            key={columnIndex}
+            data-label={title}
+            backgroundReverse={backgroundReverse}
+          >
+            {render ? render(row[fieldName], row) : String(row[fieldName])}
+          </TD>
+        );
+      });
+
+      return <TR key={rowIndex}>{tds}</TR>;
+    });
+  }, [backgroundReverse, columns, data]);
+
+  const generateEmptyMessage = useCallback(() => {
+    return (
+      <TR>
+        <TD
+          center
+          colSpan={columns.length}
+          backgroundReverse={backgroundReverse}
+        >
+          {texts.empty}
+        </TD>
+      </TR>
+    );
+  }, [backgroundReverse, columns, texts]);
+
+  return (
+    <>
+      <TableWrapper backgroundReverse={backgroundReverse}>
+        <ResponsiveTable>
+          <thead>
+            <tr>{tableHeads}</tr>
+          </thead>
+          <tbody>{tableRows || generateEmptyMessage()}</tbody>
+        </ResponsiveTable>
+      </TableWrapper>
+    </>
+  );
+};
+
+const TableWrapper = styled.div`
+  background: ${({ backgroundReverse }) => {
+    return backgroundReverse
+      ? 'var(--color-background1)'
+      : 'var(--color-background2)';
+  }};
+`;
+
+const ResponsiveTable = styled.table`
+  width: 100%;
+  color: var(--font-on-background);
+  table-layout: fixed;
+  border-collapse: separate;
+  border-spacing: 0;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  overflow: hidden;
+`;
+
+const TH = styled(GridTableHeadCell)`
+  text-align: left;
+  border-top: none;
+  border-right: 1px solid var(--border-color);
+
+  &:last-child {
+    border-right: none;
+  }
+`;
+
+const TD = styled.td`
+  height: 48px;
+  padding: 0 var(--spacing-xs);
+  border-bottom: 1px solid var(--border-color);
+  border-right: 1px solid var(--border-color);
+  text-align: ${({ center }) => (center ? 'center' : 'left')};
+  background: ${({ backgroundReverse }) => {
+    return backgroundReverse
+      ? 'var(--color-background1)'
+      : 'var(--color-background2)';
+  }};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &:last-child {
+    border-right: none;
+  }
+`;
+
+const TR = styled.tr`
+  &:last-child {
+    ${TD} {
+      border-bottom: none;
+    }
+  }
+`;
+
+export default SimpleGridTable;