[improved] Switch API enhancement

- add `value` prop,  resolves #44
- add `disabled` prop
- add `getValue()` method

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} />;
+```
+
 ## 示例

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';

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() {

src/js/Switch.js

@@ -1,31 +1,40 @@
-import React from 'react';
+import React, {
+  PropTypes,
+} from 'react';
 import classNames from 'classnames';
 import ClassNameMixin from './mixins/ClassNameMixin';
 
 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>

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__';
 

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;

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} & {