bhd-components 0.1.2 → 0.1.5

package/es2017/index.d.ts

@@ -1,2 +1,5 @@
 export { default as Provider } from "./provider";
 export { default as Table } from "./table";
+export { default as TextTootip } from "./textTootip";
+export { default as zh_CN } from "antd/locale/en_US";
+export { default as en_US } from "antd/locale/zh_CN";

package/es2017/index.js

@@ -1,2 +1,5 @@
 export { default as Provider } from "./provider/index";
 export { default as Table } from "./table/index";
+export { default as TextTootip } from "./textTootip/index";
+export { default as zh_CN } from "antd/locale/en_US";
+export { default as en_US } from "antd/locale/zh_CN";

package/es2017/provider/config.js

@@ -3,10 +3,41 @@ const config = {
     theme: {
         token: {
             colorPrimary: "#f4523b",
-            colorSuccess: "#f4523b",
-            borderRadius: 8,
-            borderRadiusSM: 6,
-            wireframe: true
+            colorError: "#f8700c",
+            colorSuccess: "#23d9c3",
+            colorWarning: "#f9d579",
+            colorInfo: "#5991ef",
+            wireframe: true,
+            borderRadius: 4,
+            borderRadiusLG: 8,
+            fontSizeHeading1: 36,
+            fontSizeHeading2: 24,
+            fontSizeHeading3: 20,
+            fontSizeHeading4: 18,
+            lineHeight: 1.5,
+            lineHeightSM: 1.5,
+            colorInfoActive: "#3D7DE8",
+            colorInfoHover: "#7EAEFF",
+            colorInfoBorderHover: "#7EAEFF",
+            colorPrimaryBorderHover: "#FC6955",
+            colorPrimaryBorder: "#FC6955",
+            colorPrimaryActive: "#D54632",
+            colorText: "rgba(0, 0, 0, 0.85)",
+            colorTextQuaternary: "rgba(0, 0, 0, 0.25)",
+            colorBorder: "rgba(0, 0, 0, 0.15)",
+            colorBorderSecondary: "rgba(0, 0, 0, 0.05)"
+        },
+        components: {
+            Button: {
+                borderRadiusLG: 8,
+                colorBgContainer: "#ffffff",
+                colorLinkHover: "#7EAEFF",
+                colorLinkActive: "#3D7DE8",
+                colorPrimaryBorder: "#FC6955"
+            },
+            Slider: {
+                colorPrimaryBorder: "#FC6955"
+            }
         }
     }
 };

package/es2017/provider/index.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-declare const Provider: (Component: any) => (props: any) => JSX.Element;
+declare const Provider: (Component: any, customConfig?: {}) => ({ ...props }: any) => JSX.Element;
 export default Provider;

package/es2017/provider/index.js

@@ -1,12 +1,17 @@
+import _extends from "@swc/helpers/src/_extends.mjs";
+import _object_destructuring_empty from "@swc/helpers/src/_object_destructuring_empty.mjs";
 import _object_spread from "@swc/helpers/src/_object_spread.mjs";
 import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
 import { jsx as _jsx } from "@ice/jsx-runtime/jsx-runtime";
 import * as React from "react";
 import { ConfigProvider } from "antd";
 import config from "./config";
