mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-06 16:06:28 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

💄 update Table filter menu UI

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/table/hooks/useFilter/FilterDropdown.tsx
View File

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

4
components/table/style/index.less
View File

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