bhd-components 0.4.1 → 0.4.2

package/README.md

@@ -1,6 +1,6 @@
 # bhd-components
 
-**当前版本：** 0.4.0
+**当前版本：** 0.4.2
 
 ## Install
 

package/es2017/bhdSelect/index.d.ts

@@ -14,7 +14,7 @@ interface BhdSelectProps {
     filterOption?: null | ((filterValue: string, item: React.ReactElement) => boolean) | boolean;
     filterSort?: (a: any, b: any) => number;
     onDropdownVisibleChange?: (open: boolean) => void;
-    onMouseDown?: (e: React.MouseEvent) => void;
+    onMouseEnter?: (e: React.MouseEvent) => void;
     options: {
         value: React.Key;
         disabled: boolean;
@@ -25,6 +25,7 @@ interface BhdSelectProps {
     searchClassName?: string;
     useType?: string;
     listHeight?: number;
+    popupMatchSelectWidth?: number;
 }
 declare const BhdSelect: (props: BhdSelectProps) => React.JSX.Element;
 export default BhdSelect;

package/es2017/bhdSelect/index.js

@@ -22,11 +22,11 @@ const BhdSelect = (props)=>{
     let { mask =false , popupClassName ="" , suffixIcon , className ="" , optionClassName ="" , children , showSearch , dropdownRender , search_placeholder , select_title , search_label ="label" , options , arrowType ="default" , searchClassName ="" , useType ="" , listHeight =0  } = props;
     const bhdDropdownRef = useRef(null);
     const bhdSelectRef = useRef(null);
-    // const [show, setShow] = useState(false);
     const [clientY, setclientY] = useState(0); //下拉列表距离顶部的高度
     const [optionHei, setOptionHei] = useState(0); //option的宽度
     const [filterValue, setFilterValue] = useState(""); //下拉搜索的内容
     const [filterChildren, setfilterChildren] = useState([]);
+    const [selectWidth, setSelectWidth] = useState(0); //下拉框的宽度
     const renderSuffixIcon = ()=>{
         switch(arrowType){
             case "table":
@@ -73,7 +73,7 @@ const BhdSelect = (props)=>{
     };
     const initHeight = ()=>{
         if (useType == 'table') {
-            let hei = window.innerHeight - clientY - 108;
+            let hei = window.innerHeight - clientY - 120;
             if (showSearch) {
                 hei - 36;
             }
@@ -131,7 +131,6 @@ const BhdSelect = (props)=>{
             if (mask && bhdDropdownRef.current != null) {
                 // console.log(bhdDropdownRef, 22222);
                 let parent = bhdDropdownRef.current.parentNode.parentNode.parentNode;
-                //let dom = document.getElementsByClassName(`${maskClassName}`)[0];
                 if (!parent) return;
                 // let parent = dom.parentElement;
                 parent.setAttribute("style", "position:fixed;inset:0;z-index:9999");
@@ -161,7 +160,6 @@ const BhdSelect = (props)=>{
                         },
                         children: /*#__PURE__*/ _jsx(Search, {
                             placeholder: search_placeholder ? search_placeholder : "请输入",
-                            // prefix={<i className="iconfont iconicon_sousuo_Search" />}
                             onChange: ({ target: { value  }  })=>{
                                 setFilterValue(value);
                             },
@@ -198,7 +196,12 @@ const BhdSelect = (props)=>{
         }
     };
     useEffect(()=>{
-        // console.log(34343434,children);
+        // console.log(34343434,props);
+        if (props.popupMatchSelectWidth) {
+            setSelectWidth(props.popupMatchSelectWidth);
+        } else {
+        // console.log(bhdSelectRef.current.getBoundingClientRect(),555555555);
+        }
         filterOption();
         window.addEventListener("resize", initHeight);
         return ()=>{
@@ -214,7 +217,8 @@ const BhdSelect = (props)=>{
         let config = _object_spread_props(_object_spread({}, props), {
             listHeight: optionHei,
             popupClassName: `${styles.bhdSelect_option} ${popupClassName || ""} `,
-            suffixIcon: suffixIcon ? suffixIcon : renderSuffixIcon()
+            suffixIcon: suffixIcon ? suffixIcon : renderSuffixIcon(),
+            popupMatchSelectWidth: selectWidth
         });
         delete config.mask;
         delete config.className;
@@ -247,14 +251,23 @@ const BhdSelect = (props)=>{
                     initHeight: initHeight
                 }));
             },
-            onMouseDown: (e)=>{
-                if (e.clientY) {
-                    setclientY(e.clientY);
+            onMouseEnter: (e)=>{
+                let top = bhdSelectRef.current.getBoundingClientRect().top;
+                let y = e.clientY;
+                if (top || y) {
+                    if (top) {
+                        setclientY(top);
+                    } else {
+                        setclientY(y);
+                    }
+                }
+                //表格中使用下拉列表，定义下拉列表宽度
+                if (!props.popupMatchSelectWidth && useType === 'table') {
+                    setSelectWidth(bhdSelectRef.current.parentNode.getBoundingClientRect().width - 10);
                 }
-                props.onMouseDown && props.onMouseDown(e);
+                props.onMouseEnter && props.onMouseEnter(e);
             },
-            children: // filterOption()
-            filterChildren
+            children: filterChildren
         }))
     });
 };

package/es2017/titleBar/index.module.less

@@ -33,7 +33,7 @@
         margin-top: 8px;
         color: rgba(0, 0, 0, 0.45);
         font-weight: 400;
-        font-size: 12px;
+        font-size: 14px;
         line-height: 1.5;
         white-space: nowrap;
         overflow: hidden;

package/esm/bhdSelect/index.d.ts

@@ -14,7 +14,7 @@ interface BhdSelectProps {
     filterOption?: null | ((filterValue: string, item: React.ReactElement) => boolean) | boolean;
     filterSort?: (a: any, b: any) => number;
     onDropdownVisibleChange?: (open: boolean) => void;
-    onMouseDown?: (e: React.MouseEvent) => void;
+    onMouseEnter?: (e: React.MouseEvent) => void;
     options: {
         value: React.Key;
         disabled: boolean;
@@ -25,6 +25,7 @@ interface BhdSelectProps {
     searchClassName?: string;
     useType?: string;
     listHeight?: number;
+    popupMatchSelectWidth?: number;
 }
 declare const BhdSelect: (props: BhdSelectProps) => React.JSX.Element;
 export default BhdSelect;

package/esm/bhdSelect/index.js

@@ -25,11 +25,11 @@ var BhdSelect = function(props) {
     var _props_mask = props.mask, mask = _props_mask === void 0 ? false : _props_mask, _props_popupClassName = props.popupClassName, popupClassName = _props_popupClassName === void 0 ? "" : _props_popupClassName, suffixIcon = props.suffixIcon, _props_className = props.className, className = _props_className === void 0 ? "" : _props_className, _props_optionClassName = props.optionClassName, optionClassName = _props_optionClassName === void 0 ? "" : _props_optionClassName, children = props.children, showSearch = props.showSearch, dropdownRender = props.dropdownRender, search_placeholder = props.search_placeholder, select_title = props.select_title, _props_search_label = props.search_label, search_label = _props_search_label === void 0 ? "label" : _props_search_label, options = props.options, _props_arrowType = props.arrowType, arrowType = _props_arrowType === void 0 ? "default" : _props_arrowType, _props_searchClassName = props.searchClassName, searchClassName = _props_searchClassName === void 0 ? "" : _props_searchClassName, _props_useType = props.useType, useType = _props_useType === void 0 ? "" : _props_useType, _props_listHeight = props.listHeight, listHeight = _props_listHeight === void 0 ? 0 : _props_listHeight;
     var bhdDropdownRef = useRef(null);
     var bhdSelectRef = useRef(null);
-    // const [show, setShow] = useState(false);
     var _useState = _sliced_to_array(useState(0), 2), clientY = _useState[0], setclientY = _useState[1]; //下拉列表距离顶部的高度
     var _useState1 = _sliced_to_array(useState(0), 2), optionHei = _useState1[0], setOptionHei = _useState1[1]; //option的宽度
     var _useState2 = _sliced_to_array(useState(""), 2), filterValue = _useState2[0], setFilterValue = _useState2[1]; //下拉搜索的内容
     var _useState3 = _sliced_to_array(useState([]), 2), filterChildren = _useState3[0], setfilterChildren = _useState3[1];
+    var _useState4 = _sliced_to_array(useState(0), 2), selectWidth = _useState4[0], setSelectWidth = _useState4[1]; //下拉框的宽度
     var renderSuffixIcon = function() {
         switch(arrowType){
             case "table":
@@ -76,7 +76,7 @@ var BhdSelect = function(props) {
     };
     var initHeight = function() {
         if (useType == "table") {
-            var hei = window.innerHeight - clientY - 108;
+            var hei = window.innerHeight - clientY - 120;
             if (showSearch) {
                 hei - 36;
             }
@@ -134,7 +134,6 @@ var BhdSelect = function(props) {
             if (mask && bhdDropdownRef.current != null) {
                 // console.log(bhdDropdownRef, 22222);
                 var parent = bhdDropdownRef.current.parentNode.parentNode.parentNode;
-                //let dom = document.getElementsByClassName(`${maskClassName}`)[0];
                 if (!parent) return;
                 // let parent = dom.parentElement;
                 parent.setAttribute("style", "position:fixed;inset:0;z-index:9999");
@@ -164,7 +163,6 @@ var BhdSelect = function(props) {
                         },
                         children: /*#__PURE__*/ _jsx(Search, {
                             placeholder: search_placeholder ? search_placeholder : "请输入",
-                            // prefix={<i className="iconfont iconicon_sousuo_Search" />}
                             onChange: function(param) {
                                 var value = param.target.value;
                                 setFilterValue(value);
@@ -202,7 +200,12 @@ var BhdSelect = function(props) {
         }
     };
     useEffect(function() {
-        // console.log(34343434,children);
+        // console.log(34343434,props);
+        if (props.popupMatchSelectWidth) {
+            setSelectWidth(props.popupMatchSelectWidth);
+        } else {
+        // console.log(bhdSelectRef.current.getBoundingClientRect(),555555555);
+        }
         filterOption();
         window.addEventListener("resize", initHeight);
         return function() {
@@ -218,7 +221,8 @@ var BhdSelect = function(props) {
         var config = _object_spread_props(_object_spread({}, props), {
             listHeight: optionHei,
             popupClassName: "".concat(styles.bhdSelect_option, " ").concat(popupClassName || "", " "),
-            suffixIcon: suffixIcon ? suffixIcon : renderSuffixIcon()
+            suffixIcon: suffixIcon ? suffixIcon : renderSuffixIcon(),
+            popupMatchSelectWidth: selectWidth
         });
         delete config.mask;
         delete config.className;
@@ -251,14 +255,23 @@ var BhdSelect = function(props) {
                     initHeight: initHeight
                 }));
             },
-            onMouseDown: function(e) {
-                if (e.clientY) {
-                    setclientY(e.clientY);
+            onMouseEnter: function(e) {
+                var top = bhdSelectRef.current.getBoundingClientRect().top;
+                var y = e.clientY;
+                if (top || y) {
+                    if (top) {
+                        setclientY(top);
+                    } else {
+                        setclientY(y);
+                    }
+                }
+                //表格中使用下拉列表，定义下拉列表宽度
+                if (!props.popupMatchSelectWidth && useType === "table") {
+                    setSelectWidth(bhdSelectRef.current.parentNode.getBoundingClientRect().width - 10);
                 }
-                props.onMouseDown && props.onMouseDown(e);
+                props.onMouseEnter && props.onMouseEnter(e);
             },
-            children: // filterOption()
-            filterChildren
+            children: filterChildren
         }))
     });
 };

package/esm/titleBar/index.module.less

@@ -33,7 +33,7 @@
         margin-top: 8px;
         color: rgba(0, 0, 0, 0.45);
         font-weight: 400;
-        font-size: 12px;
+        font-size: 14px;
         line-height: 1.5;
         white-space: nowrap;
         overflow: hidden;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bhd-components",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "组件功能描述",
   "files": [
     "esm",