From 972737bcb676cc9a1c0229de6ed4eb89717c381f Mon Sep 17 00:00:00 2001
From: tengge1 <930372551@qq.com>
Date: Mon, 15 Jul 2019 19:40:14 +0800
Subject: [PATCH] =?UTF-8?q?ui=E6=8E=A7=E4=BB=B6=E8=A7=84=E8=8C=83=E5=8C=96?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                                    |  1 +
 .../src/editor2/component/CameraComponent.jsx |  8 ++---
 ShadowEditor.Web/src/ui/form/Button.jsx       | 19 +++++++++--
 ShadowEditor.Web/src/ui/form/CheckBox.jsx     | 25 ++++----------
 ShadowEditor.Web/src/ui/form/Form.jsx         | 27 +++++++--------
 ShadowEditor.Web/src/ui/form/FormControl.jsx  |  4 +--
 ShadowEditor.Web/src/ui/form/IconButton.jsx   | 17 ++++++++--
 ShadowEditor.Web/src/ui/form/Input.jsx        | 24 +++++++-------
 ShadowEditor.Web/src/ui/form/Label.jsx        | 10 ++++--
 ShadowEditor.Web/src/ui/form/Radio.jsx        | 33 ++++++++-----------
 ShadowEditor.Web/src/ui/form/SearchField.jsx  |  2 +-
 ShadowEditor.Web/src/ui/form/Select.jsx       | 30 +++++++++--------
 ShadowEditor.Web/src/ui/form/TextArea.jsx     | 33 +++++++------------
 ShadowEditor.Web/src/ui/form/Toggle.jsx       | 32 ++++++++----------
 ShadowEditor.Web/src/ui/form/css/Radio.css    |  4 +--
 ShadowEditor.Web/src/ui/form/css/Toggle.css   |  4 +--
 ShadowEditor.Web/src/ui/index.js              |  1 +
 17 files changed, 137 insertions(+), 137 deletions(-)

diff --git a/.gitignore b/.gitignore
index 077ea2a2..2b186112 100644
--- a/.gitignore
+++ b/.gitignore
@@ -100,3 +100,4 @@ typings/
 /ShadowEditor.UI/ShadowEditor.UI.csproj.user
 /ShadowEditor.UI/build
 /images/img
+/ShadowEditor.Web/src/ui2
diff --git a/ShadowEditor.Web/src/editor2/component/CameraComponent.jsx b/ShadowEditor.Web/src/editor2/component/CameraComponent.jsx
index 843b4246..47564d26 100644
--- a/ShadowEditor.Web/src/editor2/component/CameraComponent.jsx
+++ b/ShadowEditor.Web/src/editor2/component/CameraComponent.jsx
@@ -1,4 +1,4 @@
-import { PropertyGrid, PropertyGroup, TextProperty, DisplayProperty, CheckBoxProperty } from '../../third_party';
+import { PropertyGrid, PropertyGroup, TextProperty, DisplayProperty, CheckBoxProperty, NumberProperty } from '../../third_party';
 import SetValueCommand from '../../command/SetValueCommand';
 
 /**
@@ -28,9 +28,9 @@ class CameraComponent extends React.Component {
         const { show, expanded, fov, near, far } = this.state;
 
         return <PropertyGroup title={L_CAMERA_COMPONENT} show={show} expanded={expanded} onExpand={this.handleExpand}>
-            <TextProperty name={'fov'} label={L_FOV} value={fov} onChange={this.handleChangeFov}></TextProperty>
-            <TextProperty name={'near'} label={L_NEAR} value={near} onChange={this.handleChangeNear}></TextProperty>
-            <TextProperty name={'far'} label={L_FAR} value={far} onChange={this.handleChangeFar}></TextProperty>
+            <NumberProperty name={'fov'} label={L_FOV} value={fov} onChange={this.handleChangeFov}></NumberProperty>
+            <NumberProperty name={'near'} label={L_NEAR} value={near} onChange={this.handleChangeNear}></NumberProperty>
+            <NumberProperty name={'far'} label={L_FAR} value={far} onChange={this.handleChangeFar}></NumberProperty>
         </PropertyGroup>;
     }
 
diff --git a/ShadowEditor.Web/src/ui/form/Button.jsx b/ShadowEditor.Web/src/ui/form/Button.jsx
index f02b5658..de52cb81 100644
--- a/ShadowEditor.Web/src/ui/form/Button.jsx
+++ b/ShadowEditor.Web/src/ui/form/Button.jsx
@@ -7,32 +7,47 @@ import PropTypes from 'prop-types';
  * @author tengge / https://github.com/tengge1
  */
 class Button extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.handleClick = this.handleClick.bind(this, props.onClick);
