💄 update Table filter menu UI

This commit is contained in:
afc163 2020-03-10 18:07:11 +08:00
parent cff8c08286
commit a68db2da20
2 changed files with 10 additions and 8 deletions

View File

@ -1,6 +1,7 @@
import * as React from 'react';
import classNames from 'classnames';
import FilterFilled from '@ant-design/icons/FilterFilled';
import Button from '../../../button';
import Menu from '../../../menu';
import Checkbox from '../../../checkbox';
import Radio from '../../../radio';
@ -172,6 +173,7 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
} else if (column.filterDropdown) {
dropdownContent = column.filterDropdown;
} else {
const selectedKeys = (getFilteredKeysSync() || []) as any;
dropdownContent = (
<>
<Menu
@ -181,7 +183,7 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
onClick={onMenuClick}
onSelect={onSelectKeys}
onDeselect={onSelectKeys}
selectedKeys={(getFilteredKeysSync() || []) as any}
selectedKeys={selectedKeys}
getPopupContainer={getPopupContainer}
openKeys={openKeys}
onOpenChange={onOpenChange}
@ -189,12 +191,12 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
{renderFilterItems(column.filters!, prefixCls, getFilteredKeysSync(), filterMultiple)}
</Menu>
<div className={`${prefixCls}-dropdown-btns`}>
<a className={`${prefixCls}-dropdown-link confirm`} onClick={onConfirm}>
{locale.filterConfirm}
</a>
<a className={`${prefixCls}-dropdown-link clear`} onClick={onReset}>
<Button type="link" size="small" disabled={selectedKeys.length === 0} onClick={onReset}>
{locale.filterReset}
</a>
</Button>
<Button type="primary" size="small" onClick={onConfirm}>
{locale.filterConfirm}
</Button>
</div>
</>
);

View File

@ -329,7 +329,7 @@
box-shadow: none;
}
min-width: 96px;
min-width: 120px;
background-color: @table-filter-dropdown-bg;
border-radius: @border-radius-base;
@ -352,7 +352,7 @@
&-btns {
display: flex;
justify-content: space-between;
padding: 7px 8px;
padding: 7px 8px 7px 3px;
overflow: hidden;
background-color: @table-filter-btns-bg;
border-top: @border-width-base @border-style-base @border-color-split;