@cashub/ui-elv 1.0.2 → 1.0.4

package/esm/table/InfiniteGridTable.js

@@ -0,0 +1,396 @@
+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';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const ROW_HEIGHT = 48;
+const OVER_SCAN_COUNT = 5;
+const InfiniteGridTable = _ref => {
+  let {
+    containerHeight,
+    scrollTop,
+    columns,
+    data,
+    sortColumn,
+    sortType,
+    onSortChange,
+    backgroundReverse,
+    translation
+  } = _ref;
+  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 /*#__PURE__*/_jsxs(TH, {
+        width: width,
+        align: align,
+        backgroundReverse: backgroundReverse,
+        sortable: sortable,
+        onClick: () => {
+          sortable && handleSortChange(fieldName);
+        },
+        children: [/*#__PURE__*/_jsxs("div", {
+          children: [/*#__PURE__*/_jsx("span", {
+            id: fieldName,
+            onClick: showFullValue,
+            children: title
+          }), sortable && generateSort(fieldName)]
+        }), /*#__PURE__*/_jsx(Resizer, {
+          index: index,
+          onResize: handleResizeColumn
+        })]
+      }, key);
+    });
+    tableHeads.push(/*#__PURE__*/_jsx(TH, {
+      role: "presentation",
+      width: restWidth,
+      backgroundReverse: backgroundReverse
+    }, 'rest'));
+    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 = /*#__PURE__*/_jsx("span", {
+            id: key,
+            onClick: showFullValue,
+            children: render ? render(row[fieldName], row) : String(row[fieldName])
+          });
+        }
+        return /*#__PURE__*/_jsx(TD, {
+          "data-label": title,
+          backgroundReverse: backgroundReverse,
+          $width: width,
+          ...props,
+          children: renderedData
+        }, columnIndex);
+      });
+      tds.push(/*#__PURE__*/_jsx(TD, {
+        role: "presentation",
+        width: restWidth,
+        backgroundReverse: backgroundReverse
+      }, 'rest'));
+      const index = rowIndex + startIndex;
+      const top = index * ROW_HEIGHT + theadHeight;
+      return /*#__PURE__*/_jsx("tr", {
+        "data-index": index,
+        style: {
+          position: 'absolute',
+          display: 'flex',
+          left: 0,
+          top: `${top}px`
+        },
+        children: tds
+      }, index);
+    });
+  }, [backgroundReverse, tableColumns, visibleData, showFullValue, restWidth, startIndex, theadHeight]);
+  const generateEmptyMessage = useCallback(() => {
+    return /*#__PURE__*/_jsx("tr", {
+      children: /*#__PURE__*/_jsx(TD, {
+        center: true,
+        colSpan: tableColumns.length,
+        backgroundReverse: backgroundReverse,
+        children: texts.empty
+      })
+    });
+  }, [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 /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(TableWrapper, {
+      style: {
+        height: `${tableHeight}px`
+      },
+      ref: wrapperRef,
+      backgroundReverse: backgroundReverse,
+      children: /*#__PURE__*/_jsxs(ResponsiveTable, {
+        ref: tableRef,
+        children: [/*#__PURE__*/_jsx("thead", {
+          ref: tableHeadRef,
+          children: /*#__PURE__*/_jsx("tr", {
+            children: tableHeads
+          })
+        }), /*#__PURE__*/_jsx("tbody", {
+          children: data.length === 0 ? generateEmptyMessage() : tableRows
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Scrollbar, {
+      backgroundReverse: backgroundReverse,
+      width: tableWidth,
+      onScroll: handleScroll
+    })]
+  });
+};
+const TableWrapper = styled.div`
+  overflow: hidden;
+  background: ${_ref2 => {
+  let {
+    backgroundReverse
+  } = _ref2;
+  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: ${_ref3 => {
+  let {
+    $width
+  } = _ref3;
+  return $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: ${_ref4 => {
+  let {
+    center
+  } = _ref4;
+  return center ? 'center' : 'left';
+}};
+  background: ${_ref5 => {
+  let {
+    backgroundReverse
+  } = _ref5;
+  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: ${_ref6 => {
+  let {
+    backgroundReverse
+  } = _ref6;
+  return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
+}};
+
+  ::before {
+    display: block;
+    content: '';
+    width: ${_ref7 => {
+  let {
+    width
+  } = _ref7;
+  return `${width}px`;
+}};
+    height: 1px;
+  }
+
+  ${scrollbar({
+  size: 'large'
+})}
+`;
+export default InfiniteGridTable;

package/esm/table/PermissionTable.js

@@ -0,0 +1,57 @@
+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);
+
+  ${_ref => {
+  let {
+    clickable
+  } = _ref;
+  return clickable && 'cursor: pointer;';
+}}
+  ${_ref2 => {
+  let {
+    alignCenter
+  } = _ref2;
+  return 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);
+  }
+
+  ${_ref3 => {
+  let {
+    clickable
+  } = _ref3;
+  return clickable && 'cursor: pointer;';
+}}
+  ${_ref4 => {
+  let {
+    alignCenter
+  } = _ref4;
+  return alignCenter && 'text-align: center;';
+}}
+  ${_ref5 => {
+  let {
+    bold
+  } = _ref5;
+  return bold && 'font-weight: var(--font-bold);';
+}}
+`;
+export default Object.assign(PermissionTable, {
+  TH,
+  TD
+});

package/esm/table/SimpleGridTable.js

@@ -0,0 +1,136 @@
+import { useMemo, useCallback } from 'react';
+import styled from 'styled-components';
+import GridTableHeadCell from './subComponent/GridTableHeadCell';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const SimpleGridTable = _ref => {
+  let {
+    columns,
+    data,
+    backgroundReverse,
+    translation
+  } = _ref;
+  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 /*#__PURE__*/_jsx(TH, {
+        backgroundReverse: !backgroundReverse,
+        children: column.title
+      }, `TH${index}`);
+    });
+    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 /*#__PURE__*/_jsx(TD, {
+          "data-label": title,
+          backgroundReverse: backgroundReverse,
+          children: render ? render(row[fieldName], row) : String(row[fieldName])
+        }, columnIndex);
+      });
+      return /*#__PURE__*/_jsx(TR, {
+        children: tds
+      }, rowIndex);
+    });
+  }, [backgroundReverse, columns, data]);
+  const generateEmptyMessage = useCallback(() => {
+    return /*#__PURE__*/_jsx(TR, {
+      children: /*#__PURE__*/_jsx(TD, {
+        center: true,
+        colSpan: columns.length,
+        backgroundReverse: backgroundReverse,
+        children: texts.empty
+      })
+    });
+  }, [backgroundReverse, columns, texts]);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(TableWrapper, {
+      backgroundReverse: backgroundReverse,
+      children: /*#__PURE__*/_jsxs(ResponsiveTable, {
+        children: [/*#__PURE__*/_jsx("thead", {
+          children: /*#__PURE__*/_jsx("tr", {
+            children: tableHeads
+          })
+        }), /*#__PURE__*/_jsx("tbody", {
+          children: tableRows || generateEmptyMessage()
+        })]
+      })
+    })
+  });
+};
+const TableWrapper = styled.div`
+  background: ${_ref2 => {
+  let {
+    backgroundReverse
+  } = _ref2;
+  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: ${_ref3 => {
+  let {
+    center
+  } = _ref3;
+  return center ? 'center' : 'left';
+}};
+  background: ${_ref4 => {
+  let {
+    backgroundReverse
+  } = _ref4;
+  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;