bhd-components 0.4.1 → 0.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/es2017/bhdSelect/index.d.ts +2 -1
- package/es2017/bhdSelect/index.js +25 -12
- package/es2017/titleBar/index.module.less +1 -1
- package/esm/bhdSelect/index.d.ts +2 -1
- package/esm/bhdSelect/index.js +25 -12
- package/esm/titleBar/index.module.less +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -14,7 +14,7 @@ interface BhdSelectProps {
|
|
|
14
14
|
filterOption?: null | ((filterValue: string, item: React.ReactElement) => boolean) | boolean;
|
|
15
15
|
filterSort?: (a: any, b: any) => number;
|
|
16
16
|
onDropdownVisibleChange?: (open: boolean) => void;
|
|
17
|
-
|
|
17
|
+
onMouseEnter?: (e: React.MouseEvent) => void;
|
|
18
18
|
options: {
|
|
19
19
|
value: React.Key;
|
|
20
20
|
disabled: boolean;
|
|
@@ -25,6 +25,7 @@ interface BhdSelectProps {
|
|
|
25
25
|
searchClassName?: string;
|
|
26
26
|
useType?: string;
|
|
27
27
|
listHeight?: number;
|
|
28
|
+
popupMatchSelectWidth?: number;
|
|
28
29
|
}
|
|
29
30
|
declare const BhdSelect: (props: BhdSelectProps) => React.JSX.Element;
|
|
30
31
|
export default BhdSelect;
|
|
@@ -22,11 +22,11 @@ const BhdSelect = (props)=>{
|
|
|
22
22
|
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;
|
|
23
23
|
const bhdDropdownRef = useRef(null);
|
|
24
24
|
const bhdSelectRef = useRef(null);
|
|
25
|
-
// const [show, setShow] = useState(false);
|
|
26
25
|
const [clientY, setclientY] = useState(0); //下拉列表距离顶部的高度
|
|
27
26
|
const [optionHei, setOptionHei] = useState(0); //option的宽度
|
|
28
27
|
const [filterValue, setFilterValue] = useState(""); //下拉搜索的内容
|
|
29
28
|
const [filterChildren, setfilterChildren] = useState([]);
|
|
29
|
+
const [selectWidth, setSelectWidth] = useState(0); //下拉框的宽度
|
|
30
30
|
const renderSuffixIcon = ()=>{
|
|
31
31
|
switch(arrowType){
|
|
32
32
|
case "table":
|
|
@@ -73,7 +73,7 @@ const BhdSelect = (props)=>{
|
|
|
73
73
|
};
|
|
74
74
|
const initHeight = ()=>{
|
|
75
75
|
if (useType == 'table') {
|
|
76
|
-
let hei = window.innerHeight - clientY -
|
|
76
|
+
let hei = window.innerHeight - clientY - 120;
|
|
77
77
|
if (showSearch) {
|
|
78
78
|
hei - 36;
|
|
79
79
|
}
|
|
@@ -131,7 +131,6 @@ const BhdSelect = (props)=>{
|
|
|
131
131
|
if (mask && bhdDropdownRef.current != null) {
|
|
132
132
|
// console.log(bhdDropdownRef, 22222);
|
|
133
133
|
let parent = bhdDropdownRef.current.parentNode.parentNode.parentNode;
|
|
134
|
-
//let dom = document.getElementsByClassName(`${maskClassName}`)[0];
|
|
135
134
|
if (!parent) return;
|
|
136
135
|
// let parent = dom.parentElement;
|
|
137
136
|
parent.setAttribute("style", "position:fixed;inset:0;z-index:9999");
|
|
@@ -161,7 +160,6 @@ const BhdSelect = (props)=>{
|
|
|
161
160
|
},
|
|
162
161
|
children: /*#__PURE__*/ _jsx(Search, {
|
|
163
162
|
placeholder: search_placeholder ? search_placeholder : "请输入",
|
|
164
|
-
// prefix={<i className="iconfont iconicon_sousuo_Search" />}
|
|
165
163
|
onChange: ({ target: { value } })=>{
|
|
166
164
|
setFilterValue(value);
|
|
167
165
|
},
|
|
@@ -198,7 +196,12 @@ const BhdSelect = (props)=>{
|
|
|
198
196
|
}
|
|
199
197
|
};
|
|
200
198
|
useEffect(()=>{
|
|
201
|
-
// console.log(34343434,
|
|
199
|
+
// console.log(34343434,props);
|
|
200
|
+
if (props.popupMatchSelectWidth) {
|
|
201
|
+
setSelectWidth(props.popupMatchSelectWidth);
|
|
202
|
+
} else {
|
|
203
|
+
// console.log(bhdSelectRef.current.getBoundingClientRect(),555555555);
|
|
204
|
+
}
|
|
202
205
|
filterOption();
|
|
203
206
|
window.addEventListener("resize", initHeight);
|
|
204
207
|
return ()=>{
|
|
@@ -214,7 +217,8 @@ const BhdSelect = (props)=>{
|
|
|
214
217
|
let config = _object_spread_props(_object_spread({}, props), {
|
|
215
218
|
listHeight: optionHei,
|
|
216
219
|
popupClassName: `${styles.bhdSelect_option} ${popupClassName || ""} `,
|
|
217
|
-
suffixIcon: suffixIcon ? suffixIcon : renderSuffixIcon()
|
|
220
|
+
suffixIcon: suffixIcon ? suffixIcon : renderSuffixIcon(),
|
|
221
|
+
popupMatchSelectWidth: selectWidth
|
|
218
222
|
});
|
|
219
223
|
delete config.mask;
|
|
220
224
|
delete config.className;
|
|
@@ -247,14 +251,23 @@ const BhdSelect = (props)=>{
|
|
|
247
251
|
initHeight: initHeight
|
|
248
252
|
}));
|
|
249
253
|
},
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
254
|
+
onMouseEnter: (e)=>{
|
|
255
|
+
let top = bhdSelectRef.current.getBoundingClientRect().top;
|
|
256
|
+
let y = e.clientY;
|
|
257
|
+
if (top || y) {
|
|
258
|
+
if (top) {
|
|
259
|
+
setclientY(top);
|
|
260
|
+
} else {
|
|
261
|
+
setclientY(y);
|
|
262
|
+
}
|
|
263
|
+
}
|
|
264
|
+
//表格中使用下拉列表，定义下拉列表宽度
|
|
265
|
+
if (!props.popupMatchSelectWidth && useType === 'table') {
|
|
266
|
+
setSelectWidth(bhdSelectRef.current.parentNode.getBoundingClientRect().width - 10);
|
|
253
267
|
}
|
|
254
|
-
props.
|
|
268
|
+
props.onMouseEnter && props.onMouseEnter(e);
|
|
255
269
|
},
|
|
256
|
-
children:
|
|
257
|
-
filterChildren
|
|
270
|
+
children: filterChildren
|
|
258
271
|
}))
|
|
259
272
|
});
|
|
260
273
|
};
|
package/esm/bhdSelect/index.d.ts
CHANGED
|
@@ -14,7 +14,7 @@ interface BhdSelectProps {
|
|
|
14
14
|
filterOption?: null | ((filterValue: string, item: React.ReactElement) => boolean) | boolean;
|
|
15
15
|
filterSort?: (a: any, b: any) => number;
|
|
16
16
|
onDropdownVisibleChange?: (open: boolean) => void;
|
|
17
|
-
|
|
17
|
+
onMouseEnter?: (e: React.MouseEvent) => void;
|
|
18
18
|
options: {
|
|
19
19
|
value: React.Key;
|
|
20
20
|
disabled: boolean;
|
|
@@ -25,6 +25,7 @@ interface BhdSelectProps {
|
|
|
25
25
|
searchClassName?: string;
|
|
26
26
|
useType?: string;
|
|
27
27
|
listHeight?: number;
|
|
28
|
+
popupMatchSelectWidth?: number;
|
|
28
29
|
}
|
|
29
30
|
declare const BhdSelect: (props: BhdSelectProps) => React.JSX.Element;
|
|
30
31
|
export default BhdSelect;
|
package/esm/bhdSelect/index.js
CHANGED
|
@@ -25,11 +25,11 @@ var BhdSelect = function(props) {
|
|
|
25
25
|
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;
|
|
26
26
|
var bhdDropdownRef = useRef(null);
|
|
27
27
|
var bhdSelectRef = useRef(null);
|
|
28
|
-
// const [show, setShow] = useState(false);
|
|
29
28
|
var _useState = _sliced_to_array(useState(0), 2), clientY = _useState[0], setclientY = _useState[1]; //下拉列表距离顶部的高度
|
|
30
29
|
var _useState1 = _sliced_to_array(useState(0), 2), optionHei = _useState1[0], setOptionHei = _useState1[1]; //option的宽度
|
|
31
30
|
var _useState2 = _sliced_to_array(useState(""), 2), filterValue = _useState2[0], setFilterValue = _useState2[1]; //下拉搜索的内容
|
|
32
31
|
var _useState3 = _sliced_to_array(useState([]), 2), filterChildren = _useState3[0], setfilterChildren = _useState3[1];
|
|
32
|
+
var _useState4 = _sliced_to_array(useState(0), 2), selectWidth = _useState4[0], setSelectWidth = _useState4[1]; //下拉框的宽度
|
|
33
33
|
var renderSuffixIcon = function() {
|
|
34
34
|
switch(arrowType){
|
|
35
35
|
case "table":
|
|
@@ -76,7 +76,7 @@ var BhdSelect = function(props) {
|
|
|
76
76
|
};
|
|
77
77
|
var initHeight = function() {
|
|
78
78
|
if (useType == "table") {
|
|
79
|
-
var hei = window.innerHeight - clientY -
|
|
79
|
+
var hei = window.innerHeight - clientY - 120;
|
|
80
80
|
if (showSearch) {
|
|
81
81
|
hei - 36;
|
|
82
82
|
}
|
|
@@ -134,7 +134,6 @@ var BhdSelect = function(props) {
|
|
|
134
134
|
if (mask && bhdDropdownRef.current != null) {
|
|
135
135
|
// console.log(bhdDropdownRef, 22222);
|
|
136
136
|
var parent = bhdDropdownRef.current.parentNode.parentNode.parentNode;
|
|
137
|
-
//let dom = document.getElementsByClassName(`${maskClassName}`)[0];
|
|
138
137
|
if (!parent) return;
|
|
139
138
|
// let parent = dom.parentElement;
|
|
140
139
|
parent.setAttribute("style", "position:fixed;inset:0;z-index:9999");
|
|
@@ -164,7 +163,6 @@ var BhdSelect = function(props) {
|
|
|
164
163
|
},
|
|
165
164
|
children: /*#__PURE__*/ _jsx(Search, {
|
|
166
165
|
placeholder: search_placeholder ? search_placeholder : "请输入",
|
|
167
|
-
// prefix={<i className="iconfont iconicon_sousuo_Search" />}
|
|
168
166
|
onChange: function(param) {
|
|
169
167
|
var value = param.target.value;
|
|
170
168
|
setFilterValue(value);
|
|
@@ -202,7 +200,12 @@ var BhdSelect = function(props) {
|
|
|
202
200
|
}
|
|
203
201
|
};
|
|
204
202
|
useEffect(function() {
|
|
205
|
-
// console.log(34343434,
|
|
203
|
+
// console.log(34343434,props);
|
|
204
|
+
if (props.popupMatchSelectWidth) {
|
|
205
|
+
setSelectWidth(props.popupMatchSelectWidth);
|
|
206
|
+
} else {
|
|
207
|
+
// console.log(bhdSelectRef.current.getBoundingClientRect(),555555555);
|
|
208
|
+
}
|
|
206
209
|
filterOption();
|
|
207
210
|
window.addEventListener("resize", initHeight);
|
|
208
211
|
return function() {
|
|
@@ -218,7 +221,8 @@ var BhdSelect = function(props) {
|
|
|
218
221
|
var config = _object_spread_props(_object_spread({}, props), {
|
|
219
222
|
listHeight: optionHei,
|
|
220
223
|
popupClassName: "".concat(styles.bhdSelect_option, " ").concat(popupClassName || "", " "),
|
|
221
|
-
suffixIcon: suffixIcon ? suffixIcon : renderSuffixIcon()
|
|
224
|
+
suffixIcon: suffixIcon ? suffixIcon : renderSuffixIcon(),
|
|
225
|
+
popupMatchSelectWidth: selectWidth
|
|
222
226
|
});
|
|
223
227
|
delete config.mask;
|
|
224
228
|
delete config.className;
|
|
@@ -251,14 +255,23 @@ var BhdSelect = function(props) {
|
|
|
251
255
|
initHeight: initHeight
|
|
252
256
|
}));
|
|
253
257
|
},
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
258
|
+
onMouseEnter: function(e) {
|
|
259
|
+
var top = bhdSelectRef.current.getBoundingClientRect().top;
|
|
260
|
+
var y = e.clientY;
|
|
261
|
+
if (top || y) {
|
|
262
|
+
if (top) {
|
|
263
|
+
setclientY(top);
|
|
264
|
+
} else {
|
|
265
|
+
setclientY(y);
|
|
266
|
+
}
|
|
267
|
+
}
|
|
268
|
+
//表格中使用下拉列表，定义下拉列表宽度
|
|
269
|
+
if (!props.popupMatchSelectWidth && useType === "table") {
|
|
270
|
+
setSelectWidth(bhdSelectRef.current.parentNode.getBoundingClientRect().width - 10);
|
|
257
271
|
}
|
|
258
|
-
props.
|
|
272
|
+
props.onMouseEnter && props.onMouseEnter(e);
|
|
259
273
|
},
|
|
260
|
-
children:
|
|
261
|
-
filterChildren
|
|
274
|
+
children: filterChildren
|
|
262
275
|
}))
|
|
263
276
|
});
|
|
264
277
|
};
|