@hzab/hierarchical-statistics 0.0.6 → 0.0.7

package/CHANGELOG.md

@@ -1,12 +1,25 @@
-# @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.0.7
+
+- feat: 支持自定义面包屑 Render ，控制最后一个面包屑是否允许点击，增加动态渲染key值
+
+# @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,142 @@
-# @hzab/group-user-selector
-
-组件模板
-
-- node@16.16.0
-
-- 注意：首次克隆先执行 npm run prepare 命令
-
-# 组件
-
-## 示例
-
-```jsx
-import InfiniteListUIPc from "@hzab/hierarchical-statistics/src/components/InfiniteListUiPc";
-      <InfiniteListUIPc
-        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>,
-        }}
-      ></InfiniteListUIPc>
-```
-
-## 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                 | 否    | -         | 面包屑分割符样式    |
-| listRenderProps      | Object                        | 否    | -         | list-render-mobile 配置    |
-| virtualPagedListProps| Object                        | 否    | -         | virtualPagedList 配置    |
-| 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
+# @hzab/group-user-selector
+
+组件模板
+
+- node@16.16.0
+
+- 注意：首次克隆先执行 npm run prepare 命令
+
+# 组件
+
+## 示例
+
+```jsx
+import InfiniteListUIPc from "@hzab/hierarchical-statistics/src/components/InfiniteListUiPc";
+<InfiniteListUIPc
+  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>,
+  }}
+></InfiniteListUIPc>;
+```
+
+## 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                  | 否   | -        | 面包屑分割符样式                            |
+| listRenderProps       | Object                         | 否   | -        | list-render-mobile 配置                     |
+| virtualPagedListProps | Object                         | 否   | -        | virtualPagedList 配置                       |
+| 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 源和云效源都需要发布
+
+- 命令：npm publish --access public
+- 发布目录：
+  - src
+
+### 迭代发布命令-版本自增
+
+- beta: 需要手动修改 package.json 中的 version，添加 -betaX 版本号。使用 npm publish --beta 发布
+- 0.0.x: npm run publish-patch
+- 0.x.0: npm run publish-minor
+- x.0.0: npm run publish-major
+
+### nrm
+
+- 安装
+  npm install -g nrm
+- 增加源
+  nrm add aliyun https://packages.aliyun.com/62046985b3ead41b374a17f7/npm/npm-registry/
+- 切换源
+  nrm use aliyun
+  nrm use npm
+- 登录（账号密码在 https://packages.aliyun.com/npm/npm-registry/guide 查看）
+  npm login --registry=https://packages.aliyun.com/62046985b3ead41b374a17f7/npm/npm-registry/
+
+## 配置
+
+### 配置文件
+
+- 本地配置文件：config/config.js
+
+### webpack 配置文件
+
+- config/webpack.config.js

package/package.json

