mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 06:03:38 +08:00
Code Issues Actions 29 Packages Projects Releases Wiki Activity

feat: CP support Typography className and style (#43070)

Browse Source 
* feat: CP support Typography className and style

* fix: remove useMemo

* docs: update docs

* fix

* fix

* docs: update docs
This commit is contained in:
lijianan 2023-06-20 14:35:05 +08:00 committed by GitHub
parent f93d5c8ba7
commit 5c32480f6f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 85 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,7 @@ import ConfigProvider from '..';
import { render } from '../../../tests/utils';
import Divider from '../../divider';
import Space from '../../space';
import Typography from '../../typography';
describe('ConfigProvider support style and className props', () => {
it('Should Space classNames works', () => {
@ -20,7 +21,7 @@ describe('ConfigProvider support style and className props', () => {
</Space>
</ConfigProvider>,
);
expect(container.querySelector('.ant-space-item.test-classNames')).toBeTruthy();
expect(container.querySelector('.ant-space-item')).toHaveClass('test-classNames');
});
it('Should Space className works', () => {
@ -36,7 +37,7 @@ describe('ConfigProvider support style and className props', () => {
</Space>
</ConfigProvider>,
);
expect(container.querySelector('.ant-space.test-classNames')).toBeTruthy();
expect(container.querySelector('.ant-space')).toHaveClass('test-classNames');
});
it('Should Space styles works', () => {
@ -56,7 +57,7 @@ describe('ConfigProvider support style and className props', () => {
</Space>
</ConfigProvider>,
);
expect(container.querySelector('.ant-space-item')?.getAttribute('style')).toEqual(
expect(container.querySelector('.ant-space-item')).toHaveStyle(
'margin-right: 8px; color: red;',
);
});
@ -76,7 +77,7 @@ describe('ConfigProvider support style and className props', () => {
</Space>
</ConfigProvider>,
);
expect(container.querySelector('.ant-space')?.getAttribute('style')).toEqual('color: red;');
expect(container.querySelector('.ant-space')).toHaveStyle('color: red;');
});
it('Should Divider className works', () => {
@ -107,4 +108,17 @@ describe('ConfigProvider support style and className props', () => {
);
expect(container.querySelector('.ant-divider'))?.toHaveStyle({ color: 'red', height: '80px' });
});
it('Should Typography className & style works', () => {
const { container } = render(
<ConfigProvider
typography={{ className: 'cp-typography', style: { backgroundColor: 'red' } }}
>
<Typography>test</Typography>
</ConfigProvider>,
);
const element = container.querySelector<HTMLElement>('.ant-typography');
expect(element).toHaveClass('cp-typography');
expect(element).toHaveStyle({ backgroundColor: 'red' });
});
});

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

@ -89,11 +89,16 @@ export interface ConfigConsumerProps {
};
button?: ButtonConfig;
divider?: componentStyleConfig;
typography?: {
className?: string;
style?: React.CSSProperties;
};
}
const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {
if (customizePrefixCls) return customizePrefixCls;
if (customizePrefixCls) {
return customizePrefixCls;
}
return suffixCls ? `ant-${suffixCls}` : 'ant';
};

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

@ -107,6 +107,7 @@ const {
| input | Set Input common props | { autoComplete?: string } | - | 4.2.0 |
| select | Set Select common props | { showSearch?: boolean } | - | |
| space | Set Space common props, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: { item: string }, styles?: { item: React.CSSProperties } } | - | 5.6.0 |
| typography | Set Typography common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
## FAQ

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

@ -138,6 +138,10 @@ export interface ConfigProviderProps {
theme?: ThemeConfig;
button?: ButtonConfig;
divider?: componentStyleConfig;
typography?: {
className?: string;
style?: React.CSSProperties;
};
}
interface ProviderChildrenProps extends ConfigProviderProps {
@ -225,6 +229,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
iconPrefixCls: customIconPrefixCls,
theme,
componentDisabled,
typography,
divider,
} = props;
@ -242,7 +247,9 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
(suffixCls: string, customizePrefixCls?: string) => {
const { prefixCls } = props;
if (customizePrefixCls) return customizePrefixCls;
if (customizePrefixCls) {
return customizePrefixCls;
}
const mergedPrefixCls = prefixCls || parentContext.getPrefixCls('');
@ -275,6 +282,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
getPrefixCls,
iconPrefixCls,
theme: mergedTheme,
typography,
divider,
};

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

@ -109,6 +109,7 @@ const {
| input | 设置 Input 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| select | 设置 Select 组件的通用属性 | { showSearch?: boolean } | - | |
| space | 设置 Space 的通用属性，参考 [Space](/components/space-cn) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: { item: string }, styles?: { item: React.CSSProperties } } | - | 5.6.0 |
| typography | 设置 Typography 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
## FAQ

94
components/typography/Typography.tsx
View File

@ -1,9 +1,9 @@
import classNames from 'classnames';
import { composeRef } from 'rc-util/lib/ref';
import * as React from 'react';
import type { DirectionType } from '../config-provider';
import { ConfigContext } from '../config-provider';
import warning from '../_util/warning';
import type { ConfigConsumerProps, DirectionType } from '../config-provider';
import { ConfigContext } from '../config-provider';
import useStyle from './style';
export interface TypographyProps<C extends keyof JSX.IntrinsicElements>
@ -29,53 +29,57 @@ interface InternalTypographyProps<C extends keyof JSX.IntrinsicElements>
const Typography = React.forwardRef<
HTMLElement,
InternalTypographyProps<keyof JSX.IntrinsicElements>
>(
(
>((props, ref) => {
const {
prefixCls: customizePrefixCls,
component: Component = 'article',
className,
rootClassName,
setContentRef,
children,
direction: typographyDirection,
style,
...restProps
} = props;
const {
getPrefixCls,
direction: contextDirection,
typography,
} = React.useContext<ConfigConsumerProps>(ConfigContext);
const direction = typographyDirection ?? contextDirection;
let mergedRef = ref;
if (setContentRef) {
warning(false, 'Typography', '`setContentRef` is deprecated. Please use `ref` instead.');
mergedRef = composeRef(ref, setContentRef);
}
const prefixCls = getPrefixCls('typography', customizePrefixCls);
// Style
const [wrapSSR, hashId] = useStyle(prefixCls);
const componentClassName = classNames(
prefixCls,
typography?.className,
{
prefixCls: customizePrefixCls,
component: Component = 'article',
className,
rootClassName,
setContentRef,
children,
direction: typographyDirection,
...restProps
[`${prefixCls}-rtl`]: direction === 'rtl',
},
ref,
) => {
const { getPrefixCls, direction: contextDirection } = React.useContext(ConfigContext);
className,
rootClassName,
hashId,
);
const direction = typographyDirection ?? contextDirection;
const mergedStyle: React.CSSProperties = { ...typography?.style, ...style };
let mergedRef = ref;
if (setContentRef) {
warning(false, 'Typography', '`setContentRef` is deprecated. Please use `ref` instead.');
mergedRef = composeRef(ref, setContentRef);
}
const prefixCls = getPrefixCls('typography', customizePrefixCls);
// Style
const [wrapSSR, hashId] = useStyle(prefixCls);
const componentClassName = classNames(
prefixCls,
{
[`${prefixCls}-rtl`]: direction === 'rtl',
},
className,
rootClassName,
hashId,
);
return wrapSSR(
// @ts-expect-error: Expression produces a union type that is too complex to represent.
<Component className={componentClassName} ref={mergedRef} {...restProps}>
{children}
</Component>,
);
},
);
return wrapSSR(
// @ts-expect-error: Expression produces a union type that is too complex to represent.
<Component className={componentClassName} style={mergedStyle} ref={mergedRef} {...restProps}>
{children}
</Component>,
);
});
if (process.env.NODE_ENV !== 'production') {
Typography.displayName = 'Typography';