feat: ConfigProvider support DatePicker & TimePicker className and style properties (#43418)

1 year ago · e86e5e5000
6 changed files with 82 additions and 1 deletions
--- a/components/config-provider/tests/style.test.tsx
+++ b/components/config-provider/tests/style.test.tsx
@ -13,6 +13,7 @@ import Cascader from '../../cascader';
 import Checkbox from '../../checkbox';
 import Collapse from '../../collapse';
 import ColorPicker from '../../color-picker';
+import DatePicker from '../../date-picker';
 import Descriptions from '../../descriptions';
 import Divider from '../../divider';
 import Drawer from '../../drawer';
@ -44,6 +45,7 @@ import Switch from '../../switch';
 import Table from '../../table';
 import Tabs from '../../tabs';
 import Tag from '../../tag';
+import TimePicker from '../../time-picker';
 import Timeline from '../../timeline';
 import Transfer from '../../transfer';
 import Tree from '../../tree';
@ -1010,6 +1012,34 @@ describe('ConfigProvider support style and className props', () => {
    expect(element).toHaveStyle({ backgroundColor: 'red' });
  });

+  it('Should TimePicker className works', () => {
+    const { container } = render(
+      <ConfigProvider
+        timePicker={{
+          className: 'test-class',
+        }}
+      >
+        <TimePicker />
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.ant-picker')).toHaveClass('test-class');
+  });
+
+  it('Should TimePicker style works', () => {
+    const { container } = render(
+      <ConfigProvider
+        timePicker={{
+          style: { color: 'red' },
+        }}
+      >
+        <TimePicker style={{ fontSize: '16px' }} />
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.ant-picker')).toHaveStyle('color: red; font-size: 16px;');
+  });
+
  it('Should message className & style works', () => {
    const Demo: React.FC = () => {
      const [messageApi, contextHolder] = message.useMessage();
@ -1205,4 +1235,32 @@ describe('ConfigProvider support style and className props', () => {
    expect(element).toHaveClass('cp-colorPicker');
    expect(element).toHaveStyle({ backgroundColor: 'red' });
  });
+
+  it('Should DatePicker className works', () => {
+    const { container } = render(
+      <ConfigProvider
+        datePicker={{
+          className: 'test-class',
+        }}
+      >
+        <DatePicker />
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.ant-picker')).toHaveClass('test-class');
+  });
+
+  it('Should DatePicker style works', () => {
+    const { container } = render(
+      <ConfigProvider
+        datePicker={{
+          style: { color: 'red' },
+        }}
+      >
+        <DatePicker style={{ fontSize: '16px' }} />
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.ant-picker')).toHaveStyle('color: red; font-size: 16px;');
+  });
 });
--- a/components/config-provider/context.ts
+++ b/components/config-provider/context.ts
@ -136,10 +136,12 @@ export interface ConfigConsumerProps {
  card?: ComponentStyleConfig;
  tabs?: ComponentStyleConfig;
  timeline?: ComponentStyleConfig;
+  timePicker?: ComponentStyleConfig;
  upload?: ComponentStyleConfig;
  notification?: ComponentStyleConfig;
  tree?: ComponentStyleConfig;
  colorPicker?: ComponentStyleConfig;
+  datePicker?: ComponentStyleConfig;
 }

 const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {
--- a/components/config-provider/index.en-US.md
+++ b/components/config-provider/index.en-US.md
@ -114,6 +114,7 @@ const {
 | checkbox | Set Checkbox common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | collapse | Set Collapse common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | colorPicker | Set ColorPicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| datePicker | Set datePicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | descriptions | Set Descriptions common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | divider | Set Divider common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | drawer | Set Drawer common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
@ -146,6 +147,7 @@ const {
 | tabs | Set Tabs common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | tag | Set Tag common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | timeline | Set Timeline common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| timePicker | Set TimePicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | transfer | Set Transfer common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | tree | Set Tree common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | typography | Set Typography common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@ -178,10 +178,12 @@ export interface ConfigProviderProps {
  card?: ComponentStyleConfig;
  tabs?: ComponentStyleConfig;
  timeline?: ComponentStyleConfig;
+  timePicker?: ComponentStyleConfig;
  upload?: ComponentStyleConfig;
  notification?: ComponentStyleConfig;
  tree?: ComponentStyleConfig;
  colorPicker?: ComponentStyleConfig;
+  datePicker?: ComponentStyleConfig;
 }

 interface ProviderChildrenProps extends ConfigProviderProps {
@ -312,10 +314,12 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
    card,
    tabs,
    timeline,
+    timePicker,
    upload,
    notification,
    tree,
    colorPicker,
+    datePicker,
  } = props;

  // =================================== Warning ===================================
@ -408,10 +412,12 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
    card,
    tabs,
    timeline,
+    timePicker,
    upload,
    notification,
    tree,
    colorPicker,
+    datePicker,
  };

  const config = {
--- a/components/config-provider/index.zh-CN.md
+++ b/components/config-provider/index.zh-CN.md
@ -116,6 +116,7 @@ const {
 | checkbox | 设置 Checkbox 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | collapse | 设置 Collapse 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | colorPicker | 设置 ColorPicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| datePicker | 设置 DatePicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | descriptions | 设置 Descriptions 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | divider | 设置 Divider 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | drawer | 设置 Drawer 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
@ -148,6 +149,7 @@ const {
 | tabs | 设置 Tabs 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | tag | 设置 Tag 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | timeline | 设置 Timeline 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| timePicker | 设置 TimePicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | transfer | 设置 Transfer 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | tree | 设置 Tree 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | typography | 设置 Typography 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
--- a/components/date-picker/generatePicker/generateSinglePicker.tsx
+++ b/components/date-picker/generatePicker/generateSinglePicker.tsx
@ -37,11 +37,13 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
    picker?: PickerMode,
    displayName?: string,
  ) {
+    const consumerName = displayName === 'TimePicker' ? 'timePicker' : 'datePicker';
    const Picker = forwardRef<DatePickRef<DateType> | CommonPickerMethods, InnerPickerProps>(
      (props, ref) => {
        const {
          prefixCls: customizePrefixCls,
          getPopupContainer: customizeGetPopupContainer,
+          style,
          className,
          rootClassName,
          size: customizeSize,
@ -55,7 +57,14 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
          ...restProps
        } = props;

-        const { getPrefixCls, direction, getPopupContainer } = useContext(ConfigContext);
+        const {
+          getPrefixCls,
+          direction,
+          getPopupContainer,
+          // Consume different styles according to different names
+          [consumerName]: consumerStyle,
+        } = useContext(ConfigContext);
+
        const prefixCls = getPrefixCls('picker', customizePrefixCls);
        const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
        const innerRef = React.useRef<RCPicker<DateType>>(null);
@ -153,9 +162,11 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
              ),
              hashId,
              compactItemClassnames,
+              consumerStyle?.className,
              className,
              rootClassName,
            )}
+            style={{ ...consumerStyle?.style, ...style }}
            prefixCls={prefixCls}
            getPopupContainer={customizeGetPopupContainer || getPopupContainer}
            generateConfig={generateConfig}