@@ -1,16 +1,20 @@
 {
   "name": "@hzab/hierarchical-statistics",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "",
   "main": "src",
   "scripts": {
     "dev": "webpack serve -c ./config/webpack.config.js --env local",
     "build": "webpack -c ./config/webpack.config.js --env production",
-    "publish-patch": "npm version patch && npm publish --access public",
-    "publish-minor": "npm version minor && npm publish --access public",
-    "publish-major": "npm version major && npm publish --access public",
+    "version:alpha": "npm version prerelease --preid=alpha",
+    "publish:alpha": "npm publish --tag alpha",
+    "version:beta": "npm version prerelease --preid=beta",
+    "publish:beta": "npm publish --tag beta",
+    "version:patch": "npm version patch",
+    "version:minior": "npm version minor",
+    "version:major": "npm version major",
+    "publish:stable": "npm publish --access public",
     "prepare": "husky install",
-    "mac-chmod": "chmod +x .husky && chmod +x .husky/pre-commit",
     "docs": "typedoc"
   },
   "files": [

package/src/components/Breadcrumb/index.tsx

@@ -1,25 +1,46 @@
-import "../index.less";
-const BreadcrumbUI = (props: any) => {
-  const { readcrumbStyle, separatorStyle, separator, breadcrumbData, terminal, handleBreadcrumbClick } = props;
-  return (
-    <div className={`breadcrumb-box ${terminal !== "pc" ? "breadcrumb-box-mobile" : ""}`} 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 {
+    labelKey = "label",
+    valueKey = "value",
+    readcrumbStyle,
+    separatorStyle,
+    separator,
+    breadcrumbData = [],
+    terminal,
+    handleBreadcrumbClick,
+    isAllowLastClick = false,
+    BreadcrumbItem,
+  } = props;
+
+  const handleBreadClick = (item, index) => {
+    if (!isAllowLastClick && index === breadcrumbData.length - 1) return;
+    handleBreadcrumbClick && handleBreadcrumbClick(item, index);
+  };
+
+  return (
+    <div className={`breadcrumb-box ${terminal !== "pc" ? "breadcrumb-box-mobile" : ""}`} style={readcrumbStyle}>
+      {breadcrumbData.map((item, index) =>
+        BreadcrumbItem ? (
+          <BreadcrumbItem key={item[valueKey] || index} item={item} index={index} />
+        ) : (
+          <div className="breadcrumb-item" key={index}>
+            <span
+              className="breadcrumb-title"
+              style={{ color: breadcrumbData.length - 1 == index ? "#aeadad" : "#403ef5" }}
+              key={item[valueKey] || index}
+              onClick={() => handleBreadClick(item, index)}
+            >
+              {item[labelKey] || item}
+            </span>
+            <span className="breadcrumb-separator" style={separatorStyle}>
+              {breadcrumbData?.length - 1 != index ? separator : ""}
+            </span>
+          </div>
+        ),
+      )}
+    </div>
+  );
+};
+
+export default BreadcrumbUI;

package/src/components/InfiniteListUiMobile/index.tsx

@@ -1,69 +1,69 @@
-import { ForwardedRef, forwardRef, useImperativeHandle, useRef } from "react";
-import { ConfigProvider, Spin } from "antd";
-import ListRender from "@hzab/list-render-mobile";
-import { useInfiniteList } from "../../use-infinite-list";
-import { InfiniteListProps, InfiniteListInstance } from "../../type";
-import Breadcrumb from "../Breadcrumb";
-import "../index.less";
-const InfiniteListUIMobile = (props: InfiniteListProps, ref: ForwardedRef<InfiniteListInstance>) => {
-  const {
-    states: {
-      readcrumbStyle,
-      separatorStyle,
-      separator,
-      listRenderProps,
-      style,
-      listModal,
-      breadcrumbData,
-      Slots,
-      loading,
-      listRef,
-      listStyle,
-      breadModel,
-      className,
-      refreshKey,
-    },
-    actions: { fetchBreadData, handleSelectId, handleNodeClick, handleBreadcrumbClick },
-  } = useInfiniteList({ ...props, terminal: "mobile" });
-  useImperativeHandle(ref, () => ({
-    handleNodeClick,
-    handleSelectId,
-    listRef: listRef?.current,
-    listModal,
-    breadModel,
-    fetchBreadData,
-    breadcrumbData,
-  }));
-  return (
-    <div className={`infinite-level-box ${className || ""}`} style={style}>
-      <Spin spinning={loading}>
-        {/* 面包屑导航 */}
-        <div className="infinite-level-breadcrumb-position">
-          <Breadcrumb
-            terminal="mobile"
-            readcrumbStyle={readcrumbStyle}
-            separatorStyle={separatorStyle}
-            separator={separator}
-            breadcrumbData={breadcrumbData}
-            handleBreadcrumbClick={handleBreadcrumbClick}
-            Slots={Slots}
-          ></Breadcrumb>
-          {Slots?.fixRenderCenter && <Slots.fixRenderCenter></Slots.fixRenderCenter>}
-        </div>
-
-        <div className="infinite-level-list-box" style={listStyle}>
-          {/* 移动端 */}
-          <ListRender
-            key={refreshKey}
-            ref={listRef}
-            model={listModal}
-            {...listRenderProps}
-            ItemRender={Slots.renderItem}
-          />
-        </div>
-      </Spin>
-    </div>
-  );
-};
-
-export default forwardRef<InfiniteListInstance, InfiniteListProps>(InfiniteListUIMobile);
+import { ForwardedRef, forwardRef, useImperativeHandle, useRef } from "react";
+import { ConfigProvider, Spin } from "antd";
+import ListRender from "@hzab/list-render-mobile";
+import { useInfiniteList } from "../../use-infinite-list";
+import { InfiniteListProps, InfiniteListInstance } from "../../type";
+import Breadcrumb from "../Breadcrumb";
+import "../index.less";
+const InfiniteListUIMobile = (props: InfiniteListProps, ref: ForwardedRef<InfiniteListInstance>) => {
+  const {
+    states: {
+      readcrumbStyle,
+      separatorStyle,
+      separator,
+      listRenderProps,
+      style,
+      listModal,
+      breadcrumbData,
+      Slots,
+      loading,
+      listRef,
+      listStyle,
+      breadModel,
+      className,
+      refreshKey,
+    },
+    actions: { fetchBreadData, handleSelectId, handleNodeClick, handleBreadcrumbClick },
+  } = useInfiniteList({ ...props, terminal: "mobile" });
+  useImperativeHandle(ref, () => ({
+    handleNodeClick,
+    handleSelectId,
+    listRef: listRef?.current,
+    listModal,
+    breadModel,
+    fetchBreadData,
+    breadcrumbData,
+  }));
+  return (
+    <div className={`infinite-level-box ${className || ""}`} style={style}>
+      <Spin spinning={loading}>
+        {/* 面包屑导航 */}
+        <div className="infinite-level-breadcrumb-position">
+          <Breadcrumb
+            terminal="mobile"
+            readcrumbStyle={readcrumbStyle}
+            separatorStyle={separatorStyle}
+            separator={separator}
+            breadcrumbData={breadcrumbData}
+            handleBreadcrumbClick={handleBreadcrumbClick}
+            Slots={Slots}
+          ></Breadcrumb>
+          {Slots?.fixRenderCenter && <Slots.fixRenderCenter></Slots.fixRenderCenter>}
+        </div>
+
+        <div className="infinite-level-list-box" style={listStyle}>
+          {/* 移动端 */}
+          <ListRender
+            key={refreshKey}
+            ref={listRef}
+            model={listModal}
+            {...listRenderProps}
+            ItemRender={Slots.renderItem}
+          />
+        </div>
+      </Spin>
+    </div>
+  );
+};
+
+export default forwardRef<InfiniteListInstance, InfiniteListProps>(InfiniteListUIMobile);

package/src/components/InfiniteListUiPc/index.tsx

@@ -1,78 +1,78 @@
-import { ForwardedRef, forwardRef, useImperativeHandle, useRef } from "react";
-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 InfiniteListUIPc = (props: InfiniteListProps, ref: ForwardedRef<InfiniteListInstance>) => {
-  const {
-    states: {
-      listModal,
-      breadModel,
-      readcrumbStyle,
-      separatorStyle,
-      separator,
-      style,
-      selectedLoadIdNode,
-      breadcrumbData,
-      Slots,
-      loading,
-      listStyle,
-      listRef,
-      virtualPagedListProps,
-      className,
-      refreshKey,
-    },
-    actions: { handleSelectId, handleNodeClick, handleBreadcrumbClick, fetchBreadData },
-  } = useInfiniteList({ ...props, terminal: "pc" });
-
-  useImperativeHandle(ref, () => ({
-    handleNodeClick,
-    handleSelectId,
-    listRef: listRef?.current,
-    listModal,
-    breadModel,
-    fetchBreadData,
-    breadcrumbData,
-  }));
-
-  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,
-    };
-  };
-  return (
-    <div className={`infinite-level-box ${className || ""}`} style={style}>
-      <Spin spinning={loading}>
-        {/* 面包屑导航 */}
-        <div className="infinite-level-breadcrumb-position">
-          <Breadcrumb
-            terminal="pc"
-            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}>
-          <VirtualPagedList
-            key={refreshKey}
-            ref={listRef}
-            {...virtualPagedListProps}
-            renderItem={Slots.renderItem}
-            loadMoreItems={loadData}
-          />
-        </div>
-      </Spin>
-    </div>
-  );
-};
-
-export default forwardRef<InfiniteListInstance, InfiniteListProps>(InfiniteListUIPc);
+import { ForwardedRef, forwardRef, useImperativeHandle, useRef } from "react";
+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 InfiniteListUIPc = (props: InfiniteListProps, ref: ForwardedRef<InfiniteListInstance>) => {
+  const {
+    states: {
+      listModal,
+      breadModel,
+      readcrumbStyle,
+      separatorStyle,
+      separator,
+      style,
+      selectedLoadIdNode,
+      breadcrumbData,
+      Slots,
+      loading,
+      listStyle,
+      listRef,
+      virtualPagedListProps,
+      className,
+      refreshKey,
+    },
+    actions: { handleSelectId, handleNodeClick, handleBreadcrumbClick, fetchBreadData },
+  } = useInfiniteList({ ...props, terminal: "pc" });
+
+  useImperativeHandle(ref, () => ({
+    handleNodeClick,
+    handleSelectId,
+    listRef: listRef?.current,
+    listModal,
+    breadModel,
+    fetchBreadData,
+    breadcrumbData,
+  }));
+
+  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,
+    };
+  };
+  return (
+    <div className={`infinite-level-box ${className || ""}`} style={style}>
+      <Spin spinning={loading}>
+        {/* 面包屑导航 */}
+        <div className="infinite-level-breadcrumb-position">
+          <Breadcrumb
+            terminal="pc"
+            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}>
+          <VirtualPagedList
+            key={refreshKey}
+            ref={listRef}
+            {...virtualPagedListProps}
+            renderItem={Slots.renderItem}
+            loadMoreItems={loadData}
+          />
+        </div>
+      </Spin>
+    </div>
+  );
+};
+
+export default forwardRef<InfiniteListInstance, InfiniteListProps>(InfiniteListUIPc);

