refactor(switch): rewrite with hook (#23552)

* refactor(switch): rewrite with hook

* fix: size

* fix

* fix test

* fix

* fix: size

components/switch/__tests__/index.test.js

@@ -7,7 +7,7 @@ import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 
 describe('Switch', () => {
-  focusTest(Switch);
+  focusTest(Switch, { refFocus: true });
   mountTest(Switch);
   rtlTest(Switch);
 

components/switch/index.tsx

@@ -5,9 +5,9 @@ import omit from 'omit.js';
 import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
 
 import Wave from '../_util/wave';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { ConfigContext } from '../config-provider';
-import warning from '../_util/warning';
 import SizeContext from '../config-provider/SizeContext';
+import warning from '../_util/warning';
 
 export type SwitchSize = 'small' | 'default';
 export type SwitchChangeEventHandler = (checked: boolean, event: MouseEvent) => void;
@@ -30,48 +30,31 @@ export interface SwitchProps {
   title?: string;
 }
 
-export default class Switch extends React.Component<SwitchProps, {}> {
+interface CompoundedComponent
-  static __ANT_SWITCH = true;
+  extends React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLElement>> {
-
+  __ANT_SWITCH: boolean;
-  private rcSwitch: typeof RcSwitch;
+}
-
-  constructor(props: SwitchProps) {
-    super(props);
 
+const Switch = React.forwardRef<unknown, SwitchProps>((props, ref) => {
   warning(
     'checked' in props || !('value' in props),
     'Switch',
     '`value` is not a valid prop, do you mean `checked`?',
   );
-  }
-
-  saveSwitch = (node: typeof RcSwitch) => {
-    this.rcSwitch = node;
-  };
-
-  focus() {
-    this.rcSwitch.focus();
-  }
 
-  blur() {
-    this.rcSwitch.blur();
-  }
-
-  renderSwitch = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
   const {
     prefixCls: customizePrefixCls,
     size: customizeSize,
     loading,
     className = '',
     disabled,
-    } = this.props;
+  } = props;
+
+  const { getPrefixCls, direction } = React.useContext(ConfigContext);
+  const size = React.useContext(SizeContext);
   const prefixCls = getPrefixCls('switch', customizePrefixCls);
-    const loadingIcon = loading ? (
+  const loadingIcon = loading ? <LoadingOutlined className={`${prefixCls}-loading-icon`} /> : null;
-      <LoadingOutlined className={`${prefixCls}-loading-icon`} />
+
-    ) : null;
-    return (
-      <SizeContext.Consumer>
-        {size => {
   const classes = classNames(className, {
     [`${prefixCls}-small`]: (customizeSize || size) === 'small',
     [`${prefixCls}-loading`]: loading,
@@ -81,21 +64,17 @@ export default class Switch extends React.Component<SwitchProps, {}> {
   return (
     <Wave insertExtraNode>
       <RcSwitch
-                {...omit(this.props, ['loading'])}
+        {...omit(props, ['loading'])}
         prefixCls={prefixCls}
         className={classes}
         disabled={disabled || loading}
-                ref={this.saveSwitch}
+        ref={ref}
         loadingIcon={loadingIcon}
       />
     </Wave>
   );
-        }}
+}) as CompoundedComponent;
-      </SizeContext.Consumer>
-    );
-  };
 
-  render() {
+Switch.__ANT_SWITCH = true;
-    return <ConfigConsumer>{this.renderSwitch}</ConfigConsumer>;
+
-  }
+export default Switch;
-}

tests/shared/focusTest.js

@@ -40,6 +40,9 @@ export default function focusTest(Component, { refFocus = false } = {}) {
 
     const getElement = wrapper => {
       let ele = wrapper.find('input').first();
+      if (ele.length === 0) {
+        ele = wrapper.find('button').first();
+      }
       if (ele.length === 0) {
         ele = wrapper.find('div[tabIndex]').first();
       }