+    }
+
     render() {
-        const { className, style, children, color, disabled, ...others } = this.props;
+        const { className, style, children, color, disabled } = this.props;
+
         return <button
             className={classNames('Button', color, disabled && 'disabled', className)}
             style={style}
             disabled={disabled}
-            {...others}>
+            onClick={this.handleClick}>
             {children}
         </button>;
     }
+
+    handleClick(onClick, event) {
+        onClick && onClick(this.props.name, event);
+    }
 }
 
 Button.propTypes = {
     className: PropTypes.string,
     style: PropTypes.object,
+    name: PropTypes.string,
     children: PropTypes.node,
     color: PropTypes.oneOf(['primary', 'success', 'warn', 'danger']),
     disabled: PropTypes.bool,
+    onClick: PropTypes.func,
 };
 
 Button.defaultProps = {
     className: null,
     style: null,
+    name: null,
     children: null,
     color: null,
     disabled: false,
+    onClick: null,
 };
 
 export default Button;
\ No newline at end of file
diff --git a/ShadowEditor.Web/src/ui/form/CheckBox.jsx b/ShadowEditor.Web/src/ui/form/CheckBox.jsx
index fefcf930..c9faefa6 100644
--- a/ShadowEditor.Web/src/ui/form/CheckBox.jsx
+++ b/ShadowEditor.Web/src/ui/form/CheckBox.jsx
@@ -10,34 +10,23 @@ class CheckBox extends React.Component {
     constructor(props) {
         super(props);
 
-        this.state = {
-            checked: props.checked,
-        };
-
         this.handleChange = this.handleChange.bind(this, props.onChange);
     }
 
-    handleChange(onChange, event) {
-        const target = event.target;
-        const name = target.getAttribute('name');
-        const checked = target.checked;
-
-        this.setState({ checked });
-
-        onChange && onChange(name, checked, event);
-    }
-
     render() {
-        const { className, style, name, checked, disabled, onChange } = this.props;
+        const { className, style, checked, disabled, onChange } = this.props;
         return <input
             type={'checkbox'}
             className={classNames('CheckBox', this.state.checked && 'checked', disabled && 'disabled', className)}
             style={style}
-            name={name}
-            defaultChecked={this.state.checked}
+            checked={this.state.checked}
             disabled={disabled}
             onClick={this.handleChange} />;
     }
+
+    handleChange(onChange, event) {
+        onChange && onChange(event.target.checked, this.props.name, event);
+    }
 }
 
 CheckBox.propTypes = {
@@ -52,7 +41,7 @@ CheckBox.propTypes = {
 CheckBox.defaultProps = {
     className: null,
     style: null,
-    name: undefined,
+    name: null,
     checked: false,
     disabled: false,
     onChange: null,
diff --git a/ShadowEditor.Web/src/ui/form/Form.jsx b/ShadowEditor.Web/src/ui/form/Form.jsx
index 94f5d992..98a0753d 100644
--- a/ShadowEditor.Web/src/ui/form/Form.jsx
+++ b/ShadowEditor.Web/src/ui/form/Form.jsx
@@ -13,39 +13,36 @@ class Form extends React.Component {
         this.handleSubmit = this.handleSubmit.bind(this, props.onSubmit);
     }
 
+    render() {
+        const { className, style, children, direction } = this.props;
+        return <form
+            className={classNames('Form', direction, className)}
+            style={style}
+            onSubmit={this.handleSubmit}>
+            {children}
+        </form>;
+    }
+
     handleSubmit(onSubmit) {
         event.preventDefault();
         onSubmit && onSubmit();
     }
-
-    render() {
-        const { className, style, children, direction, onSubmit, ...others } = this.props;
-        return <form
-            className={classNames('Form', direction, className)}
-            style={style}
-            onSubmit={this.handleSubmit}
-            {...others}>
-            {children}
-        </form>;
-    }
 }
 
 Form.propTypes = {
-    onSubmit: PropTypes.func,
-
     className: PropTypes.string,
     style: PropTypes.object,
     children: PropTypes.node,
     direction: PropTypes.oneOf(['horizontal', 'vertical']),
+    onSubmit: PropTypes.func,
 };
 
 Form.defaultProps = {
-    onSubmit: null,
-
     className: null,
     style: null,
     children: null,
     direction: 'horizontal',
+    onSubmit: null,
 };
 
 export default Form;
\ No newline at end of file
diff --git a/ShadowEditor.Web/src/ui/form/FormControl.jsx b/ShadowEditor.Web/src/ui/form/FormControl.jsx
index 68d27cd7..3a29e02a 100644
--- a/ShadowEditor.Web/src/ui/form/FormControl.jsx
+++ b/ShadowEditor.Web/src/ui/form/FormControl.jsx
@@ -8,9 +8,9 @@ import PropTypes from 'prop-types';
  */
 class FormControl extends React.Component {
     render() {
-        const { className, style, children, ...others } = this.props;
+        const { className, style, children } = this.props;
 
-        return <div className={classNames('FormControl', className)} style={style} {...others}>
+        return <div className={classNames('FormControl', className)} style={style}>
             {children}
         </div>;
     }
diff --git a/ShadowEditor.Web/src/ui/form/IconButton.jsx b/ShadowEditor.Web/src/ui/form/IconButton.jsx
index e40ac063..a32dbb9e 100644
--- a/ShadowEditor.Web/src/ui/form/IconButton.jsx
+++ b/ShadowEditor.Web/src/ui/form/IconButton.jsx
@@ -7,23 +7,33 @@ import PropTypes from 'prop-types';
  * @author tengge / https://github.com/tengge1
  */
 class IconButton extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.handleClick = this.handleClick.bind(this, props.onClick);
+    }
+
     render() {
-        const { className, style, icon, title, selected, onClick, ...others } = this.props;
+        const { className, style, icon, name, title, selected } = this.props;
         return <button
             className={classNames('IconButton', selected && 'selected', className)}
             style={style}
             title={title}
-            onClick={onClick}
-            {...others}>
+            onClick={this.handleClick}>
             <i className={classNames('iconfont', icon && 'icon-' + icon)}></i>
         </button>;
     }
+
+    handleClick(onClick, event) {
+        onClick && onClick(this.props.name, event);
+    };
 }
 
 IconButton.propTypes = {
     className: PropTypes.string,
     style: PropTypes.object,
     icon: PropTypes.string,
+    name: PropTypes.string,
     title: PropTypes.string,
     selected: PropTypes.bool,
     onClick: PropTypes.func,
@@ -33,6 +43,7 @@ IconButton.defaultProps = {
     className: null,
     style: null,
     icon: null,
+    name: null,
     title: null,
     selected: false,
     onClick: null,
diff --git a/ShadowEditor.Web/src/ui/form/Input.jsx b/ShadowEditor.Web/src/ui/form/Input.jsx
index 13059b76..fdd0122f 100644
--- a/ShadowEditor.Web/src/ui/form/Input.jsx
+++ b/ShadowEditor.Web/src/ui/form/Input.jsx
@@ -14,30 +14,31 @@ class Input extends React.Component {
         this.handleInput = this.handleInput.bind(this, props.onInput);
     }
 
-    handleChange(onChange, event) {
-        onChange && onChange(event.target.value, event);
-    }
-
-    handleInput(onInput, event) {
-        onInput && onInput(event.target.value, event);
-    }
-
     render() {
-        const { className, style, value, disabled, onChange, onInput } = this.props;
+        const { className, style, name, value, disabled } = this.props;
 
         return <input
             className={classNames('Input', className)}
             style={style}
             value={value}
+            disabled={disabled}
             onChange={this.handleChange}
-            onInput={this.handleInput}
-            disabled={disabled} />;
+            onInput={this.handleInput} />;
+    }
+
+    handleChange(onChange, event) {
+        onChange && onChange(event.target.value, this.props.name, event);
+    }
+
+    handleInput(onInput, event) {
+        onInput && onInput(event.target.value, this.props.name, event);
     }
 }
 
 Input.propTypes = {
     className: PropTypes.string,
     style: PropTypes.object,
+    name: PropTypes.string,
     value: PropTypes.string,
     disabled: PropTypes.bool,
     onChange: PropTypes.func,
@@ -47,6 +48,7 @@ Input.propTypes = {
 Input.defaultProps = {
     className: null,
     style: null,
+    name: null,
     value: '',
     disabled: false,
     onChange: null,
diff --git a/ShadowEditor.Web/src/ui/form/Label.jsx b/ShadowEditor.Web/src/ui/form/Label.jsx
index c8eb80a5..ea487903 100644
--- a/ShadowEditor.Web/src/ui/form/Label.jsx
+++ b/ShadowEditor.Web/src/ui/form/Label.jsx
@@ -7,10 +7,14 @@ import PropTypes from 'prop-types';
  * @author tengge / https://github.com/tengge1
  */
 class Label extends React.Component {
-    render() {
-        const { className, style, children, ...others } = this.props;
+    constructor(props) {
+        super(props);
+    }
 
-        return <label className={classNames('Label', className)} style={style} {...others}>
+    render() {
+        const { className, style, children } = this.props;
+
+        return <label className={classNames('Label', className)} style={style}>
             {children}
         </label>;
     }
diff --git a/ShadowEditor.Web/src/ui/form/Radio.jsx b/ShadowEditor.Web/src/ui/form/Radio.jsx
index 902ea2fe..8353dea8 100644
--- a/ShadowEditor.Web/src/ui/form/Radio.jsx
+++ b/ShadowEditor.Web/src/ui/form/Radio.jsx
@@ -10,40 +10,32 @@ class Radio extends React.Component {
     constructor(props) {
         super(props);
 
-        this.state = {
-            selected: props.selected,
-        };
-
         this.handleChange = this.handleChange.bind(this, props.onChange);
     }
 
-    handleChange(onChange, event) {
-        this.setState({
-            selected: event.target.checked,
-        });
-        onChange && onChange(event.target.checked, event);
-    }
-
     render() {
-        const { className, style, selected, disabled, onChange, ...others } = this.props;
-        return <input
-            type={'radio'}
+        const { className, style, checked, disabled } = this.props;
+        return <input type={'radio'}
             className={classNames('Radio',
-                this.state.selected && 'selected',
+                this.state.checked && 'checked',
                 disabled && 'disabled',
                 className)}
             style={style}
-            defaultChecked={this.state.selected}
+            checked={this.state.checked}
             disabled={disabled}
-            onClick={this.handleChange}
-            {...others} />;
+            onClick={this.handleChange} />;
+    }
+
+    handleChange(onChange, event) {
+        onChange && onChange(event.target.checked, this.props.name, event);
     }
 }
 
 Radio.propTypes = {
     className: PropTypes.string,
     style: PropTypes.object,
-    selected: PropTypes.bool,
+    name: PropTypes.string,
+    checked: PropTypes.bool,
     disabled: PropTypes.bool,
     onChange: PropTypes.func,
 };
@@ -51,7 +43,8 @@ Radio.propTypes = {
 Radio.defaultProps = {
     className: null,
     style: null,
-    selected: false,
+    name: null,
+    checked: false,
     disabled: false,
     onChange: null,
 };
diff --git a/ShadowEditor.Web/src/ui/form/SearchField.jsx b/ShadowEditor.Web/src/ui/form/SearchField.jsx
index 736da8c9..7d4de115 100644
--- a/ShadowEditor.Web/src/ui/form/SearchField.jsx
+++ b/ShadowEditor.Web/src/ui/form/SearchField.jsx
@@ -105,7 +105,7 @@ class SearchField extends React.Component {
         });
     }
 
-    handleCheckBoxChange(onInput, onChange, name, checked, event) {
+    handleCheckBoxChange(onInput, onChange, checked, name, event) {
         let categories = this.state.categories;
         let index = categories.indexOf(name);
 
diff --git a/ShadowEditor.Web/src/ui/form/Select.jsx b/ShadowEditor.Web/src/ui/form/Select.jsx
index d9e9db64..9721b1c6 100644
--- a/ShadowEditor.Web/src/ui/form/Select.jsx
+++ b/ShadowEditor.Web/src/ui/form/Select.jsx
@@ -13,21 +13,8 @@ class Select extends React.Component {
         this.handleChange = this.handleChange.bind(this, props.onChange);
     }
 
-    handleChange(onChange, event) {
-        const selectedIndex = event.target.selectedIndex;
-
-        if (selectedIndex === -1) {
-            onChange && onChange(null, event);
-            return;
-        }
-
-        const value = event.target.options[selectedIndex].value;
-
-        onChange && onChange(value, event);
-    }
-
     render() {
-        const { className, style, options, value, disabled, onChange } = this.props;
+        const { className, style, options, value, disabled } = this.props;
 
         return <select
             className={classNames('Select', className)}
@@ -40,12 +27,26 @@ class Select extends React.Component {
             })}
         </select>;
     }
+
+    handleChange(onChange, event) {
+        const selectedIndex = event.target.selectedIndex;
+
+        if (selectedIndex === -1) {
+            onChange && onChange(null, event);
+            return;
+        }
+
+        const value = event.target.options[selectedIndex].value;
+
+        onChange && onChange(value, this.props.name, event);
+    }
 }
 
 Select.propTypes = {
     className: PropTypes.string,
     style: PropTypes.object,
     options: PropTypes.object,
+    name: PropTypes.string,
     value: PropTypes.string,
     disabled: PropTypes.bool,
     onChange: PropTypes.func,
@@ -55,6 +56,7 @@ Select.defaultProps = {
     className: null,
     style: null,
     options: null,
+    name: null,
     value: null,
     disabled: false,
     onChange: null,
diff --git a/ShadowEditor.Web/src/ui/form/TextArea.jsx b/ShadowEditor.Web/src/ui/form/TextArea.jsx
index de84578d..8bee7a75 100644
--- a/ShadowEditor.Web/src/ui/form/TextArea.jsx
+++ b/ShadowEditor.Web/src/ui/form/TextArea.jsx
@@ -10,44 +10,34 @@ class TextArea extends React.Component {
     constructor(props) {
         super(props);
 
-        this.state = {
-            value: props.value,
-        };
-
         this.handleChange = this.handleChange.bind(this, props.onChange);
         this.handleInput = this.handleInput.bind(this, props.onInput);
     }
 
-    handleChange(onChange, event) {
-        this.setState({
-            value: event.target.value,
-        });
-        onChange && onChange(event.target.value, event);
-    }
-
-    handleInput(onInput, event) {
-        this.setState({
-            value: event.target.value,
-        });
-        onInput && onInput(event.target.value, event);
-    }
-
     render() {
-        const { className, style, value, onChange, onInput, ...others } = this.props;
+        const { className, style, value } = this.props;
 
         return <textarea
             className={classNames('TextArea', className)}
             style={style}
             value={this.state.value}
             onChange={this.handleChange}
-            onInput={this.handleInput}
-            {...others}></textarea>;
+            onInput={this.handleInput}></textarea>;
+    }
+
+    handleChange(onChange, event) {
+        onChange && onChange(event.target.value, this.props.name, event);
+    }
+
+    handleInput(onInput, event) {
+        onInput && onInput(event.target.value, this.props.name, event);
     }
 }
 
 TextArea.propTypes = {
     className: PropTypes.string,
     style: PropTypes.object,
+    name: PropTypes.string,
     value: PropTypes.string,
     onChange: PropTypes.func,
     onInput: PropTypes.func,
@@ -56,6 +46,7 @@ TextArea.propTypes = {
 TextArea.defaultProps = {
     className: null,
     style: null,
+    name: null,
     value: '',
     onChange: null,
     onInput: null,
diff --git a/ShadowEditor.Web/src/ui/form/Toggle.jsx b/ShadowEditor.Web/src/ui/form/Toggle.jsx
index 8a93ebdd..fcd4b0ec 100644
--- a/ShadowEditor.Web/src/ui/form/Toggle.jsx
+++ b/ShadowEditor.Web/src/ui/form/Toggle.jsx
@@ -10,39 +10,32 @@ 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, onChange, ...others } = this.props;
+        const { className, style, checked, disabled, onChange } = this.props;
 
         return <div
-            className={classNames('Toggle', this.state.selected && 'selected',
+            className={classNames('Toggle', this.state.checked && 'checked',
                 disabled && 'disabled',
                 className)}
             style={style}
-            onClick={disabled ? null : this.handleChange}
-            {...others}></div>;
+            onClick={disabled ? null : this.handleChange}></div>;
+    }
+
+    handleChange(onChange, event) {
+        var checked = event.target.classList.contains('checked');
+
+        onChange && onChange(!checked, this.props.name, event);
     }
 }
 
 Toggle.propTypes = {
     className: PropTypes.string,
     style: PropTypes.object,
-    selected: PropTypes.bool,
+    name: PropTypes.string,
+    checked: PropTypes.bool,
     disabled: PropTypes.bool,
     onChange: PropTypes.func,
 };
@@ -50,7 +43,8 @@ Toggle.propTypes = {
 Toggle.defaultProps = {
     className: null,
     style: null,
-    selected: false,
+    name: null,
+    checked: false,
     disabled: false,
     onChange: null,
 };
diff --git a/ShadowEditor.Web/src/ui/form/css/Radio.css b/ShadowEditor.Web/src/ui/form/css/Radio.css
index bb57f091..3c0dc143 100644
--- a/ShadowEditor.Web/src/ui/form/css/Radio.css
+++ b/ShadowEditor.Web/src/ui/form/css/Radio.css
@@ -7,7 +7,7 @@
     cursor: pointer;
 }
 
-.Radio.selected {
+.Radio.checked {
     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFlSURBVDhP1ZO/SsNQFMYzKuimm4OPoFVxlKoFoTrqI+gDiIhro4KLm9C61ERaseDiE2gRlOqmiLRd62w61enzftcTcluTNHbrDw5cknM+zl9ruJk4wfhcAYupAnZofE+eYUx+/4/0BQ7WS2hsVeDZd+jQ+N4oo77sYF/ckrHqonZcxRciOKzCyzh4FPd4KHbzLpExXL8BGRdPEhYOy+zNrP0NvHz+Gt8m9j28tIM9Ce+GA2DPxFdz+wEsFQE1DG1885tJtozm1ClGRSaAE2TTxU9nY4qZomammypm5hwLIhPAtVAldMQPz62/Yr7xn09OTT+Vx7bIBAwqyJhQQeU4cMmzecyLTAAvgEsrfpqkQ5kuYkRkuuEFHKmlFV8Ns2GJNDMzovrXXnGxK+Hh8AIqamn7cfUKrF3iQcLi4QXYPZmaMLPEYj68gGwJTTadk6TxzZ71LTMKXgCXlmtB4zQjBzAkWNYPuWx6Vj2oQrgAAAAASUVORK5CYII=);
 }
 
@@ -16,6 +16,6 @@
     cursor: default;
 }
 
-.Radio.selected.disabled {
+.Radio.checked.disabled {
     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAE1SURBVDhP1ZNJDoJAEEVZaiK30XgjPYAhxvuZaDwCegMmGUIIC9r/6UIaRBR3vqRip4ZPdVVr/TdKKdv3/bXneVsaz/AtJDwNFB/CMLzC4jRNCxrPQRC4iO0l7TtQdIHAHd0MkiRJDNGTpI9DsTzPpfQ9zEHuWcqG4TX7nVVVpcqyrI1nE3aKMThS3gVxmzPTqZqiKBQ+orCQ2nimzwQ1N/zMRaYFyWsOXafpzkwxU9TslDXwrUSmBcnbLMuen+cV+2KNMdbA7cO3EZkWOH8SZA18r4K/XjmKohj+pci0ILZA0NVpmglLmYlMFxTsMZNnl4Td8Io0szOCZ5PgLe6kfBiIniY87KOUjcN/QL9TE+nsO7EGzMbhfLgobpLGBdD38ZrvQDNzjGCFhWzElvANL+BPsKwHYaPc6BXkh3gAAAAASUVORK5CYII=);
 }
\ No newline at end of file
diff --git a/ShadowEditor.Web/src/ui/form/css/Toggle.css b/ShadowEditor.Web/src/ui/form/css/Toggle.css
index 01e8a1b0..1c368baf 100644
--- a/ShadowEditor.Web/src/ui/form/css/Toggle.css
+++ b/ShadowEditor.Web/src/ui/form/css/Toggle.css
@@ -7,7 +7,7 @@
     cursor: pointer;
 }
 
-.Toggle.selected {
+.Toggle.checked {
     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAUCAYAAADoZO9yAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABRSURBVEhLYzCe+f//YMDDxyEzz/z/P4NMXL8fYQ7FDqEEnHmGMGfUISAw6hB0MOoQdDDqEHQw6hB0MOoQdDA8HQJqBpCLqdoMoBYeJA75/x8AV8uDZSB9PMIAAAAASUVORK5CYII=);
 }
 
@@ -16,6 +16,6 @@
     cursor: default;
 }
 
-.Toggle.selected.disabled {
+.Toggle.checked.disabled {
     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAUCAYAAADoZO9yAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABQSURBVEhL7dahCgAgDIRh3/9Vrw1WVhTLwmEQNci4H66Or2kD0H9YHYi7H8/M8s415KaIyDuCzAThBOEE4QThBOFqQlbP++6efgNe7RMI+gDSby3zpGs0DgAAAABJRU5ErkJggg==);
 }
\ No newline at end of file
diff --git a/ShadowEditor.Web/src/ui/index.js b/ShadowEditor.Web/src/ui/index.js
index 80d3e37b..de379a01 100644
--- a/ShadowEditor.Web/src/ui/index.js
+++ b/ShadowEditor.Web/src/ui/index.js
@@ -58,6 +58,7 @@ export { default as PropertyGroup } from './property/PropertyGroup.jsx';
 export { default as DisplayProperty } from './property/DisplayProperty.jsx';
 export { default as TextProperty } from './property/TextProperty.jsx';
 export { default as CheckBoxProperty } from './property/CheckBoxProperty.jsx';
+export { default as NumberProperty } from './property/NumberProperty.jsx';
 
 // svg
 export { default as SVG } from './svg/SVG.jsx';