fix(switch):set disabled for loading status & set cursor as not-allow…

…ed (ant-design#13219)
desaianuj · Nov 21, 2018 · 171e366 · 171e366
1 parent 2bf0fad
commit 171e366
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/components/switch/__tests__/__snapshots__/demo.test.js.snap b/components/switch/__tests__/__snapshots__/demo.test.js.snap
@@ -42,7 +42,8 @@ exports[`renders ./components/switch/demo/loading.md correctly 1`] = `
 <div>
   <button
     aria-checked="true"
-    class="ant-switch-loading ant-switch ant-switch-checked"
+    class="ant-switch-loading ant-switch ant-switch-checked ant-switch-disabled"
+    disabled=""
     role="switch"
     type="button"
   >
@@ -70,7 +71,8 @@ exports[`renders ./components/switch/demo/loading.md correctly 1`] = `
   <br />
   <button
     aria-checked="false"
-    class="ant-switch-small ant-switch-loading ant-switch"
+    class="ant-switch-small ant-switch-loading ant-switch ant-switch-disabled"
+    disabled=""
     role="switch"
     type="button"
   >

diff --git a/components/switch/index.tsx b/components/switch/index.tsx
@@ -48,7 +48,7 @@ export default class Switch extends React.Component<SwitchProps, {}> {
   }
 
   render() {
-    const { prefixCls, size, loading, className = '' } = this.props;
+    const { prefixCls, size, loading, className = '', disabled } = this.props;
     const classes = classNames(className, {
       [`${prefixCls}-small`]: size === 'small',
       [`${prefixCls}-loading`]: loading,
@@ -64,6 +64,7 @@ export default class Switch extends React.Component<SwitchProps, {}> {
         <RcSwitch
           {...omit(this.props, ['loading'])}
           className={classes}
+          disabled={disabled || loading}
           ref={this.saveSwitch}
           loadingIcon={loadingIcon}
         />

diff --git a/components/switch/style/index.less b/components/switch/style/index.less
@@ -153,8 +153,11 @@
 
   &-loading,
   &-disabled {
-    pointer-events: none;
+    cursor: not-allowed;
     opacity: @switch-disabled-opacity;
+    * {
+      cursor: not-allowed;
+    }
   }
 }