feat: add wrapper root

Author: wanpan11

assets/index.less

@@ -1,6 +1,11 @@
 @switchPrefixCls: rc-switch;
 
-@duration: .3s;
+@duration: 0.3s;
+
+.@{switchPrefixCls}-wrapper {
+  display: flex;
+  align-items: center;
+}
 
 .@{switchPrefixCls} {
   position: relative;
@@ -20,7 +25,7 @@
 
   &-inner-checked,
   &-inner-unchecked {
-    color:#fff;
+    color: #fff;
     font-size: 12px;
     position: absolute;
     top: 0;
@@ -35,15 +40,15 @@
     left: 24px;
   }
 
-  &:after{
+  &:after {
     position: absolute;
     width: 18px;
     height: 18px;
     left: 2px;
     top: 1px;
     border-radius: 50% 50%;
     background-color: #fff;
-    content: " ";
+    content: ' ';
     cursor: pointer;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
     transform: scale(1);
@@ -75,23 +80,23 @@
       left: 44px;
     }
 
-    &:after{
+    &:after {
       left: 22px;
     }
   }
 
-  &-disabled{
+  &-disabled {
     cursor: no-drop;
     background: #ccc;
     border-color: #ccc;
 
-    &:after{
+    &:after {
       background: #9e9e9e;
       animation-name: none;
       cursor: no-drop;
     }
 
-    &:hover:after{
+    &:hover:after {
       transform: scale(1);
       animation-name: none;
     }

package.json

@@ -43,13 +43,15 @@
     ]
   },
   "dependencies": {
-    "classnames": "^2.2.1",
-    "@rc-component/util": "^1.2.0"
+    "@rc-component/util": "^1.2.0",
+    "classnames": "^2.2.1"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^2.0.0",
+    "@rc-component/np": "^1.0.3",
     "@types/classnames": "^2.2.10",
     "@types/jest": "^29.4.0",
+    "@types/react": "^19.1.8",
     "@umijs/fabric": "^3.0.0",
     "cheerio": "1.0.0-rc.12",
     "dumi": "^2.0.0",
@@ -64,7 +66,6 @@
     "husky": "^8.0.1",
     "less": "^4.1.3",
     "lint-staged": "^15.1.0",
-    "@rc-component/np": "^1.0.3",
     "prettier": "^3.1.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",

src/index.tsx

@@ -90,33 +90,35 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
     });
 
     return (
-      <button
-        {...restProps}
-        type="button"
-        role="switch"
-        aria-checked={innerChecked}
-        disabled={disabled}
-        className={switchClassName}
-        ref={ref}
-        onKeyDown={onInternalKeyDown}
-        onClick={onInternalClick}
-      >
-        {loadingIcon}
-        <span className={`${prefixCls}-inner`}>
-          <span
-            className={classNames(`${prefixCls}-inner-checked`, switchClassNames?.content)}
-            style={styles?.content}
-          >
-            {checkedChildren}
+      <label className={`${prefixCls}-wrapper`}>
+        <button
+          {...restProps}
+          type="button"
+          role="switch"
+          aria-checked={innerChecked}
+          disabled={disabled}
+          className={switchClassName}
+          ref={ref}
+          onKeyDown={onInternalKeyDown}
+          onClick={onInternalClick}
+        >
+          {loadingIcon}
+          <span className={`${prefixCls}-inner`}>
+            <span
+              className={classNames(`${prefixCls}-inner-checked`, switchClassNames?.content)}
+              style={styles?.content}
+            >
+              {checkedChildren}
+            </span>
+            <span
+              className={classNames(`${prefixCls}-inner-unchecked`, switchClassNames?.content)}
+              style={styles?.content}
+            >
+              {unCheckedChildren}
+            </span>
           </span>
-          <span
-            className={classNames(`${prefixCls}-inner-unchecked`, switchClassNames?.content)}
-            style={styles?.content}
-          >
-            {unCheckedChildren}
-          </span>
-        </span>
-      </button>
+        </button>
+      </label>
     );
   },
 );

tests/index.spec.js

@@ -34,18 +34,18 @@ describe('rc-switch', () => {
     const onChange = jest.fn();
     const wrapper = createSwitch({ defaultChecked: true, onChange });
     expect(wrapper.exists('.checked')).toBeTruthy();
-    wrapper.simulate('click');
+    wrapper.find('.rc-switch').simulate('click');
     expect(wrapper.exists('.unchecked')).toBeTruthy();
     expect(onChange.mock.calls.length).toBe(1);
   });
 
   it('should support onClick', () => {
     const onClick = jest.fn();
     const wrapper = createSwitch({ onClick });
-    wrapper.simulate('click');
+    wrapper.find('.rc-switch').simulate('click');
     expect(onClick).toHaveBeenCalledWith(true, expect.objectContaining({ type: 'click' }));
     expect(onClick.mock.calls.length).toBe(1);
-    wrapper.simulate('click');
+    wrapper.find('.rc-switch').simulate('click');
     expect(onClick).toHaveBeenCalledWith(false, expect.objectContaining({ type: 'click' }));
     expect(onClick.mock.calls.length).toBe(2);
   });
@@ -117,7 +117,7 @@ describe('rc-switch', () => {
   it('onMouseUp', () => {
     const onMouseUp = jest.fn();
     const wrapper = createSwitch({ onMouseUp });
-    wrapper.simulate('mouseup');
+    wrapper.find('.rc-switch').simulate('mouseup');
     expect(onMouseUp).toHaveBeenCalled();
   });