From 83387249c1463b7c11b479c074cb1af1c7ff6530 Mon Sep 17 00:00:00 2001
From: tengge1 <930372551@qq.com>
Date: Tue, 21 May 2019 21:30:05 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=80=E5=85=B3=E4=BC=98=E5=8C=96=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ShadowEditor.UI/src/form/Radio.jsx      |  2 +-
 ShadowEditor.UI/src/form/Toggle.jsx     | 51 ++++++++++++++++++++++---
 ShadowEditor.UI/src/form/css/Radio.css  |  2 +
 ShadowEditor.UI/src/form/css/Toggle.css |  2 +
 4 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/ShadowEditor.UI/src/form/Radio.jsx b/ShadowEditor.UI/src/form/Radio.jsx
index f3ff1bcc..902ea2fe 100644
--- a/ShadowEditor.UI/src/form/Radio.jsx
+++ b/ShadowEditor.UI/src/form/Radio.jsx
@@ -25,7 +25,7 @@ class Radio extends React.Component {
     }
 
     render() {
-        const { className, style, disabled, selected, onChange, ...others } = this.props;
+        const { className, style, selected, disabled, onChange, ...others } = this.props;
         return <input
             type={'radio'}
             className={classNames('Radio',
diff --git a/ShadowEditor.UI/src/form/Toggle.jsx b/ShadowEditor.UI/src/form/Toggle.jsx
index 94b8fd99..8a93ebdd 100644
--- a/ShadowEditor.UI/src/form/Toggle.jsx
+++ b/ShadowEditor.UI/src/form/Toggle.jsx
@@ -1,19 +1,58 @@
 import './css/Toggle.css';
 import classNames from 'classnames/bind';
+import PropTypes from 'prop-types';
 
 /**
  * 开关
  * @author tengge / https://github.com/tengge1
- * @property {String} className 样式类
- * @property {Object} style 样式
- * @property {Boolean} selected 是否选中
- * @property {Boolean} disabled 是否禁用
  */
 class Toggle extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            selected: props.selected,
+        };
+
+        this.handleChange = this.handleChange.bind(this, props.onChange);
+    }
+
+    handleChange(onChange, event) {
+        var selected = event.target.classList.contains('selected');
+
+        this.setState({
+            selected: !selected,
+        });
+        onChange && onChange(!selected, event);
+    }
+
     render() {
-        const { className, style, selected, disabled } = this.props;
-        return <div className={classNames('Toggle', selected ? 'selected' : null, disabled ? 'disabled' : null, className)} style={style}></div>;
+        const { className, style, selected, disabled, onChange, ...others } = this.props;
+
+        return <div
+            className={classNames('Toggle', this.state.selected && 'selected',
+                disabled && 'disabled',
+                className)}
+            style={style}
+            onClick={disabled ? null : this.handleChange}
+            {...others}></div>;
     }
 }
 
+Toggle.propTypes = {
+    className: PropTypes.string,
+    style: PropTypes.object,
+    selected: PropTypes.bool,
+    disabled: PropTypes.bool,
+    onChange: PropTypes.func,
+};
+
+Toggle.defaultProps = {
+    className: null,
+    style: null,
+    selected: false,
+    disabled: false,
+    onChange: null,
+};
+
 export default Toggle;
\ No newline at end of file
diff --git a/ShadowEditor.UI/src/form/css/Radio.css b/ShadowEditor.UI/src/form/css/Radio.css
index 9aeb248d..bb57f091 100644
--- a/ShadowEditor.UI/src/form/css/Radio.css
+++ b/ShadowEditor.UI/src/form/css/Radio.css
@@ -4,6 +4,7 @@
     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEiSURBVDhP1ZPLaoNAGIVdttC+TUveqHmAEkp3br0gKCq60bfwti40BNF9kodIusrOzIFTxNYxE3d+8MOg/znM/Bdt2RiG8WxZ1krEmrHSdf2Jv+/Ddd3POI4PSZKci6K4IHCOomjved4H09TwfX9XVdWpkyDMz0EQfDN9Gpi1bUupnKZpOpG7pWwcPHPqZn/BTcXzN5QPQQNQM+YqI2p6dBznkTY96CCKzjxloLFt+5U2PRgLdJJ5yuR5fjFN8402PXMNoZEZzn6yqP8LbXqwAaIpe+Ypg6akafpAmyHYgLIslW+ZZdmP0LxTPg42AEN7i7quuzAMvyibBhuAoaX2H7iZstkv2ADUB0VHJxE449vNZ8rABmBoMRYIdFPagIWgaVdKsJshjm46QwAAAABJRU5ErkJggg==);
     display: inline-block;
     -webkit-appearance: none;
+    cursor: pointer;
 }
 
 .Radio.selected {
@@ -12,6 +13,7 @@
 
 .Radio.disabled {
     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEFSURBVDhP1ZNdCsIwEIT7qGBvo3gjPYCU4v0ExSOoN+ifTUvpW52hI0FJY/TNDxZLsjNsdtfovxmGIc7zfJ1l2ZbBb5wtdP0dEO/Lsrwi6qZpega/i6K44C5VWhgQnWFwRzVOjDE1TI9K90OzrusknYY5yD1J5obP9FX2DitFGxLJX8F9zJ6NqeFAc8PPXDYWTpBNH9PCoQbalWwsXIu2bXvlBcPpQ7uRjeVXQ2qchr8+uaqqGoZL2Vhwt8DlZUwLR0OZyeYVVJmiJ8FVYm0MdnEnuRuYHr9Y7INkfvgP8FWqysLMnqA3CfvDQXGSDA6AZx+fOQWKmXNpuRaKJc7cA/gTougBp8flNLlkjQ0AAAAASUVORK5CYII=);
+    cursor: default;
 }
 
 .Radio.selected.disabled {
diff --git a/ShadowEditor.UI/src/form/css/Toggle.css b/ShadowEditor.UI/src/form/css/Toggle.css
index 2229a499..01e8a1b0 100644
--- a/ShadowEditor.UI/src/form/css/Toggle.css
+++ b/ShadowEditor.UI/src/form/css/Toggle.css
@@ -4,6 +4,7 @@
     margin: 0 4px;
     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAUCAYAAADoZO9yAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABYSURBVEhL7da9CQAgDIRR918gC2SBzJGhImlEzsofMMUJrz2+dDYRiQrqhZhZuPsxVV3Gd4yQHLt5ecg8vIshiCGIIYghiCGIIaheSA5lzKln34DfioRIdJ5veQfy/zjLAAAAAElFTkSuQmCC);
     display: inline-block;
+    cursor: pointer;
 }
 
 .Toggle.selected {
@@ -12,6 +13,7 @@
 
 .Toggle.disabled {
     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAUCAYAAADoZO9yAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABVSURBVEhL7dY7CgAgDERB73/VEEiTOpJGZK38gClWmHZ56WwiEhXUCzGzcPdjqrqM7xghOXbz8pB5eBdDEEMQQxBDEEMQQ1C9kBzKmFPPvgG/FQmR6IJTLfO1daX2AAAAAElFTkSuQmCC);
+    cursor: default;
 }
 
 .Toggle.selected.disabled {