@hzab/hierarchical-statistics 0.0.5 → 1.0.0-beta

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+# @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

package/README.md

@@ -11,8 +11,8 @@
 ## 示例
 
 ```jsx
-import InfiniteListUIPc from "@hzab/hierarchical-statistics/src/components/InfiniteListUiPc";
-      <InfiniteListUIPc
+import InfiniteListUi from "@hzab/hierarchical-statistics/src/components/InfiniteListUi";
+      <InfiniteListUi
         ref={listRef}
         style={{
           maxWidth: "400px",
@@ -47,7 +47,7 @@ import InfiniteListUIPc from "@hzab/hierarchical-statistics/src/components/Infin
           dynamicHeightMode: true,
           noMoreComponent: <div>没有更多数据了</div>,
         }}
-      ></InfiniteListUIPc>
+      ></InfiniteListUi>
 ```
 
 ## API
@@ -58,7 +58,7 @@ import InfiniteListUIPc from "@hzab/hierarchical-statistics/src/components/Infin
 | -------------------- | ------------------------------| ----- | --------- | ----------------------------------- |
 | listModal            | Object                        | 是    | -         | 列表数据模型DataModel，必须包含getListApi |
 | breadModel           | Object                        | 否    | -        | 回显数据模型DataModel，必须包含getApi |
-| showHome             | boolean                       | 否    | -         | 是否显示面包屑首页            |
+| showHome             | Boolean                       | 否    | -         | 是否显示面包屑首页            |
 | onNodeClick          | function(item)                | 否    | -         | item点击事件        |
 | onNodeSelect         | function(item)                | 否    | -         | item选中事件        |
 | onBreadcrumbClick    | function(item)                | 否    | -         | 回显点击事件        |
@@ -70,10 +70,10 @@ import InfiniteListUIPc from "@hzab/hierarchical-statistics/src/components/Infin
 | listStyle            | CSSProperties                 | 否    | -         | 列表外层样式     |
 | readcrumbStyle       | CSSProperties                 | 否    | -         | 面包屑外层样式    |
 | separatorStyle       | CSSProperties                 | 否    | -         | 面包屑分割符样式    |
-| listRenderProps      | Object                        | 否    | -         | list-render-mobile 配置    |
 | virtualPagedListProps| Object                        | 否    | -         | virtualPagedList 配置    |
 | separator            | string                        | 否    | -         | 分隔符 默认"-"     |
 | Slots                | Object                        | 是    | -         | 插槽              |
+| isPullRefresh        | Boolean                       | 否    | false     | 移动端是否可以下拉刷新           |
 
 
 

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@hzab/hierarchical-statistics",
-  "version": "0.0.5",
+  "version": "1.0.0-beta",
   "description": "",
   "main": "src",
   "scripts": {
     "dev": "webpack serve -c ./config/webpack.config.js --env local",
     "build": "webpack -c ./config/webpack.config.js --env production",
+    "publish-beta": "npm publish --beta",
     "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",
@@ -48,7 +49,9 @@
   },
   "peerDependencies": {
     "@hzab/data-model": ">=1.7.5",
-    "@hzab/headless-components": ">=0.0.3",
-    "@hzab/list-render-mobile": ">=1.1.7"
+    "@hzab/headless-components": ">=0.0.3"
+  },
+  "dependencies": {
+    "react-window-pull-refresh": "^1.0.9"
   }
 }

package/src/components/Breadcrumb/index.tsx

