Skip to content

Commit 78184fe

Browse files
author
liyuan-meng
committed
[Select]带确认按钮的下拉框逻辑补充
1 parent e764d78 commit 78184fe

8 files changed

Lines changed: 65 additions & 51 deletions

File tree

‎src/components/select/demos/customConfirmBtn.md‎

Lines changed: 37 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
---
2-
order: 13
3-
title: 自定义 confirmBtn 模板
4-
desc: 下拉多选
2+
order: 13 title: 自定义 confirmBtn 模板 desc: 下拉多选
53
---
64

75
```jsx
@@ -30,45 +28,56 @@ const dataList = [
3028

3129
export default function SelectDemo() {
3230
let selected = [];
33-
const [disabled, setDisabled] = useState(!selected.length);
34-
35-
const onOpen = () => {
36-
setDisabled(!selected.length);
37-
};
38-
39-
const handleChange = value => {
40-
setDisabled(!value.length);
41-
};
4231

4332
const handleOk = value => {
4433
selected = value;
4534
};
4635

4736
const confirmTemplate = ({ onOk }) => (
4837
<div className="cloud-select-operate-btn">
49-
<Button type="primary" size="small" disabled={disabled} className="btn" onClick={onOk} style={{ width: 92 }}>
38+
<Button type="primary" size="small" className="btn" onClick={onOk} style={{ width: 92 }}>
5039
自定义确认
5140
</Button>
5241
</div>
5342
);
5443

5544
return (
5645
<div style={{ display: 'flex', height: 150 }}>
57-
<Select
58-
placeholder="请选择..."
59-
valueKey="value"
60-
labelKey="label"
61-
dataSource={dataList}
62-
defaultValue={selected}
63-
onSelectOpen={onOpen}
64-
onChange={handleChange}
65-
onOk={handleOk}
66-
style={{ margin: '0 10px 10px 0', width: 200 }}
67-
multiple
68-
hasConfirmButton
69-
hasSelectAll
70-
confirmTemplate={confirmTemplate}
71-
/>
46+
<div>
47+
<h5>基础</h5>
48+
<Select
49+
placeholder="请选择"
50+
valueKey="value"
51+
labelKey="label"
52+
dataSource={dataList}
53+
defaultValue={selected}
54+
onOk={handleOk}
55+
style={{ margin: '0 10px 10px 0', width: 200 }}
56+
multiple
57+
hasConfirmButton
58+
hasSelectAll
59+
searchable
60+
supportLightText
61+
allowClear
62+
/>
63+
</div>
64+
<div>
65+
<h5>自定义确认按钮</h5>
66+
<Select
67+
placeholder="请选择"
68+
valueKey="value"
69+
labelKey="label"
70+
dataSource={dataList}
71+
defaultValue={selected}
72+
onOk={handleOk}
73+
style={{ margin: '0 10px 10px 0', width: 200 }}
74+
multiple
75+
hasConfirmButton
76+
hasSelectAll
77+
confirmTemplate={confirmTemplate}
78+
allowClear
79+
/>
80+
</div>
7281
</div>
7382
);
7483
}

‎src/components/select/demos/icon.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export default function SelectDemo() {
5858
optionRender={(item, index, searchProps) => {
5959
return (
6060
<Select.ImageText
61-
icon={<Icon type="config" style={{ fontSize: 12, marginRight: 5 }} />}
61+
icon={<Icon type="config" style={{ fontSize: 12 }} />}
6262
label={item.label}
6363
disabled={item.disabled}
6464
{...searchProps}
@@ -77,7 +77,7 @@ export default function SelectDemo() {
7777
optionRender={(item, index, searchProps) => {
7878
return (
7979
<Select.ImageText
80-
icon={<Icon type="config" style={{ fontSize: 12, marginRight: 5 }} />}
80+
icon={<Icon type="config" style={{ fontSize: 12 }} />}
8181
label={item.label}
8282
disabled={item.disabled}
8383
{...searchProps}

‎src/components/select/demos/imageText.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ export default function SelectDemo() {
7676
const [searchable, setSearchable] = useState(false);
7777

7878
const handleChange = (value, prevValue) => {
79+
console.log(value, prevValue)
7980
};
8081

8182
return (

‎src/components/select/index.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -357,7 +357,7 @@ class Select extends Component {
357357
}
358358
};
359359

360-
handleSelect = () => {
360+
handleSelect = ({ isClose = false } = {}) => {
361361
const { open } = this.state;
362362
const { onSelectOpen, onSelectClose, open: propOpen, multiple } = this.props;
363363

@@ -373,7 +373,7 @@ class Select extends Component {
373373
setTimeout(() => {
374374
this.optionsNode.current.classList.add('show');
375375
});
376-
} else if (!multiple && !this.state.isSearch || multiple && this.props.supportUnlimited) {
376+
} else if (!multiple && !this.state.isSearch || multiple && this.props.supportUnlimited || isClose) {
377377
this.optionsNode.current.classList.remove('show');
378378
setTimeout(() => {
379379
this.setState({ open: !open });
@@ -486,7 +486,7 @@ class Select extends Component {
486486
});
487487

488488
onOk(result, prevResult);
489-
handleSelect();
489+
handleSelect({ isClose: true });
490490
};
491491

492492
handleCancel = () => {
@@ -499,7 +499,7 @@ class Select extends Component {
499499

500500
onMultiOptionChange(prevValue);
501501
onCancel();
502-
handleSelect();
502+
handleSelect({ isClose: true });
503503
};
504504

505505
onSearchValueChange = (v) => {
@@ -700,7 +700,7 @@ Select.defaultProps = {
700700
hasSelectAll: false,
701701
hasConfirmButton: false,
702702
isSupportTitle: false,
703-
okBtnText: '确认',
703+
okBtnText: '确定',
704704
cancelBtnText: '取消',
705705
className: '',
706706
children: [],

‎src/components/select/index.less‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -596,14 +596,15 @@
596596
.@{select-prefix-cls}-operate-btn {
597597
display: flex;
598598
justify-content: flex-end;
599-
padding: @large-padding;
600-
border-top: 1px solid @sign-color;
599+
padding: 14px 12px 6px 12px;
600+
border-top: 1px solid #E8E8E8;
601+
margin-top: 8px;
601602

602603
.btn {
603604
width: @min-width;
604605

605606
&:not(:last-child) {
606-
margin-right: 10px;
607+
margin-right: 8px;
607608
}
608609
}
609610
}

‎src/components/select/index.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -123,8 +123,8 @@ group:
123123
<embed src="@components/select/demos/imageText.md" />
124124
<embed src="@components/select/demos/icon.md" />
125125

126-
[comment]: <> (### 带确认按钮)
127-
[comment]: <> (<embed src="@components/select/demos/customConfirmBtn.md" />)
126+
### 带确认按钮
127+
<embed src="@components/select/demos/customConfirmBtn.md" />
128128

129129
### 弹出位置
130130
<embed src="@components/select/demos/position.md" />

‎src/components/select/views/search/multi-comma-search.js‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React, { useEffect, useRef, useState } from 'react';
33
import { selector } from '../common';
44
import Input from '../../../input';
55

6-
export default function SingleSearch({
6+
export default function MultiCommaSearch({
77
selectedList,
88
dataSource,
99
optionRender,
@@ -17,6 +17,7 @@ export default function SingleSearch({
1717
scrollSelected,
1818
labelKey,
1919
valueKey,
20+
searchable,
2021
}) {
2122
const searchRef = useRef();
2223
const [isFocusSearchInput, setIsFocusSearchInput] = useState(false);
@@ -61,14 +62,16 @@ export default function SingleSearch({
6162
}, [selectedList]);
6263

6364
useEffect(() => {
64-
if (open) {
65-
setIsFocusSearchInput(true);
66-
searchRef.current.querySelector('input').focus();
67-
} else {
68-
setIsFocusSearchInput(false);
65+
if (searchable) {
66+
if (open) {
67+
setIsFocusSearchInput(true);
68+
searchRef.current.querySelector('input').focus();
69+
} else {
70+
setIsFocusSearchInput(false);
71+
}
72+
clearSearchValue();
6973
}
70-
clearSearchValue();
71-
}, [open]);
74+
}, [open, searchable]);
7275

7376
useEffect(() => {
7477
setSearchStatus(isFocusSearchInput);

‎src/components/select/views/select/multi-select.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,12 @@ const ConfirmBtn = ({
2626
if (confirmTemplate) return confirmTemplate({ onOk, onCancel });
2727
return (
2828
<div className={`${selector}-operate-btn`}>
29-
<Button type="primary" size="small" className="btn" onClick={onOk}>
30-
{okBtnText}
31-
</Button>
3229
<Button size="small" className="btn" onClick={onCancel}>
3330
{cancelBtnText}
3431
</Button>
32+
<Button type="primary" size="small" className="btn" onClick={onOk}>
33+
{okBtnText}
34+
</Button>
3535
</div>
3636
);
3737
};

0 commit comments

Comments
 (0)