package/src/type.d.ts

@@ -1,79 +1,79 @@
-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>;
-}
-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;
-  /** 设备是pc,还是mobile */
-  terminal?: string;
-  /** 列表外层 css 样式 */
-  listStyle?: object;
-  /** list modal */
-  listModal: any;
-  /** bread modal */
-  breadModel?: any;
-  /** list-render-mobile配置 */
-  listRenderProps?: object;
-  /** virtualPagedList 配置 */
-  virtualPagedListProps?: any;
-  /** 选中点击事件 */
-  onNodeClick?: (node: ListItem) => void;
-  /** 选中id */
-  onNodeSelect?: (node: ListItem) => void;
-  /** 选中回显点击事件 */
-  onBreadcrumbClick?: (node: OnNodeBreadcrumbClickType) => void;
-}
+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>;
+}
+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;
+  /** 设备是pc,还是mobile */
+  terminal?: string;
+  /** 列表外层 css 样式 */
+  listStyle?: object;
+  /** list modal */
+  listModal: any;
+  /** bread modal */
+  breadModel?: any;
+  /** list-render-mobile配置 */
+  listRenderProps?: object;
+  /** virtualPagedList 配置 */
+  virtualPagedListProps?: any;
+  /** 选中点击事件 */
+  onNodeClick?: (node: ListItem) => void;
+  /** 选中id */
+  onNodeSelect?: (node: ListItem) => void;
+  /** 选中回显点击事件 */
+  onBreadcrumbClick?: (node: OnNodeBreadcrumbClickType) => void;
+}

