Skip to content

Commit

Permalink
fix(table): 修复不能单独展示 filter 的问题
Browse files Browse the repository at this point in the history
  • Loading branch information
@chenshuai2144
chenshuai2144 committed Nov 1, 2023
1 parent d99a14d commit b77b5d4
Show file tree
Hide file tree
Showing 4 changed files with 284 additions and 19 deletions.
45 changes: 30 additions & 15 deletions packages/layout/src/components/WaterMark/demos/frontend.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
/** Title: 前置水印 */
import type { ProColumns } from '@ant-design/pro-components';
import { ProTable, TableDropdown, WaterMark } from '@ant-design/pro-components';
import {
LightFilter,
ProFormDatePicker,
ProTable,
TableDropdown,
WaterMark,
} from '@ant-design/pro-components';

const valueEnum = {
0: 'close',
Expand Down Expand Up @@ -103,18 +109,27 @@ const columns: ProColumns<TableListItem>[] = [
];

export default () => (
<WaterMark content="蚂蚁集团">
<ProTable<TableListItem>
columns={columns}
dataSource={tableListDataSource}
rowKey="key"
pagination={{
showQuickJumper: true,
}}
search={false}
dateFormatter="string"
headerTitle="表格标题"
toolBarRender={false}
/>
</WaterMark>
<>
<WaterMark content="蚂蚁集团">
<ProTable<TableListItem>
columns={columns}
dataSource={tableListDataSource}
rowKey="key"
pagination={{
showQuickJumper: true,
}}
toolbar={{
title: '标签',
multipleLine: true,
filter: (
<LightFilter>
<ProFormDatePicker name="startdate" label="响应日期" />
</LightFilter>
),
}}
search={false}
dateFormatter="string"
/>
</WaterMark>
</>
);
5 changes: 2 additions & 3 deletions packages/table/src/components/ListToolBar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,10 +114,9 @@ const ListToolBarTabBar: React.FC<{
tabs: ListToolBarProps['tabs'];
}> = ({ prefixCls, tabs, multipleLine, filtersNode }) => {
if (!multipleLine) return null;
if (!tabs) return null;
return (
<div className={`${prefixCls}-extra-line`}>
{tabs.items && tabs.items.length ? (
{tabs?.items && tabs?.items.length ? (
<Tabs
style={{
width: '100%',
Expand Down Expand Up @@ -246,7 +245,7 @@ const ListToolBar: React.FC<ListToolBarProps> = ({
}, [actions]);

const hasRight = useMemo(() => {
return (
return !!(
(hasTitle && searchNode) ||
(!multipleLine && filtersNode) ||
actionDom ||
Expand Down
178 changes: 177 additions & 1 deletion tests/layout/__snapshots__/demo.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2056,8 +2056,184 @@ exports[`layout demos > 📸 renders ./packages/layout/src/components/WaterMark/
>
<div
class="ant-pro-card-body"
style="padding: 0px;"
style="padding-block-start: 0;"
>
<div
class="ant-pro-table-list-toolbar"
>
<div
class="ant-pro-table-list-toolbar-container"
>
<div
class="ant-pro-table-list-toolbar-left"
>
<div
class="ant-pro-table-list-toolbar-title"
>
标签
</div>
</div>
<div
class="ant-pro-table-list-toolbar-right"
style="align-items: center;"
>
<div
class="ant-pro-table-list-toolbar-setting-items"
>
<div
class="ant-pro-table-list-toolbar-setting-item"
>
<span>
<span
aria-label="reload"
class="anticon anticon-reload"
role="img"
>
<svg
aria-hidden="true"
data-icon="reload"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M909.1 209.3l-56.4 44.1C775.8 155.1 656.2 92 521.9 92 290 92 102.3 279.5 102 511.5 101.7 743.7 289.8 932 521.9 932c181.3 0 335.8-115 394.6-276.1 1.5-4.2-.7-8.9-4.9-10.3l-56.7-19.5a8 8 0 00-10.1 4.8c-1.8 5-3.8 10-5.9 14.9-17.3 41-42.1 77.8-73.7 109.4A344.77 344.77 0 01655.9 829c-42.3 17.9-87.4 27-133.8 27-46.5 0-91.5-9.1-133.8-27A341.5 341.5 0 01279 755.2a342.16 342.16 0 01-73.7-109.4c-17.9-42.4-27-87.4-27-133.9s9.1-91.5 27-133.9c17.3-41 42.1-77.8 73.7-109.4 31.6-31.6 68.4-56.4 109.3-73.8 42.3-17.9 87.4-27 133.8-27 46.5 0 91.5 9.1 133.8 27a341.5 341.5 0 01109.3 73.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.6 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c-.1-6.6-7.8-10.3-13-6.2z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-pro-table-list-toolbar-setting-item"
>
<span>
<span
aria-label="column-height"
class="anticon anticon-column-height ant-dropdown-trigger"
role="img"
tabindex="-1"
>
<svg
aria-hidden="true"
data-icon="column-height"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M840 836H184c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h656c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm0-724H184c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h656c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zM610.8 378c6 0 9.4-7 5.7-11.7L515.7 238.7a7.14 7.14 0 00-11.3 0L403.6 366.3a7.23 7.23 0 005.7 11.7H476v268h-62.8c-6 0-9.4 7-5.7 11.7l100.8 127.5c2.9 3.7 8.5 3.7 11.3 0l100.8-127.5c3.7-4.7.4-11.7-5.7-11.7H548V378h62.8z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-pro-table-list-toolbar-setting-item"
>
<span
aria-label="setting"
class="anticon anticon-setting"
role="img"
tabindex="-1"
>
<svg
aria-hidden="true"
data-icon="setting"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
/>
</svg>
</span>
</div>
</div>
</div>
</div>
<div
class="ant-pro-table-list-toolbar-extra-line"
>
<div
class="ant-pro-table-list-toolbar-filter"
>
<form
autocomplete="off"
class="ant-form ant-form-horizontal ant-pro-form"
>
<input
style="display: none;"
type="text"
/>
<div
class="ant-pro-form-light-filter ant-pro-form-light-filter-middle"
>
<div
class="ant-pro-form-light-filter-container"
>
<div
class="ant-pro-form-light-filter-item"
>
<div
class="ant-form-item"
>
<div
class="ant-row ant-form-item-row"
>
<div
class="ant-col ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<div>
<span
class="ant-pro-core-field-label ant-pro-core-field-label-middle"
>
响应日期
<span
aria-label="down"
class="anticon anticon-down ant-pro-core-field-label-icon ant-pro-core-field-label-arrow"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div
class="ant-table-wrapper"
>
Expand Down
75 changes: 75 additions & 0 deletions tests/table/__snapshots__/demo.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12642,6 +12642,81 @@ exports[`table demos > 📸 renders ./packages/table/src/demos/ListToolBar/multi
</div>
</div>
</div>
<div
class="ant-pro-table-list-toolbar-extra-line"
>
<div
class="ant-pro-table-list-toolbar-filter"
>
<form
autocomplete="off"
class="ant-form ant-form-horizontal ant-pro-form"
>
<input
style="display: none;"
type="text"
/>
<div
class="ant-pro-form-light-filter ant-pro-form-light-filter-middle"
>
<div
class="ant-pro-form-light-filter-container"
>
<div
class="ant-pro-form-light-filter-item"
>
<div
class="ant-form-item"
>
<div
class="ant-row ant-form-item-row"
>
<div
class="ant-col ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<div>
<span
class="ant-pro-core-field-label ant-pro-core-field-label-middle"
>
响应日期
<span
aria-label="down"
class="anticon anticon-down ant-pro-core-field-label-icon ant-pro-core-field-label-arrow"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div
class="ant-table-wrapper"
Expand Down

0 comments on commit b77b5d4

Please sign in to comment.