Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: filter without close dropdown (#28652) #28688

Merged
merged 3 commits into from
Jan 5, 2021
Merged

feat: filter without close dropdown (#28652) #28688

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3f3e95a
feat: filter without close dropdown (#28652)
Jan 5, 2021
9c118fc
Change confirm parameter type
Jan 5, 2021
e6586d8
Update components/table/demo/custom-filter-panel.md
alekye Jan 5, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions components/table/demo/custom-filter-panel.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ title:

通过 `filterDropdown` 自定义的列筛选功能，并实现一个搜索列的示例。

给函数 `confirm` 添加 `boolean` 类型参数 `closeDropdown`，是否关闭筛选菜单，默认为 `true`。

## en-US

Implement a customized column search example via `filterDropdown`.
Expand Down Expand Up @@ -77,6 +79,20 @@ class App extends React.Component {
<Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 90 }}>
Reset
</Button>
<Button
type="link"
size="small"
onClick={() => {
confirm({ closeDropdown: false });
console.log('1234');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个忘记删了。

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

需要再提交一次吗

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

发新PR

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

发了

this.setState({
searchText: selectedKeys[0],
searchedColumn: dataIndex,
});
}}
>
Filter
</Button>
</Space>
</div>
),
Expand Down
20 changes: 16 additions & 4 deletions components/table/hooks/useFilter/FilterDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,14 @@ import Checkbox from '../../../checkbox';
import Radio from '../../../radio';
import Dropdown from '../../../dropdown';
import Empty from '../../../empty';
import { ColumnType, ColumnFilterItem, Key, TableLocale, GetPopupContainer } from '../../interface';
import {
ColumnType,
ColumnFilterItem,
Key,
TableLocale,
GetPopupContainer,
FilterConfirmProps,
} from '../../interface';
import FilterDropdownMenuWrapper from './FilterWrapper';
import { FilterState } from '.';
import useSyncState from '../../../_util/hooks/useSyncState';
Expand Down Expand Up @@ -160,8 +167,6 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {

// ======================= Submit ========================
const internalTriggerFilter = (keys: Key[] | undefined | null) => {
triggerVisible(false);

const mergedKeys = keys && keys.length ? keys : null;
if (mergedKeys === null && (!filterState || !filterState.filteredKeys)) {
return null;
Expand All @@ -179,14 +184,21 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
};

const onConfirm = () => {
triggerVisible(false);
internalTriggerFilter(getFilteredKeysSync());
};

const onReset = () => {
setFilteredKeysSync([]);
triggerVisible(false);
internalTriggerFilter([]);
};

const doFilter = (param: FilterConfirmProps = { closeDropdown: true }) => {
triggerVisible(!param.closeDropdown);
internalTriggerFilter(getFilteredKeysSync());
};

const onVisibleChange = (newVisible: boolean) => {
if (newVisible && propFilteredKeys !== undefined) {
// Sync filteredKeys on appear in controlled mode (propFilteredKeys !== undefiend)
Expand All @@ -213,7 +225,7 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
prefixCls: `${dropdownPrefixCls}-custom`,
setSelectedKeys: (selectedKeys: Key[]) => onSelectKeys({ selectedKeys }),
selectedKeys: getFilteredKeysSync(),
confirm: onConfirm,
confirm: doFilter,
clearFilters: onReset,
filters: column.filters,
visible: mergedVisible,
Expand Down
6 changes: 5 additions & 1 deletion components/table/interface.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,11 +67,15 @@ export type ColumnTitle<RecordType> =
| React.ReactNode
| ((props: ColumnTitleProps<RecordType>) => React.ReactNode);

export interface FilterConfirmProps {
closeDropdown: boolean;
}

export interface FilterDropdownProps {
prefixCls: string;
setSelectedKeys: (selectedKeys: React.Key[]) => void;
selectedKeys: React.Key[];
confirm: () => void;
confirm: (param: FilterConfirmProps) => void;
clearFilters?: () => void;
filters?: ColumnFilterItem[];
visible: boolean;
Expand Down