bhd-components 0.2.2 → 0.2.4

package/esm/message/index.module.less

@@ -0,0 +1,91 @@
+// .bhd-message-notice {
+//   /* success */
+//   &.bhd-message-notice-success {
+//     .bhd-message-notice-content {
+//       background: #5991ef;
+//       color: #ffffff;
+//       font-weight: 500;
+//       //   font-family: 'PingFang SC';
+//       font-size: 14px;
+//       .bhd-message-success {
+//         & > .anticon {
+//           color: #ffffff;
+//           font-size: 14px;
+//         }
+//       }
+//     }
+//   }
+//   /* warn */
+//   &.bhd-message-notice-warning {
+//   }
+//   /* error */
+//   &.bhd-message-notice-error {
+//     .bhd-message-notice-content {
+//       background-color: #f8700c;
+//       color: #ffffff;
+//       font-weight: 500;
+//       //   font-family: 'PingFang SC';
+//       font-size: 14px;
+//       .bhd-message-error {
+//         & > .anticon {
+//           color: #ffffff;
+//           font-size: 14px;
+//         }
+//       }
+//     }
+//   }
+// }
+
+/* 成功 */
+.customSuccess {
+  :global {
+    .bhd-message-notice-content {
+      background: #5991ef !important;
+      color: #ffffff;
+      font-weight: 500;
+      font-size: 14px;
+      .bhd-message-success {
+        & > .anticon {
+          color: #ffffff;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}
+
+/* 警告 */
+.customWarning {
+  :global {
+    .bhd-message-notice-content {
+      background-color: #fadb14 !important;
+      color: #ffffff;
+      font-weight: 500;
+      font-size: 14px;
+      .bhd-message-warning {
+        & > .anticon {
+          color: #ffffff;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}
+
+/* 错误 */
+.customError {
+  :global {
+    .bhd-message-notice-content {
+      background-color: #f8700c !important;
+      color: #ffffff;
+      font-weight: 500;
+      font-size: 14px;
+      .bhd-message-error {
+        & > .anticon {
+          color: #ffffff;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}

package/esm/pagination/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { PaginationProps } from "antd/es/pagination";
+declare const BhdPagination: (props: PaginationProps) => JSX.Element;
+export default BhdPagination;

package/esm/pagination/index.js

@@ -0,0 +1,13 @@
+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 styles from "./index.module.less";
+import { Pagination } from "antd";
+var BhdPagination = function(props) {
+    var className = "".concat(styles.pagination, " ").concat(props.className || "");
+    return /*#__PURE__*/ _jsx(Pagination, _object_spread_props(_object_spread({}, props), {
+        className: className
+    }));
+};
+export default BhdPagination;

package/esm/pagination/index.module.less

@@ -0,0 +1,49 @@
+.pagination{
+    :global{
+        .bhd-pagination-item{
+            border-color: transparent;
+        }
+        .bhd-pagination-item-link{
+            border: none!important;
+            background: none!important;
+        }
+        .bhd-pagination-item-active{
+            background-color: #f4523b;
+            &:hover{
+                background-color: #ff7d66;
+                &>a{
+                    color: #FFFFFF;
+                }
+            }
+            &>a{
+                color: #FFFFFF;
+            }
+        }
+    }
+}
+
+:global{
+    .bhd-pagination-disabled{
+       .bhd-pagination-item{
+        border: none!important;
+        background: none!important;
+        color: rgba(0, 0, 0, 0.25)!important;
+        a{
+            color: rgba(0, 0, 0, 0.25)!important;
+        }
+       } 
+    }
+
+    .bhd-pagination-mini{
+        .bhd-pagination-item{
+            margin-right: 8px !important;
+        }
+        .bhd-pagination-item:not(.bhd-pagination-item-active){
+            &:hover{
+                background-color:transparent!important;
+            }
+        }
+    }
+}
+
+

package/esm/table/index.js

@@ -36,16 +36,20 @@ var Table = function(props) {
         180,
         240,
         320
-    ] : _props_defaultWidthRang, _props_isFixedLeft = props.isFixedLeft, isFixedLeft = _props_isFixedLeft === void 0 ? true : _props_isFixedLeft, _props_isFixedRight = props.isFixedRight, isFixedRight = _props_isFixedRight === void 0 ? true : _props_isFixedRight;
+    ] : _props_defaultWidthRang, _props_isFixedLeft = props.isFixedLeft, isFixedLeft = _props_isFixedLeft === void 0 ? true : _props_isFixedLeft, _props_isFixedRight = props.isFixedRight, isFixedRight = _props_isFixedRight === void 0 ? true : _props_isFixedRight, _props_bordered = props.bordered, bordered = _props_bordered === void 0 ? false : _props_bordered, kind = props.kind;
     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(props.columns, tableRef.current.offsetWidth), selfColumns = _initColumnsWidth.columns;
+        var scrollBarDom = tableRef.current.getElementsByClassName("bhd-table-cell-scrollbar")[0];
+        var scrollBarWidth = scrollBarDom ? scrollBarDom.clientWidth : 0;
+        var tableWidth = bordered ? tableRef.current.offsetWidth - 2 - scrollBarWidth : tableRef.current.offsetWidth - scrollBarWidth;
+        console.log("gaodug", scrollBarWidth);
+        var _initColumnsWidth = initColumnsWidth(props.columns, tableWidth), selfColumns = _initColumnsWidth.columns;
         setColumns(selfColumns);
         var obj = scrollObject ? scrollObject : {};
         obj = _object_spread_props(_object_spread({}, obj), {
-            x: tableRef.current.offsetWidth
+            x: tableWidth
         });
         setScrollObject(obj);
     };
@@ -57,7 +61,7 @@ var Table = function(props) {
             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;
+            item.width = parseFloat(item.width) >= 100 ? "auto" : tableWidth * parseFloat(item.width) / 100;
             else if (typeof item.width === "number") //检测为number 则为具体的像素值
             item.width = item.width;
             else if (widthPx.test(item.width)) //检测为 "12px" 则为具体的值
@@ -114,7 +118,6 @@ var Table = function(props) {
                 }
                 return item;
             });
-            // console.log("diffdiff",diff,tableWidth,minWidth,avgWidth,columns,autoNum)
             columns = columns.map(function(item, index) {
                 //存在适应自适应列侯 多余宽度 则平均分配每一列(除最后一列)
                 if (avgWidth > 0 && index !== columns.length - 1) item.width += avgWidth / columns.length - 1;
@@ -142,7 +145,9 @@ var Table = function(props) {
                     }, obj.style)
                 });
             };
-            console.log("宽度宽度", item, item.width, item.widthRang);
+            // if(isNaN(item.width)){
+            //   console.log("宽度宽度",item,item.width,item.widthRang)
+            // }
             return item;
         });
         return {
@@ -175,12 +180,11 @@ var Table = function(props) {
         }
     });
     return /*#__PURE__*/ _jsx("div", {
-        className: styles.Table,
+        className: "".concat(styles.Table, " ").concat(kind === "simple" ? styles.SmallTable : ""),
         ref: tableRef,
         children: /*#__PURE__*/ _jsx(AntdTable, _object_spread({}, config))
     });
 };
-// let BhdTable=Provider(Table)
 Table.SELECTION_COLUMN = AntdTable.SELECTION_COLUMN;
 Table.EXPAND_COLUMN = AntdTable.EXPAND_COLUMN;
 Table.SELECTION_ALL = AntdTable.SELECTION_ALL;

package/esm/table/index.module.less

@@ -1,5 +1,8 @@
+// @import url("../theme/variable.less");
+
 .Table {
   width: 100%;
+  // color:@customColor;
   :global {
     table {
       th,
@@ -14,13 +17,13 @@
             font-size: 16px;
             color: rgba(0, 0, 0, 0.85);
             white-space: nowrap;
+            background: #fafafa;
             &:nth-child(1) {
               padding-left: 40px;
             }
             &:last-child {
               padding-right: 40px;
             }
-            background: #fafafa;
             &::before {
               display: none;
             }
@@ -55,8 +58,8 @@
               padding-right: 40px;
             }
             /* 多选框 距右的距离 */
-            &.bhd-table-selection-column{
-              padding-inline-end:16px;
+            &.bhd-table-selection-column {
+              padding-inline-end: 16px;
             }
           }
         }
@@ -73,13 +76,133 @@
       }
 
       /* scroll 固定列 设置overflow:hidden 阴影消失问题 */
-      .bhd-table-cell-fix-left-first::after,.bhd-table-cell-fix-left-last::after{
+      .bhd-table-cell-fix-left-first::after,
+      .bhd-table-cell-fix-left-last::after {
         right: 2px;
       }
-      .bhd-table-cell-fix-right-first::after,.bhd-table-cell-fix-right-last::after{
+      .bhd-table-cell-fix-right-first::after,
+      .bhd-table-cell-fix-right-last::after {
         left: 2px;
       }
     }
+    /* 分页器 */
+    .bhd-pagination {
+      .bhd-pagination-item {
+        border-color: transparent;
+      }
+      .bhd-pagination-item-link {
+        border: none !important;
+        background: none !important;
+      }
+      .bhd-pagination-item-active {
+        background-color: #f4523b;
+        &:hover {
+          background-color: #ff7d66;
+          & > a {
+            color: #ffffff;
+          }
+        }
+        & > a {
+          color: #ffffff;
+        }
+      }
+      &.bhd-pagination-disabled {
+        .bhd-pagination-item {
+          border: none !important;
+          background: none !important;
+          color: rgba(0, 0, 0, 0.25) !important;
+          a {
+            color: rgba(0, 0, 0, 0.25) !important;
+          }
+        }
+      }
+
+      &.bhd-pagination-mini {
+        .bhd-pagination-item {
+          margin-right: 8px !important;
+        }
+        .bhd-pagination-item:not(.bhd-pagination-item-active) {
+          &:hover {
+            background-color: transparent !important;
+          }
+        }
+      }
+    }
+  }
+
+  &.SmallTable{
+    :global{
+      table {
+        th,
+        td {
+          border: none;
+          border-bottom: 1px solid #EBEBEB;
+        }
+        & > .bhd-table-thead {
+          & > tr {
+            & > .bhd-table-cell {
+              font-weight: 500;
+              font-size: 16px;
+              color: rgba(0, 0, 0, 0.85);
+              white-space: nowrap;
+              padding-top: 8px;
+              padding-bottom: 8px;
+              background-color: #fafafa;
+              &:nth-child(1) {
+                padding-left: 40px;
+              }
+              &:last-child {
+                padding-right: 40px;
+              }
+              // background: @color-background-fillquaternary-Tr;
+              &::before {
+                display: none;
+              }
+              &.bhd-table-selection-column {
+                padding-inline-end: 16px;
+              }
+            }
+          }
+        }
+        tbody {
+          tr.bhd-table-placeholder {
+            &:hover {
+              td {
+                background-color: #ffffff;
+              }
+            }
+          }
+          tr:not(.bhd-table-placeholder) {
+            background: transparent;
+            &:hover {
+              td {
+                background-color: #F5F5F5 !important;
+              }
+            }
+            td {
+              word-wrap: break-word;
+              word-break: break-all;
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              padding-top: 13.5px;
+              padding-bottom: 13.5px;
+              &:nth-child(1) {
+                padding-left: 40px;
+              }
+              &:last-child {
+                padding-right: 40px;
+              }
+              /* 多选框 距右的距离 */
+              &.bhd-table-selection-column {
+                padding-inline-end: 16px;
+              }
+            }
+          }
+        }
+      }
+    }
+    
   }
 }
 

package/esm/tableSelect/index.d.ts

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

package/esm/tableSelect/index.js

@@ -0,0 +1,74 @@
+/*
+ * @Author: xiazhi
+ * @Date: 2023-06-06 14:37:48
+ */ 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 { useRef } from "react";
+import { Select } from "antd";
+//import type { SelectProps } from 'antd';
+import styles from "./index.module.less";
+var BhdTableSelect = function(props) {
+    var _props_className = props.// initOption=[],
+    // initOptionType='default',
+    className, className = _props_className === void 0 ? "" : _props_className, _props_popupClassName = props.popupClassName, popupClassName = _props_popupClassName === void 0 ? "" : _props_popupClassName, _props_dropdownStyle = props.dropdownStyle, dropdownStyle = _props_dropdownStyle === void 0 ? {} : _props_dropdownStyle, children = props.children;
+    var tableSelectRef = useRef(null);
+    // const handleTypeSwitchOption=()=>{
+    //     switch(initOptionType){
+    //         case 'imageText':
+    //             return initOption.map(item=>{
+    //                 return <Option 
+    //                     key={item.value} 
+    //                     value={item.value}
+    //                     label={
+    //                         <div className={styles.BhdTableSelect_option_lable}>
+    //                             <img src={item.img} alt="" />
+    //                             <span>{item.label}</span>
+    //                         </div>
+    //                     }>
+    //                         <div className={styles.BhdTableSelect_option_value}>
+    //                             <div>
+    //                                 <img src={item.headSculpture} alt="" />
+    //                                 <div>
+    //                                     <p>
+    //                                         <span>{item.userName}</span>
+    //                                         <div>
+    //                                             {item.labels.map((ele:any)=><span>{ele}</span>)}
+    //                                         </div>
+    //                                     </p>
+    //                                     <p>{item.ipone}</p>
+    //                                 </div>
+    //                             </div>
+    //                         </div>
+    //                     </Option>
+    //             })
+    //         default:
+    //             return initOption.map(item=><Option key={item.value} value={item.value}>{item.label}</Option>);
+    //     }
+    // }
+    // useEffect(()=>{
+    //     // if(initOption && initOption.length>0){
+    //     //     handleTypeSwitchOption();
+    //     // }
+    // },[initOption]);
+    var config = _object_spread_props(_object_spread({}, props), {
+        dropdownStyle: _object_spread_props(_object_spread({}, dropdownStyle), {
+            padding: 0,
+            borderRadius: 4,
+            border: "1px solid rgba(0,0,0,0.15)"
+        }),
+        popupClassName: popupClassName ? "".concat(popupClassName, " ").concat(styles.BhdTableSelect_popup) : styles.BhdTableSelect_popup
+    });
+    return /*#__PURE__*/ _jsx("div", {
+        className: "".concat(styles.BhdTableSelect, " ").concat(className),
+        ref: tableSelectRef,
+        children: /*#__PURE__*/ _jsx(Select, _object_spread_props(_object_spread({}, config), {
+            children: children
+        }))
+    });
+};
+BhdTableSelect.Option = function() {
+    return Select.Option;
+};
+export default BhdTableSelect;

package/esm/tableSelect/index.module.less

@@ -0,0 +1,21 @@
+.BhdTableSelect{
+    :global{
+        .bhd-select-selector{
+            padding-left: 0 !important;
+            .bhd-select-selection-search{
+                inset-inline-start:0;
+            }
+            .bhd-select-selection-item{
+                font-size: 16px;
+                font-family: PingFang SC-Regular, PingFang SC;
+                font-weight: 400;
+                color: rgba(0,0,0,0.85);
+                line-height: 24px;
+            }
+        }
+        .bhd-select-arrow{
+            margin-top: -9px;
+            inset-inline-end: 6px;
+        }
+    }
+}