@beppla/tapas-ui 1.0.70 → 1.0.72

package/module/Grid/StaticFixedSizeGrid.js

@@ -1,121 +1,179 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { createContext, forwardRef, useRef, useContext, useMemo, useCallback, useState } from "react";
-import { withTheme } from "@rneui/themed";
-import VariableSizeGrid from "./VariableSizeGrid";
-// type ScrollDirection = "forward" | "backward";
+"use strict";
 
-const StickyListContext = /*#__PURE__*/createContext(undefined);
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function (o, v) {
+  Object.defineProperty(o, "default", {
+    enumerable: true,
+    value: v
+  });
+} : function (o, v) {
+  o["default"] = v;
+});
+var __importStar = this && this.__importStar || function () {
+  var ownKeys = function (o) {
+    ownKeys = Object.getOwnPropertyNames || function (o) {
+      var ar = [];
+      for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+      return ar;
+    };
+    return ownKeys(o);
+  };
+  return function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+    __setModuleDefault(result, mod);
+    return result;
+  };
+}();
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var react_1 = __importStar(require("react"));
+var themed_1 = require("@rneui/themed");
+var VariableSizeGrid_1 = __importDefault(require("./VariableSizeGrid"));
+// type ScrollDirection = "forward" | "backward";
+var StickyListContext = (0, react_1.createContext)(undefined);
 StickyListContext.displayName = "StickyListContext";
