@hzab/hierarchical-statistics 1.0.0-beta → 1.0.0-beta2

package/CHANGELOG.md

@@ -1,15 +1,15 @@
-# @hzab/component-boilerplate@0.1.0
-- fix: 删掉@hzab/list-render-mobile
-- fix: 新增移动端下拉刷新
-# @hzab/component-boilerplate@0.0.6
-- fix: 修复跳转同路由，listRender参数依赖没有更新问题
-# @hzab/component-boilerplate@0.0.5
-- fix: 暴露面包屑回显数据breadcrumbData
-# @hzab/component-boilerplate@0.0.4
-- fix: dependencies改成peerDependencies
-- fix: 样式index.module.less改成index.less引入
-- fix: 新增className外层类名传递
-# @hzab/component-boilerplate@0.0.3
-- fix: 适配mobile的ItemRender自定义字段
-# @hzab/component-boilerplate@0.0.1
+# @hzab/component-boilerplate@0.1.0
+- fix: 删掉@hzab/list-render-mobile
+- fix: 列表用ScrollList组件
+# @hzab/component-boilerplate@0.0.6
+- fix: 修复跳转同路由，listRender参数依赖没有更新问题
+# @hzab/component-boilerplate@0.0.5
+- fix: 暴露面包屑回显数据breadcrumbData
+# @hzab/component-boilerplate@0.0.4
+- fix: dependencies改成peerDependencies
+- fix: 样式index.module.less改成index.less引入
+- fix: 新增className外层类名传递
+# @hzab/component-boilerplate@0.0.3
+- fix: 适配mobile的ItemRender自定义字段
+# @hzab/component-boilerplate@0.0.1
 组件初始化

package/README.md

