@cashub/ui 0.37.0 → 0.38.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cashub/ui",
-  "version": "0.37.0",
+  "version": "0.38.0",
   "private": false,
   "author": "CasHUB Team",
   "description": "CasHUB UI components library",
@@ -40,6 +40,7 @@
     "react-router-dom": "^5.2.0",
     "react-toastify": "^7.0.4",
     "react-transition-group": "^4.4.2",
+    "react-window": "^1.8.11",
     "styled-components": "^5.3.0",
     "treeflex": "^2.0.1",
     "xml-formatter": "^3.6.3"

package/table/InfiniteGridTable.js

@@ -0,0 +1,316 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _hooks = require("./hooks");
+var _scrollbar = _interopRequireDefault(require("../styles/mixin/scrollbar"));
+var _GridTableHeadCell = _interopRequireDefault(require("./subComponent/GridTableHeadCell"));
+var _Resizer = _interopRequireDefault(require("./subComponent/Resizer"));
+var _Popover = _interopRequireDefault(require("../popover/Popover"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+const _excluded = ["title", "fieldName", "render", "custom"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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 = (0, _react.useRef)(null);
+  const tableRef = (0, _react.useRef)(null);
+  const tableHeadRef = (0, _react.useRef)(null);
+  const [wrapperTop, setWrapperTop] = (0, _react.useState)(0);
+  const [tableColumns, setTableColumns] = (0, _react.useState)(columns);
+  const [tableWidth, setTableWidth] = (0, _react.useState)(0);
+  const [restWidth, setRestWidth] = (0, _react.useState)(0);
+  const texts = (0, _react.useMemo)(() => {
+    const defaultTexts = {
+      info: 'Showing _START_ to _END_ of _TOTAL_ entries',
+      empty: 'No data available in table'
+    };
+    return _objectSpread(_objectSpread({}, defaultTexts), translation);
+  }, [translation]);
+  const tableHeight = (0, _react.useMemo)(() => {
+    var _tableHeadRef$current;
+    const theadHeight = ((_tableHeadRef$current = tableHeadRef.current) === null || _tableHeadRef$current === void 0 ? void 0 : _tableHeadRef$current.offsetHeight) || 0;
+    // when data is empty, table will generate a row to show a message
+    const rowCounts = data.length || 1;
+    return theadHeight + rowCounts * ROW_HEIGHT;
+  }, [data.length]);
+  const visibleRowCounts = (0, _react.useMemo)(() => {
+    return Math.ceil(containerHeight / ROW_HEIGHT);
+  }, [containerHeight]);
+  const startIndex = (0, _react.useMemo)(() => {
+    const top = wrapperTop + scrollTop;
+    return Math.max(0, Math.floor(top / ROW_HEIGHT) - OVER_SCAN_COUNT);
+  }, [wrapperTop, scrollTop]);
+  const endIndex = (0, _react.useMemo)(() => {
+    return Math.min(data.length, startIndex + visibleRowCounts + OVER_SCAN_COUNT * 2);
+  }, [data.length, startIndex, visibleRowCounts]);
+  const visibleData = (0, _react.useMemo)(() => {
+    return data.slice(startIndex, endIndex);
+  }, [data, startIndex, endIndex]);
+  const handleSortChange = (0, _react.useCallback)(columnName => {
+    if (onSortChange) {
+      onSortChange(columnName);
+    }
+  }, [onSortChange]);
+  const calculateWrapperTop = (0, _react.useCallback)(() => {
+    const {
+      top
+    } = wrapperRef.current.getBoundingClientRect();
+    setWrapperTop(top + window.scrollY);
+  }, []);
+  const calculateTableWidth = (0, _react.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 = (0, _react.useCallback)(() => {
+    calculateWrapperTop();
+    calculateTableWidth();
+  }, [calculateWrapperTop, calculateTableWidth]);
+  const handleResizeColumn = (0, _react.useCallback)((targetIndex, width) => {
+    setTableColumns(previous => {
+      return previous.map((column, index) => {
+        if (index === targetIndex) {
+          return _objectSpread(_objectSpread({}, column), {}, {
+            width
+          });
+        }
+        return _objectSpread({}, column);
+      });
+    });
+  }, []);
+  const handleScroll = (0, _react.useCallback)(event => {
+    const {
+      target
+    } = event;
+    wrapperRef.current.scrollLeft = target.scrollLeft;
+  }, []);
+  const showFullValue = (0, _react.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();
+      (0, _Popover.default)({
+        id,
+        target: event.target,
+        content: innerText,
+        boundary: tableRef.current
+      });
+    }
+  }, []);
+
+  // generate sort icon area
+  const generateSort = (0, _hooks.useGenerateSort)(sortColumn, sortType);
+  const tableHeads = (0, _react.useMemo)(() => {
+    const tableHeads = tableColumns.map((column, index) => {
+      const {
+        title,
+        fieldName,
+        width,
+        sortable,
+        align
+      } = column;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridTableHeadCell.default, {
+        width: width,
+        align: align,
+        backgroundReverse: backgroundReverse,
+        sortable: sortable,
+        onClick: () => {
+          sortable && handleSortChange(fieldName);
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            id: fieldName,
+            onClick: showFullValue,
+            children: title
+          }), sortable && generateSort(fieldName)]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Resizer.default, {
+          index: index,
+          onResize: handleResizeColumn
+        })]
+      }, "TH".concat(index));
+    });
+    tableHeads.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridTableHeadCell.default, {
+      role: "presentation",
+      width: restWidth,
+      backgroundReverse: backgroundReverse
+    }, 'rest'));
+    return tableHeads;
+  }, [backgroundReverse, tableColumns, handleSortChange, generateSort, showFullValue, handleResizeColumn, restWidth]);
+  const tableRows = (0, _react.useMemo)(() => {
+    if (visibleData.length === 0) {
+      return null;
+    }
+    return visibleData.map((row, rowIndex) => {
+      const tds = tableColumns.map((column, columnIndex) => {
+        const {
+            title,
+            fieldName,
+            render,
+            custom
+          } = column,
+          props = _objectWithoutProperties(column, _excluded);
+        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__*/(0, _jsxRuntime.jsx)("span", {
+            id: key,
+            onClick: showFullValue,
+            children: render ? render(row[fieldName], row) : String(row[fieldName])
+          });
+        }
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(TD, _objectSpread(_objectSpread({
+          "data-label": title,
+          backgroundReverse: backgroundReverse
+        }, props), {}, {
+          children: renderedData
+        }), columnIndex);
+      });
+      tds.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(TD, {
+        role: "presentation",
+        width: restWidth,
+        backgroundReverse: backgroundReverse
+      }, 'rest'));
+      const index = rowIndex + startIndex;
+      const top = index * ROW_HEIGHT + tableHeadRef.current.offsetHeight;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
+        "data-index": index,
+        style: {
+          position: 'absolute',
+          left: 0,
+          top: "".concat(top, "px")
+        },
+        children: tds
+      }, index);
+    });
+  }, [backgroundReverse, tableColumns, visibleData, showFullValue, restWidth, startIndex]);
+  const generateEmptyMessage = (0, _react.useCallback)(() => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TD, {
+        center: true,
+        colSpan: tableColumns.length,
+        backgroundReverse: backgroundReverse,
+        children: texts.empty
+      })
+    });
+  }, [backgroundReverse, tableColumns, texts]);
+  (0, _react.useEffect)(() => {
+    setTableColumns(columns);
+  }, [columns]);
+  (0, _react.useEffect)(() => {
+    handleResize();
+  }, [tableColumns, handleResize]);
+  (0, _react.useEffect)(() => {
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [handleResize]);
+  (0, _react.useEffect)(() => {
+    if (tableRef.current) {
+      setTableWidth(tableRef.current.offsetWidth);
+    }
+  }, [columns]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TableWrapper, {
+      style: {
+        height: "".concat(tableHeight, "px")
+      },
+      ref: wrapperRef,
+      backgroundReverse: backgroundReverse,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ResponsiveTable, {
+        ref: tableRef,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
+          ref: tableHeadRef,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
+            children: tableHeads
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+          children: data.length === 0 ? generateEmptyMessage() : tableRows
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Scrollbar, {
+      backgroundReverse: backgroundReverse,
+      width: tableWidth,
+      onScroll: handleScroll
+    })]
+  });
+};
+const TableWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow: hidden;\n  background: ", ";\n"])), _ref2 => {
+  let {
+    backgroundReverse
+  } = _ref2;
+  return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
+});
+const ResponsiveTable = _styledComponents.default.table(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  /* make fixed width work */\n  position: relative;\n  width: 0px;\n  color: var(--font-on-background);\n  table-layout: fixed;\n  border-collapse: collapse;\n"])));
+const TD = _styledComponents.default.td(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 48px;\n  padding: 0 var(--spacing-xs);\n  border-top: 1px solid var(--border-color);\n  border-right: 1px solid var(--border-color);\n  border-bottom: 1px solid var(--border-color);\n  text-align: ", ";\n  background: ", ";\n\n  &:last-child {\n    border-right: none;\n    padding: 0;\n  }\n\n  > span {\n    display: inline-block;\n    width: 100%;\n    padding: 0 2px;\n    overflow: hidden;\n    white-space: pre;\n    text-overflow: ellipsis;\n  }\n"])), _ref3 => {
+  let {
+    center
+  } = _ref3;
+  return center ? 'center' : 'left';
+}, _ref4 => {
+  let {
+    backgroundReverse
+  } = _ref4;
+  return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
+});
+const Scrollbar = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: sticky;\n  bottom: 0;\n  width: 100%;\n  overflow: auto;\n  background: ", ";\n\n  ::before {\n    display: block;\n    content: '';\n    width: ", ";\n    height: 1px;\n  }\n\n  ", "\n"])), _ref5 => {
+  let {
+    backgroundReverse
+  } = _ref5;
+  return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
+}, _ref6 => {
+  let {
+    width
+  } = _ref6;
+  return "".concat(width, "px");
+}, (0, _scrollbar.default)({
+  size: 'large'
+}));
+var _default = exports.default = InfiniteGridTable;

