From aa1a107dff67167ed7819a7a0a219c02bb4e71dd Mon Sep 17 00:00:00 2001
From: tengge1 <930372551@qq.com>
Date: Mon, 24 Jun 2019 20:37:48 +0800
Subject: [PATCH] =?UTF-8?q?=E6=90=9C=E7=B4=A2=E6=A1=86=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/editor/assets/ScenePanel.jsx          |  6 +-
 ShadowEditor.UI/src/form/SearchField.jsx      | 64 +++++++++++++++++++
 2 files changed, 69 insertions(+), 1 deletion(-)

diff --git a/ShadowEditor.UI/src/editor/assets/ScenePanel.jsx b/ShadowEditor.UI/src/editor/assets/ScenePanel.jsx
index 5eaf5320..cdbd35a6 100644
--- a/ShadowEditor.UI/src/editor/assets/ScenePanel.jsx
+++ b/ShadowEditor.UI/src/editor/assets/ScenePanel.jsx
@@ -1,6 +1,7 @@
 import classNames from 'classnames/bind';
 import PropTypes from 'prop-types';
 
+import SearchField from '../../form/SearchField.jsx';
 import ImageList from '../../image/ImageList.jsx';
 
 /**
@@ -9,7 +10,10 @@ import ImageList from '../../image/ImageList.jsx';
  */
 class ScenePanel extends React.Component {
     render() {
-        return <ImageList></ImageList>;
+        return <div className={'ScenePanel'}>
+            <SearchField></SearchField>
+            <ImageList></ImageList>
+        </div>;
     }
 }
 
diff --git a/ShadowEditor.UI/src/form/SearchField.jsx b/ShadowEditor.UI/src/form/SearchField.jsx
index e69de29b..b257e6ef 100644
--- a/ShadowEditor.UI/src/form/SearchField.jsx
+++ b/ShadowEditor.UI/src/form/SearchField.jsx
@@ -0,0 +1,64 @@
+import './css/Input.css';
+import classNames from 'classnames/bind';
+import PropTypes from 'prop-types';
+
+/**
+ * 搜索框
+ * @author tengge / https://github.com/tengge1
+ */
+class SearchField 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;
+
+        return <input
+            className={classNames('Input', className)}
+            style={style}
+            value={this.state.value}
+            onChange={this.handleChange}
+            onInput={this.handleInput}
+            {...others} />;
+    }
+}
+
+SearchField.propTypes = {
+    className: PropTypes.string,
+    style: PropTypes.object,
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+    onInput: PropTypes.func,
+};
+
+SearchField.defaultProps = {
+    className: null,
+    style: null,
+    value: '',
+    onChange: null,
+    onInput: null,
+};
+
+export default SearchField;
\ No newline at end of file