refactor(trans-button): rewrite with hook (#27743)

* refactor(trans-button): rewrite with hook

* Update Base.tsx

* Update util.test.js

* Update transButton.tsx

* Update transButton.tsx

* Update transButton.tsx

* Update util.test.js

components/_util/__tests__/util.test.js

@@ -12,11 +12,8 @@ import Wave from '../wave';
 import TransButton from '../transButton';
 import { isStyleSupport, isFlexSupported } from '../styleChecker';
 import { sleep } from '../../../tests/utils';
-import focusTest from '../../../tests/shared/focusTest';
 
 describe('Test utils function', () => {
-  focusTest(TransButton);
-
   describe('throttle', () => {
     it('throttle function should work', async () => {
       const callback = jest.fn();
@@ -193,9 +190,10 @@ describe('Test utils function', () => {
 
   describe('TransButton', () => {
     it('can be focus/blur', () => {
-      const wrapper = mount(<TransButton>TransButton</TransButton>);
-      expect(typeof wrapper.instance().focus).toBe('function');
-      expect(typeof wrapper.instance().blur).toBe('function');
+      const ref = React.createRef();
+      mount(<TransButton ref={ref}>TransButton</TransButton>);
+      expect(typeof ref.current.focus).toBe('function');
+      expect(typeof ref.current.blur).toBe('function');
     });
 
     it('should trigger onClick when press enter', () => {

components/_util/transButton.tsx

@@ -20,81 +20,52 @@ const inlineStyle: React.CSSProperties = {
   display: 'inline-block',
 };
 
-class TransButton extends React.Component<TransButtonProps> {
-  div?: HTMLDivElement;
-
-  lastKeyCode?: number;
-
-  componentDidMount() {
-    const { autoFocus } = this.props;
-    if (autoFocus) {
-      this.focus();
-    }
-  }
-
-  onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = event => {
+const TransButton = React.forwardRef<HTMLDivElement, TransButtonProps>((props, ref) => {
+  const onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = event => {
     const { keyCode } = event;
     if (keyCode === KeyCode.ENTER) {
       event.preventDefault();
     }
   };
 
-  onKeyUp: React.KeyboardEventHandler<HTMLDivElement> = event => {
+  const onKeyUp: React.KeyboardEventHandler<HTMLDivElement> = event => {
     const { keyCode } = event;
-    const { onClick } = this.props;
+    const { onClick } = props;
     if (keyCode === KeyCode.ENTER && onClick) {
       onClick();
     }
   };
 
-  setRef = (btn: HTMLDivElement) => {
-    this.div = btn;
+  const { style, noStyle, disabled, ...restProps } = props;
+
+  let mergedStyle: React.CSSProperties = {};
+
+  if (!noStyle) {
+    mergedStyle = {
+      ...inlineStyle,
+    };
+  }
+
+  if (disabled) {
+    mergedStyle.pointerEvents = 'none';
+  }
+
+  mergedStyle = {
+    ...mergedStyle,
+    ...style,
   };
 
-  focus() {
-    if (this.div) {
-      this.div.focus();
-    }
-  }
-
-  blur() {
-    if (this.div) {
-      this.div.blur();
-    }
-  }
-
-  render() {
-    const { style, noStyle, disabled, ...restProps } = this.props;
-
-    let mergedStyle: React.CSSProperties = {};
-
-    if (!noStyle) {
-      mergedStyle = {
-        ...inlineStyle,
-      };
-    }
-
-    if (disabled) {
-      mergedStyle.pointerEvents = 'none';
-    }
-
-    mergedStyle = {
-      ...mergedStyle,
-      ...style,
-    };
-
-    return (
-      <div
-        role="button"
-        tabIndex={0}
-        ref={this.setRef}
-        {...restProps}
-        onKeyDown={this.onKeyDown}
-        onKeyUp={this.onKeyUp}
-        style={mergedStyle}
-      />
-    );
-  }
-}
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      ref={ref}
+      {...restProps}
+      onKeyDown={onKeyDown}
+      onKeyUp={onKeyUp}
+      style={mergedStyle}
+    />
+  );
+});
 
 export default TransButton;

components/typography/Base.tsx

@@ -132,7 +132,7 @@ class Base extends React.Component<InternalBlockProps, BaseState> {
 
   context: ConfigConsumerProps;
 
-  editIcon?: TransButton;
+  editIcon?: HTMLDivElement;
 
   contentRef = React.createRef<HTMLElement>();
 
@@ -257,7 +257,7 @@ class Base extends React.Component<InternalBlockProps, BaseState> {
     };
   }
 
-  setEditRef = (node: TransButton) => {
+  setEditRef = (node: HTMLDivElement) => {
     this.editIcon = node;
   };