@@ -1,8 +1,8 @@
 import "../index.less";
 const BreadcrumbUI = (props: any) => {
-  const { readcrumbStyle, separatorStyle, separator, breadcrumbData, terminal, handleBreadcrumbClick } = props;
+  const { readcrumbStyle, separatorStyle, separator, breadcrumbData, handleBreadcrumbClick } = props;
   return (
-    <div className={`breadcrumb-box ${terminal !== "pc" ? "breadcrumb-box-mobile" : ""}`} style={readcrumbStyle}>
+    <div className={`breadcrumb-box`} style={readcrumbStyle}>
       {breadcrumbData.map((item, index) => (
         <div className="breadcrumb-item" key={index}>
           <span

package/src/components/{InfiniteListUiPc → InfiniteListUi}/index.tsx

@@ -1,11 +1,12 @@
 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 InfiniteListUIPc = (props: InfiniteListProps, ref: ForwardedRef<InfiniteListInstance>) => {
+const InfiniteListUi = (props: InfiniteListProps, ref: ForwardedRef<InfiniteListInstance>) => {
   const {
     states: {
       listModal,
@@ -22,9 +23,11 @@ const InfiniteListUIPc = (props: InfiniteListProps, ref: ForwardedRef<InfiniteLi
       listRef,
       virtualPagedListProps,
       className,
+      refreshKey,
+      isPullRefresh,
     },
-    actions: { handleSelectId, handleNodeClick, handleBreadcrumbClick, fetchBreadData },
-  } = useInfiniteList({ ...props, terminal: "pc" });
+    actions: { handleSelectId, handleNodeClick, handleBreadcrumbClick, fetchBreadData, handleListRefresh },
+  } = useInfiniteList({ ...props });
 
   useImperativeHandle(ref, () => ({
     handleNodeClick,
@@ -34,6 +37,7 @@ const InfiniteListUIPc = (props: InfiniteListProps, ref: ForwardedRef<InfiniteLi
     breadModel,
     fetchBreadData,
     breadcrumbData,
+    handleListRefresh,
   }));
 
   const loadData = async (pageNum) => {
@@ -45,13 +49,41 @@ const InfiniteListUIPc = (props: InfiniteListProps, ref: ForwardedRef<InfiniteLi
       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
-            terminal="pc"
             readcrumbStyle={readcrumbStyle}
             separatorStyle={separatorStyle}
             separator={separator}
@@ -61,17 +93,11 @@ const InfiniteListUIPc = (props: InfiniteListProps, ref: ForwardedRef<InfiniteLi
           {Slots?.fixRenderCenter && <Slots.fixRenderCenter></Slots.fixRenderCenter>}
         </div>
         <div className="infinite-level-list-box" style={listStyle}>
-          <VirtualPagedList
-            key={selectedLoadIdNode}
-            ref={listRef}
-            {...virtualPagedListProps}
-            renderItem={Slots.renderItem}
-            loadMoreItems={loadData}
-          />
+          <JsxDom></JsxDom>
         </div>
       </Spin>
     </div>
   );
 };
 
-export default forwardRef<InfiniteListInstance, InfiniteListProps>(InfiniteListUIPc);
+export default forwardRef<InfiniteListInstance, InfiniteListProps>(InfiniteListUi);

package/src/type.d.ts

@@ -29,6 +29,8 @@ export interface InfiniteListInstance {
   breadcrumbData?: any;
   /** 面包屑数据请求方法 */
   fetchBreadData?: () => Promise<void>;
+  /** 列表刷新 */
+  handleListRefresh?: () => void;
 }
 export interface InfiniteListProps {
   /** 添加外层类名 */
@@ -58,8 +60,6 @@ export interface InfiniteListProps {
   separatorStyle?: object;
   /** 面包屑外层 自定义css 样式 */
   readcrumbStyle?: object;
-  /** 设备是pc,还是mobile */
-  terminal?: string;
   /** 列表外层 css 样式 */
   listStyle?: object;
   /** list modal */
@@ -70,6 +70,8 @@ export interface InfiniteListProps {
   listRenderProps?: object;
   /** virtualPagedList 配置 */
   virtualPagedListProps?: any;
+  /** 是否可下拉刷新 */
+  isPullRefresh?: boolean;
   /** 选中点击事件 */
   onNodeClick?: (node: ListItem) => void;
   /** 选中id */

package/src/use-infinite-list.ts

@@ -29,6 +29,7 @@ export function useInfiniteList(props: InfiniteListProps) {
     breadModel,
     virtualPagedListProps,
     className,
+    isPullRefresh = false,
   } = props;
   const [loading, setLoading] = useState(false);
   const [selectedLoadIdNode, setSelectedLoadIdNode] = useState<number | null>(null);
@@ -36,6 +37,7 @@ export function useInfiniteList(props: InfiniteListProps) {
   const [breadcrumbData, setBreadcrumbData] = useState<PathItem[]>(
     showHome ? [{ value: 0, label: homeBreadcrumb }] : [],
   );
+  const [refreshKey, setRefreshKey] = useState(1);
   const listRef = useRef<any>(null);
 
   /**
@@ -58,7 +60,7 @@ export function useInfiniteList(props: InfiniteListProps) {
         label: item[fieldList.label],
       },
     ]);
-    listRef.current?.onSearch();
+    setRefreshKey((pre) => pre + 1);
   };
 
   /**
@@ -85,7 +87,7 @@ export function useInfiniteList(props: InfiniteListProps) {
     listModal.query = { ...listModal.query, [parentField]: item.value };
     setSelectedLoadIdNode(item.value);
     setBreadcrumbData(breadcrumbData.slice(0, index + 1));
-    listRef.current?.onSearch();
+    setRefreshKey((pre) => pre + 1);
   };
 
   /**
@@ -110,6 +112,11 @@ export function useInfiniteList(props: InfiniteListProps) {
       setLoading(false);
     }
   };
+  /** 列表刷新  */
+  const handleListRefresh = async () => {
+    listModal.query = { ...listModal.query, pageNum: 1 };
+    setRefreshKey((pre) => pre + 1);
+  };
 
   useEffect(() => {
     fetchBreadData();
@@ -133,12 +140,15 @@ export function useInfiniteList(props: InfiniteListProps) {
       listModal,
       breadModel,
       className,
+      refreshKey,
+      isPullRefresh,
     },
     actions: {
       handleSelectId,
       handleNodeClick,
       handleBreadcrumbClick,
       fetchBreadData,
+      handleListRefresh,
     },
   };
 }

package/src/components/InfiniteListUiMobile/index.tsx

@@ -1,62 +0,0 @@
-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,
-    },
-    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 ref={listRef} model={listModal} {...listRenderProps} ItemRender={Slots.renderItem} />
-        </div>
-      </Spin>
-    </div>
-  );
-};
-
-export default forwardRef<InfiniteListInstance, InfiniteListProps>(InfiniteListUIMobile);