@pisell/private-materials 6.5.12 → 6.5.14

package/es/components/list/examples/GroupedListExample.js

@@ -0,0 +1,207 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useState } from 'react';
+import { List } from "../index";
+
+// 示例数据接口
+
+// 示例组件：门票列表展示
+var GroupedListExample = function GroupedListExample() {
+  // 模拟门票数据 - 使用 ticketType 字段进行分组
+  var mockTicketData = [{
+    id: '1',
+    title: '2hrs upgrade Unlimited',
+    description: 'Adult Day',
+    price: 90,
+    duration: '2 h',
+    ticketType: 'all-access',
+    category: 'Adult Day Pass'
+  }, {
+    id: '2',
+    title: '2hrs upgrade Unlimited',
+    description: 'Kid Day',
+    price: 90,
+    duration: '2 h',
+    ticketType: 'all-access',
+    category: 'Kids Day Pass'
+  }, {
+    id: '3',
+    title: '2hrs upgrade Unlimited',
+    description: 'Family Package',
+    price: 90,
+    duration: '2 h',
+    ticketType: 'all-access',
+    category: 'Family Pass'
+  }, {
+    id: '4',
+    title: 'Child Ticket - Morning',
+    description: 'Special price for children',
+    price: 45,
+    duration: '4 h',
+    ticketType: 'child',
+    category: 'Morning Session'
+  }, {
+    id: '5',
+    title: 'Child Ticket - Afternoon',
+    description: 'Afternoon activities',
+    price: 45,
+    duration: '4 h',
+    ticketType: 'child',
+    category: 'Afternoon Session'
+  }, {
+    id: '6',
+    title: 'Adult Standard',
+    description: 'Standard adult admission',
+    price: 70,
+    duration: '6 h',
+    ticketType: 'adult',
+    category: 'Standard Admission'
+  }, {
+    id: '7',
+    title: 'Adult Premium',
+    description: 'Premium experience',
+    price: 120,
+    duration: '8 h',
+    ticketType: 'adult',
+    category: 'Premium Experience'
+  }, {
+    id: '8',
+    title: 'Special Event',
+    description: 'Limited time offer',
+    price: 150,
+    duration: '3 h',
+    ticketType: 'category5',
+    category: 'Special Event'
+  }];
+
+  // Tab配置，group值对应数据中 ticketType 字段的值
+  var tabItems = [{
+    key: 'all-access',
+    label: "All-Access Ticket (".concat(mockTicketData.filter(function (item) {
+      return item.ticketType === 'all-access';
+    }).length, ")"),
+    group: 'all-access'
+  }, {
+    key: 'child',
+    label: "Child Ticket (".concat(mockTicketData.filter(function (item) {
+      return item.ticketType === 'child';
+    }).length, ")"),
+    group: 'child'
+  }, {
+    key: 'adult',
+    label: "Adult Ticket (".concat(mockTicketData.filter(function (item) {
+      return item.ticketType === 'adult';
+    }).length, ")"),
+    group: 'adult'
+  }, {
+    key: 'category5',
+    label: "Category 5 (".concat(mockTicketData.filter(function (item) {
+      return item.ticketType === 'category5';
+    }).length, ")"),
+    group: 'category5'
+  }];
+
+  // 状态管理
+  var _useState = useState(mockTicketData),
+    _useState2 = _slicedToArray(_useState, 1),
+    currentData = _useState2[0];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 1),
+    loading = _useState4[0];
+
+  // 自定义渲染每个门票项
+  var renderTicketItem = function renderTicketItem(item, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: item.id,
+      style: {
+        background: '#FFF',
+        borderRadius: '12px',
+        padding: '16px',
+        border: '1px solid #E4E7EC',
+        boxShadow: '0px 1px 2px rgba(16, 24, 40, 0.05)',
+        height: '160px',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: '60px',
+        background: "linear-gradient(135deg, ".concat(item.ticketType === 'all-access' ? '#8157D5, #B794F6' : item.ticketType === 'child' ? '#F56565, #FC8181' : item.ticketType === 'adult' ? '#4299E1, #63B3ED' : '#ED8936, #F6AD55', ")"),
+        borderRadius: '8px',
+        marginBottom: '12px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: 'white',
+        fontWeight: 'bold',
+        fontSize: '18px'
+      }
+    }, item.description), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
+      style: {
+        fontSize: '16px',
+        fontWeight: '600',
+        margin: '0 0 4px 0',
+        color: '#101828'
+      }
+    }, item.title), /*#__PURE__*/React.createElement("p", {
+      style: {
+        fontSize: '14px',
+        color: '#667085',
+        margin: '0 0 8px 0'
+      }
+    }, item.duration), /*#__PURE__*/React.createElement("p", {
+      style: {
+        fontSize: '18px',
+        fontWeight: '700',
+        color: '#101828',
+        margin: 0
+      }
+    }, "A$ ", item.price)));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '20px',
+      maxWidth: '1200px',
+      margin: '0 auto'
+    }
+  }, /*#__PURE__*/React.createElement("h1", {
+    style: {
+      marginBottom: '20px',
+      color: '#101828'
+    }
+  }, "\u95E8\u7968\u5206\u7EC4\u5C55\u793A\u793A\u4F8B"), /*#__PURE__*/React.createElement(List, {
+    data: currentData,
+    tabData: tabItems,
+    tabGroup: "ticketType" // 指定使用 ticketType 字段进行分组
+    ,
+    tabStyle: "anchor",
+    displayStyle: "grid",
+    layoutDirection: "vertical",
+    columns: 2,
+    rows: 2,
+    columnGap: 16,
+    rowGap: 16,
+    height: "600px",
+    renderItem: renderTicketItem,
+    loading: loading,
+    emptyConfig: {
+      show: true,
+      text: '暂无门票数据',
+      description: '请稍后再试'
+    },
+    className: "ticket-list-example"
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: '20px',
+      padding: '16px',
+      background: '#F8F9FA',
+      borderRadius: '8px'
+    }
+  }, /*#__PURE__*/React.createElement("h3", null, "\u4F7F\u7528\u8BF4\u660E\uFF1A"), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "\u901A\u8FC7 ", /*#__PURE__*/React.createElement("code", null, "tabGroup=\"ticketType\""), " \u6307\u5B9A\u4F7F\u7528\u6570\u636E\u9879\u7684 ticketType \u5B57\u6BB5\u8FDB\u884C\u5206\u7EC4"), /*#__PURE__*/React.createElement("li", null, "Tab\u7684 group \u5C5E\u6027\u503C\u5BF9\u5E94\u6570\u636E\u9879\u4E2D ticketType \u5B57\u6BB5\u7684\u503C"), /*#__PURE__*/React.createElement("li", null, "\u70B9\u51FB\u4E0D\u540C\u7684\u6807\u7B7E\u9875\u53EF\u4EE5\u67E5\u770B\u4E0D\u540C\u5206\u7EC4\u7684\u95E8\u7968"), /*#__PURE__*/React.createElement("li", null, "\u6570\u636E\u4F1A\u6839\u636E\u9009\u62E9\u7684\u5206\u7EC4\u81EA\u52A8\u8FC7\u6EE4"), /*#__PURE__*/React.createElement("li", null, "\u6BCF\u4E2A\u6807\u7B7E\u9875\u663E\u793A\u5BF9\u5E94\u5206\u7EC4\u7684\u6570\u91CF"), /*#__PURE__*/React.createElement("li", null, "\u652F\u6301\u6240\u6709\u73B0\u6709\u7684List\u7EC4\u4EF6\u5E03\u5C40\u548C\u5206\u9875\u6A21\u5F0F"))));
+};
+export default GroupedListExample;

