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

components/_util/ref.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export function fillRef<T>(ref: React.Ref<T>, node: T) {
+  if (typeof ref === 'function') {
+    ref(node);
+  } else if (typeof ref === 'object' && ref && 'current' in ref) {
+    (ref as any).current = node;
+  }
+}
+
+export function composeRef<T>(...refs: React.Ref<T>[]): React.Ref<T> {
+  return (node: T) => {
+    refs.forEach(ref => {
+      fillRef(ref, node);
+    });
+  };
+}

components/typography/Base.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { polyfill } from 'react-lifecycles-compat';
 import toArray from 'rc-util/lib/Children/toArray';
+import findDOMNode from 'rc-util/lib/Dom/findDOMNode';
 import copy from 'copy-to-clipboard';
 import omit from 'omit.js';
 import ResizeObserver from 'rc-resize-observer';
@@ -297,7 +298,7 @@ class Base extends React.Component<InternalBlockProps & ConfigConsumerProps, Bas
     );
 
     const { content, text, ellipsis } = measure(
-      this.content,
+      findDOMNode(this.content),
       rows,
       children,
       this.renderOperations(true),
@@ -459,7 +460,7 @@ class Base extends React.Component<InternalBlockProps & ConfigConsumerProps, Bas
                   WebkitLineClamp: cssLineClamp ? rows : null,
                 }}
                 component={component}
-                setContentRef={this.setContentRef}
+                ref={this.setContentRef}
                 aria-label={ariaLabel}
                 {...textProps}
               >

components/typography/Typography.tsx

@@ -1,6 +1,8 @@
 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;
@@ -13,38 +15,68 @@ export interface TypographyProps {
 
 interface InternalTypographyProps extends TypographyProps {
   component?: string;
+  /** @deprecated Use `ref` directly if using React 16 */
   setContentRef?: (node: HTMLElement) => void;
 }
 
-class Typography extends React.Component<InternalTypographyProps> {
-  renderTypography = ({ getPrefixCls }: ConfigConsumerProps) => {
-    const {
-      prefixCls: customizePrefixCls,
-      component = 'article',
-      className,
-      'aria-label': ariaLabel,
-      setContentRef,
-      children,
-      ...restProps
-    } = this.props;
-    const Component = component as any;
-    const prefixCls = getPrefixCls('typography', customizePrefixCls);
-
-    return (
-      <Component
-        className={classNames(prefixCls, className)}
-        aria-label={ariaLabel}
-        ref={setContentRef}
-        {...restProps}
-      >
-        {children}
-      </Component>
-    );
-  };
-
-  render() {
-    return <ConfigConsumer>{this.renderTypography}</ConfigConsumer>;
+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;
 }
 
-export default Typography;
+// es default export should use const instead of let
+const ExportTypography = (RefTypography as unknown) as React.FC<TypographyProps>;
+
+export default ExportTypography;

components/typography/__tests__/index.test.js

@@ -6,6 +6,7 @@ import Title from '../Title';
 import Paragraph from '../Paragraph';
 import Base from '../Base'; // eslint-disable-line import/no-named-as-default
 import mountTest from '../../../tests/shared/mountTest';
+import Typography from '../Typography';
 
 jest.mock('copy-to-clipboard');
 
@@ -94,10 +95,13 @@ describe('Typography', () => {
       });
 
       it('connect children', () => {
+        const bamboo = 'Bamboo';
+        const is = ' is ';
+
         const wrapper = mount(
           <Base ellipsis component="p" editable>
-            {'Bamboo'}
-            {' is '}
+            {bamboo}
+            {is}
             <code>Little</code>
             <code>Light</code>
           </Base>,
@@ -237,4 +241,13 @@ describe('Typography', () => {
       });
     });
   });
+
+  it('warning if use setContentRef', () => {
+    function refFunc() {}
+    mount(<Typography setContentRef={refFunc} />);
+
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Typography] `setContentRef` is deprecated. Please use `ref` instead.',
+    );
+  });
 });