bhd-components 0.6.4 → 0.6.5
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/dist/{a57a24b2.esm.es5.production.js → 8bda9e2e.esm.es5.production.js} +1 -1
- package/dist/{9674e68c.esm.es5.development.js → d4259367.esm.es5.development.js} +1 -1
- package/dist/index.esm.es5.development.css +24 -21
- package/dist/index.esm.es5.development.js +31 -17
- package/dist/index.esm.es5.production.css +1 -1
- package/dist/index.esm.es5.production.js +1 -1
- package/es2017/bhdSelect/index.d.ts +3 -0
- package/es2017/bhdSelect/index.js +30 -14
- package/es2017/bhdSelect/index.module.less +4 -5
- package/esm/bhdSelect/index.d.ts +3 -0
- package/esm/bhdSelect/index.js +30 -14
- package/esm/bhdSelect/index.module.less +4 -5
- package/package.json +1 -1
|
@@ -26,7 +26,7 @@ const BhdSelect = (props)=>{
|
|
|
26
26
|
const [optionHei, setOptionHei] = useState(0); //option的宽度
|
|
27
27
|
const [filterValue, setFilterValue] = useState(""); //下拉搜索的内容
|
|
28
28
|
const [filterChildren, setfilterChildren] = useState([]);
|
|
29
|
-
|
|
29
|
+
const [selectWidth, setSelectWidth] = useState(0); //下拉框的宽度
|
|
30
30
|
const renderSuffixIcon = ()=>{
|
|
31
31
|
switch(arrowType){
|
|
32
32
|
case "table":
|
|
@@ -197,11 +197,11 @@ const BhdSelect = (props)=>{
|
|
|
197
197
|
};
|
|
198
198
|
useEffect(()=>{
|
|
199
199
|
// console.log(34343434,props);
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
//
|
|
204
|
-
|
|
200
|
+
if (props.popupMatchSelectWidth) {
|
|
201
|
+
setSelectWidth(props.popupMatchSelectWidth);
|
|
202
|
+
} else {
|
|
203
|
+
// console.log(bhdSelectRef.current.getBoundingClientRect(),555555555);
|
|
204
|
+
}
|
|
205
205
|
filterOption();
|
|
206
206
|
window.addEventListener("resize", initHeight);
|
|
207
207
|
return ()=>{
|
|
@@ -217,7 +217,11 @@ const BhdSelect = (props)=>{
|
|
|
217
217
|
let config = _object_spread_props(_object_spread({}, props), {
|
|
218
218
|
listHeight: optionHei,
|
|
219
219
|
popupClassName: `${styles.bhdSelect_option} ${popupClassName || ""} `,
|
|
220
|
-
suffixIcon: suffixIcon ? suffixIcon : renderSuffixIcon()
|
|
220
|
+
suffixIcon: suffixIcon ? suffixIcon : renderSuffixIcon(),
|
|
221
|
+
popupMatchSelectWidth: selectWidth,
|
|
222
|
+
dropdownStyle: _object_spread_props(_object_spread({}, props.dropdownStyle), {
|
|
223
|
+
width: selectWidth
|
|
224
|
+
})
|
|
221
225
|
});
|
|
222
226
|
delete config.mask;
|
|
223
227
|
delete config.className;
|
|
@@ -261,13 +265,25 @@ const BhdSelect = (props)=>{
|
|
|
261
265
|
}
|
|
262
266
|
}
|
|
263
267
|
//表格中使用下拉列表，定义下拉列表宽度
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
268
|
+
//表格中使用下拉列表，定义下拉列表宽度
|
|
269
|
+
if (props.dropdownStyle != undefined && props.dropdownStyle.width != undefined) {
|
|
270
|
+
setSelectWidth(props.dropdownStyle.width);
|
|
271
|
+
} else if (useType === "table") {
|
|
272
|
+
try {
|
|
273
|
+
let width = bhdSelectRef.current.parentNode.getBoundingClientRect().width + 14;
|
|
274
|
+
let minWidth = props.popupMatchSelectWidth;
|
|
275
|
+
//设置了最小宽度
|
|
276
|
+
if (minWidth != undefined && minWidth >= width) {
|
|
277
|
+
setSelectWidth(minWidth);
|
|
278
|
+
} else if (minWidth != undefined && minWidth < width) {
|
|
279
|
+
setSelectWidth(width);
|
|
280
|
+
} else if (minWidth == undefined && width < 60) {
|
|
281
|
+
setSelectWidth(60);
|
|
282
|
+
} else {
|
|
283
|
+
setSelectWidth(width);
|
|
284
|
+
}
|
|
285
|
+
} catch (error) {}
|
|
286
|
+
}
|
|
271
287
|
props.onMouseEnter && props.onMouseEnter(e);
|
|
272
288
|
},
|
|
273
289
|
children: filterChildren
|
|
@@ -105,14 +105,13 @@
|
|
|
105
105
|
width: 14px;
|
|
106
106
|
.bhd-btn {
|
|
107
107
|
border: none;
|
|
108
|
-
|
|
109
|
-
height: 10px;
|
|
108
|
+
height: 16px;
|
|
110
109
|
line-height: 16px;
|
|
111
110
|
width: 14px;
|
|
112
111
|
}
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
112
|
+
.bhd-btn-default{
|
|
113
|
+
box-shadow: none !important;
|
|
114
|
+
}
|
|
116
115
|
}
|
|
117
116
|
|
|
118
117
|
}
|
package/esm/bhdSelect/index.d.ts
CHANGED
package/esm/bhdSelect/index.js
CHANGED
|
@@ -29,7 +29,7 @@ var BhdSelect = function(props) {
|
|
|
29
29
|
var _useState1 = _sliced_to_array(useState(0), 2), optionHei = _useState1[0], setOptionHei = _useState1[1]; //option的宽度
|
|
30
30
|
var _useState2 = _sliced_to_array(useState(""), 2), filterValue = _useState2[0], setFilterValue = _useState2[1]; //下拉搜索的内容
|
|
31
31
|
var _useState3 = _sliced_to_array(useState([]), 2), filterChildren = _useState3[0], setfilterChildren = _useState3[1];
|
|
32
|
-
|
|
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":
|
|
@@ -201,11 +201,11 @@ var BhdSelect = function(props) {
|
|
|
201
201
|
};
|
|
202
202
|
useEffect(function() {
|
|
203
203
|
// console.log(34343434,props);
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
//
|
|
208
|
-
|
|
204
|
+
if (props.popupMatchSelectWidth) {
|
|
205
|
+
setSelectWidth(props.popupMatchSelectWidth);
|
|
206
|
+
} else {
|
|
207
|
+
// console.log(bhdSelectRef.current.getBoundingClientRect(),555555555);
|
|
208
|
+
}
|
|
209
209
|
filterOption();
|
|
210
210
|
window.addEventListener("resize", initHeight);
|
|
211
211
|
return function() {
|
|
@@ -221,7 +221,11 @@ var BhdSelect = function(props) {
|
|
|
221
221
|
var config = _object_spread_props(_object_spread({}, props), {
|
|
222
222
|
listHeight: optionHei,
|
|
223
223
|
popupClassName: "".concat(styles.bhdSelect_option, " ").concat(popupClassName || "", " "),
|
|
224
|
-
suffixIcon: suffixIcon ? suffixIcon : renderSuffixIcon()
|
|
224
|
+
suffixIcon: suffixIcon ? suffixIcon : renderSuffixIcon(),
|
|
225
|
+
popupMatchSelectWidth: selectWidth,
|
|
226
|
+
dropdownStyle: _object_spread_props(_object_spread({}, props.dropdownStyle), {
|
|
227
|
+
width: selectWidth
|
|
228
|
+
})
|
|
225
229
|
});
|
|
226
230
|
delete config.mask;
|
|
227
231
|
delete config.className;
|
|
@@ -265,13 +269,25 @@ var BhdSelect = function(props) {
|
|
|
265
269
|
}
|
|
266
270
|
}
|
|
267
271
|
//表格中使用下拉列表，定义下拉列表宽度
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
272
|
+
//表格中使用下拉列表，定义下拉列表宽度
|
|
273
|
+
if (props.dropdownStyle != undefined && props.dropdownStyle.width != undefined) {
|
|
274
|
+
setSelectWidth(props.dropdownStyle.width);
|
|
275
|
+
} else if (useType === "table") {
|
|
276
|
+
try {
|
|
277
|
+
var width = bhdSelectRef.current.parentNode.getBoundingClientRect().width + 14;
|
|
278
|
+
var minWidth = props.popupMatchSelectWidth;
|
|
279
|
+
//设置了最小宽度
|
|
280
|
+
if (minWidth != undefined && minWidth >= width) {
|
|
281
|
+
setSelectWidth(minWidth);
|
|
282
|
+
} else if (minWidth != undefined && minWidth < width) {
|
|
283
|
+
setSelectWidth(width);
|
|
284
|
+
} else if (minWidth == undefined && width < 60) {
|
|
285
|
+
setSelectWidth(60);
|
|
286
|
+
} else {
|
|
287
|
+
setSelectWidth(width);
|
|
288
|
+
}
|
|
289
|
+
} catch (error) {}
|
|
290
|
+
}
|
|
275
291
|
props.onMouseEnter && props.onMouseEnter(e);
|
|
276
292
|
},
|
|
277
293
|
children: filterChildren
|
|
@@ -105,14 +105,13 @@
|
|
|
105
105
|
width: 14px;
|
|
106
106
|
.bhd-btn {
|
|
107
107
|
border: none;
|
|
108
|
-
|
|
109
|
-
height: 10px;
|
|
108
|
+
height: 16px;
|
|
110
109
|
line-height: 16px;
|
|
111
110
|
width: 14px;
|
|
112
111
|
}
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
112
|
+
.bhd-btn-default{
|
|
113
|
+
box-shadow: none !important;
|
|
114
|
+
}
|
|
116
115
|
}
|
|
117
116
|
|
|
118
117
|
}
|