#feature: Custom ConfigProvider, allow passing default props

Author: Kenneth

src/molecules/Pagination/Pagination.tsx

@@ -1,6 +1,11 @@
+import { useContext } from 'react';
+import { ConfigProvider } from '../../organisms';
 import { PaginationStyled } from './styles';
 import { RdPaginationComponent } from './types';
 
 export const Pagination: RdPaginationComponent = props => {
-    return <PaginationStyled {...props} />;
+    const { pagination: defaultPaginationProps } = useContext(ConfigProvider.ConfigContext);
+    const { pageSizeOptions } = defaultPaginationProps || {};
+
+    return <PaginationStyled pageSizeOptions={pageSizeOptions} {...props} />;
 };

src/molecules/Table/Table.tsx

@@ -5,11 +5,23 @@ import { AnyObject } from 'antd/es/_util/type';
 import { RowSortable } from './sortable';
 import { TableStyledFunc } from './styles';
 import { RdTableProps } from './types';
+import { useContext, useMemo } from 'react';
+import { ConfigProvider } from '../../organisms';
 
 export const Table = <RecordType extends AnyObject = AnyObject>(
     props: RdTableProps<RecordType>
 ) => {
-    const { allowSort = false, onChangeSort, ...antdProps } = props;
+    const { allowSort = false, pagination, onChangeSort, ...antdProps } = props;
+    const { table: defaultTableProps } = useContext(ConfigProvider.ConfigContext);
+    const { pagination: defaultPagination } = defaultTableProps || {};
+
+    const paginationWithDefault = useMemo(() => {
+        return {
+            ...defaultPagination,
+            ...pagination,
+        };
+    }, [pagination, defaultPagination]);
+
     const TableStyled = TableStyledFunc<RecordType>();
 
     if (allowSort && props.rowKey) {
@@ -32,11 +44,15 @@ export const Table = <RecordType extends AnyObject = AnyObject>(
                     items={dataSource.map(i => i[props.rowKey as string])}
                     strategy={verticalListSortingStrategy}
                 >
-                    <TableStyled components={{ body: { row: RowSortable } }} {...antdProps} />
+                    <TableStyled
+                        components={{ body: { row: RowSortable } }}
+                        pagination={paginationWithDefault}
+                        {...antdProps}
+                    />
                 </SortableContext>
             </DndContext>
         );
     }
 
-    return <TableStyled {...antdProps} />;
+    return <TableStyled pagination={paginationWithDefault} {...antdProps} />;
 };

src/organisms/ConfigProvider/ConfigProvider.tsx

@@ -1,13 +1,23 @@
 import { ConfigProvider as ConfigProviderAntd } from 'antd';
-import { RdConfigProviderCompoundedComponent, RdConfigProviderProps } from './types';
+import { ConfigContext } from './context';
+import { RdConfigConsumerProps } from './context/types';
+import { RdConfigProviderCompoundedComponent, RdConfigProviderInternalComponent } from './types';
 
-export const ConfigProviderInternal = ({ ...antdProps }: RdConfigProviderProps) => {
-    return <ConfigProviderAntd {...antdProps} />;
+export const ConfigProviderInternal: RdConfigProviderInternalComponent = props => {
+    return (
+        <ConfigContext.Provider
+            value={{
+                ...(props as RdConfigConsumerProps),
+            }}
+        >
+            <ConfigProviderAntd {...props} />
+        </ConfigContext.Provider>
+    );
 };
 
 export const ConfigProvider = ConfigProviderInternal as RdConfigProviderCompoundedComponent;
 
-ConfigProvider.ConfigContext = ConfigProviderAntd.ConfigContext;
+ConfigProvider.ConfigContext = ConfigContext;
 ConfigProvider.SizeContext = ConfigProviderAntd.SizeContext;
 ConfigProvider.config = ConfigProviderAntd.config;
 ConfigProvider.useConfig = ConfigProviderAntd.useConfig;

src/organisms/ConfigProvider/configs/pagination.ts

@@ -0,0 +1,14 @@
+import { PaginationConfig } from 'antd/es/config-provider/context';
+import { RdPaginationProps } from '../../../molecules';
+
+//#region Define Ant Design types
+type PaginationConfigAntd = PaginationConfig;
+//#endregion
+
+//#region Define extended types
+interface PaginationConfigExtend extends Pick<RdPaginationProps, 'pageSizeOptions'> {}
+//#endregion
+
+//#region Export types
+export type RdPaginationConfig = PaginationConfigAntd & PaginationConfigExtend;
+//#endregion

src/organisms/ConfigProvider/configs/table.ts

@@ -0,0 +1,14 @@
+import { TableConfig } from 'antd/es/config-provider/context';
+import { RdTableProps } from '../../../molecules';
+
+//#region Define Ant Design types
+type TableConfigAntd = TableConfig;
+//#endregion
+
+//#region Define extended types
+interface TableConfigExtend extends Pick<RdTableProps, 'pagination'> {}
+//#endregion
+
+//#region Export types
+export type RdTableConfig = TableConfigAntd & TableConfigExtend;
+//#endregion

src/organisms/ConfigProvider/context/constants.ts

@@ -0,0 +1,2 @@
+export const defaultPrefixCls = 'ant';
+export const defaultIconPrefixCls = 'anticon';

src/organisms/ConfigProvider/context/helper.ts

@@ -0,0 +1,8 @@
+import { defaultPrefixCls } from './constants';
+
+export const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {
+    if (customizePrefixCls) {
+        return customizePrefixCls;
+    }
+    return suffixCls ? `${defaultPrefixCls}-${suffixCls}` : defaultPrefixCls;
+};

src/organisms/ConfigProvider/context/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { defaultIconPrefixCls, defaultPrefixCls } from './constants';
+import { RdConfigConsumerProps } from './types';
+import { defaultGetPrefixCls } from './helper';
+
+export const ConfigContext = React.createContext<RdConfigConsumerProps>({
+    // We provide a default function for Context without provider
+    getPrefixCls: defaultGetPrefixCls,
+    iconPrefixCls: defaultIconPrefixCls,
+});

src/organisms/ConfigProvider/context/types.ts

@@ -0,0 +1,22 @@
+import { ConfigConsumerProps } from 'antd/es/config-provider';
+import { RdPaginationConfig } from '../configs/pagination';
+import { RdTableConfig } from '../configs/table';
+
+//#region Define Ant Design types
+type ConfigConsumerPropsAntd = ConfigConsumerProps;
+//#endregion
+
+//#region Define extended types
+interface ConfigConsumerPropsExtend {
+    pagination?: RdPaginationConfig;
+    table?: RdTableConfig;
+}
+//#endregion
+
+//#region Export types
+export type RdConfigConsumerProps = Omit<ConfigConsumerPropsAntd, 'pagination' | 'table'> &
+    ConfigConsumerPropsExtend;
+//#endregion
+
+export type RdConfigContext = React.Context<RdConfigConsumerProps>;
+export type RdConfigConsumer = React.Consumer<RdConfigConsumerProps>;

src/organisms/ConfigProvider/index.tsx

@@ -1,2 +1,3 @@
 export * from './ConfigProvider';
-export * from './types';
+export * from './types';
+export * from './types.props'