ant-design/components/typography/Typography.tsx
二货机器人 4680ddc009
fix: Typography warning for ref error (#19074)
* Revert "fix: Typography funtion compoent use Ref console log warning (#19066)"

This reverts commit 3d378f2fd8.

* fix: Typography warning for ref

* not crash on react 15

* still use class if react15

* fix ts define

* clean up

* react 15 lock ref obj

* Use rc-util findDOMNode instead
2019-10-01 01:06:09 -05:00

83 lines
2.0 KiB
TypeScript

import * as React from 'react';
import classNames from 'classnames';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import warning from '../_util/warning';
import { composeRef } from '../_util/ref';
export interface TypographyProps {
id?: string;
prefixCls?: string;
className?: string;
style?: React.CSSProperties;
children?: React.ReactNode;
['aria-label']?: string;
}
interface InternalTypographyProps extends TypographyProps {
component?: string;
/** @deprecated Use `ref` directly if using React 16 */
setContentRef?: (node: HTMLElement) => void;
}
const Typography: React.RefForwardingComponent<{}, InternalTypographyProps> = (
{
prefixCls: customizePrefixCls,
component = 'article',
className,
'aria-label': ariaLabel,
setContentRef,
children,
...restProps
},
ref,
) => {
let mergedRef = ref;
if (setContentRef) {
warning(false, 'Typography', '`setContentRef` is deprecated. Please use `ref` instead.');
mergedRef = composeRef(ref, setContentRef);
}
return (
<ConfigConsumer>
{({ getPrefixCls }: ConfigConsumerProps) => {
const Component = component as any;
const prefixCls = getPrefixCls('typography', customizePrefixCls);
return (
<Component
className={classNames(prefixCls, className)}
aria-label={ariaLabel}
ref={mergedRef}
{...restProps}
>
{children}
</Component>
);
}}
</ConfigConsumer>
);
};
let RefTypography;
if (React.forwardRef) {
RefTypography = React.forwardRef(Typography);
RefTypography.displayName = 'Typography';
} else {
class TypographyWrapper extends React.Component<TypographyProps, {}> {
state = {};
render() {
return <Typography {...this.props} />;
}
}
RefTypography = TypographyWrapper;
}
// es default export should use const instead of let
const ExportTypography = (RefTypography as unknown) as React.FC<TypographyProps>;
export default ExportTypography;