@hzab/hierarchical-statistics 0.0.3 → 0.0.4

package/CHANGELOG.md

@@ -1,4 +1,8 @@
-# @hzab/component-boilerplate@0.0.2
+# @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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/hierarchical-statistics",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "",
   "main": "src",
   "scripts": {
@@ -46,9 +46,9 @@
       "prettier --write"
     ]
   },
-  "dependencies": {
-    "@hzab/data-model": "^1.7.5",
-    "@hzab/headless-components": "^0.0.3",
-    "@hzab/list-render-mobile": "^1.1.7"
+  "peerDependencies": {
+    "@hzab/data-model": ">=1.7.5",
+    "@hzab/headless-components": ">=0.0.3",
+    "@hzab/list-render-mobile": ">=1.1.7"
   }
 }

package/src/components/Breadcrumb/index.tsx

@@ -1,22 +1,19 @@
-import styles from "../index.module.less";
+import "../index.less";
 const BreadcrumbUI = (props: any) => {
   const { readcrumbStyle, separatorStyle, separator, breadcrumbData, terminal, handleBreadcrumbClick } = props;
   return (
-    <div
-      className={`${styles["readcrumb-box"]} ${terminal !== "pc" ? styles["readcrumb-box-mobile"] : null}`}
-      style={readcrumbStyle}
-    >
+    <div className={`breadcrumb-box ${terminal !== "pc" ? "breadcrumb-box-mobile" : ""}`} style={readcrumbStyle}>
       {breadcrumbData.map((item, index) => (
-        <div className={`${styles["readcrumb-item"]}`} key={index}>
+        <div className="breadcrumb-item" key={index}>
           <span
-            className={styles["title"]}
+            className="breadcrumb-title"
             style={{ color: breadcrumbData.length - 1 == index ? "#aeadad" : "#403ef5" }}
             key={item?.value}
             onClick={() => handleBreadcrumbClick(item, index)}
           >
             {item?.label}
           </span>
-          <span className={styles["separator"]} style={separatorStyle}>
+          <span className="breadcrumb-separator" style={separatorStyle}>
             {breadcrumbData?.length - 1 != index ? separator : ""}
           </span>
         </div>

package/src/components/InfiniteListUiMobile/index.tsx

@@ -4,7 +4,7 @@ import ListRender from "@hzab/list-render-mobile";
 import { useInfiniteList } from "../../use-infinite-list";
 import { InfiniteListProps, InfiniteListInstance } from "../../type";
 import Breadcrumb from "../Breadcrumb";
-import styles from "../index.module.less";
+import "../index.less";
 const InfiniteListUIMobile = (props: InfiniteListProps, ref: ForwardedRef<InfiniteListInstance>) => {
   const {
     states: {
@@ -20,6 +20,7 @@ const InfiniteListUIMobile = (props: InfiniteListProps, ref: ForwardedRef<Infini
       listRef,
       listStyle,
       breadModel,
+      className,
     },
     actions: { fetchBreadData, handleSelectId, handleNodeClick, handleBreadcrumbClick },
   } = useInfiniteList({ ...props, terminal: "mobile" });
@@ -32,10 +33,10 @@ const InfiniteListUIMobile = (props: InfiniteListProps, ref: ForwardedRef<Infini
     fetchBreadData,
   }));
   return (
-    <div className={styles["contain"]} style={style}>
+    <div className={`infinite-level-box ${className || ""}`} style={style}>
       <Spin spinning={loading}>
         {/* 面包屑导航 */}
-        <div className={styles["breadcrumb-box-main"]}>
+        <div className="infinite-level-breadcrumb-position">
           <Breadcrumb
             terminal="mobile"
             readcrumbStyle={readcrumbStyle}
@@ -48,7 +49,7 @@ const InfiniteListUIMobile = (props: InfiniteListProps, ref: ForwardedRef<Infini
           {Slots?.fixRenderCenter && <Slots.fixRenderCenter></Slots.fixRenderCenter>}
         </div>
 
-        <div className={styles["list-box-main"]} style={listStyle}>
+        <div className="infinite-level-list-box" style={listStyle}>
           {/* 移动端 */}
           <ListRender ref={listRef} model={listModal} {...listRenderProps} ItemRender={Slots.renderItem} />
         </div>

package/src/components/InfiniteListUiPc/index.tsx

@@ -4,7 +4,7 @@ import { ConfigProvider, Spin, Empty, Button } from "antd";
 import { useInfiniteList } from "../../use-infinite-list";
 import Breadcrumb from "../Breadcrumb";
 import { InfiniteListProps, InfiniteListInstance } from "../../type";
-import styles from "../index.module.less";
+import "../index.less";
 const InfiniteListUIPc = (props: InfiniteListProps, ref: ForwardedRef<InfiniteListInstance>) => {
   const {
     states: {
@@ -20,6 +20,7 @@ const InfiniteListUIPc = (props: InfiniteListProps, ref: ForwardedRef<InfiniteLi
       listStyle,
       listRef,
       virtualPagedListProps,
+      className,
     },
     actions: { handleSelectId, handleNodeClick, handleBreadcrumbClick },
   } = useInfiniteList({ ...props, terminal: "pc" });
@@ -41,10 +42,10 @@ const InfiniteListUIPc = (props: InfiniteListProps, ref: ForwardedRef<InfiniteLi
     };
   };
   return (
-    <div className={styles["contain"]} style={style}>
+    <div className={`infinite-level-box ${className || ""}`} style={style}>
       <Spin spinning={loading}>
         {/* 面包屑导航 */}
-        <div className={styles["breadcrumb-box-main"]}>
+        <div className="infinite-level-breadcrumb-position">
           <Breadcrumb
             terminal="pc"
             readcrumbStyle={readcrumbStyle}
@@ -55,8 +56,7 @@ const InfiniteListUIPc = (props: InfiniteListProps, ref: ForwardedRef<InfiniteLi
           ></Breadcrumb>
           {Slots?.fixRenderCenter && <Slots.fixRenderCenter></Slots.fixRenderCenter>}
         </div>
-
-        <div className={styles["list-box-main"]} style={listStyle}>
+        <div className="infinite-level-list-box" style={listStyle}>
           <VirtualPagedList
             key={selectedLoadIdNode}
             ref={listRef}

package/src/components/{index.module.less → index.less}

@@ -1,14 +1,14 @@
-.contain {
+.infinite-level-box {
   -webkit-user-select: none; /* Safari */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* IE/Edge */
   user-select: none; /* Standard syntax */
 }
-.breadcrumb-box-main {
+.infinite-level-breadcrumb-position {
   position: sticky;
   top: 0px;
   z-index: 9;
-  .readcrumb-box {
+  .breadcrumb-box {
     height: 40px;
     width: 100%; /* 或者其他固定宽度 */
     overflow: hidden; /* 隐藏水平滚动条 */
@@ -16,15 +16,14 @@
     overflow-x: auto;
     display: flex;
     align-items: center;
-
-    > div {
+    .breadcrumb-item {
       display: inline-block;
-      .separator {
+      .breadcrumb-separator {
         margin: 0 4px;
       }
     }
   }
-  .readcrumb-box-mobile::-webkit-scrollbar {
+  .breadcrumb-box-mobile::-webkit-scrollbar {
     display: none; /* 隐藏滚动条（适用于 Chrome/Edge/Safari） */
   }
 }

package/src/type.d.ts

@@ -26,6 +26,8 @@ export interface InfiniteListInstance {
   listModal?: any;
 }
 export interface InfiniteListProps {
+  /** 添加外层类名 */
+  className?: string;
   /** 面包屑显示对应关联字段默认 value,label */
   fieldBreadcrumb?: FieldItem;
   /** 是否有首页，默认false */

package/src/use-infinite-list.ts

@@ -28,6 +28,7 @@ export function useInfiniteList(props: InfiniteListProps) {
     listModal,
     breadModel,
     virtualPagedListProps,
+    className,
   } = props;
   const [loading, setLoading] = useState(false);
   const [selectedLoadIdNode, setSelectedLoadIdNode] = useState<number | null>(null);
@@ -131,6 +132,7 @@ export function useInfiniteList(props: InfiniteListProps) {
       virtualPagedListProps,
       listModal,
       breadModel,
+      className,
     },
     actions: {
       handleSelectId,