-const Provider = (Component)=>{
-    return (props)=>{
-        return /*#__PURE__*/ _jsx(ConfigProvider, _object_spread_props(_object_spread({}, config), {
+const Provider = (Component, customConfig = {})=>{
+    let AppConfig = Object.assign(config, customConfig);
+    ConfigProvider.config(AppConfig);
+    return (_param)=>{
+        var props = _extends({}, _object_destructuring_empty(_param));
+        return /*#__PURE__*/ _jsx(ConfigProvider, _object_spread_props(_object_spread({}, AppConfig), {
             children: /*#__PURE__*/ _jsx(Component, _object_spread({}, props))
         }));
     };

package/es2017/table/index.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-declare const _default: (props: any) => JSX.Element;
+declare const _default: ({ ...props }: any) => JSX.Element;
 export default _default;

package/es2017/table/index.js

@@ -1,13 +1,143 @@
 import _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
 import { jsx as _jsx } from "@ice/jsx-runtime/jsx-runtime";
 import * as React from "react";
+import { useState, useEffect, useRef } from "react";
 import styles from "./index.module.less";
 import Provider from "../provider";
 import { Table as AntdTable } from "antd";
+import TextTootip from "../textTootip";
+const widthPercentage = /^\d+%$/;
+const widthPx = /^\d+px$/;
+const defaultWidthRang = [
+    180,
+    240,
+    320
+]; //默认自适应的值  [最小值,最佳值,最大值]
 const Table = (props)=>{
+    const ref = useRef(null);
+    const [columns, setColumns] = useState(props.columns || []);
+    const [scrollObject, setScrollObject] = useState(props.scroll || undefined);
+    let { columnTootipClassName , columnTootipColor  } = props;
+    const initColumns = ()=>{
+        let { columns: selfColumns , scrollWidth  } = initColumnsWidth(columns, ref.current.offsetWidth);
+        setColumns(selfColumns);
+        let obj = scrollObject ? scrollObject : {};
+        obj = _object_spread_props(_object_spread({}, obj), {
+            // x: scrollWidth,
+            x: ref.current.offsetWidth
+        });
+        setScrollObject(obj);
+    };
+    const initColumnsWidth = (columns, tableWidth)=>{
+        let autoNum = 0; //自适应的列数
+        let minWidth = 0; //最小宽度
+        let scrollWidth = 0; //出现滚动条时 滚动宽度
+        columns = columns.map((item)=>{
+            item.width = item.width || "auto";
+            // item.width=parseFloat(item.width)
+            if (widthPercentage.test(item.width)) //检测到宽度为百分比 则转换为具体px  如大于100%  则视为自适应
+            item.width = parseFloat(item.width) >= 100 ? "auto" : tableWidth * item.width;
+            else if (typeof item.width === "number") //检测为number 则为具体的像素值
+            item.width = item.width;
+            else if (widthPx.test(item.width)) //检测为 "12px" 则为具体的值
+            item.width = parseFloat(item.width);
+            else //其它为auto
+            item.width = "auto";
+            if (item.width === "auto") {
+                autoNum += 1;
+                if (!item.widthRang) //没有设置自适应区间的 走默认区间
+                item.widthRang = defaultWidthRang;
+                minWidth += item.widthRang[0];
+                scrollWidth += item.widthRang[1];
+            } else {
+                minWidth += item.width;
+                scrollWidth += item.width;
+            }
+            if (!item.onColumnCell) item.onColumnCell = item.onCell || (()=>({}));
+            if (!item.render) {
+                item.ellipsis = {
+                    showTitle: false
+                };
+                item.render = (text)=>{
+                    return /*#__PURE__*/ _jsx(TextTootip, {
+                        width: item.width,
+                        title: text,
+                        trigger: "hover",
+                        overlayClassName: columnTootipClassName || styles.columnTootipClassName,
+                        color: columnTootipColor || "#FFF",
+                        children: /*#__PURE__*/ _jsx("span", {
+                            children: text
+                        })
+                    });
+                };
+            }
+            return item;
+        });
+        let diff = tableWidth - minWidth;
+        if (diff > 0) {
+            let avgWidth = 0;
+            // 有多余空间 平均分配至每个自适应的列
+            columns = columns.map((item)=>{
+                if (item.width === "auto") {
+                    //自适应列均分 多出来的宽度(除最后一列)
+                    item.width = item.widthRang[0] + diff / autoNum;
+                    if (item.width > item.widthRang[2]) {
+                        //超过最大宽度 则取最大宽度 多出来的值均分至每一列
+                        avgWidth += item.width - item.widthRang[2];
+                        item.width = item.widthRang[2];
+                    }
+                }
+            });
+            columns = columns.map((item, index)=>{
+                //存在适应自适应列侯 多余宽度 则平均分配每一列(除最后一列)
+                if (avgWidth > 0 && index !== columns.length - 1) item.width += avgWidth / columns.length - 1;
+            });
+        } else if (diff < 0) //宽度不足  自适应列取最佳宽度  并出现滚动条 且第一列 最后一列 固定
+        columns = columns.map((item, index)=>{
+            if (index === 0 || index === columns.length - 1) item.fixed = index === 0 ? "left" : "right";
+            if (item.width === "auto") item.width = item.widthRang[1];
+            return item;
+        });
+        else // 相等 自适应列取最小宽度
+        columns = columns.map((item)=>{
+            if (item.width === "auto") item.width = item.widthRang[0];
+            return item;
+        });
+        columns.map((item)=>{
+            item.onCell = (record, rowIndex)=>{
+                let obj = typeof item.onColumnCell === "function" ? item.onColumnCell(record, rowIndex) : {};
+                obj.style = obj.style ? obj.style : {};
+                return _object_spread_props(_object_spread({}, obj), {
+                    style: _object_spread({
+                        maxWidth: item.width + "px"
+                    }, obj.style)
+                });
+            };
+            return item;
+        });
+        return {
+            columns,
+            scrollWidth
+        };
+    };
+    useEffect(()=>{
+        initColumns();
+        window.addEventListener("resize", initColumns);
+        return ()=>{
+            window.removeEventListener("resize", initColumns);
+        };
+    }, []);
+    let config = _object_spread_props(_object_spread({
+        bordered: false
+    }, props), {
+        columns,
+        scroll: scrollObject
+    });
     return /*#__PURE__*/ _jsx("div", {
         className: styles.Table,
-        children: /*#__PURE__*/ _jsx(AntdTable, _object_spread({}, props))
+        ref: ref,
+        children: /*#__PURE__*/ _jsx(AntdTable, _object_spread({}, config))
     });
 };
 export default Provider(Table);

package/es2017/table/index.module.less

@@ -1,3 +1,64 @@
-.Table{
-    
-}
+.Table {
+  width: 100%;
+  :global {
+    table {
+      th,
+      td {
+        border: none;
+        border-bottom: 1px solid #e8e8e8;
+      }
+      thead {
+        tr {
+          th {
+            &:nth-child(1){
+                padding-left: 40px;
+            }
+            &:last-child{
+                padding-right: 40px;
+            }
+            background: #fafafa;
+            &::before {
+              display: none;
+            }
+          }
+        }
+      }
+      tbody {
+        tr {
+          background: transparent;
+          &:hover {
+            td {
+                
+            //   background-color: rgba(244, 82, 59, 0.1) !important;
+            background-color: #FFEEEB !important;
+            }
+          }
+          td {
+            word-wrap: break-word;
+            word-break: break-all;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            &:nth-child(1){
+                padding-left: 40px;
+            }
+            &:last-child{
+                padding-right: 40px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.columnTootipClassName{
+  :global{
+    .bhd-tooltip-content{
+      .bhd-tooltip-inner{
+        color: rgba(0,0,0,0.85);
+        word-break: break-all;
+      }
+    }
+  }
+}

package/es2017/textTootip/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { TooltipProps } from 'antd/es/tooltip';
+type TextTootipProps = TooltipProps & {
+    children: any;
+    width?: number;
+    title: any;
+};
+declare const TextTootip: (props: TextTootipProps) => JSX.Element;
+export default TextTootip;

package/es2017/textTootip/index.js

@@ -0,0 +1,40 @@
+import _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import { jsx as _jsx } from "@ice/jsx-runtime/jsx-runtime";
+import * as React from "react";
+import { useState } from "react";
+import { Tooltip } from "antd";
+const getTextSize = (str, fontSize = 14)=>{
+    let result = 0;
+    let ele = document.createElement("div");
+    ele.style.position = "absolute";
+    ele.style.whiteSpace = "nowrap";
+    ele.style.fontSize = fontSize + "px";
+    ele.style.opacity = "0";
+    ele.innerText = str;
+    document.body.append(ele);
+    result = ele.getBoundingClientRect().width;
+    document.body.removeChild(ele);
+    return result;
+};
+const TextTootip = (props)=>{
+    let { children , width , title  } = props;
+    const [open, setOpen] = useState(false);
+    const mouseEnter = ()=>{
+        if (!width) setOpen(true);
+        else //存在width
+        setOpen(getTextSize(title) < width ? false : true);
+    };
+    const mouseLeave = ()=>{
+        setOpen(false);
+    };
+    return /*#__PURE__*/ _jsx(Tooltip, _object_spread_props(_object_spread({}, props), {
+        open: open,
+        children: /*#__PURE__*/ _jsx("span", {
+            onMouseEnter: mouseEnter,
+            onMouseLeave: mouseLeave,
+            children: children
+        })
+    }));
+};
+export default TextTootip;

package/es2017/utils/object.d.ts

@@ -0,0 +1,2 @@
+declare const cloneDeep: (obj: any) => any;
+export { cloneDeep };

package/es2017/utils/object.js

@@ -0,0 +1,26 @@
+const cloneDeep = (obj)=>{
+    // 处理null
+    if (obj === null) return null;
+    // 处理原始值
+    if (typeof obj != "object" && typeof obj != "function") return obj;
+    // 处理函数
+    if (typeof obj === "function") {
+        let func = obj + "";
+        // 返回匿名函数
+        // new Function('...')()  直接执行引号中的内容，与eval
+        return new Function("return " + func)();
+    }
+    // 处理正则
+    if (obj instanceof RegExp) return new RegExp(obj);
+    // 处理Set对象
+    if (obj instanceof Set) return new Set(obj);
+    // 处理Map对象
+    if (obj instanceof Map) return new Map(obj);
+    // 处理日期
+    if (obj instanceof Date) return new Date(obj);
+    // 用被克隆对象的构造函数创建一个实例，这样克隆出来的对象也是那个构造函数的实例，保持相同的所属类
+    let newObj = new obj.constructor();
+    for(let key in obj)if (obj.hasOwnProperty(key)) newObj[key] = cloneDeep(obj[key]);
+    return newObj;
+};
+export { cloneDeep };

package/esm/index.d.ts

@@ -1,2 +1,5 @@
 export { default as Provider } from "./provider";
 export { default as Table } from "./table";
+export { default as TextTootip } from "./textTootip";
+export { default as zh_CN } from "antd/locale/en_US";
+export { default as en_US } from "antd/locale/zh_CN";

package/esm/index.js

@@ -1,2 +1,5 @@
 export { default as Provider } from "./provider/index";
 export { default as Table } from "./table/index";
+export { default as TextTootip } from "./textTootip/index";
+export { default as zh_CN } from "antd/locale/en_US";
+export { default as en_US } from "antd/locale/zh_CN";

package/esm/provider/config.js

@@ -3,10 +3,41 @@ var config = {
     theme: {
         token: {
             colorPrimary: "#f4523b",
-            colorSuccess: "#f4523b",
-            borderRadius: 8,
-            borderRadiusSM: 6,
-            wireframe: true
+            colorError: "#f8700c",
+            colorSuccess: "#23d9c3",
+            colorWarning: "#f9d579",
+            colorInfo: "#5991ef",
+            wireframe: true,
+            borderRadius: 4,
+            borderRadiusLG: 8,
+            fontSizeHeading1: 36,
+            fontSizeHeading2: 24,
+            fontSizeHeading3: 20,
+            fontSizeHeading4: 18,
+            lineHeight: 1.5,
+            lineHeightSM: 1.5,
+            colorInfoActive: "#3D7DE8",
+            colorInfoHover: "#7EAEFF",
+            colorInfoBorderHover: "#7EAEFF",
+            colorPrimaryBorderHover: "#FC6955",
+            colorPrimaryBorder: "#FC6955",
+            colorPrimaryActive: "#D54632",
+            colorText: "rgba(0, 0, 0, 0.85)",
+            colorTextQuaternary: "rgba(0, 0, 0, 0.25)",
+            colorBorder: "rgba(0, 0, 0, 0.15)",
+            colorBorderSecondary: "rgba(0, 0, 0, 0.05)"
+        },
+        components: {
+            Button: {
+                borderRadiusLG: 8,
+                colorBgContainer: "#ffffff",
+                colorLinkHover: "#7EAEFF",
+                colorLinkActive: "#3D7DE8",
+                colorPrimaryBorder: "#FC6955"
+            },
+            Slider: {
+                colorPrimaryBorder: "#FC6955"
+            }
         }
     }
 };

package/esm/provider/index.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-declare const Provider: (Component: any) => (props: any) => JSX.Element;
+declare const Provider: (Component: any, customConfig?: {}) => ({ ...props }: any) => JSX.Element;
 export default Provider;

package/esm/provider/index.js

@@ -1,3 +1,5 @@
+import _extends from "@swc/helpers/src/_extends.mjs";
+import _object_destructuring_empty from "@swc/helpers/src/_object_destructuring_empty.mjs";
 import _object_spread from "@swc/helpers/src/_object_spread.mjs";
 import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
 import { jsx as _jsx } from "@ice/jsx-runtime/jsx-runtime";
@@ -5,8 +7,12 @@ import * as React from "react";
 import { ConfigProvider } from "antd";
 import config from "./config";
 var Provider = function(Component) {
-    return function(props) {
-        return /*#__PURE__*/ _jsx(ConfigProvider, _object_spread_props(_object_spread({}, config), {
+    var customConfig = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+    var AppConfig = Object.assign(config, customConfig);
+    ConfigProvider.config(AppConfig);
+    return function(_param) {
+        var props = _extends({}, _object_destructuring_empty(_param));
+        return /*#__PURE__*/ _jsx(ConfigProvider, _object_spread_props(_object_spread({}, AppConfig), {
             children: /*#__PURE__*/ _jsx(Component, _object_spread({}, props))
         }));
     };

package/esm/table/index.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-declare const _default: (props: any) => JSX.Element;
+declare const _default: ({ ...props }: any) => JSX.Element;
 export default _default;

package/esm/table/index.js

@@ -1,13 +1,146 @@
 import _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
 import { jsx as _jsx } from "@ice/jsx-runtime/jsx-runtime";
 import * as React from "react";
+import { useState, useEffect, useRef } from "react";
 import styles from "./index.module.less";
 import Provider from "../provider";
 import { Table as AntdTable } from "antd";
+import TextTootip from "../textTootip";
+var widthPercentage = /^\d+%$/;
+var widthPx = /^\d+px$/;
+var defaultWidthRang = [
+    180,
+    240,
+    320
+]; //默认自适应的值  [最小值,最佳值,最大值]
 var Table = function(props) {
+    var ref = useRef(null);
+    var _useState = _sliced_to_array(useState(props.columns || []), 2), columns = _useState[0], setColumns = _useState[1];
+    var _useState1 = _sliced_to_array(useState(props.scroll || undefined), 2), scrollObject = _useState1[0], setScrollObject = _useState1[1];
+    var columnTootipClassName = props.columnTootipClassName, columnTootipColor = props.columnTootipColor;
+    var initColumns = function() {
+        var _initColumnsWidth = initColumnsWidth(columns, ref.current.offsetWidth), selfColumns = _initColumnsWidth.columns, scrollWidth = _initColumnsWidth.scrollWidth;
+        setColumns(selfColumns);
+        var obj = scrollObject ? scrollObject : {};
+        obj = _object_spread_props(_object_spread({}, obj), {
+            // x: scrollWidth,
+            x: ref.current.offsetWidth
+        });
+        setScrollObject(obj);
+    };
+    var initColumnsWidth = function(columns, tableWidth) {
+        var autoNum = 0; //自适应的列数
+        var minWidth = 0; //最小宽度
+        var scrollWidth = 0; //出现滚动条时 滚动宽度
+        columns = columns.map(function(item) {
+            item.width = item.width || "auto";
+            // item.width=parseFloat(item.width)
+            if (widthPercentage.test(item.width)) //检测到宽度为百分比 则转换为具体px  如大于100%  则视为自适应
+            item.width = parseFloat(item.width) >= 100 ? "auto" : tableWidth * item.width;
+            else if (typeof item.width === "number") //检测为number 则为具体的像素值
+            item.width = item.width;
+            else if (widthPx.test(item.width)) //检测为 "12px" 则为具体的值
+            item.width = parseFloat(item.width);
+            else //其它为auto
+            item.width = "auto";
+            if (item.width === "auto") {
+                autoNum += 1;
+                if (!item.widthRang) //没有设置自适应区间的 走默认区间
+                item.widthRang = defaultWidthRang;
+                minWidth += item.widthRang[0];
+                scrollWidth += item.widthRang[1];
+            } else {
+                minWidth += item.width;
+                scrollWidth += item.width;
+            }
+            if (!item.onColumnCell) item.onColumnCell = item.onCell || function() {
+                return {};
+            };
+            if (!item.render) {
+                item.ellipsis = {
+                    showTitle: false
+                };
+                item.render = function(text) {
+                    return /*#__PURE__*/ _jsx(TextTootip, {
+                        width: item.width,
+                        title: text,
+                        trigger: "hover",
+                        overlayClassName: columnTootipClassName || styles.columnTootipClassName,
+                        color: columnTootipColor || "#FFF",
+                        children: /*#__PURE__*/ _jsx("span", {
+                            children: text
+                        })
+                    });
+                };
+            }
+            return item;
+        });
+        var diff = tableWidth - minWidth;
+        if (diff > 0) {
+            var avgWidth = 0;
+            // 有多余空间 平均分配至每个自适应的列
+            columns = columns.map(function(item) {
+                if (item.width === "auto") {
+                    //自适应列均分 多出来的宽度(除最后一列)
+                    item.width = item.widthRang[0] + diff / autoNum;
+                    if (item.width > item.widthRang[2]) {
+                        //超过最大宽度 则取最大宽度 多出来的值均分至每一列
+                        avgWidth += item.width - item.widthRang[2];
+                        item.width = item.widthRang[2];
+                    }
+                }
+            });
+            columns = columns.map(function(item, index) {
+                //存在适应自适应列侯 多余宽度 则平均分配每一列(除最后一列)
+                if (avgWidth > 0 && index !== columns.length - 1) item.width += avgWidth / columns.length - 1;
+            });
+        } else if (diff < 0) //宽度不足  自适应列取最佳宽度  并出现滚动条 且第一列 最后一列 固定
+        columns = columns.map(function(item, index) {
+            if (index === 0 || index === columns.length - 1) item.fixed = index === 0 ? "left" : "right";
+            if (item.width === "auto") item.width = item.widthRang[1];
+            return item;
+        });
+        else // 相等 自适应列取最小宽度
+        columns = columns.map(function(item) {
+            if (item.width === "auto") item.width = item.widthRang[0];
+            return item;
+        });
+        columns.map(function(item) {
+            item.onCell = function(record, rowIndex) {
+                var obj = typeof item.onColumnCell === "function" ? item.onColumnCell(record, rowIndex) : {};
+                obj.style = obj.style ? obj.style : {};
+                return _object_spread_props(_object_spread({}, obj), {
+                    style: _object_spread({
+                        maxWidth: item.width + "px"
+                    }, obj.style)
+                });
+            };
+            return item;
+        });
+        return {
+            columns: columns,
+            scrollWidth: scrollWidth
+        };
+    };
+    useEffect(function() {
+        initColumns();
+        window.addEventListener("resize", initColumns);
+        return function() {
+            window.removeEventListener("resize", initColumns);
+        };
+    }, []);
+    var config = _object_spread_props(_object_spread({
+        bordered: false
+    }, props), {
+        columns: columns,
+        scroll: scrollObject
+    });
     return /*#__PURE__*/ _jsx("div", {
         className: styles.Table,
-        children: /*#__PURE__*/ _jsx(AntdTable, _object_spread({}, props))
+        ref: ref,
+        children: /*#__PURE__*/ _jsx(AntdTable, _object_spread({}, config))
     });
 };
 export default Provider(Table);