type: Table pagination.position support none as value

ant-design · Oct 18, 2023 · 82df0ca · 82df0ca
1 parent 7ceb1fb
commit 82df0ca
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 38 deletions.
diff --git a/components/table/__tests__/type.test.tsx b/components/table/__tests__/type.test.tsx
@@ -37,9 +37,7 @@ describe('Table.typescript', () => {
     const table = <Table<RecordType> dataSource={[{ key: 'Bamboo' }]} />;
     expect(table).toBeTruthy();
   });
-});
 
-describe('Table.typescript types', () => {
   it('ColumnProps', () => {
     interface User {
       name: string;
@@ -56,4 +54,9 @@ describe('Table.typescript types', () => {
 
     expect(columns).toBeTruthy();
   });
+
+  it('table pagination position support none', () => {
+    const table = <Table pagination={{ position: ['none', 'none'] }} />;
+    expect(table).toBeTruthy();
+  });
 });
diff --git a/components/table/demo/component-token.tsx b/components/table/demo/component-token.tsx
@@ -3,7 +3,7 @@ import { DownOutlined } from '@ant-design/icons';
 import type { RadioChangeEvent } from 'antd';
 import { Form, Radio, Space, Switch, Table, ConfigProvider } from 'antd';
 import type { SizeType } from 'antd/es/config-provider/SizeContext';
-import type { ColumnsType, TableProps } from 'antd/es/table';
+import type { ColumnsType, TableProps, TablePaginationConfig } from 'antd/es/table';
 import type { ExpandableConfig, TableRowSelection } from 'antd/es/table/interface';
 
 interface DataType {
@@ -14,14 +14,6 @@ interface DataType {
   description: string;
 }
 
-type TablePaginationPosition =
-  | 'topLeft'
-  | 'topCenter'
-  | 'topRight'
-  | 'bottomLeft'
-  | 'bottomCenter'
-  | 'bottomRight';
-
 const columns: ColumnsType<DataType> = [
   {
     title: 'Name',
@@ -76,6 +68,8 @@ for (let i = 1; i <= 10; i++) {
   });
 }
 
+type TablePaginationPosition = NonNullable<TablePaginationConfig['position']>[number];
+
 const defaultExpandable = { expandedRowRender: (record: DataType) => <p>{record.description}</p> };
 const defaultTitle = () => 'Here is title';
 const defaultFooter = () => 'Here is footer';
@@ -89,11 +83,11 @@ const App: React.FC = () => {
   );
   const [showTitle, setShowTitle] = useState(false);
   const [showHeader, setShowHeader] = useState(true);
-  const [showfooter, setShowFooter] = useState(true);
+  const [showFooter, setShowFooter] = useState(true);
   const [rowSelection, setRowSelection] = useState<TableRowSelection<DataType> | undefined>({});
   const [hasData, setHasData] = useState(true);
   const [tableLayout, setTableLayout] = useState();
-  const [top, setTop] = useState<TablePaginationPosition | 'none'>('none');
+  const [top, setTop] = useState<TablePaginationPosition>('none');
   const [bottom, setBottom] = useState<TablePaginationPosition>('bottomRight');
   const [ellipsis, setEllipsis] = useState(false);
   const [yScroll, setYScroll] = useState(false);
@@ -172,7 +166,7 @@ const App: React.FC = () => {
     expandable,
     title: showTitle ? defaultTitle : undefined,
     showHeader,
-    footer: showfooter ? defaultFooter : undefined,
+    footer: showFooter ? defaultFooter : undefined,
     rowSelection,
     scroll,
     tableLayout,
@@ -198,7 +192,7 @@ const App: React.FC = () => {
           <Switch checked={showHeader} onChange={handleHeaderChange} />
         </Form.Item>
         <Form.Item label="Footer">
-          <Switch checked={showfooter} onChange={handleFooterChange} />
+          <Switch checked={showFooter} onChange={handleFooterChange} />
         </Form.Item>
         <Form.Item label="Expandable">
           <Switch checked={!!expandable} onChange={handleExpandChange} />
@@ -300,7 +294,7 @@ const App: React.FC = () => {
       >
         <Table
           {...tableProps}
-          pagination={{ position: [top as TablePaginationPosition, bottom] }}
+          pagination={{ position: [top, bottom] }}
           columns={tableColumns}
           dataSource={hasData ? data : []}
           scroll={scroll}

diff --git a/components/table/demo/dynamic-settings.tsx b/components/table/demo/dynamic-settings.tsx
@@ -3,7 +3,7 @@ import { DownOutlined } from '@ant-design/icons';
 import type { RadioChangeEvent } from 'antd';
 import { Form, Radio, Space, Switch, Table } from 'antd';
 import type { SizeType } from 'antd/es/config-provider/SizeContext';
-import type { ColumnsType, TableProps } from 'antd/es/table';
+import type { ColumnsType, TableProps, TablePaginationConfig } from 'antd/es/table';
 import type { ExpandableConfig, TableRowSelection } from 'antd/es/table/interface';
 
 interface DataType {
@@ -14,13 +14,7 @@ interface DataType {
   description: string;
 }
 
-type TablePaginationPosition =
-  | 'topLeft'
-  | 'topCenter'
-  | 'topRight'
-  | 'bottomLeft'
-  | 'bottomCenter'
-  | 'bottomRight';
+type TablePaginationPosition = NonNullable<TablePaginationConfig['position']>[number];
 
 const columns: ColumnsType<DataType> = [
   {
@@ -89,11 +83,11 @@ const App: React.FC = () => {
   );
   const [showTitle, setShowTitle] = useState(false);
   const [showHeader, setShowHeader] = useState(true);
-  const [showfooter, setShowFooter] = useState(true);
+  const [showFooter, setShowFooter] = useState(true);
   const [rowSelection, setRowSelection] = useState<TableRowSelection<DataType> | undefined>({});
   const [hasData, setHasData] = useState(true);
   const [tableLayout, setTableLayout] = useState();
-  const [top, setTop] = useState<TablePaginationPosition | 'none'>('none');
+  const [top, setTop] = useState<TablePaginationPosition>('none');
   const [bottom, setBottom] = useState<TablePaginationPosition>('bottomRight');
   const [ellipsis, setEllipsis] = useState(false);
   const [yScroll, setYScroll] = useState(false);
@@ -172,7 +166,7 @@ const App: React.FC = () => {
     expandable,
     title: showTitle ? defaultTitle : undefined,
     showHeader,
-    footer: showfooter ? defaultFooter : undefined,
+    footer: showFooter ? defaultFooter : undefined,
     rowSelection,
     scroll,
     tableLayout,
@@ -198,7 +192,7 @@ const App: React.FC = () => {
           <Switch checked={showHeader} onChange={handleHeaderChange} />
         </Form.Item>
         <Form.Item label="Footer">
-          <Switch checked={showfooter} onChange={handleFooterChange} />
+          <Switch checked={showFooter} onChange={handleFooterChange} />
         </Form.Item>
         <Form.Item label="Expandable">
           <Switch checked={!!expandable} onChange={handleExpandChange} />
@@ -264,7 +258,7 @@ const App: React.FC = () => {
       </Form>
       <Table
         {...tableProps}
-        pagination={{ position: [top as TablePaginationPosition, bottom] }}
+        pagination={{ position: [top, bottom] }}
         columns={tableColumns}
         dataSource={hasData ? data : []}
         scroll={scroll}

diff --git a/components/table/demo/pagination.tsx b/components/table/demo/pagination.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Radio, Space, Table, Tag } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
+import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
 
 interface DataType {
   key: string;
@@ -10,13 +10,7 @@ interface DataType {
   tags: string[];
 }
 
-type TablePaginationPosition =
-  | 'topLeft'
-  | 'topCenter'
-  | 'topRight'
-  | 'bottomLeft'
-  | 'bottomCenter'
-  | 'bottomRight';
+type TablePaginationPosition = NonNullable<TablePaginationConfig['position']>[number];
 
 const topOptions = [
   { label: 'topLeft', value: 'topLeft' },

diff --git a/components/table/interface.ts b/components/table/interface.ts
@@ -231,7 +231,8 @@ type TablePaginationPosition =
   | 'topRight'
   | 'bottomLeft'
   | 'bottomCenter'
-  | 'bottomRight';
+  | 'bottomRight'
+  | 'none';
 
 export interface TablePaginationConfig extends PaginationProps {
   position?: TablePaginationPosition[];