mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 14:13:37 +08:00
Code Issues Actions 32 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
JiaQi 2023-07-07 19:02:55 +08:00 committed by GitHub
parent 1ef07e97ba
commit e86e5e5000
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 82 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
components/config-provider/__tests__/style.test.tsx
View File

@ -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;');
});
});

2
components/config-provider/context.ts
View File

@ -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) => {

2
components/config-provider/index.en-US.md
View File

@ -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 |

6
components/config-provider/index.tsx
View File

@ -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 = {

2
components/config-provider/index.zh-CN.md
View File

@ -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 |

13
components/date-picker/generatePicker/generateSinglePicker.tsx
View File

@ -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}