mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

feat: Support ref for Title, Text, Paragraph (#34847)

Browse Source 
* feat: Support ref for Title, Text, Paragraph

* feat: Add tests for Title, Paragraph and Text
This commit is contained in:
Minh Quy 2022-04-05 07:02:32 +02:00 committed by GitHub
parent c4ffbff841
commit 445e6c6bca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 34 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/typography/Paragraph.tsx
View File

@ -5,6 +5,8 @@ export interface ParagraphProps extends BlockProps {
onClick?: (e?: React.MouseEvent<HTMLDivElement>) => void; onClick?: (e?: React.MouseEvent<HTMLDivElement>) => void;
} }
const Paragraph: React.FC<ParagraphProps> = props => <Base {...props} component="div" />; const Paragraph: React.ForwardRefRenderFunction<HTMLDivElement, ParagraphProps> = (props, ref) => (
<Base ref={ref} {...props} component="div" />
);
export default Paragraph; export default React.forwardRef(Paragraph);

9
components/typography/Text.tsx
View File

@ -8,7 +8,10 @@ export interface TextProps extends BlockProps {
onClick?: (e?: React.MouseEvent<HTMLDivElement>) => void; onClick?: (e?: React.MouseEvent<HTMLDivElement>) => void;
} }
const Text: React.FC<TextProps> = ({ ellipsis, ...restProps }) => { const Text: React.ForwardRefRenderFunction<HTMLSpanElement, TextProps> = (
{ ellipsis, ...restProps },
ref,
) => {
const mergedEllipsis = React.useMemo(() => { const mergedEllipsis = React.useMemo(() => {
if (ellipsis && typeof ellipsis === 'object') { if (ellipsis && typeof ellipsis === 'object') {
return omit(ellipsis as any, ['expandable', 'rows']); return omit(ellipsis as any, ['expandable', 'rows']);
@ -25,7 +28,7 @@ const Text: React.FC<TextProps> = ({ ellipsis, ...restProps }) => {
'`ellipsis` do not support `expandable` or `rows` props.', '`ellipsis` do not support `expandable` or `rows` props.',
); );
return <Base {...restProps} ellipsis={mergedEllipsis} component="span" />; return <Base ref={ref} {...restProps} ellipsis={mergedEllipsis} component="span" />;
}; };
export default Text; export default React.forwardRef(Text);

6
components/typography/Title.tsx
View File

@ -13,7 +13,7 @@ export type TitleProps = Omit<
'strong' 'strong'
>; >;
const Title: React.FC<TitleProps> = props => { const Title: React.ForwardRefRenderFunction<HTMLHeadingElement, TitleProps> = (props, ref) => {
const { level = 1, ...restProps } = props; const { level = 1, ...restProps } = props;
let component: string; let component: string;
@ -28,7 +28,7 @@ const Title: React.FC<TitleProps> = props => {
component = 'h1'; component = 'h1';
} }
return <Base {...restProps} component={component} />; return <Base ref={ref} {...restProps} component={component} />;
}; };
export default Title; export default React.forwardRef(Title);

21
components/typography/__tests__/index.test.js
View File

@ -402,4 +402,25 @@ describe('Typography', () => {
expect(errorSpy).not.toHaveBeenCalled(); expect(errorSpy).not.toHaveBeenCalled();
}); });
it('should get HTMLHeadingElement ref from Title', () => {
const ref = React.createRef();
mount(<Title level={1} ref={ref} />);
expect(ref.current instanceof HTMLHeadingElement).toBe(true);
});
it('should get HTMLDivElement ref from Paragraph', () => {
const ref = React.createRef();
mount(<Paragraph ref={ref} />);
expect(ref.current instanceof HTMLDivElement).toBe(true);
});
it('should get HTMLSpanElement ref from Text', () => {
const ref = React.createRef();
mount(<Text ref={ref} />);
expect(ref.current instanceof HTMLSpanElement).toBe(true);
});
}); });