fix ant-design#1290 switch support onClick (ant-design#1293)

* fix ant-design#1290 * update * fix bug * fix * update API doc * update switch PropsType
lixiaoyang1992 · Apr 26, 2018 · 2cca34b · 2cca34b
1 parent a994b2e
commit 2cca34b
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 5 deletions.
diff --git a/components/switch/PropsType.tsx b/components/switch/PropsType.tsx
@@ -2,12 +2,13 @@ interface SwitchProps {
   style?: {};
   checked?: boolean;
   disabled?: boolean;
-  onChange?: Function;
+  onChange?: (checked: boolean) => void;
   /* web only */
   prefixCls?: string;
   className?: string;
   name?: string;
   platform?: string;
+  onClick?: (checked?: boolean) => void;
 }
 
 export default SwitchProps;
diff --git a/components/switch/__tests__/__snapshots__/demo.test.web.js.snap b/components/switch/__tests__/__snapshots__/demo.test.web.js.snap
@@ -106,7 +106,7 @@ exports[`renders ./components/switch/demo/basic.md correctly 1`] = `
               type="checkbox"
             />
             <div
-              class="checkbox"
+              class="checkbox checkbox-disabled"
             />
           </label>
         </div>
@@ -142,7 +142,7 @@ exports[`renders ./components/switch/demo/basic.md correctly 1`] = `
               type="checkbox"
             />
             <div
-              class="checkbox"
+              class="checkbox checkbox-disabled"
             />
           </label>
         </div>

diff --git a/components/switch/demo/basic.md b/components/switch/demo/basic.md
@@ -23,6 +23,7 @@ let SwitchExample = (props) => {
             initialValue: true,
             valuePropName: 'checked',
           })}
+          onClick={(checked) => { console.log(checked); }}
         />}
       >默认开</List.Item>
       <List.Item
@@ -31,6 +32,7 @@ let SwitchExample = (props) => {
             initialValue: false,
             valuePropName: 'checked',
           })}
+          onClick={(checked) => { console.log(checked); }}
         />}
       >默认关</List.Item>
       <List.Item
@@ -39,6 +41,7 @@ let SwitchExample = (props) => {
             initialValue: false,
             valuePropName: 'checked',
           })}
+          onClick={(checked) => { console.log(checked); }}
           disabled
         />}
       >默认关不可修改</List.Item>
@@ -48,6 +51,7 @@ let SwitchExample = (props) => {
             initialValue: true,
             valuePropName: 'checked',
           })}
+          onClick={(checked) => { console.log(checked); }}
           disabled
         />}
       >默认开不可修改</List.Item>

diff --git a/components/switch/index.web.tsx b/components/switch/index.web.tsx
@@ -10,6 +10,7 @@ export default class Switch extends React.Component<SwitchProps, any> {
     disabled: false,
     onChange() {},
     platform: 'cross',
+    onClick() {},
   };
 
   onChange = (e) => {
@@ -19,6 +20,18 @@ export default class Switch extends React.Component<SwitchProps, any> {
     }
   }
 
+  onClick = (e) => {
+    if (this.props.onClick) {
+      let val;
+      if (e && e.target && e.target.checked !== undefined) {
+        val = e.target.checked;
+      } else {
+        val = this.props.checked;
+      }
+      this.props.onClick(val);
+    }
+  }
+
   render() {
     let { prefixCls, style, name, checked, disabled, className, platform } = this.props;
     const isAndroid = platform === 'android' || (platform === 'cross' && !!navigator.userAgent.match(/Android/i));
@@ -28,16 +41,25 @@ export default class Switch extends React.Component<SwitchProps, any> {
       [`${prefixCls}-android`]: isAndroid,
     });
 
+    const fackInputCls = classNames({
+      [`checkbox`]: true,
+      [`checkbox-disabled`]: disabled,
+    });
+
     return (<label className={wrapCls} style={style} role="switch">
         <input
           type="checkbox"
           name={name}
           className={`${prefixCls}-checkbox`}
-          {...(disabled ? { disabled: 'disabled' } : '')}
+          disabled={disabled}
           checked={checked}
           onChange={this.onChange}
+          {...(!disabled ? { onClick: this.onClick } : {})}
+        />
+        <div
+          className={fackInputCls}
+          {...(disabled ? { onClick: this.onClick } : {})}
         />
-        <div className="checkbox" />
       </label>);
   }
 }
diff --git a/components/switch/index.zh-CN.md b/components/switch/index.zh-CN.md
@@ -25,3 +25,4 @@ subtitle: 滑动开关
 | onChange   | change 事件触发的回调函数 | (checked: bool): void |  无  |
 | name(`web only`)  | switch 的 name    | String   |      |
 | platform (`web only`) |  设定组件的平台特有样式, 可选值为 `android`, `ios`， 默认为 `cross`， 即组件会自动检测设备 UA 应用不同平台的样式    | String | `'cross'`|
+| onClick   | click事件触发的回调函数，当switch为disabled时，入参的值始终是默认传入的checked值。 | (checked: bool): void |  无  |
diff --git a/components/switch/style/index.less b/components/switch/style/index.less
@@ -52,6 +52,9 @@
       transition: all 200ms;
       box-shadow: 4px 4px 8px @color-shadow;
     }
+    &.checkbox-disabled {
+      z-index: 3;
+    }
   }
   input[type="checkbox"] {
     position: absolute;