-const useStickyListContext = () => {
-  const context = useContext(StickyListContext);
+var useStickyListContext = function () {
+  var context = (0, react_1.useContext)(StickyListContext);
   if (!context) {
     throw new Error("useStickyListContext must be used within a StickyListProvider");
   }
   return context;
 };
-const ItemWrapper = ({
-  data,
-  columnIndex,
-  rowIndex,
-  style
-}) => {
-  const {
-    ItemRenderer,
-    stickyColumnIndices,
-    headersRender,
-    columnHeaderHeight,
-    border,
-    theme,
-    hasActions
-  } = data;
+var ItemWrapper = function (_a) {
+  var _b;
+  var data = _a.data,
+    columnIndex = _a.columnIndex,
+    rowIndex = _a.rowIndex,
+    style = _a.style;
+  var ItemRenderer = data.ItemRenderer,
+    stickyColumnIndices = data.stickyColumnIndices,
+    headersRender = data.headersRender,
+    columnHeaderHeight = data.columnHeaderHeight,
+    border = data.border,
+    theme = data.theme,
+    hasActions = data.hasActions;
   if (stickyColumnIndices && columnIndex !== undefined && stickyColumnIndices.includes(columnIndex)) {
     return null;
   }
-
   // 检测当前列是否有 actions 按钮
-  const shouldShowActions = hasActions && hasActions(columnIndex ?? 0, rowIndex ?? 0);
-
+  var shouldShowActions = hasActions && hasActions(columnIndex !== null && columnIndex !== void 0 ? columnIndex : 0, rowIndex !== null && rowIndex !== void 0 ? rowIndex : 0);
   // 确保传递正确的参数给children函数
-  const childrenProps = {
-    columnIndex: columnIndex ?? 0,
-    rowIndex: rowIndex ?? 0,
-    style: {
-      ...style,
+  var childrenProps = {
+    columnIndex: columnIndex !== null && columnIndex !== void 0 ? columnIndex : 0,
+    rowIndex: rowIndex !== null && rowIndex !== void 0 ? rowIndex : 0,
+    style: __assign(__assign({}, style), {
       // 根据 hasActions 决定是否允许 overflow: "visible"
       overflow: shouldShowActions ? "visible" : "hidden",
-      borderBottom: border ? `1px solid ${theme.grey3 ?? "rgba(0, 0, 0, 0.12)"}` : "none",
-      top: style.top + (headersRender ? columnHeaderHeight ?? 40 : 0)
-    }
+      borderBottom: border ? "1px solid ".concat((_b = theme.grey3) !== null && _b !== void 0 ? _b : "rgba(0, 0, 0, 0.12)") : "none",
+      top: style.top + (headersRender ? columnHeaderHeight !== null && columnHeaderHeight !== void 0 ? columnHeaderHeight : 40 : 0)
+    })
   };
   return ItemRenderer(childrenProps);
 };
-const StickyColumnCell = ({
-  data,
-  columnIndex,
-  rowIndex,
-  style
-}) => {
-  const {
-    ItemRenderer,
-    stickyColumnIndices,
-    border,
-    theme,
-    hasActions
-  } = data;
-
+var StickyColumnCell = function (_a) {
+  var _b, _c;
+  var data = _a.data,
+    columnIndex = _a.columnIndex,
+    rowIndex = _a.rowIndex,
+    style = _a.style;
+  var ItemRenderer = data.ItemRenderer,
+    stickyColumnIndices = data.stickyColumnIndices,
+    border = data.border,
+    theme = data.theme,
+    hasActions = data.hasActions;
   // 检测当前列是否有 actions 按钮
-  const currentColumnIndex = stickyColumnIndices[columnIndex] ?? 0;
-  const shouldShowActions = hasActions && hasActions(currentColumnIndex, rowIndex);
-  const childrenProps = {
+  var currentColumnIndex = (_b = stickyColumnIndices[columnIndex]) !== null && _b !== void 0 ? _b : 0;
+  var shouldShowActions = hasActions && hasActions(currentColumnIndex, rowIndex);
+  var childrenProps = {
     columnIndex: currentColumnIndex,
-    rowIndex: rowIndex ?? 0,
-    style: {
-      ...style,
+    rowIndex: rowIndex !== null && rowIndex !== void 0 ? rowIndex : 0,
+    style: __assign(__assign({}, style), {
       overflow: shouldShowActions ? "visible" : "hidden",
-      borderBottom: border ? `1px solid ${theme?.grey3 ?? "rgba(0, 0, 0, 0.12)"}` : "none"
-    }
+      borderBottom: border ? "1px solid ".concat((_c = theme === null || theme === void 0 ? void 0 : theme.grey3) !== null && _c !== void 0 ? _c : "rgba(0, 0, 0, 0.12)") : "none"
+    })
   };
   return ItemRenderer(childrenProps);
 };
-const StickyColumn = ({
-  style,
-  children
-}) => /*#__PURE__*/React.createElement("div", {
-  className: "column-header-sticky",
-  style: style
-}, children);
-const ColumnHeaders = ({
-  style,
-  children
-}) => /*#__PURE__*/React.createElement("div", {
-  className: "sticky",
-  style: style
-}, children);
-const InnerElementType = /*#__PURE__*/forwardRef(({
-  children,
-  style,
-  hasActions,
-  ...rest
-}, ref) => {
+var StickyColumn = function (_a) {
+  var style = _a.style,
+    children = _a.children;
+  return react_1.default.createElement("div", {
+    className: "column-header-sticky",
+    style: style
+  }, children);
+};
+var ColumnHeaders = function (_a) {
+  var style = _a.style,
+    children = _a.children;
+  return react_1.default.createElement("div", {
+    className: "sticky",
+    style: style
+  }, children);
+};
+var InnerElementType = (0, react_1.forwardRef)(function (_a, ref) {
+  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+  var children = _a.children,
+    style = _a.style,
+    hasActions = _a.hasActions,
+    rest = __rest(_a, ["children", "style", "hasActions"]);
   // const [left, setLeft] = useState(0);
-  const {
-    headersRender,
-    stickyColumnIndices,
-    columnCount,
-    ItemRenderer,
-    columnWidth,
-    rowHeight,
-    rowCount,
-    columnHeaderBackgroundColor,
-    columnHeaderHeight,
-    width,
-    height,
-    theme,
-    border,
-    headerRef,
-    scrollLeft
-  } = useStickyListContext();
-
+  var _p = useStickyListContext(),
+    headersRender = _p.headersRender,
+    stickyColumnIndices = _p.stickyColumnIndices,
+    columnCount = _p.columnCount,
+    ItemRenderer = _p.ItemRenderer,
+    columnWidth = _p.columnWidth,
+    rowHeight = _p.rowHeight,
+    rowCount = _p.rowCount,
+    columnHeaderBackgroundColor = _p.columnHeaderBackgroundColor,
+    columnHeaderHeight = _p.columnHeaderHeight,
+    width = _p.width,
+    height = _p.height,
+    theme = _p.theme,
+    border = _p.border,
+    headerRef = _p.headerRef,
+    scrollLeft = _p.scrollLeft;
   // const handleScroll = useCallback(
   //   (event: {
   //     horizontalScrollDirection: ScrollDirection;
@@ -126,21 +184,23 @@ const InnerElementType = /*#__PURE__*/forwardRef(({
   //   }) => setLeft(event.scrollLeft),
   //   []
   // );
-
-  const stickyColumnsWidth = stickyColumnIndices?.reduce((acc, currentIndex) => acc + columnWidth(currentIndex), 0) ?? 0;
-  const totalWidth = useMemo(() => {
-    let sum = 0;
-    for (let i = 0; i < columnCount; i++) {
+  var stickyColumnsWidth = (_b = stickyColumnIndices === null || stickyColumnIndices === void 0 ? void 0 : stickyColumnIndices.reduce(function (acc, currentIndex) {
+    return acc + columnWidth(currentIndex);
+  }, 0)) !== null && _b !== void 0 ? _b : 0;
+  var totalWidth = (0, react_1.useMemo)(function () {
+    var sum = 0;
+    for (var i = 0; i < columnCount; i++) {
       sum += columnWidth(i);
     }
     return sum;
   }, [columnCount, columnWidth, width]);
-
   // 确保 hasActions 在作用域中
-  const hasActionsFn = hasActions || (() => false);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, headersRender && /*#__PURE__*/React.createElement(ColumnHeaders, {
+  var hasActionsFn = hasActions || function () {
+    return false;
+  };
+  return react_1.default.createElement(react_1.default.Fragment, null, headersRender && react_1.default.createElement(ColumnHeaders, {
     style: {
-      backgroundColor: theme?.background ?? "#F9F2E8",
+      backgroundColor: (_c = theme === null || theme === void 0 ? void 0 : theme.background) !== null && _c !== void 0 ? _c : "#F9F2E8",
       zIndex: 5,
       top: 0,
       left: 0,
@@ -151,41 +211,37 @@ const InnerElementType = /*#__PURE__*/forwardRef(({
       flexDirection: "row",
       overflow: "hidden"
     }
-  }, /*#__PURE__*/React.createElement(VariableSizeGrid, {
+  }, react_1.default.createElement(VariableSizeGrid_1.default, {
     ref: headerRef,
     columnCount: columnCount,
     columnWidth: columnWidth,
     height: columnHeaderHeight || 40,
     rowCount: 1,
-    rowHeight: () => columnHeaderHeight || 40,
-    width: width - stickyColumnsWidth
+    rowHeight: function () {
+      return columnHeaderHeight || 40;
+    },
+    width: width - stickyColumnsWidth,
     // onScroll={handleScroll}
-    ,
     itemData: {
       ItemRenderer: headersRender,
-      stickyColumnIndices,
-      columnHeaderHeight
+      stickyColumnIndices: stickyColumnIndices,
+      columnHeaderHeight: columnHeaderHeight
     },
     style: {
       // 保持列头的 overflow: "hidden" 以确保正确的滚动行为
       overflow: "hidden",
       // borderTopLeftRadius: theme?.radius?.mini ?? 4,
-      backgroundColor: columnHeaderBackgroundColor || (theme?.colors?.grey4 ?? "rgba(0, 0, 0, 0.08)")
+      backgroundColor: columnHeaderBackgroundColor || ((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.grey4) !== null && _e !== void 0 ? _e : "rgba(0, 0, 0, 0.08)")
     }
-  }, ItemWrapper)), /*#__PURE__*/React.createElement("div", _extends({
+  }, ItemWrapper)), react_1.default.createElement("div", __assign({
     ref: ref
   }, rest, {
-    style: {
-      ...style,
+    style: __assign(__assign({}, style), {
       width: totalWidth
-      // width: rest.width, // 使用正确的 grid 宽度减去 sticky 列宽度
-      // width: rest.width - stickyColumnsWidth, // 使用正确的 grid 宽度减去 sticky 列宽度
-      // position: "sticky", // 固定容器位置，不随滚动移动
-      // left: 0, // 固定在左侧
-    }
-  }), scrollLeft > 0 && /*#__PURE__*/React.createElement(StickyColumn, {
+    })
+  }), scrollLeft > 0 && react_1.default.createElement(StickyColumn, {
     style: {
-      backgroundColor: theme?.background ?? "#F9F2E8",
+      backgroundColor: (_f = theme === null || theme === void 0 ? void 0 : theme.background) !== null && _f !== void 0 ? _f : "#F9F2E8",
       zIndex: 5,
       top: 0,
       width: 1,
@@ -196,9 +252,9 @@ const InnerElementType = /*#__PURE__*/forwardRef(({
       position: "sticky",
       boxShadow: "2px 0px 6px 4px rgba(0, 0, 0, 0.12)"
     }
-  }), !stickyColumnIndices && scrollLeft !== totalWidth - width && /*#__PURE__*/React.createElement(StickyColumn, {
+  }), !stickyColumnIndices && scrollLeft !== totalWidth - width && react_1.default.createElement(StickyColumn, {
     style: {
-      backgroundColor: theme?.background ?? "#F9F2E8",
+      backgroundColor: (_g = theme === null || theme === void 0 ? void 0 : theme.background) !== null && _g !== void 0 ? _g : "#F9F2E8",
       zIndex: 5,
       top: 0,
       width: 1,
@@ -208,9 +264,9 @@ const InnerElementType = /*#__PURE__*/forwardRef(({
       position: "sticky",
       boxShadow: "-2px 0px 6px 4px rgba(0, 0, 0, 0.12)"
     }
-  }), headersRender && stickyColumnIndices && /*#__PURE__*/React.createElement(StickyColumn, {
+  }), headersRender && stickyColumnIndices && react_1.default.createElement(StickyColumn, {
     style: {
-      backgroundColor: theme?.background ?? "#F9F2E8",
+      backgroundColor: (_h = theme === null || theme === void 0 ? void 0 : theme.background) !== null && _h !== void 0 ? _h : "#F9F2E8",
       zIndex: 5,
       top: 0,
       width: stickyColumnsWidth,
@@ -220,148 +276,29 @@ const InnerElementType = /*#__PURE__*/forwardRef(({
       marginTop: scrollLeft === 0 ? -1 * (columnHeaderHeight || 40) : -1 * height,
       position: "sticky",
       boxShadow: "-2px -3px 6px rgba(0, 0, 0, 0.12)",
-      borderLeft: border ? `1px solid ${theme?.grey3 ?? "rgba(0, 0, 0, 0.12)"}` : "none"
+      borderLeft: border ? "1px solid ".concat((_j = theme === null || theme === void 0 ? void 0 : theme.grey3) !== null && _j !== void 0 ? _j : "rgba(0, 0, 0, 0.12)") : "none"
     }
-  }, /*#__PURE__*/React.createElement(VariableSizeGrid, {
+  }, react_1.default.createElement(VariableSizeGrid_1.default, {
     columnCount: stickyColumnIndices.length,
-    columnWidth: index => columnWidth(stickyColumnIndices?.[index] ?? 0),
+    columnWidth: function (index) {
+      var _a;
+      return columnWidth((_a = stickyColumnIndices === null || stickyColumnIndices === void 0 ? void 0 : stickyColumnIndices[index]) !== null && _a !== void 0 ? _a : 0);
+    },
     height: columnHeaderHeight || 40,
     rowCount: 1,
-    rowHeight: () => columnHeaderHeight || 40,
+    rowHeight: function () {
+      return columnHeaderHeight || 40;
+    },
     width: stickyColumnsWidth,
     itemData: {
       ItemRenderer: headersRender,
-      stickyColumnIndices
+      stickyColumnIndices: stickyColumnIndices
     },
     style: {
       overflow: "hidden",
-      backgroundColor: columnHeaderBackgroundColor || (theme?.colors?.grey4 ?? "rgba(0, 0, 0, 0.08)")
+      backgroundColor: columnHeaderBackgroundColor || ((_l = (_k = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _k === void 0 ? void 0 : _k.grey4) !== null && _l !== void 0 ? _l : "rgba(0, 0, 0, 0.08)")
     }
-  }, StickyColumnCell)), stickyColumnIndices && /*#__PURE__*/React.createElement(StickyColumn, {
-    style: {
-      backgroundColor: theme?.background ?? "#F9F2E8",
-      zIndex: 2,
-      top: headersRender ? columnHeaderHeight || 40 : 0,
-      left: width - stickyColumnsWidth - (border ? 1 : 0),
-      // 使用总宽度计算位置
-      width: stickyColumnsWidth,
-      height: "100%",
-      position: "sticky",
-      boxShadow: "-2px 0 6px rgba(0, 0, 0, 0.12)",
-      borderLeft: border ? `1px solid ${theme?.grey3 ?? "rgba(0, 0, 0, 0.12)"}` : "none"
-    }
-  }, /*#__PURE__*/React.createElement(VariableSizeGrid, {
-    columnCount: stickyColumnIndices.length,
-    columnWidth: index => columnWidth(stickyColumnIndices?.[index] ?? 0),
-    height: style.height,
-    rowCount: rowCount,
-    rowHeight: rowHeight,
-    width: stickyColumnsWidth,
-    itemData: {
-      ItemRenderer,
-      stickyColumnIndices,
-      border,
-      hasActions: hasActionsFn
-    },
-    style: {
-      overflow: hasActions ? "visible" : "hidden"
-    }
-  }, StickyColumnCell)), children));
-});
-const StickyList = ({
-  children,
-  headersRender,
-  stickyColumnIndices,
-  style,
-  columnHeaderHeight = 40,
-  columnHeaderBackgroundColor,
-  rowHeight,
-  onScroll,
-  hideBorder,
-  hideborderRadius,
-  gridRef,
-  border = false,
-  hasActions,
-  // eslint-disable-line @typescript-eslint/no-unused-vars
-  ...rest
-}) => {
-  const headerRef = useRef(null);
-  const [gridScrollLeft, setGridScrollLeft] = useState(0);
-  const handleScroll = useCallback(event => {
-    headerRef.current?.scrollTo({
-      ...event,
-      scrollTop: headerRef.current.scrollTop
-    });
-    onScroll && onScroll(event);
-    setGridScrollLeft(event.scrollLeft);
-  }, []);
-  const contextValue = useMemo(() => ({
-    ItemRenderer: children,
-    headerRef,
-    gridRef,
-    height: rest.height,
-    columnHeaderHeight,
-    columnHeaderBackgroundColor,
-    headersRender,
-    stickyColumnIndices,
-    columnWidth: rest.columnWidth,
-    width: rest.width,
-    columnCount: rest.columnCount,
-    rowHeight,
-    border,
-    scrollLeft: gridScrollLeft,
-    rowCount: rest.rowCount,
-    theme: rest.theme
-  }), [gridScrollLeft, children, headersRender, stickyColumnIndices, rest.columnWidth, rest.width, rest.columnCount, rest.height, rowHeight, rest.theme]);
-  return /*#__PURE__*/React.createElement(StickyListContext.Provider, {
-    value: contextValue
-  }, /*#__PURE__*/React.createElement(VariableSizeGrid, _extends({}, rest, {
-    ref: gridRef,
-    onScroll: handleScroll,
-    height: Math.min(rest.rowCount * rowHeight(0) + columnHeaderHeight, rest.height),
-    rowHeight: rowHeight ?? 56,
-    style: {
-      height: rest.height,
-      backgroundColor: rest.theme.background ?? "#F9F2E8",
-      ...style,
-      width: rest.width,
-      // 使用正确的 grid 宽度，而不是 style 中的宽度
-      border: border ? `1px solid ${rest.theme.grey3 ?? "rgba(0, 0, 0, 0.12)"}` : "none",
-      borderBottomWidth: hideBorder?.includes("bottom") ? 0 : 1,
-      borderTopWidth: hideBorder?.includes("top") ? 0 : 1,
-      borderLeftWidth: hideBorder?.includes("left") ? 0 : 1,
-      borderRightWidth: hideBorder?.includes("rigth") ? 0 : 1,
-      borderTopLeftRadius: hideborderRadius?.includes("topLeft") ? 0 : rest.theme.radius.mini ?? 4,
-      borderTopRightRadius: hideborderRadius?.includes("topRight") ? 0 : rest.theme.radius.mini ?? 4,
-      scrollbarWidth: "none",
-      msOverflowStyle: "none"
-      // 移除 overflow: "visible"，恢复 Grid 的正常滚动功能
-      // Modal 下拉菜单不需要这个设置
-    },
-    itemData: {
-      ItemRenderer: children,
-      headersRender,
-      stickyColumnIndices,
-      columnHeaderHeight,
-      border,
-      theme: rest.theme
-    }
-  }), ItemWrapper));
-};
-const StickyFixedSizeGrid = ({
-  headersRender,
-  children,
-  hasActions,
-  ...rest
-}) => /*#__PURE__*/React.createElement(StickyList, _extends({}, rest, {
-  innerElementType: props => /*#__PURE__*/React.createElement(InnerElementType, _extends({}, props, {
-    hasActions: hasActions
-  })),
-  headersRender: headersRender,
-  hasActions: hasActions
-}), children);
-export default withTheme(StickyFixedSizeGrid);
-//# sourceMappingURL=StaticFixedSizeGrid.js.mapfault.createElement(StickyColumn, {
+  }, StickyColumnCell)), stickyColumnIndices && react_1.default.createElement(StickyColumn, {
     style: {
       backgroundColor: (_m = theme === null || theme === void 0 ? void 0 : theme.background) !== null && _m !== void 0 ? _m : "#F9F2E8",
       zIndex: 2,
@@ -494,4 +431,3 @@ var StickyFixedSizeGrid = function (_a) {
   }), children);
 };
 exports.default = (0, themed_1.withTheme)(StickyFixedSizeGrid);
-//# sourceMappingURL=StaticFixedSizeGrid.js.map