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

fix: 4.0 table filters value may be previous #19873

Merged
merged 8 commits into from
Nov 26, 2019
Merged

fix: 4.0 table filters value may be previous #19873

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a438a80
fix: 4.0 table filters value may be previous
Nov 21, 2019
b7cd11e
create a sync variable to resolve async 'setFilteredKeys'
Nov 22, 2019
74b944b
useSyncState to fix 'setFilteredKeys' async
Nov 22, 2019
a180dd8
new line
Nov 22, 2019
3e87c2f
new line
Nov 22, 2019
ceafbd7
add ,
Nov 22, 2019
9fa0b81
removed 'setFilteredKeys' and re-render useSyncState
Nov 25, 2019
20a6540
menu must be a array
Nov 25, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
14 changes: 14 additions & 0 deletions components/table/__tests__/Table.filter.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,15 @@ describe('Table.filter', () => {
<span onClick={() => clearFilters()} id="reset">
Reset
</span>
<span
onClick={() => {
setSelectedKeys([43]);
confirm();
}}
id="simulateOnSelect"
>
SimulateOnSelect
</span>
</div>
);

Expand Down Expand Up @@ -170,6 +179,11 @@ describe('Table.filter', () => {
.first()
.props().visible,
).toBeFalsy();

// Simulate onSelect, setSelectedKeys & confirm
wrapper.find('span.ant-dropdown-trigger').simulate('click', nativeEvent);
wrapper.find('#simulateOnSelect').simulate('click');
expect(getFilterMenu().props().filterState.filteredKeys).toEqual([43]);
});

it('can be controlled by filterDropdownVisible', () => {
Expand Down
6 changes: 6 additions & 0 deletions components/table/__tests__/__snapshots__/Table.filter.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,12 @@ exports[`Table.filter override custom filter correctly 1`] = `
>
Reset
</span>
<span
id="simulateOnSelect"
onClick={[Function]}
>
SimulateOnSelect
</span>
</div>
`;

Expand Down
15 changes: 9 additions & 6 deletions components/table/hooks/useFilter/FilterDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,20 +92,23 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
filterState && filterState.filteredKeys,
);
const [filteredKeys, setFilteredKeys] = React.useState(propFilteredKeys || []);
// Use it to fix 'setFilteredKeys' is async
const filteredKeysRef = React.useRef(filteredKeys);

const onSelectKeys = ({ selectedKeys }: { selectedKeys: Key[] }) => {
setFilteredKeys(selectedKeys);
filteredKeysRef.current = selectedKeys;
};

React.useEffect(() => {
// Sync internal filtered keys when props key changed
const newFilteredKeys = filterState && filterState.filteredKeys;
if (!shallowEqual(propFilteredKeys, newFilteredKeys)) {
setPropFilteredKeys(newFilteredKeys);
setFilteredKeys(newFilteredKeys || []);
onSelectKeys({selectedKeys: newFilteredKeys || []});
}
}, [filterState]);

const onSelectKeys = ({ selectedKeys }: { selectedKeys: Key[] }) => {
setFilteredKeys(selectedKeys);
};

// ====================== Open Keys ======================
const [openKeys, setOpenKeys] = React.useState<string[]>([]);
const openRef = React.useRef<number>();
Expand Down Expand Up @@ -140,7 +143,7 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
};

const onConfirm = () => {
internalTriggerFilter(filteredKeys);
internalTriggerFilter(filteredKeysRef.current);
};

const onReset = () => {
Expand Down