package/es/components/list/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export { useDevice, getUserAgentInfo } from './useDevice';
+export type { DeviceType, DeviceInfo } from './useDevice';
+export { default as useWaterfall } from './useWaterfall';
+export { useListState } from './useListState';
+export type { ListState, ListAction, UseListStateProps, UseListStateReturn } from './useListState';

package/es/components/list/hooks/index.js

@@ -0,0 +1,3 @@
+export { useDevice, getUserAgentInfo } from "./useDevice";
+export { default as useWaterfall } from "./useWaterfall";
+export { useListState } from "./useListState";

package/es/components/list/hooks/useDevice.d.ts

@@ -0,0 +1,24 @@
+export declare type DeviceType = 'pc' | 'pad' | 'mobile';
+export interface DeviceInfo {
+    type: DeviceType;
+    isMobile: boolean;
+    isPad: boolean;
+    isPc: boolean;
+    width: number;
+    height: number;
+}
+/**
+ * 设备检测Hook
+ * 根据屏幕宽度和用户代理判断当前设备类型
+ */
+export declare const useDevice: () => DeviceInfo;
+/**
+ * 获取用户代理信息
+ * @returns 用户代理相关信息
+ */
+export declare const getUserAgentInfo: () => {
+    isMobileUA: boolean;
+    isTabletUA: boolean;
+    isDesktopUA: boolean;
+    userAgent: string;
+};

