test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-01 03:29:39 +08:00
Code Issues Actions 69 Packages Projects Releases Wiki Activity

chore: auto merge branches (#37173)

Browse Source 
chore: next merge feature
This commit is contained in:
github-actions[bot] 2022-08-22 04:14:58 +00:00 committed by GitHub
commit 19acac6f80
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 84 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/config-provider/__tests__/components.test.js
View File

@ -510,7 +510,7 @@ describe('ConfigProvider', () => {
],
},
],
filterDropdownVisible: true,
filterDropdownOpen: true,
onFilter: (value, record) => record.name.indexOf(value) === 0,
sorter: (a, b) => a.name.length - b.name.length,
},

11
components/table/Table.tsx
View File

@ -146,6 +146,17 @@ function InternalTable<RecordType extends object = any>(
'`index` parameter of `rowKey` function is deprecated. There is no guarantee that it will work as expected.',
);
[
['filterDropdownVisible', 'filterDropdownOpen'],
['onFilterDropdownVisibleChange', 'onFilterDropdownOpenChange'],
].forEach(([deprecatedName, newName]) => {
warning(
!(deprecatedName in props),
'Table',
`\`${deprecatedName}\` is deprecated which will be removed in next major version.Please use \`${newName}\` instead. `,
);
});
const baseColumns = React.useMemo(
() => columns || (convertChildrenToColumns(children) as ColumnsType<RecordType>),
[columns, children],

84
components/table/__tests__/Table.filter.test.js
View File

@ -242,32 +242,39 @@ describe('Table.filter', () => {
expect(renderSelectedKeys).toEqual([43]);
});
it('can be controlled by filterDropdownVisible', () => {
const { container, rerender } = render(
createTable({
columns: [
{
...column,
filterDropdownVisible: true,
},
],
}),
);
describe('filterDropdownOpen & filterDropdownVisible', () => {
function test(propName) {
it(`can be controlled by ${propName}`, () => {
const { container, rerender } = render(
createTable({
columns: [
{
...column,
filterDropdownOpen: true,
},
],
}),
);
expect(container.querySelector('.ant-dropdown-open')).toBeTruthy();
expect(container.querySelector('.ant-dropdown-open')).toBeTruthy();
rerender(
createTable({
columns: [
{
...column,
filterDropdownVisible: false,
},
],
}),
);
rerender(
createTable({
columns: [
{
...column,
filterDropdownOpen: false,
},
],
}),
);
expect(container.querySelector('.ant-dropdown-open')).toBeFalsy();
expect(container.querySelector('.ant-dropdown-open')).toBeFalsy();
});
}
test('filterDropdownOpen');
test('filterDropdownVisible');
});
it('if the filter is visible it should ignore the selectedKeys changes', () => {
@ -282,7 +289,7 @@ describe('Table.filter', () => {
columns: [
{
...myColumn,
filterDropdownVisible: true,
filterDropdownOpen: true,
},
],
};
@ -318,19 +325,22 @@ describe('Table.filter', () => {
});
it('fires change event when visible change', () => {
const handleChange = jest.fn();
const onFilterDropdownOpenChange = jest.fn();
const onFilterDropdownVisibleChange = jest.fn();
const { container } = render(
createTable({
columns: [
{
...column,
onFilterDropdownVisibleChange: handleChange,
onFilterDropdownOpenChange,
onFilterDropdownVisibleChange,
},
],
}),
);
fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
expect(handleChange).toHaveBeenCalledWith(true);
expect(onFilterDropdownOpenChange).toHaveBeenCalledWith(true);
expect(onFilterDropdownVisibleChange).toHaveBeenCalledWith(true);
});
it('can be controlled by filteredValue', () => {
@ -1179,7 +1189,7 @@ describe('Table.filter', () => {
columns: [
{
...column,
filterDropdownVisible: true,
filterDropdownOpen: true,
},
],
getPopupContainer,
@ -1197,7 +1207,7 @@ describe('Table.filter', () => {
columns: [
{
...column,
filterDropdownVisible: true,
filterDropdownOpen: true,
},
],
})}
@ -1442,7 +1452,7 @@ describe('Table.filter', () => {
columns: [
{
...column,
filterDropdownVisible: true,
filterDropdownOpen: true,
filterSearch: true,
filterMode: 'tree',
},
@ -1690,8 +1700,8 @@ describe('Table.filter', () => {
});
// https://github.com/ant-design/ant-design/issues/30454
it('should not trigger onFilterDropdownVisibleChange when call confirm({ closeDropdown: false })', () => {
const onFilterDropdownVisibleChange = jest.fn();
it('should not trigger onFilterDropdownOpenChange when call confirm({ closeDropdown: false })', () => {
const onFilterDropdownOpenChange = jest.fn();
const { container } = render(
createTable({
columns: [
@ -1714,21 +1724,21 @@ describe('Table.filter', () => {
</button>
</>
),
onFilterDropdownVisibleChange,
onFilterDropdownOpenChange,
},
],
}),
);
fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
expect(onFilterDropdownVisibleChange).toHaveBeenCalledTimes(1);
expect(onFilterDropdownOpenChange).toHaveBeenCalledTimes(1);
fireEvent.click(container.querySelector('#confirm-only'));
expect(onFilterDropdownVisibleChange).toHaveBeenCalledTimes(1);
expect(onFilterDropdownOpenChange).toHaveBeenCalledTimes(1);
fireEvent.click(container.querySelector('#confirm-and-close'));
expect(onFilterDropdownVisibleChange).toHaveBeenCalledTimes(2);
expect(onFilterDropdownVisibleChange).toHaveBeenLastCalledWith(false);
expect(onFilterDropdownOpenChange).toHaveBeenCalledTimes(2);
expect(onFilterDropdownOpenChange).toHaveBeenLastCalledWith(false);
});
// Warning: An update to Item ran an effect, but was not wrapped in act(...).

2
components/table/__tests__/Table.rowSelection.test.js
View File

@ -880,7 +880,7 @@ describe('Table.rowSelection', () => {
value: 'Lucy',
},
],
filterDropdownVisible: true,
filterDropdownOpen: true,
onFilter: (value, record) => record.name.indexOf(value) === 0,
},
];

2
components/table/demo/custom-filter-panel.md
View File

@ -132,7 +132,7 @@ const App: React.FC = () => {
.toString()
.toLowerCase()
.includes((value as string).toLowerCase()),
onFilterDropdownVisibleChange: visible => {
onFilterDropdownOpenChange: visible => {
if (visible) {
setTimeout(() => searchInput.current?.select(), 100);
}

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

@ -137,6 +137,8 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
} = props;
const {
filterDropdownOpen,
onFilterDropdownOpenChange,
filterDropdownVisible,
onFilterDropdownVisibleChange,
filterResetToDefaultFilteredValue,
@ -150,12 +152,16 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
);
const triggerVisible = (newVisible: boolean) => {
setVisible(newVisible);
onFilterDropdownOpenChange?.(newVisible);
onFilterDropdownVisibleChange?.(newVisible);
};
const mergedVisible =
typeof filterDropdownVisible === 'boolean' ? filterDropdownVisible : visible;
let mergedVisible: boolean;
if (typeof filterDropdownOpen === 'boolean') {
mergedVisible = filterDropdownOpen;
} else {
mergedVisible = typeof filterDropdownVisible === 'boolean' ? filterDropdownVisible : visible;
}
// ===================== Select Keys =====================
const propFilteredKeys = filterState?.filteredKeys;
const [getFilteredKeysSync, setFilteredKeysSync] = useSyncState(propFilteredKeys || []);

4
components/table/index.en-US.md
View File

@ -130,7 +130,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t
| defaultSortOrder | Default order of sorted values | `ascend` \| `descend` | - | |
| ellipsis | The ellipsis cell content, not working with sorter and filters for now.<br />tableLayout would be `fixed` when `ellipsis` is `true` or `{ showTitle?: boolean }` | boolean \| {showTitle?: boolean } | false | showTitle: 4.3.0 |
| filterDropdown | Customized filter overlay | ReactNode \| (props: [FilterDropdownProps](https://github.com/ant-design/ant-design/blob/ecc54dda839619e921c0ace530408871f0281c2a/components/table/interface.tsx#L79)) => ReactNode | - | |
| filterDropdownVisible | Whether `filterDropdown` is visible | boolean | - | |
| filterDropdownOpen | Whether `filterDropdown` is visible | boolean | - | 4.23.0 |
| filtered | Whether the `dataSource` is filtered | boolean | false | |
| filteredValue | Controlled filtered value, filter icon will highlight | string\[] | - | |
| filterIcon | Customized filter icon | ReactNode \| (filtered: boolean) => ReactNode | - | |
@ -151,7 +151,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t
| width | Width of this column ([width not working?](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)) | string \| number | - | |
| onCell | Set props on per cell | function(record, rowIndex) | - | |
| onFilter | Function that determines if the row is displayed when filtered | function(value, record) => boolean | - | |
| onFilterDropdownVisibleChange | Callback executed when `filterDropdownVisible` is changed | function(visible) {} | - | |
| onFilterDropdownOpenChange | Callback executed when `filterDropdownOpen` is changed | function(open) {} | - | 4.23.0 |
| onHeaderCell | Set props on per header cell | function(column) | - | |
### ColumnGroup

4
components/table/index.zh-CN.md
View File

@ -131,7 +131,7 @@ const columns = [
| defaultSortOrder | 默认排序顺序 | `ascend` \| `descend` | - | |
| ellipsis | 超过宽度将自动省略，暂不支持和排序筛选一起使用。<br />设置为 `true` 或 `{ showTitle?: boolean }` 时，表格布局将变成 `tableLayout="fixed"`。 | boolean \| { showTitle?: boolean } | false | showTitle: 4.3.0 |
| filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | ReactNode \| (props: [FilterDropdownProps](https://github.com/ant-design/ant-design/blob/ecc54dda839619e921c0ace530408871f0281c2a/components/table/interface.tsx#L79)) => ReactNode | - | |
| filterDropdownVisible | 用于控制自定义筛选菜单是否可见 | boolean | - | |
| filterDropdownOpen | 用于控制自定义筛选菜单是否可见 | boolean | - | 4.23.0 |
| filtered | 标识数据是否经过过滤，筛选图标会高亮 | boolean | false | |
| filteredValue | 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 | string\[] | - | |
| filterIcon | 自定义 filter 图标。 | ReactNode \| (filtered: boolean) => ReactNode | false | |
@ -152,7 +152,7 @@ const columns = [
| width | 列宽度（[指定了也不生效？](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)） | string \| number | - | |
| onCell | 设置单元格属性 | function(record, rowIndex) | - | |
| onFilter | 本地模式下，确定筛选的运行函数 | function | - | |
| onFilterDropdownVisibleChange | 自定义筛选菜单可见变化时调用 | function(visible) {} | - | |
| onFilterDropdownOpenChange | 自定义筛选菜单可见变化时调用 | function(open) {} | - | 4.23.0 |
| onHeaderCell | 设置头部单元格属性 | function(column) | - | |
### ColumnGroup

10
components/table/interface.tsx
View File

@ -114,8 +114,18 @@ export interface ColumnType<RecordType> extends Omit<RcColumnType<RecordType>, '
filterMode?: 'menu' | 'tree';
filterSearch?: FilterSearchType;
onFilter?: (value: string | number | boolean, record: RecordType) => boolean;
/**
* @deprecated `filterDropdownVisible` is deprecated which will be removed in next major version.
* Please use `filterDropdownOpen` instead.
*/
filterDropdownVisible?: boolean;
filterDropdownOpen?: boolean;
/**
* @deprecated `onFilterDropdownVisibleChange` is deprecated which will be removed in next major
* version. Please use `onFilterDropdownOpenChange` instead.
*/
onFilterDropdownVisibleChange?: (visible: boolean) => void;
onFilterDropdownOpenChange?: (open: boolean) => void;
filterResetToDefaultFilteredValue?: boolean;
// Responsive