@@ -1,127 +1,123 @@
-# @hzab/group-user-selector
-
-组件模板
-
-- node@16.16.0
-
-- 注意：首次克隆先执行 npm run prepare 命令
-
-# 组件
-
-## 示例
-
-```jsx
-import InfiniteListUi from "@hzab/hierarchical-statistics/src/components/InfiniteListUi";
-      <InfiniteListUi
-        ref={listRef}
-        style={{
-          maxWidth: "400px",
-        }}
-        listModal={
-          new DataModel({
-            getListApi: "/api/v1/sysOrg/getDeptTree",
-            query: {
-              pageNum: 1,
-              pageSize: 8,
-            },
-          })
-        }
-        fieldList={{
-          value: "orgId",
-          label: "orgName",
-        }}
-        Slots={{
-          renderItem: (record) => (
-            <div
-              onClick={() => {
-                listRef.current.handleNodeClick(record);
-              }}
-              style={{ padding: "12px 30px", border: "1px solid red" }}
-            >
-              <div>{record?.orgName}</div>
-            </div>
-          )
-        }}
-        virtualPagedListProps={{
-          height: 300,
-          dynamicHeightMode: true,
-          noMoreComponent: <div>没有更多数据了</div>,
-        }}
-      ></InfiniteListUi>
-```
-
-## API
-
-### InfoPanel Attributes
-
-| 参数                 | 类型                           | 必填  | 默认值    | 说明                                 |
-| -------------------- | ------------------------------| ----- | --------- | ----------------------------------- |
-| listModal            | Object                        | 是    | -         | 列表数据模型DataModel，必须包含getListApi |
-| breadModel           | Object                        | 否    | -        | 回显数据模型DataModel，必须包含getApi |
-| showHome             | Boolean                       | 否    | -         | 是否显示面包屑首页            |
-| onNodeClick          | function(item)                | 否    | -         | item点击事件        |
-| onNodeSelect         | function(item)                | 否    | -         | item选中事件        |
-| onBreadcrumbClick    | function(item)                | 否    | -         | 回显点击事件        |
-| fieldList            | {value: number, label: string}| 否    | -         | 列表默认关联字段      |
-| fieldBreadcrumb      | {value: number, label: string}| 否    | -         | 面包屑显示对应关联字段  |
-| parentField          | string                        | 否    | parentId  | 请求接口关联字段        |
-| homeBreadcrumb       | string                        | 否    | 首页      | 面包屑首页名称     |
-| style                | CSSProperties                 | 否    | -         | 组件外层样式     |
-| listStyle            | CSSProperties                 | 否    | -         | 列表外层样式     |
-| readcrumbStyle       | CSSProperties                 | 否    | -         | 面包屑外层样式    |
-| separatorStyle       | CSSProperties                 | 否    | -         | 面包屑分割符样式    |
-| virtualPagedListProps| Object                        | 否    | -         | virtualPagedList 配置    |
-| separator            | string                        | 否    | -         | 分隔符 默认"-"     |
-| Slots                | Object                        | 是    | -         | 插槽              |
-| isPullRefresh        | Boolean                       | 否    | false     | 移动端是否可以下拉刷新           |
-
-
-
-### Slots
-
-| 参数                 | 类型                | 必填  | 默认值   | 说明                                |
-| -------------------- | -------------------| ----- | ------- | ----------------------------------- |
-| fixRenderCenter      | Function           | 否    | -        | 固定在头部 面包屑和列表之间插槽       |
-| itemRender           | Function           | 是    | -        | 自定义列表项       |
-
-# 组件开发流程
-
-- 在 config/webpack.config.js 中按需修改 library 配置的文件名
-- 在 config/webpack.config.js 中按需修改 alias 配置的包名，便于本地调试
-- 在 tsconfig.json 中按需修改 paths 配置的包名，解决 ts 报错问题
-- npm run dev
-
-## 文件目录
-
-- example 本地开发测试代码
-- src 组件源码
-
-## 命令
-
-- Mac 执行该命令，设置 pre-commit 为可执行文件
-
-  - npm run mac-chmod
-  - chmod +x .husky && chmod +x .husky/pre-commit
-
-- 生成文档：npm run docs
-- 本地运行：npm run dev
-- 打包编译：npm run build
-
-## 发布
-
-- 注意：示例代码生效，但发布之后未生效。确认是否执行了编译！！！
-
-- 编译组件：npm run build
-- 命令：npm publish --access public
-- 发布目录：
-  - src
-
-## 配置
-
-### 配置文件
-
-- 本地配置文件：config/config.js
-
-### webpack 配置文件
-
-- config/webpack.config.js
+# @hzab/group-user-selector
+
+组件模板
+
+- node@16.16.0
+
+- 注意：首次克隆先执行 npm run prepare 命令
+
+# 组件
+
+## 示例
+
+```jsx
+import InfiniteListUi from "@hzab/hierarchical-statistics/src/components/InfiniteListUi";
+      <InfiniteListUi
+        ref={listRef}
+        style={{
+          maxWidth: "400px",
+        }}
+        listModal={
+          new DataModel({
+            getListApi: "/api/v1/sysOrg/getDeptTree",
+            query: {
+              pageNum: 1,
+              pageSize: 8,
+            },
+          })
+        }
+        fieldList={{
+          value: "orgId",
+          label: "orgName",
+        }}
+        Slots={{
+          renderItem: ({ item }) => (
+            <div
+              onClick={() => {
+                listRef.current.handleNodeClick(item);
+              }}
+              style={{ padding: "12px 30px", border: "1px solid red" }}
+            >
+              <div>{item?.orgName}</div>
+            </div>
+          )
+        }}
+        scrollListProps={{
+          noMoreComponent: <div>没有更多数据了</div>,
+        }}
+      ></InfiniteListUi>
+```
+
+## API
+
+### InfoPanel Attributes
+
+| 参数                 | 类型                           | 必填  | 默认值    | 说明                                 |
+| -------------------- | ------------------------------| ----- | --------- | ----------------------------------- |
+| listModal            | Object                        | 是    | -         | 列表数据模型DataModel，必须包含getListApi |
+| breadModel           | Object                        | 否    | -        | 回显数据模型DataModel，必须包含getApi |
+| showHome             | Boolean                       | 否    | -         | 是否显示面包屑首页            |
+| onNodeClick          | function(item)                | 否    | -         | item点击事件        |
+| onNodeSelect         | function(item)                | 否    | -         | item选中事件        |
+| onBreadcrumbClick    | function(item)                | 否    | -         | 回显点击事件        |
+| fieldList            | {value: number, label: string}| 否    | -         | 列表默认关联字段      |
+| fieldBreadcrumb      | {value: number, label: string}| 否    | -         | 面包屑显示对应关联字段  |
+| parentField          | string                        | 否    | parentId  | 请求接口关联字段        |
+| homeBreadcrumb       | string                        | 否    | 首页      | 面包屑首页名称     |
+| style                | CSSProperties                 | 否    | -         | 组件外层样式     |
+| listStyle            | CSSProperties                 | 否    | -         | 列表外层样式     |
+| readcrumbStyle       | CSSProperties                 | 否    | -         | 面包屑外层样式    |
+| separatorStyle       | CSSProperties                 | 否    | -         | 面包屑分割符样式    |
+| scrollListProps      | Object                        | 否    | -         | scrollListProps 配置    |
+| separator            | string                        | 否    | -         | 分隔符 默认"-"     |
+| Slots                | Object                        | 是    | -         | 插槽              |
+
+
+### Slots
+
+| 参数                 | 类型                | 必填  | 默认值   | 说明                                |
+| -------------------- | -------------------| ----- | ------- | ----------------------------------- |
+| fixRenderCenter      | Function           | 否    | -        | 固定在头部 面包屑和列表之间插槽       |
+| itemRender           | Function           | 是    | -        | 自定义列表项       |
+
+# 组件开发流程
+
+- 在 config/webpack.config.js 中按需修改 library 配置的文件名
+- 在 config/webpack.config.js 中按需修改 alias 配置的包名，便于本地调试
+- 在 tsconfig.json 中按需修改 paths 配置的包名，解决 ts 报错问题
+- npm run dev
+
+## 文件目录
+
+- example 本地开发测试代码
+- src 组件源码
+
+## 命令
+
+- Mac 执行该命令，设置 pre-commit 为可执行文件
+
+  - npm run mac-chmod
+  - chmod +x .husky && chmod +x .husky/pre-commit
+
+- 生成文档：npm run docs
+- 本地运行：npm run dev
+- 打包编译：npm run build
+
+## 发布
+
+- 注意：示例代码生效，但发布之后未生效。确认是否执行了编译！！！
+
+- 编译组件：npm run build
+- 命令：npm publish --access public
+- 发布目录：
+  - src
+
+## 配置
+
+### 配置文件
+
+- 本地配置文件：config/config.js
+
+### webpack 配置文件
+
+- config/webpack.config.js

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/hierarchical-statistics",
-  "version": "1.0.0-beta",
+  "version": "1.0.0-beta2",
   "description": "",
   "main": "src",
   "scripts": {
@@ -49,9 +49,6 @@
   },
   "peerDependencies": {
     "@hzab/data-model": ">=1.7.5",
-    "@hzab/headless-components": ">=0.0.3"
-  },
-  "dependencies": {
-    "react-window-pull-refresh": "^1.0.9"
+    "@hzab/headless-components": ">=0.0.6"
   }
 }