package/es/components/list/hooks/useDevice.js

@@ -0,0 +1,102 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useState, useEffect } from 'react';
+/**
+ * 设备检测Hook
+ * 根据屏幕宽度和用户代理判断当前设备类型
+ */
+export var useDevice = function useDevice() {
+  var _useState = useState(function () {
+      // 初始化时的默认值
+      var initialWidth = typeof window !== 'undefined' ? window.innerWidth : 1920;
+      var initialHeight = typeof window !== 'undefined' ? window.innerHeight : 1080;
+      var initialType = getDeviceType(initialWidth);
+      return {
+        type: initialType,
+        isMobile: initialType === 'mobile',
+        isPad: initialType === 'pad',
+        isPc: initialType === 'pc',
+        width: initialWidth,
+        height: initialHeight
+      };
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    deviceInfo = _useState2[0],
+    setDeviceInfo = _useState2[1];
+  useEffect(function () {
+    var handleResize = function handleResize() {
+      var width = window.innerWidth;
+      var height = window.innerHeight;
+      var type = getDeviceType(width);
+      setDeviceInfo({
+        type: type,
+        isMobile: type === 'mobile',
+        isPad: type === 'pad',
+        isPc: type === 'pc',
+        width: width,
+        height: height
+      });
+    };
+
+    // 初次加载时检测一次
+    handleResize();
+
+    // 监听窗口尺寸变化
+    window.addEventListener('resize', handleResize);
+
+    // 清理监听器
+    return function () {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  return deviceInfo;
+};
+
+/**
+ * 根据屏幕宽度判断设备类型
+ * @param width 屏幕宽度
+ * @returns 设备类型
+ */
+function getDeviceType(width) {
+  // 移动端：小于 768px
+  if (width < 768) {
+    return 'mobile';
+  }
+  // 平板：768px - 1200px
+  else if (width < 1200) {
+    return 'pad';
+  }
+  // PC端：大于等于 1200px
+  else {
+    return 'pc';
+  }
+}
+
+/**
+ * 获取用户代理信息
+ * @returns 用户代理相关信息
+ */
+export var getUserAgentInfo = function getUserAgentInfo() {
+  if (typeof window === 'undefined' || !window.navigator) {
+    return {
+      isMobileUA: false,
+      isTabletUA: false,
+      isDesktopUA: true,
+      userAgent: ''
+    };
+  }
+  var userAgent = window.navigator.userAgent.toLowerCase();
+  var isMobileUA = /mobile|android|iphone|ipod|phone/.test(userAgent);
+  var isTabletUA = /tablet|ipad/.test(userAgent) && !isMobileUA;
+  var isDesktopUA = !isMobileUA && !isTabletUA;
+  return {
+    isMobileUA: isMobileUA,
+    isTabletUA: isTabletUA,
+    isDesktopUA: isDesktopUA,
+    userAgent: userAgent
+  };
+};

package/es/components/list/hooks/useListState.d.ts

@@ -0,0 +1,43 @@
+import { TabItem, LoadDataParams } from '../types';
+export interface ListState {
+    activeTab: string;
+    currentPage: number;
+    isStickyActive: boolean;
+}
+export declare type ListAction = {
+    type: 'SET_ACTIVE_TAB';
+    payload: string;
+} | {
+    type: 'SET_CURRENT_PAGE';
+    payload: number;
+} | {
+    type: 'SET_STICKY_ACTIVE';
+    payload: boolean;
+} | {
+    type: 'RESET_PAGE';
+};
+export interface UseListStateProps {
+    /** 外部传入的当前页码 */
+    externalCurrentPage?: number;
+    /** tab数据 */
+    tabItems: TabItem[];
+    /** 默认页面大小 */
+    defaultPageSize: number;
+    /** 数据加载回调 */
+    onLoadData?: (params: LoadDataParams) => void;
+}
+export interface UseListStateReturn {
+    state: ListState;
+    setActiveTab: (tab: string) => void;
+    setCurrentPage: (page: number) => void;
+    setStickyActive: (active: boolean) => void;
+    resetPage: () => void;
+    handleTabChange: (key: string) => void;
+    handlePageChange: (page: number, size?: number) => void;
+    handleShowSizeChange: (current: number, size: number) => void;
+    handleLoadMore: () => void;
+    handleViewLess: () => void;
+    handleScrollLoad: () => void;
+    actualCurrentPage: number;
+}
+export declare const useListState: ({ externalCurrentPage, tabItems, defaultPageSize, onLoadData, }: UseListStateProps) => UseListStateReturn;

package/es/components/list/hooks/useListState.js

@@ -0,0 +1,176 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+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(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(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); }
+import { useReducer, useCallback } from 'react';
+
+// 状态接口
+
+// 动作类型
+
+// reducer函数
+function listStateReducer(state, action) {
+  switch (action.type) {
+    case 'SET_ACTIVE_TAB':
+      return _objectSpread(_objectSpread({}, state), {}, {
+        activeTab: action.payload
+      });
+    case 'SET_CURRENT_PAGE':
+      return _objectSpread(_objectSpread({}, state), {}, {
+        currentPage: action.payload
+      });
+    case 'SET_STICKY_ACTIVE':
+      return _objectSpread(_objectSpread({}, state), {}, {
+        isStickyActive: action.payload
+      });
+    case 'RESET_PAGE':
+      return _objectSpread(_objectSpread({}, state), {}, {
+        currentPage: 1
+      });
+    default:
+      return state;
+  }
+}
+
+// Hook参数接口
+
+// Hook返回值接口
+
+export var useListState = function useListState(_ref) {
+  var externalCurrentPage = _ref.externalCurrentPage,
+    tabItems = _ref.tabItems,
+    defaultPageSize = _ref.defaultPageSize,
+    onLoadData = _ref.onLoadData;
+  // 初始状态
+  var initialState = {
+    activeTab: tabItems.length > 0 ? tabItems[0].key : 'all',
+    currentPage: 1,
+    isStickyActive: false
+  };
+  var _useReducer = useReducer(listStateReducer, initialState),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
+
+  // 计算实际使用的当前页码
+  var actualCurrentPage = externalCurrentPage || state.currentPage;
+
+  // 状态更新函数
+  var setActiveTab = useCallback(function (tab) {
+    dispatch({
+      type: 'SET_ACTIVE_TAB',
+      payload: tab
+    });
+  }, []);
+  var setCurrentPage = useCallback(function (page) {
+    dispatch({
+      type: 'SET_CURRENT_PAGE',
+      payload: page
+    });
+  }, []);
+  var setStickyActive = useCallback(function (active) {
+    dispatch({
+      type: 'SET_STICKY_ACTIVE',
+      payload: active
+    });
+  }, []);
+  var resetPage = useCallback(function () {
+    dispatch({
+      type: 'RESET_PAGE'
+    });
+  }, []);
+
+  // 统一的数据加载函数
+  var loadData = useCallback(function (params) {
+    onLoadData === null || onLoadData === void 0 || onLoadData(params);
+  }, [onLoadData]);
+
+  // 业务逻辑函数
+  var handleTabChange = useCallback(function (key) {
+    setActiveTab(key);
+    resetPage();
+    loadData({
+      trigger: 'tabChange',
+      currentPage: 1,
+      pageSize: defaultPageSize,
+      activeTab: key
+    });
+  }, [setActiveTab, resetPage, loadData, defaultPageSize]);
+  var handlePageChange = useCallback(function (page, size) {
+    var previousPage = actualCurrentPage;
+    var pageSize = size || defaultPageSize;
+    setCurrentPage(page);
+    loadData({
+      trigger: 'pagination',
+      currentPage: page,
+      pageSize: pageSize,
+      activeTab: state.activeTab,
+      previousPage: previousPage
+    });
+  }, [actualCurrentPage, defaultPageSize, setCurrentPage, loadData, state.activeTab]);
+  var handleShowSizeChange = useCallback(function (current, size) {
+    var previousPageSize = defaultPageSize;
+    setCurrentPage(current);
+    loadData({
+      trigger: 'pageSize',
+      currentPage: current,
+      pageSize: size,
+      activeTab: state.activeTab,
+      previousPageSize: previousPageSize
+    });
+  }, [defaultPageSize, setCurrentPage, loadData, state.activeTab]);
+  var handleLoadMore = useCallback(function () {
+    var nextPage = actualCurrentPage + 1;
+    setCurrentPage(nextPage);
+    loadData({
+      trigger: 'loadMore',
+      currentPage: nextPage,
+      pageSize: defaultPageSize,
+      activeTab: state.activeTab
+    });
+  }, [actualCurrentPage, setCurrentPage, loadData, defaultPageSize, state.activeTab]);
+  var handleViewLess = useCallback(function () {
+    resetPage();
+    loadData({
+      trigger: 'pagination',
+      currentPage: 1,
+      pageSize: defaultPageSize,
+      activeTab: state.activeTab,
+      previousPage: actualCurrentPage
+    });
+  }, [resetPage, loadData, defaultPageSize, state.activeTab, actualCurrentPage]);
+
+  // 处理滚动加载
+  var handleScrollLoad = useCallback(function () {
+    var nextPage = actualCurrentPage + 1;
+    setCurrentPage(nextPage);
+    loadData({
+      trigger: 'scroll',
+      currentPage: nextPage,
+      pageSize: defaultPageSize,
+      activeTab: state.activeTab
+    });
+  }, [actualCurrentPage, setCurrentPage, loadData, defaultPageSize, state.activeTab]);
+  return {
+    state: state,
+    setActiveTab: setActiveTab,
+    setCurrentPage: setCurrentPage,
+    setStickyActive: setStickyActive,
+    resetPage: resetPage,
+    handleTabChange: handleTabChange,
+    handlePageChange: handlePageChange,
+    handleShowSizeChange: handleShowSizeChange,
+    handleLoadMore: handleLoadMore,
+    handleViewLess: handleViewLess,
+    handleScrollLoad: handleScrollLoad,
+    actualCurrentPage: actualCurrentPage
+  };
+};

package/es/components/list/hooks/useWaterfall.d.ts

@@ -0,0 +1,34 @@
+export interface WaterfallItem {
+    id: string | number;
+    data: any;
+    height?: number;
+    width?: number;
+}
+export interface WaterfallTrack<T = any> {
+    items: T[];
+    size: number;
+}
+export interface WaterfallLayoutOptions {
+    tracks: number;
+    trackGap: number;
+    itemGap: number;
+    direction: 'vertical' | 'horizontal';
+}
+export interface WaterfallLayout<T = any> {
+    tracks: WaterfallTrack<T>[];
+    totalSize: number;
+}
+export declare const useWaterfall: <T extends {
+    id: string | number;
+    height?: number | undefined;
+    width?: number | undefined;
+}>(items: T[], options: WaterfallLayoutOptions) => {
+    layout: WaterfallLayout<T>;
+    registerItemRef: (id: string | number, element: HTMLElement | null) => void;
+    measureItemSize: (id: string | number) => {
+        width: number;
+        height: number;
+    };
+    recalculateLayout: () => void;
+};
+export default useWaterfall;