mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

refactor(Table): move filter updating to getDerivedStateFromProps

Browse Source
This commit is contained in:
kristof0425 2019-08-28 11:39:38 +02:00 committed by 偏右
parent 4cc5fcdb24
commit 2228e91b01
1 changed files with 51 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
components/table/Table.tsx
View File

@ -106,6 +106,39 @@ const createComponents = (components: TableComponents = {}, prevComponents?: Tab
};
};
function getFilteredValueColumns<T>(state: TableState<T>, columns?: ColumnProps<T>[]) {
return flatFilter(
columns || (state || {}).columns || [],
(column: ColumnProps<T>) => typeof column.filteredValue !== 'undefined',
);
}
function getFiltersFromColumns<T>(
state: TableState<T> = {} as TableState<T>,
columns?: ColumnProps<T>[],
) {
const filters: any = {};
getFilteredValueColumns<T>(state, columns).forEach((col: ColumnProps<T>) => {
const colKey = getColumnKey(col) as string;
filters[colKey] = col.filteredValue;
});
return filters;
}
function isFiltersChanged<T>(state: TableState<T>, filters: TableStateFilters): boolean {
let filtersChanged = false;
if (Object.keys(filters).length !== Object.keys(state.filters).length) {
filtersChanged = true;
} else {
Object.keys(filters).forEach(columnKey => {
if (filters[columnKey] !== state.filters[columnKey]) {
filtersChanged = true;
}
});
}
return filtersChanged;
}
class Table<T> extends React.Component<TableProps<T>, TableState<T>> {
static Column = Column;
@ -186,6 +219,22 @@ class Table<T> extends React.Component<TableProps<T>, TableState<T>> {
// https://github.com/ant-design/ant-design/issues/10133
nextProps.setCheckboxPropsCache({});
// Update filters
const filteredValueColumns = getFilteredValueColumns(nextState, nextState.columns);
if (filteredValueColumns.length > 0) {
const filtersFromColumns = getFiltersFromColumns(nextState, nextState.columns);
const newFilters = { ...nextState.filters };
Object.keys(filtersFromColumns).forEach(key => {
newFilters[key] = filtersFromColumns[key];
});
if (isFiltersChanged(nextState, newFilters)) {
nextState = {
...nextState,
filters: newFilters,
};
}
}
if (nextProps.components !== prevProps.components) {
const components = createComponents(nextProps.components, prevProps.components);
@ -228,7 +277,7 @@ class Table<T> extends React.Component<TableProps<T>, TableState<T>> {
this.state = {
...this.getDefaultSortOrder(columns),
// 减少状态
filters: this.getFiltersFromColumns(),
filters: getFiltersFromColumns<T>(),
pagination: this.getDefaultPagination(props),
pivot: undefined,
prevProps: props,
@ -237,10 +286,6 @@ class Table<T> extends React.Component<TableProps<T>, TableState<T>> {
};
}
componentDidMount(): void {
this.updateFilters();
}
componentDidUpdate() {
if (this.getSortOrderColumns(this.state.columns).length > 0) {
const sortState = this.getSortStateFromColumns(this.state.columns);
@ -251,8 +296,6 @@ class Table<T> extends React.Component<TableProps<T>, TableState<T>> {
this.setState(sortState);
}
}
this.updateFilters();
}
getCheckboxPropsByItem = (item: T, index: number) => {
@ -316,22 +359,6 @@ class Table<T> extends React.Component<TableProps<T>, TableState<T>> {
);
}
getFilteredValueColumns(columns?: ColumnProps<T>[]) {
return flatFilter(
columns || (this.state || {}).columns || [],
(column: ColumnProps<T>) => typeof column.filteredValue !== 'undefined',
);
}
getFiltersFromColumns(columns?: ColumnProps<T>[]) {
const filters: any = {};
this.getFilteredValueColumns(columns).forEach((col: ColumnProps<T>) => {
const colKey = getColumnKey(col) as string;
filters[colKey] = col.filteredValue;
});
return filters;
}
getDefaultSortOrder(columns?: ColumnProps<T>[]) {
const definedSortState = this.getSortStateFromColumns(columns);
@ -518,20 +545,6 @@ class Table<T> extends React.Component<TableProps<T>, TableState<T>> {
}
}
updateFilters = (): void => {
const filteredValueColumns = this.getFilteredValueColumns(this.state.columns);
if (filteredValueColumns.length > 0) {
const filtersFromColumns = this.getFiltersFromColumns(this.state.columns);
const newFilters = { ...this.state.filters };
Object.keys(filtersFromColumns).forEach(key => {
newFilters[key] = filtersFromColumns[key];
});
if (this.isFiltersChanged(newFilters)) {
this.setState({ filters: newFilters });
}
}
};
generatePopupContainerFunc = (getPopupContainer: TableProps<T>['getPopupContainer']) => {
const { scroll } = this.props;
const table = this.rcTable.current;
@ -583,7 +596,7 @@ class Table<T> extends React.Component<TableProps<T>, TableState<T>> {
};
const filtersToSetState = { ...filters };
// Remove filters which is controlled
this.getFilteredValueColumns().forEach((col: ColumnProps<T>) => {
getFilteredValueColumns<T>(this.state).forEach((col: ColumnProps<T>) => {
const columnKey = getColumnKey(col);
if (columnKey) {
delete filtersToSetState[columnKey];
@ -893,20 +906,6 @@ class Table<T> extends React.Component<TableProps<T>, TableState<T>> {
return (props || this.props).pagination !== false;
}
isFiltersChanged(filters: TableStateFilters) {
let filtersChanged = false;
if (Object.keys(filters).length !== Object.keys(this.state.filters).length) {
filtersChanged = true;
} else {
Object.keys(filters).forEach(columnKey => {
if (filters[columnKey] !== this.state.filters[columnKey]) {
filtersChanged = true;
}
});
}
return filtersChanged;
}
isSortColumn(column: ColumnProps<T>) {
const { sortColumn } = this.state;
if (!column || !sortColumn) {