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 = ;
```
+#### 方法
+
+##### `.getValue()`
+
+获取状态,同使用 `ref` 一样,选中时返回 `true`,否则返回 `false`。
+
+```javascript
+function handleSwitch() {
+ console.log(this.getValue());
+}
+
+const mySwitch = ;
+```
+
## 示例
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 = ;
+const mySwitch = ;
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}
/>
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} & {