package/src/components/Breadcrumb/index.tsx

@@ -1,25 +1,25 @@
-import "../index.less";
-const BreadcrumbUI = (props: any) => {
-  const { readcrumbStyle, separatorStyle, separator, breadcrumbData, handleBreadcrumbClick } = props;
-  return (
-    <div className={`breadcrumb-box`} style={readcrumbStyle}>
-      {breadcrumbData.map((item, index) => (
-        <div className="breadcrumb-item" key={index}>
-          <span
-            className="breadcrumb-title"
-            style={{ color: breadcrumbData.length - 1 == index ? "#aeadad" : "#403ef5" }}
-            key={item?.value}
-            onClick={() => handleBreadcrumbClick(item, index)}
-          >
-            {item?.label}
-          </span>
-          <span className="breadcrumb-separator" style={separatorStyle}>
-            {breadcrumbData?.length - 1 != index ? separator : ""}
-          </span>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export default BreadcrumbUI;
+import "../index.less";
+const BreadcrumbUI = (props: any) => {
+  const { readcrumbStyle, separatorStyle, separator, breadcrumbData, handleBreadcrumbClick } = props;
+  return (
+    <div className={`breadcrumb-box`} style={readcrumbStyle}>
+      {breadcrumbData.map((item, index) => (
+        <div className="breadcrumb-item" key={index}>
+          <span
+            className="breadcrumb-title"
+            style={{ color: breadcrumbData.length - 1 == index ? "#aeadad" : "#403ef5" }}
+            key={item?.value}
+            onClick={() => handleBreadcrumbClick(item, index)}
+          >
+            {item?.label}
+          </span>
+          <span className="breadcrumb-separator" style={separatorStyle}>
+            {breadcrumbData?.length - 1 != index ? separator : ""}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default BreadcrumbUI;

package/src/components/InfiniteListUi/index.tsx

@@ -1,103 +1,87 @@
-import { ForwardedRef, forwardRef, useImperativeHandle, useRef } from "react";
-import { PullToRefresh } from "react-window-pull-refresh";
-import VirtualPagedList from "@hzab/headless-components/src/VirtualPagedList";
-import { ConfigProvider, Spin, Empty, Button } from "antd";
-import { useInfiniteList } from "../../use-infinite-list";
-import Breadcrumb from "../Breadcrumb";
-import { InfiniteListProps, InfiniteListInstance } from "../../type";
-import "../index.less";
-const InfiniteListUi = (props: InfiniteListProps, ref: ForwardedRef<InfiniteListInstance>) => {
-  const {
-    states: {
-      listModal,
-      breadModel,
-      readcrumbStyle,
-      separatorStyle,
-      separator,
-      style,
-      selectedLoadIdNode,
-      breadcrumbData,
-      Slots,
-      loading,
-      listStyle,
-      listRef,
-      virtualPagedListProps,
-      className,
-      refreshKey,
-      isPullRefresh,
-    },
-    actions: { handleSelectId, handleNodeClick, handleBreadcrumbClick, fetchBreadData, handleListRefresh },
-  } = useInfiniteList({ ...props });
-
-  useImperativeHandle(ref, () => ({
-    handleNodeClick,
-    handleSelectId,
-    listRef: listRef?.current,
-    listModal,
-    breadModel,
-    fetchBreadData,
-    breadcrumbData,
-    handleListRefresh,
-  }));
-
-  const loadData = async (pageNum) => {
-    listModal.query = { ...listModal.query, pageNum: pageNum };
-    const res = await listModal?.getList();
-    const list = res?.list ?? [];
-    return {
-      list,
-      isMore: res?.pagination?.total > (pageNum - 1) * listModal.query.pageSize + res?.list?.length ? true : false,
-    };
-  };
-
-  const JsxDom = (propJsx) => {
-    let jsx = <></>;
-    if (isPullRefresh) {
-      jsx = (
-        <PullToRefresh handleRefresh={handleListRefresh}>
-          <VirtualPagedList
-            key={refreshKey}
-            ref={listRef}
-            {...virtualPagedListProps}
-            renderItem={Slots.renderItem}
-            loadMoreItems={loadData}
-          />
-        </PullToRefresh>
-      );
-    } else {
-      jsx = (
-        <VirtualPagedList
-          key={refreshKey}
-          ref={listRef}
-          {...virtualPagedListProps}
-          renderItem={Slots.renderItem}
-          loadMoreItems={loadData}
-        />
-      );
-    }
-    return jsx;
-  };
-
-  return (
-    <div className={`infinite-level-box ${className || ""}`} style={style}>
-      <Spin spinning={loading}>
-        {/* 面包屑导航 */}
-        <div className="infinite-level-breadcrumb-position">
-          <Breadcrumb
-            readcrumbStyle={readcrumbStyle}
-            separatorStyle={separatorStyle}
-            separator={separator}
-            breadcrumbData={breadcrumbData}
-            handleBreadcrumbClick={handleBreadcrumbClick}
-          ></Breadcrumb>
-          {Slots?.fixRenderCenter && <Slots.fixRenderCenter></Slots.fixRenderCenter>}
-        </div>
-        <div className="infinite-level-list-box" style={listStyle}>
-          <JsxDom></JsxDom>
-        </div>
-      </Spin>
-    </div>
-  );
-};
-
-export default forwardRef<InfiniteListInstance, InfiniteListProps>(InfiniteListUi);
+import { ForwardedRef, forwardRef, useImperativeHandle, useRef } from "react";
+import ScrollList from "@hzab/headless-components/src/ScrollList";
+import { ConfigProvider, Spin, Empty, Button } from "antd";
+import { useInfiniteList } from "../../use-infinite-list";
+import Breadcrumb from "../Breadcrumb";
+import { InfiniteListProps, InfiniteListInstance } from "../../type";
+import "../index.less";
+const InfiniteListUi = (props: InfiniteListProps, ref: ForwardedRef<InfiniteListInstance>) => {
+  const {
+    states: {
+      listModal,
+      breadModel,
+      readcrumbStyle,
+      separatorStyle,
+      separator,
+      style,
+      breadcrumbData,
+      Slots,
+      loading,
+      listStyle,
+      scrollListProps,
+      className,
+      refreshKey,
+    },
+    actions: { handleSelectId, handleNodeClick, handleBreadcrumbClick, fetchBreadData, handleListRefresh },
+  } = useInfiniteList({ ...props });
+
+  useImperativeHandle(ref, () => ({
+    handleNodeClick,
+    handleSelectId,
+    listModal,
+    breadModel,
+    fetchBreadData,
+    breadcrumbData,
+    handleListRefresh,
+  }));
+
+  const loadData = async (pageNum) => {
+    listModal.query = { ...listModal.query, pageNum: pageNum };
+    const res = await listModal?.getList();
+    const list = res?.list ?? [];
+    const pageSize = listModal.query.pageSize ?? 10;
+    return {
+      list,
+      isMore: res?.pagination?.total > (pageNum - 1) * pageSize + res?.list?.length ? true : false,
+    };
+  };
+
+  return (
+    <div className={`infinite-level-box ${className || ""}`} style={style}>
+      <Spin spinning={loading}>
+        {/* 面包屑导航 */}
+        <div className="infinite-level-breadcrumb-position">
+          <Breadcrumb
+            readcrumbStyle={readcrumbStyle}
+            separatorStyle={separatorStyle}
+            separator={separator}
+            breadcrumbData={breadcrumbData}
+            handleBreadcrumbClick={handleBreadcrumbClick}
+          ></Breadcrumb>
+          {Slots?.fixRenderCenter && <Slots.fixRenderCenter></Slots.fixRenderCenter>}
+        </div>
+        <div className="infinite-level-list-box" style={listStyle}>
+          {Slots?.pullToRefresh ? (
+            <Slots.pullToRefresh>
+              <ScrollList
+                key={refreshKey}
+                {...scrollListProps}
+                ItemRender={Slots.renderItem}
+                onLoadMore={scrollListProps?.onLoadMore ?? loadData}
+              />
+            </Slots.pullToRefresh>
+          ) : (
+            <ScrollList
+              key={refreshKey}
+              {...scrollListProps}
+              ItemRender={Slots.renderItem}
+              onLoadMore={scrollListProps?.onLoadMore ?? loadData}
+            />
+          )}
+        </div>
+      </Spin>
+    </div>
+  );
+};
+
+export default forwardRef<InfiniteListInstance, InfiniteListProps>(InfiniteListUi);

package/src/index.tsx

@@ -0,0 +1 @@
+export {};

package/src/type.d.ts

@@ -1,81 +1,98 @@
-export type ListItem = {
-  children?: ListItem[];
-  value: number;
-  label: string;
-  [key: string]: any;
-};
-
-export type FieldItem = {
-  /** 选中当前关联id */
-  value: string;
-  /** 选中当前关联名称 */
-  label: string;
-};
-export type PathItem = {
-  value: number;
-  label: string;
-};
-export type InitSelectItem = PathItem;
-export type OnNodeBreadcrumbClickType = PathItem & { index: number };
-export interface InfiniteListInstance {
-  /** 点击下级节点事件 */
-  handleNodeClick?: (item: ListItem) => void;
-  /** 选中事件 */
-  handleSelectId?: (item: ListItem) => void;
-  listRef?: any;
-  listModal?: any;
-  breadModel?: any;
-  /** 面包屑回显数据 */
-  breadcrumbData?: any;
-  /** 面包屑数据请求方法 */
-  fetchBreadData?: () => Promise<void>;
-  /** 列表刷新 */
-  handleListRefresh?: () => void;
-}
-export interface InfiniteListProps {
-  /** 添加外层类名 */
-  className?: string;
-  /** 面包屑显示对应关联字段默认 value,label */
-  fieldBreadcrumb?: FieldItem;
-  /** 是否有首页，默认false */
-  showHome?: boolean;
-  /** 关联字段默认 value,label */
-  fieldList?: FieldItem;
-  /** 列表请求接口下一级关联字段 */
-  parentField?: string;
-  /** 面包屑首页名称 */
-  homeBreadcrumb?: string;
-  /** 自定义面包屑 和 自定义列表 */
-  Slots: {
-    /** 固定在头部 面包屑和列表之间插槽 */
-    fixRenderCenter?: any;
-    /** 自定义列表项 */
-    renderItem: any;
-  };
-  /** 面包屑分割符 */
-  separator?: string;
-  /** 组件外层样式 */
-  style?: object;
-  /** 面包屑分割符css 样式 */
-  separatorStyle?: object;
-  /** 面包屑外层 自定义css 样式 */
-  readcrumbStyle?: object;
-  /** 列表外层 css 样式 */
-  listStyle?: object;
-  /** list modal */
-  listModal: any;
-  /** bread modal */
-  breadModel?: any;
-  /** list-render-mobile配置 */
-  listRenderProps?: object;
-  /** virtualPagedList 配置 */
-  virtualPagedListProps?: any;
-  /** 是否可下拉刷新 */
-  isPullRefresh?: boolean;
-  /** 选中点击事件 */
-  onNodeClick?: (node: ListItem) => void;
-  /** 选中id */
-  onNodeSelect?: (node: ListItem) => void;
-  /** 选中回显点击事件 */
-  onBreadcrumbClick?: (node: OnNodeBreadcrumbClickType) => void;
-}
+/**
+ * 泛型基础类型，用于表示带有 label 和 value 的通用项。
+ * @template T - value 属性的类型。
+ */
+export type BaseItem<T> = {
+  label: string;
+  value: T;
+};
+
+/**
+ * 列表项，继承自 BaseItem<number>，并额外拥有子节点和任意属性。
+ */
+export type ListItem = BaseItem<number> & {
+  children?: ListItem[];
+  [key: string]: any;
+};
+
+/**
+ * 字段项，直接等同于 BaseItem<string>。
+ */
+export type FieldItem = BaseItem<string>;
+
+/**
+ * 路径项，直接等同于 BaseItem<number>。
+ */
+export type PathItem = BaseItem<number>;
+
+export type InitSelectItem = PathItem;
+
+export type OnNodeBreadcrumbClickType = PathItem & { index: number };
+
+/**
+ * 定义一个用于包裹内容并提供下拉刷新功能的组件类型。
+ * 它接收 `children` 作为 props，并返回一个 React 节点。
+ */
+export type PullToRefreshWrapper = (props: { children: React.ReactNode }) => React.ReactElement | null;
+
+export interface InfiniteListInstance {
+  /** 点击下级节点事件 */
+  handleNodeClick?: (item: ListItem) => void;
+  /** 选中事件 */
+  handleSelectId?: (item: ListItem) => void;
+  listModal?: any;
+  breadModel?: any;
+  /** 面包屑回显数据 */
+  breadcrumbData?: any;
+  /** 面包屑数据请求方法 */
+  fetchBreadData?: () => Promise<void>;
+  /** 列表刷新 */
+  handleListRefresh?: () => void;
+}
+export interface InfiniteListProps {
+  /** 添加外层类名 */
+  className?: string;
+  /** 面包屑显示对应关联字段默认 value,label */
+  fieldBreadcrumb?: FieldItem;
+  /** 是否有首页，默认false */
+  showHome?: boolean;
+  /** 关联字段默认 value,label */
+  fieldList?: FieldItem;
+  /** 列表请求接口下一级关联字段 */
+  parentField?: string;
+  /** 面包屑首页名称 */
+  homeBreadcrumb?: string;
+  /** 自定义面包屑 和 自定义列表 */
+  Slots: {
+    /** 固定在头部 面包屑和列表之间插槽 */
+    fixRenderCenter?: any;
+    /** 自定义列表项 */
+    renderItem: any;
+    /** 自定义下拉刷新组件 */
+    pullToRefresh?: PullToRefreshWrapper;
+  };
+  /** 面包屑分割符 */
+  separator?: string;
+  /** 组件外层样式 */
+  style?: object;
+  /** 面包屑分割符css 样式 */
+  separatorStyle?: object;
+  /** 面包屑外层 自定义css 样式 */
+  readcrumbStyle?: object;
+  /** 列表外层 css 样式 */
+  listStyle?: object;
+  /** list modal */
+  listModal: any;
+  /** bread modal */
+  breadModel?: any;
+  /** list-render-mobile配置 */
+  listRenderProps?: object;
+  /** scrollListProps 配置 */
+  scrollListProps?: any;
+  /** 选中点击事件 */
+  onNodeClick?: (node: ListItem) => void;
+  /** 选中id */
+  onNodeSelect?: (node: ListItem) => void;
+  /** 选中回显点击事件 */
+  onBreadcrumbClick?: (node: OnNodeBreadcrumbClickType) => void;
+}

package/src/use-infinite-list.ts

@@ -1,154 +1,145 @@
-import { useState, useEffect, useRef } from "react";
-import { ListItem, PathItem, InfiniteListProps } from "./type";
-
-export function useInfiniteList(props: InfiniteListProps) {
-  const {
-    style,
-    listStyle,
-    separatorStyle,
-    readcrumbStyle,
-    listRenderProps,
-    showHome = true,
-    onNodeClick,
-    onNodeSelect,
-    onBreadcrumbClick,
-    parentField = "parentId",
-    homeBreadcrumb = "首页",
-    fieldBreadcrumb = {
-      value: "value",
-      label: "label",
-    },
-    fieldList = {
-      value: "value",
-      label: "label",
-      ...props?.fieldList,
-    },
-    Slots,
-    separator = "/",
-    listModal,
-    breadModel,
-    virtualPagedListProps,
-    className,
-    isPullRefresh = false,
-  } = props;
-  const [loading, setLoading] = useState(false);
-  const [selectedLoadIdNode, setSelectedLoadIdNode] = useState<number | null>(null);
-  const [selecteId, setSelectedId] = useState<number | null>();
-  const [breadcrumbData, setBreadcrumbData] = useState<PathItem[]>(
-    showHome ? [{ value: 0, label: homeBreadcrumb }] : [],
-  );
-  const [refreshKey, setRefreshKey] = useState(1);
-  const listRef = useRef<any>(null);
-
-  /**
-   * 下一级请求函数
-   * @param {ListItem} item - 选中的节点数据
-   *
-   */
-  const handleNodeClick = (item: ListItem) => {
-    onNodeClick?.({
-      ...item,
-      value: item[fieldList.value],
-      label: item[fieldList.label],
-    });
-    listModal.query = { ...listModal.query, [parentField]: item[fieldList.value] };
-    setSelectedLoadIdNode(item[fieldList.value]);
-    setBreadcrumbData((pre) => [
-      ...pre,
-      {
-        value: item[fieldList.value],
-        label: item[fieldList.label],
-      },
-    ]);
-    setRefreshKey((pre) => pre + 1);
-  };
-
-  /**
-   * 选中节点id
-   * @param {ListItem} item - 选中的节点
-   *
-   */
-  const handleSelectId = (item: ListItem) => {
-    setSelectedId(item[fieldList.value]);
-    onNodeSelect?.({ ...item });
-  };
-
-  /**
-   * 处理面包屑点击事件
-   * @param {PathItem} item - 被点击的面包屑节点
-   * @param {number} index - 被点击的面包屑节点的索引
-   */
-  const handleBreadcrumbClick = (item: PathItem, index: number) => {
-    if (breadcrumbData.length - 1 == index) return;
-    onBreadcrumbClick?.({
-      ...item,
-      index: index,
-    });
-    listModal.query = { ...listModal.query, [parentField]: item.value };
-    setSelectedLoadIdNode(item.value);
-    setBreadcrumbData(breadcrumbData.slice(0, index + 1));
-    setRefreshKey((pre) => pre + 1);
-  };
-
-  /**
-   * 面包屑数据回显
-   *
-   */
-  const fetchBreadData = async () => {
-    setLoading(true);
-    try {
-      const res = await breadModel?.get();
-      if (!res && !Array.isArray(res)) return;
-      let relPath =
-        res[0]?.path?.map((v: any) => {
-          return {
-            ...v,
-            value: v[fieldBreadcrumb.value],
-            label: v[fieldBreadcrumb.label],
-          };
-        }) || [];
-      relPath && setBreadcrumbData(relPath);
-    } finally {
-      setLoading(false);
-    }
-  };
-  /** 列表刷新  */
-  const handleListRefresh = async () => {
-    listModal.query = { ...listModal.query, pageNum: 1 };
-    setRefreshKey((pre) => pre + 1);
-  };
-
-  useEffect(() => {
-    fetchBreadData();
-  }, []);
-
-  return {
-    states: {
-      style,
-      listStyle,
-      separatorStyle,
-      readcrumbStyle,
-      selectedLoadIdNode,
-      breadcrumbData,
-      Slots,
-      listRenderProps,
-      separator,
-      loading,
-      selecteId,
-      listRef,
-      virtualPagedListProps,
-      listModal,
-      breadModel,
-      className,
-      refreshKey,
-      isPullRefresh,
-    },
-    actions: {
-      handleSelectId,
-      handleNodeClick,
-      handleBreadcrumbClick,
-      fetchBreadData,
-      handleListRefresh,
-    },
-  };
-}
+import { useState, useEffect, useRef } from "react";
+import { ListItem, PathItem, InfiniteListProps } from "./type";
+
+export function useInfiniteList(props: InfiniteListProps) {
+  const {
+    style,
+    listStyle,
+    separatorStyle,
+    readcrumbStyle,
+    listRenderProps,
+    showHome = true,
+    onNodeClick,
+    onNodeSelect,
+    onBreadcrumbClick,
+    parentField = "parentId",
+    homeBreadcrumb = "首页",
+    fieldBreadcrumb = {
+      value: "value",
+      label: "label",
+    },
+    fieldList = {
+      value: "value",
+      label: "label",
+      ...props?.fieldList,
+    },
+    Slots,
+    separator = "/",
+    listModal,
+    breadModel,
+    scrollListProps,
+    className,
+  } = props;
+  const [loading, setLoading] = useState(false);
+  const [selecteId, setSelectedId] = useState<number | null>();
+  const [breadcrumbData, setBreadcrumbData] = useState<PathItem[]>(
+    showHome ? [{ value: 0, label: homeBreadcrumb }] : [],
+  );
+  const [refreshKey, setRefreshKey] = useState(1);
+  /**
+   * 下一级请求函数
+   * @param {ListItem} item - 选中的节点数据
+   *
+   */
+  const handleNodeClick = (item: ListItem) => {
+    onNodeClick?.({
+      ...item,
+      value: item[fieldList.value],
+      label: item[fieldList.label],
+    });
+    listModal.query = { ...listModal.query, [parentField]: item[fieldList.value] };
+    setBreadcrumbData((pre) => [
+      ...pre,
+      {
+        value: item[fieldList.value],
+        label: item[fieldList.label],
+      },
+    ]);
+    setRefreshKey((pre) => pre + 1);
+  };
+
+  /**
+   * 选中节点id
+   * @param {ListItem} item - 选中的节点
+   *
+   */
+  const handleSelectId = (item: ListItem) => {
+    setSelectedId(item[fieldList.value]);
+    onNodeSelect?.({ ...item });
+  };
+
+  /**
+   * 处理面包屑点击事件
+   * @param {PathItem} item - 被点击的面包屑节点
+   * @param {number} index - 被点击的面包屑节点的索引
+   */
+  const handleBreadcrumbClick = (item: PathItem, index: number) => {
+    if (breadcrumbData.length - 1 == index) return;
+    onBreadcrumbClick?.({
+      ...item,
+      index: index,
+    });
+    listModal.query = { ...listModal.query, [parentField]: item.value };
+    setBreadcrumbData(breadcrumbData.slice(0, index + 1));
+    setRefreshKey((pre) => pre + 1);
+  };
+
+  /**
+   * 面包屑数据回显
+   *
+   */
+  const fetchBreadData = async () => {
+    setLoading(true);
+    try {
+      const res = await breadModel?.get();
+      if (!res && !Array.isArray(res)) return;
+      let relPath =
+        res[0]?.path?.map((v: any) => {
+          return {
+            ...v,
+            value: v[fieldBreadcrumb.value],
+            label: v[fieldBreadcrumb.label],
+          };
+        }) || [];
+      relPath && setBreadcrumbData(relPath);
+    } finally {
+      setLoading(false);
+    }
+  };
+  /** 列表刷新  */
+  const handleListRefresh = async () => {
+    listModal.query = { ...listModal.query, pageNum: 1 };
+    setRefreshKey((pre) => pre + 1);
+  };
+
+  useEffect(() => {
+    fetchBreadData();
+  }, []);
+
+  return {
+    states: {
+      style,
+      listStyle,
+      separatorStyle,
+      readcrumbStyle,
+      breadcrumbData,
+      Slots,
+      listRenderProps,
+      separator,
+      loading,
+      selecteId,
+      scrollListProps,
+      listModal,
+      breadModel,
+      className,
+      refreshKey,
+    },
+    actions: {
+      handleSelectId,
+      handleNodeClick,
+      handleBreadcrumbClick,
+      fetchBreadData,
+      handleListRefresh,
+    },
+  };
+}