From c7a2f78f0e2ca29f233cdb937bc7592a8669e6fc Mon Sep 17 00:00:00 2001 From: tengge1 <930372551@qq.com> Date: Sat, 6 Jul 2019 19:58:32 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E7=89=87=E4=B8=8A=E4=BC=A0=E6=8E=A7?= =?UTF-8?q?=E4=BB=B6=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ShadowEditor.UI/src/image/Image.jsx | 9 ++- ShadowEditor.UI/src/image/ImageUploader.jsx | 81 +++++++++++++++++++ .../src/image/css/ImageUploader.css | 15 ++++ ShadowEditor.UI/src/index.js | 1 + .../src/editor2/assets/window/EditWindow.jsx | 16 +++- 5 files changed, 117 insertions(+), 5 deletions(-) create mode 100644 ShadowEditor.UI/src/image/ImageUploader.jsx create mode 100644 ShadowEditor.UI/src/image/css/ImageUploader.css 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;