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 warning from '../_util/warning';
+import { ConfigContext } from '../config-provider';
 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,72 +30,51 @@ export interface SwitchProps {
   title?: string;
 }
 
-export default class Switch extends React.Component<SwitchProps, {}> {
-  static __ANT_SWITCH = true;
-
-  private rcSwitch: typeof RcSwitch;
-
-  constructor(props: SwitchProps) {
-    super(props);
+interface CompoundedComponent
+  extends React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLElement>> {
+  __ANT_SWITCH: boolean;
+}
 
-    warning(
-      'checked' in props || !('value' in props),
-      'Switch',
-      '`value` is not a valid prop, do you mean `checked`?',
-    );
-  }
+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;
-  };
+  const {
+    prefixCls: customizePrefixCls,
+    size: customizeSize,
+    loading,
+    className = '',
+    disabled,
+  } = props;
 
-  focus() {
-    this.rcSwitch.focus();
-  }
+  const { getPrefixCls, direction } = React.useContext(ConfigContext);
+  const size = React.useContext(SizeContext);
+  const prefixCls = getPrefixCls('switch', customizePrefixCls);
+  const loadingIcon = loading ? <LoadingOutlined className={`${prefixCls}-loading-icon`} /> : null;
 
-  blur() {
-    this.rcSwitch.blur();
-  }
+  const classes = classNames(className, {
+    [`${prefixCls}-small`]: (customizeSize || size) === 'small',
+    [`${prefixCls}-loading`]: loading,
+    [`${prefixCls}-rtl`]: direction === 'rtl',
+  });
 
-  renderSwitch = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
-    const {
-      prefixCls: customizePrefixCls,
-      size: customizeSize,
-      loading,
-      className = '',
-      disabled,
-    } = this.props;
-    const prefixCls = getPrefixCls('switch', customizePrefixCls);
-    const loadingIcon = loading ? (
-      <LoadingOutlined className={`${prefixCls}-loading-icon`} />
-    ) : null;
-    return (
-      <SizeContext.Consumer>
-        {size => {
-          const classes = classNames(className, {
-            [`${prefixCls}-small`]: (customizeSize || size) === 'small',
-            [`${prefixCls}-loading`]: loading,
-            [`${prefixCls}-rtl`]: direction === 'rtl',
-          });
+  return (
+    <Wave insertExtraNode>
+      <RcSwitch
+        {...omit(props, ['loading'])}
+        prefixCls={prefixCls}
+        className={classes}
+        disabled={disabled || loading}
+        ref={ref}
+        loadingIcon={loadingIcon}
+      />
+    </Wave>
+  );
+}) as CompoundedComponent;
 
-          return (
-            <Wave insertExtraNode>
-              <RcSwitch
-                {...omit(this.props, ['loading'])}
-                prefixCls={prefixCls}
-                className={classes}
-                disabled={disabled || loading}
-                ref={this.saveSwitch}
-                loadingIcon={loadingIcon}
-              />
-            </Wave>
-          );
-        }}
-      </SizeContext.Consumer>
-    );
-  };
+Switch.__ANT_SWITCH = true;
 
-  render() {
-    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();
       }