Skip to content

Commit

Permalink
feat: select组件增加customAction
Browse files Browse the repository at this point in the history
  • Loading branch information
onshinpei committed Jan 6, 2022
1 parent 544b75a commit 43c114a
Showing 3 changed files with 81 additions and 14 deletions.
38 changes: 38 additions & 0 deletions site/docs/zh-CN/select.md
Original file line number Diff line number Diff line change
@@ -38,6 +38,42 @@
```
:::

## 自定义左下角操作栏

:::demo 自定义左下角操作栏
```js
state = {
customOptions: [],
count: 999,
}
onAdd = () => {
const {customOptions, count} = this.state
this.setState({
customOptions: [...customOptions, count+1],
count: count + 1
})
}
render() {
return (
<div className="demo-select">
<Select style={{width: 300}} customAction={<div><Button onClick={this.onAdd}>新增</Button></div>}>
<Select.Option value={0}>{'选项0'}</Select.Option>
<Select.Option value={1}>{'选项1'}</Select.Option>
<Select.Option value={2}>{'选项2'}</Select.Option>
<Select.Option value={3}>{'选项3'}</Select.Option>
{
this.state.customOptions.map((i) => {
return <Select.Option key={i} value={i}>选项{i}</Select.Option>
})
}
</Select>
</div>
)
}
```

:::

## 限制多选个数

:::demo 最基本的下拉筛选使用方式
@@ -56,6 +92,7 @@
)
}
```

:::

## 添加额外的内容
@@ -690,6 +727,7 @@ render(){
| visible | 下拉选择框显示隐藏 | Boolean | - |
| esc | 是否ESC关闭弹出框 | Boolean | true |
| required | 限定多选模式下至少需要选择一项选项 | Boolean | false |
| customAction | 左下角自定义操作 | ReactNode \| String | - |

> 注意,如果发现下拉菜单跟随页面滚动,或者需要在其他弹层中触发 Select,请尝试使用 getPopupContainer={triggerNode => triggerNode.parentNode} 将下拉弹层渲染节点固定在触发器的父元素中。
53 changes: 39 additions & 14 deletions source/components/Select/Select.tsx
Original file line number Diff line number Diff line change
@@ -70,6 +70,7 @@ interface SelectProps {
esc?: boolean;
required?: boolean;
filterInactiveOption?: boolean;
customAction?: React.ReactNode | string;
}

type SelectValue = { key: string; label: string; title: string };
@@ -729,6 +730,7 @@ class Select extends React.Component<SelectProps, SelectState> {
placeholder = Locale.placeholder,
searchPlaceholder = Locale.searchPlaceholder,
selectAllText = Locale.selectAllText,
customAction,
} = this.props;
const { searchValue, selectValue } = this.state;
const dropdownCls = `${prefixCls}-dropdown`;
@@ -837,6 +839,19 @@ class Select extends React.Component<SelectProps, SelectState> {
>
{item => item}
</List>
{/* 渲染自定义 action */}
{mode === 'single' && customAction && (
<div className={`${dropdownCls}-footer`}>
<div
className={`${dropdownCls}-footer-custom`}
onClick={() => {
this.changeVisibleState(false);
}}
>
{customAction}
</div>
</div>
)}
{
//多选的点击取消、确定按钮组
mode === 'multiple' && (
@@ -847,20 +862,30 @@ class Select extends React.Component<SelectProps, SelectState> {
</div>
)}
<div className={`${dropdownCls}-footer`}>
<Button
className={`${dropdownCls}-footer-btn`}
onClick={this.handleCancelSelect}
>
{Locale.cancelText}
</Button>
<Button
className={`${dropdownCls}-footer-btn`}
onClick={this.handleConfirmSelect}
disabled={multipleConfirmDisabled}
type="primary"
>
{Locale.confirmText}
</Button>
{customAction && (
<div
className={`${dropdownCls}-footer-custom`}
onClick={this.handleCancelSelect}
>
{customAction}
</div>
)}
<div className={`${dropdownCls}-footer-default`}>
<Button
className={`${dropdownCls}-footer-btn`}
onClick={this.handleCancelSelect}
>
{Locale.cancelText}
</Button>
<Button
className={`${dropdownCls}-footer-btn`}
onClick={this.handleConfirmSelect}
disabled={multipleConfirmDisabled}
type="primary"
>
{Locale.confirmText}
</Button>
</div>
</div>
</div>
)
4 changes: 4 additions & 0 deletions source/components/Select/style/index.less
Original file line number Diff line number Diff line change
@@ -351,6 +351,10 @@
padding: 8px;
border-top: @border-width-base @border-style-base @border-color-split;
text-align: right;
display: flex;
&-default {
flex: 1
}
&-btn {
width: 80px;
&:not(:last-child) {

0 comments on commit 43c114a

Please sign in to comment.