package/src/use-infinite-list.ts

@@ -1,146 +1,146 @@
-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,
-  } = 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);
-    }
-  };
-
-  useEffect(() => {
-    fetchBreadData();
-  }, []);
-
-  return {
-    states: {
-      style,
-      listStyle,
-      separatorStyle,
-      readcrumbStyle,
-      selectedLoadIdNode,
-      breadcrumbData,
-      Slots,
-      listRenderProps,
-      separator,
-      loading,
-      selecteId,
-      listRef,
-      virtualPagedListProps,
-      listModal,
-      breadModel,
-      className,
-      refreshKey,
-    },
-    actions: {
-      handleSelectId,
-      handleNodeClick,
-      handleBreadcrumbClick,
-      fetchBreadData,
-    },
-  };
-}
+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,
+  } = 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);
+    }
+  };
+
+  useEffect(() => {
+    fetchBreadData();
+  }, []);
+
+  return {
+    states: {
+      style,
+      listStyle,
+      separatorStyle,
+      readcrumbStyle,
+      selectedLoadIdNode,
+      breadcrumbData,
+      Slots,
+      listRenderProps,
+      separator,
+      loading,
+      selecteId,
+      listRef,
+      virtualPagedListProps,
+      listModal,
+      breadModel,
+      className,
+      refreshKey,
+    },
+    actions: {
+      handleSelectId,
+      handleNodeClick,
+      handleBreadcrumbClick,
+      fetchBreadData,
+    },
+  };
+}