package/table/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "ImageBox", {
     return _ImageBox.default;
   }
 });
+Object.defineProperty(exports, "InfiniteGridTable", {
+  enumerable: true,
+  get: function () {
+    return _InfiniteGridTable.default;
+  }
+});
 Object.defineProperty(exports, "PermissionTable", {
   enumerable: true,
   get: function () {
@@ -28,6 +34,7 @@ Object.defineProperty(exports, "Table", {
   }
 });
 var _GridTable = _interopRequireDefault(require("./GridTable"));
+var _InfiniteGridTable = _interopRequireDefault(require("./InfiniteGridTable"));
 var _Table = _interopRequireDefault(require("./Table"));
 var _PermissionTable = _interopRequireDefault(require("./PermissionTable"));
 var _ImageBox = _interopRequireDefault(require("./ImageBox"));

package/table/subComponent/Resizer.js

@@ -12,6 +12,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
 const Resizer = _ref => {
   let {
+    index,
     onResize
   } = _ref;
   const [parentNode, setParentNode] = (0, _react.useState)(null);
@@ -21,9 +22,9 @@ const Resizer = _ref => {
     const targetWidth = event.clientX - parentNode.getBoundingClientRect().left;
     parentNode.style.width = "".concat(targetWidth, "px");
     if (typeof onResize === 'function') {
-      onResize(targetWidth);
+      onResize(index, targetWidth);
     }
-  }, [parentNode, onResize]);
+  }, [parentNode, index, onResize]);
   const handleMouseUp = (0, _react.useCallback)(event => {
     event.stopPropagation();
     event.preventDefault();