From 6769e0fed9f0c5b7a175163a99344c2cf2e17dfb Mon Sep 17 00:00:00 2001
From: minwe <minwe@yunshipei.com>
Date: Mon, 16 May 2016 14:41:12 +0800
Subject: [PATCH] [improved] Switch API enhancement

- add `value` prop,  resolves #44
- add `disabled` prop
- add `getValue()` method
---
 docs/form/api.md                  | 28 +++++++++++++++++++++++++++-
 kitchen-sink/amazeui-touch.js     |  3 +--
 kitchen-sink/pages/FormExample.js |  4 ++--
 src/js/Switch.js                  | 25 ++++++++++++++++++-------
 src/js/index.js                   |  3 +--
 src/scss/_variables.scss          |  2 +-
 src/scss/components/_switch.scss  | 18 ++++++++++++++----
 7 files changed, 64 insertions(+), 19 deletions(-)

diff --git a/docs/form/api.md b/docs/form/api.md
index 6e1d18f..7ade580 100644
--- a/docs/form/api.md
+++ b/docs/form/api.md
@@ -84,13 +84,25 @@
 
 `name` 属性应用到内部的 `input` 元素上，可用于传统的表单提交。
 
+##### `value`
+
+> PropType: `bool`
+
+`value` 值应用到内部 `input` 元素的 `defaultChecked` 属性上，设置是否选中（[*uncontrolled*](http://facebook.github.io/react/docs/forms.html#uncontrolled-components)）。
+
+##### `disabled`
+
+> PropType: `bool`
+
+是否禁用 Switch。
+
 ##### `onValueChange`
 
 > PropType: `func`
 
 Switch 值发生变化时处理函数。
 
-#### Refs
+#### Ref
 
 ##### `field`
 
@@ -104,4 +116,18 @@ function handleSwitch() {
 const mySwitch = <Switch onValueChange={handleSwitch} />;
 ```
 
+#### 方法
+
+##### `.getValue()`
+
+获取状态，同使用 `ref` 一样，选中时返回 `true`，否则返回 `false`。
+
+```javascript
+function handleSwitch() {
+  console.log(this.getValue());
+}
+
+const mySwitch = <Switch onValueChange={handleSwitch} />;
+```
+
 ## 示例
diff --git a/kitchen-sink/amazeui-touch.js b/kitchen-sink/amazeui-touch.js
index 74590be..8e88d90 100644
--- a/kitchen-sink/amazeui-touch.js
+++ b/kitchen-sink/amazeui-touch.js
@@ -1,4 +1,4 @@
-let amStyles = [
+export let amStyles = [
   'Primary',
   'Secondary',
   'Success',
@@ -7,5 +7,4 @@ let amStyles = [
   'Dark'
 ];
 
-export {amStyles as amStyles};
 export * from '../src/js';
diff --git a/kitchen-sink/pages/FormExample.js b/kitchen-sink/pages/FormExample.js
index 6dbac81..2139826 100644
--- a/kitchen-sink/pages/FormExample.js
+++ b/kitchen-sink/pages/FormExample.js
@@ -32,10 +32,10 @@ let fields = [
 const devices = ['iPhone 6', 'MacBook Pro Retina', 'iMac 5K'];
 
 function handleSwitch() {
-  console.log(this.refs.field.checked);
+  console.log(this.getValue());
 }
 
-const mySwitch = <Switch onValueChange={handleSwitch} />;
+const mySwitch = <Switch onValueChange={handleSwitch} defaultChecked />;
 
 const FormExample = React.createClass({
   render() {
diff --git a/src/js/Switch.js b/src/js/Switch.js
index 1065717..8b96ead 100644
--- a/src/js/Switch.js
+++ b/src/js/Switch.js
@@ -1,4 +1,6 @@
-import React from 'react';
+import React, {
+  PropTypes,
+} from 'react';
 import classNames from 'classnames';
 import ClassNameMixin from './mixins/ClassNameMixin';
 
@@ -6,26 +8,33 @@ const Switch = React.createClass({
   mixins: [ClassNameMixin],
 
   propTypes: {
-    classPrefix: React.PropTypes.string.isRequired,
-    name: React.PropTypes.string,
-    amStyle: React.PropTypes.string,
-    onValueChange: React.PropTypes.func,
+    classPrefix: PropTypes.string.isRequired,
+    name: PropTypes.string,
+    amStyle: PropTypes.string,
+    disabled: PropTypes.bool,
+    value: PropTypes.bool,
+    onValueChange: PropTypes.func,
   },
 
   getDefaultProps() {
     return {
       classPrefix: 'switch',
-      onValueChange: function() {
-      },
+      onValueChange: () => {},
     };
   },
 
+  getValue() {
+    return this.refs.field.checked;
+  },
+
   render() {
     let classSet = this.getClassSet();
     const {
       name,
       className,
       onValueChange,
+      value,
+      disabled,
       ...props
     } = this.props;
 
@@ -39,6 +48,8 @@ const Switch = React.createClass({
           name={name}
           type="checkbox"
           ref="field"
+          defaultChecked={value}
+          disabled={disabled}
         />
         <span className={this.prefixClass('label')} />
       </label>
diff --git a/src/js/index.js b/src/js/index.js
index 8b287ec..36de7bf 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -1,6 +1,5 @@
-// TODO: why `export Button from './Button'` not works?
 // @see http://jamesknelson.com/re-exporting-es6-modules/
-// @see https://github.com/Microsoft/TypeScript/issues/2726
+// @see http://exploringjs.com/es6/ch_modules.html#sec_all-exporting-styles
 
 export const VERSION = '__VERSION__';
 
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index c0312a7..6ebd7e7 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -400,7 +400,7 @@ $slider-caption-color: $white !default;
 // Switch Variables
 // -----------------------------------------------------------------------------
 $switch-prefix: #{$namespace}switch !default;
-$switch-background: #ddd !default;
+$switch-background: #aaa !default;
 $switch-background-active: $global-primary !default;
 $switch-inner-background: $white !default;
 $switch-radius: 9999px !default;
diff --git a/src/scss/components/_switch.scss b/src/scss/components/_switch.scss
index 20cc49d..c3633db 100644
--- a/src/scss/components/_switch.scss
+++ b/src/scss/components/_switch.scss
@@ -41,10 +41,10 @@
 @mixin switch-label-base() {
   position: relative;
   display: block;
-  outline: none;
-  cursor: pointer;
-  user-select: none;
-  touch-action: manipulation;
+  // outline: none;
+  // cursor: pointer;
+  // user-select: none;
+  // touch-action: manipulation;
 }
 
 // Output
@@ -55,7 +55,10 @@
   overflow: hidden;
   vertical-align: middle;
   align-self: center;
+  outline: none;
   cursor: pointer;
+  user-select: none;
+  touch-action: manipulation;
 
   input[type="checkbox"] {
     position: absolute;
@@ -70,6 +73,13 @@
     }
   }
 
+  // status modifier: disabled
+  &.#{map-get($am-states, disabled)} {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
   @include switch-style();
 
   .#{$list-prefix} & {