diff --git a/ShadowEditor.UI/src/image/Image.jsx b/ShadowEditor.UI/src/image/Image.jsx
index 2e0608a9..7d8dddeb 100644
--- a/ShadowEditor.UI/src/image/Image.jsx
+++ b/ShadowEditor.UI/src/image/Image.jsx
@@ -8,23 +8,28 @@ import PropTypes from 'prop-types';
*/
class Image extends React.Component {
render() {
- const { className, style, ...others } = this.props;
+ const { className, style, src, title } = this.props;
return
;
+ src={src}
+ title={title}>;
}
}
Image.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
+ src: PropTypes.string,
+ title: PropTypes.string,
};
Image.defaultProps = {
className: null,
style: null,
+ src: null,
+ title: null,
};
export default Image;
\ No newline at end of file
diff --git a/ShadowEditor.UI/src/image/ImageUploader.jsx b/ShadowEditor.UI/src/image/ImageUploader.jsx
new file mode 100644
index 00000000..204e63c1
--- /dev/null
+++ b/ShadowEditor.UI/src/image/ImageUploader.jsx
@@ -0,0 +1,81 @@
+import './css/ImageUploader.css';
+import classNames from 'classnames/bind';
+import PropTypes from 'prop-types';
+
+/**
+ * 图片上传控件
+ * @author tengge / https://github.com/tengge1
+ */
+class ImageUploader extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.handleSelect = this.handleSelect.bind(this);
+ this.handleChange = this.handleChange.bind(this, props.onChange);
+ }
+
+ render() {
+ const { className, style, url, server, noImageText } = this.props;
+
+ if (url && url != 'null') {
+ return
;
+ } else {
+ return
+ {noImageText}
+
;
+ }
+ }
+
+ componentDidMount() {
+ var input = document.createElement('input');
+ input.type = 'file';
+ input.style.display = 'none';
+ input.addEventListener('change', this.handleChange);
+
+ document.body.appendChild(input);
+
+ this.input = input;
+ }
+
+ componentWillUnmount() {
+ var input = this.input;
+ input.removeEventListener('change', this.handleChange);
+
+ document.body.removeChild(input);
+
+ this.input = null;
+ }
+
+ handleSelect() {
+ this.input.click();
+ }
+
+ handleChange(onChange, event) {
+ onChange && onChange(event.target.files[0], event);
+ }
+}
+
+ImageUploader.propTypes = {
+ className: PropTypes.string,
+ style: PropTypes.object,
+ url: PropTypes.string,
+ server: PropTypes.string,
+ noImageText: PropTypes.string,
+ onChange: PropTypes.func,
+};
+
+ImageUploader.defaultProps = {
+ className: null,
+ style: null,
+ url: null,
+ server: '',
+ noImageText: 'No Image',
+ onChange: null,
+};
+
+export default ImageUploader;
\ No newline at end of file
diff --git a/ShadowEditor.UI/src/image/css/ImageUploader.css b/ShadowEditor.UI/src/image/css/ImageUploader.css
new file mode 100644
index 00000000..b9f7b565
--- /dev/null
+++ b/ShadowEditor.UI/src/image/css/ImageUploader.css
@@ -0,0 +1,15 @@
+.ImageUploader {
+ max-width: 160px;
+ max-height: 120px;
+ border-radius: 2px;
+ cursor: pointer;
+}
+
+.ImageUploader.empty {
+ width: 160px;
+ height: 120px;
+ border: 1px solid #ccc;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+}
\ No newline at end of file
diff --git a/ShadowEditor.UI/src/index.js b/ShadowEditor.UI/src/index.js
index 78744300..c008efb7 100644
--- a/ShadowEditor.UI/src/index.js
+++ b/ShadowEditor.UI/src/index.js
@@ -36,6 +36,7 @@ export { default as Icon } from './icon/Icon.jsx';
// image
export { default as Image } from './image/Image.jsx';
export { default as ImageList } from './image/ImageList.jsx';
+export { default as ImageUploader } from './image/ImageUploader.jsx';
// layout
export { default as AbsoluteLayout } from './layout/AbsoluteLayout.jsx';
diff --git a/ShadowEditor.Web/src/editor2/assets/window/EditWindow.jsx b/ShadowEditor.Web/src/editor2/assets/window/EditWindow.jsx
index 258be65c..378e2394 100644
--- a/ShadowEditor.Web/src/editor2/assets/window/EditWindow.jsx
+++ b/ShadowEditor.Web/src/editor2/assets/window/EditWindow.jsx
@@ -1,4 +1,4 @@
-import { classNames, PropTypes, Window, Content, Buttons, Form, FormControl, Label, Input, Select, Button } from '../../../third_party';
+import { classNames, PropTypes, Window, Content, Buttons, Form, FormControl, Label, Input, Select, ImageUploader, Button } from '../../../third_party';
import Ajax from '../../../utils/Ajax';
/**
@@ -13,12 +13,14 @@ class EditWindow extends React.Component {
name: props.data.Name,
categories: null,
categoryID: props.data.CategoryID,
+ thumbnail: props.data.Thumbnail,
};
this.updateUI = this.updateUI.bind(this);
this.handleNameChange = this.handleNameChange.bind(this);
this.handleCategoryChange = this.handleCategoryChange.bind(this);
+ this.handleThumbnailChange = this.handleThumbnailChange.bind(this);
this.handleSave = this.handleSave.bind(this, props.callback);
this.handleClose = this.handleClose.bind(this);
@@ -26,11 +28,11 @@ class EditWindow extends React.Component {
render() {
const { typeName } = this.props;
- const { name, categories, categoryID } = this.state;
+ const { name, categories, categoryID, thumbnail } = this.state;
return
@@ -43,6 +45,10 @@ class EditWindow extends React.Component {
+
+
+
+
@@ -82,6 +88,10 @@ class EditWindow extends React.Component {
});
}
+ handleThumbnailChange(event) {
+
+ }
+
handleSave() {
const { data, saveUrl, callback } = this.props;
const { name, categoryID } = this.state;