feat(Upload):Add Upload modal 未完

docs/Routers.js

@@ -51,6 +51,7 @@ import carousel from 'bundle-loader?lazy&name=carousel!./pages/carousel';
 import loading from 'bundle-loader?lazy&name=loading!./pages/loading';
 import transition from 'bundle-loader?lazy&name=transition!./pages/transition';
 import timestamp from 'bundle-loader?lazy&name=timestamp!./pages/timestamp';
+import upload from 'bundle-loader?lazy&name=upload!./pages/upload';
 /* eslint import/no-webpack-loader-syntax: off */
 
 const getLang = (key) => {
@@ -104,6 +105,7 @@ const routes = {
       { path: "/:lang/input-password", component: asyncComponent(inputPassword) },
       { path: "/:lang/time-picker", component: asyncComponent(timePicker) },
       { path: "/:lang/date-picker", component: asyncComponent(datePicker) },
+      { path: "/:lang/upload", component: asyncComponent(upload) },
     ],
     'Data Display': [
       { path: "/:lang/avatar", component: asyncComponent(Avatar) },

docs/locales/cn.js

@@ -45,6 +45,7 @@ module.exports = {
     'icon': 'Icon 图标',
     'form': 'Form 表单',
     'radio': 'Radio 单选框',
+    'upload': 'Upload 上传图片',
     'recommendation': '精选开源组件',
     'input': 'Input 输入框',
     'input-number': 'InputNumber 数字输入框',

docs/locales/en.js

@@ -46,6 +46,7 @@ module.exports = {
     'form': 'Form',
     'radio': 'Radio',
     'recommendation': 'Third-Party Libraries',
+    'upload': 'Upload',
     'input': 'Input',
     'input-number': 'InputNumber',
     'input-password': 'InputPassword',

docs/md/cn/upload.md

@@ -0,0 +1,39 @@
+Upload 标签
+===
+
+### 拖拽上传
+
+可批量拖拽图片上传。
+
+<!--DemoStart--> 
+```js
+class Demo extends Component {
+  render() {
+    return (
+      <div>
+        <Upload.Dragger 
+          onChange={(value1)=>{
+            console.log("value1::",value1)
+          }}
+          onRemove={(value2)=>{
+            console.log("value2::",value2)
+          }}
+        />
+      </div>
+    )
+  }
+}
+```
+<!--End-->
+
+
+
+## API
+
+### Upload.Dragger
+
+| 参数      | 说明    | 类型      |  默认值   |
+|--------- |-------- |---------- |-------- |
+| onChange | 拖拽完成触发,可获取图片的base64编码以及二进制编码容器blob | function(value) | - |
+| onRemove | 删除某张图片 | function(value) | - |
+| disabled | 禁止点击按钮 | Boolean | `false` |

docs/pages/upload/index.js

@@ -0,0 +1,5 @@
+import Markdown from '../../libs/markdown/';
+
+export default class Upload extends Markdown {
+
+}

src/index.js

@@ -43,4 +43,4 @@ export { default as Notification } from './notification/';
 export { default as Carousel } from './carousel/';
 export { default as Form } from './form/';
 export { default as version } from './version';
-
+export { default as Upload } from './upload';

src/style/variables.less

@@ -358,6 +358,15 @@
 @carousel-dot-height: 3px;
 @carousel-dot-active-width: 24px;
 
+//== Upload 上传图片 ====
+
+@upload-border-color: #bbb1b1;
+@upload-bg-color: #f1ebeb;
+@upload-button-border-color: #0fa120;
+@upload-font-color: #cac0c0;
+@upload-li-width: 120px;
+@upload-li-height: 100px;
+
 //==  定义屏幕宽度
 //-----------------------
 

src/upload/Dragger.js

@@ -0,0 +1,192 @@
+import React from 'react';
+import { Component, PropTypes } from '../utils/';
+import Icon from '../icon';
+import Button from '../button';
+import './style/dragger.less';
+
+export default class Dragger extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      files: [],
+    };
+    this.dragOverIndex = null;
+    this.onChange = this.onChange.bind(this);
+    this.renderPreview = this.renderPreview.bind(this);
+    this.onRemove = this.onRemove.bind(this);
+  }
+
+  // 改变图片位置
+  onChange(e) {
+    const items = e.target.files;
+    for (let i = 0; i < items.length; i += 1) {
+      this.scanFiles(items[i], this.listing);
+    }
+  }
+
+  // 删除图片
+  onRemove(index) {
+    const { files } = this.state;
+    const { onRemove } = this.props;
+    files.splice(index, 1);
+    this.setState({ files });
+    onRemove && onRemove(files);
+  }
+
+  // 图片base64与blob转换
+  dataURItoBlob(dataURI) {
+    const byteString = atob(dataURI.split(',')[1]);
+    const mimeString = dataURI
+      .split(',')[0]
+      .split(':')[1]
+      .split(';')[0];
+    const ab = new ArrayBuffer(byteString.length);
+    const ia = new Uint8Array(ab);
+    for (let i = 0; i < byteString.length; i += 1) {
+      ia[i] = byteString.charCodeAt(i);
+    }
+    return new Blob([ab], { type: mimeString });
+  }
+
+  handleChange(files) {
+    const { onChange } = this.props;
+    files.forEach((dt) => {
+      dt.blob = this.dataURItoBlob(dt.value);
+    });
+    onChange && onChange(files);
+  }
+
+  scanFiles(item) {
+    const reader = new FileReader();
+    reader.onloadend = (e) => {
+      const { files } = this.state;
+      files.push({
+        name: item.name,
+        value: e.target.result,
+      });
+      this.setState({ files });
+      this.handleChange(files);
+    };
+    reader.readAsDataURL(item);
+  }
+
+  componentDidMount() {
+    this.dragdropRef.addEventListener(
+      'dragover',
+      (event) => {
+        event.preventDefault();
+      },
+      false
+    );
+
+    this.dragdropRef.addEventListener(
+      'drop',
+      (event) => {
+        const items = event.dataTransfer.files;
+        event.preventDefault();
+        let length = items.length;
+        length = length > 4 ? 5 : length;
+        for (let i = 0; i < length; i += 1) {
+          this.scanFiles(items[i], this.listing);
+        }
+      },
+      false
+    );
+  }
+
+  renderPreview() {
+    return this.state.files.map((file, index) => {
+      return (
+        <li
+          key={`preview-key-${index}`}
+          data-index={index}
+          draggable
+          onDragEnd={() => {
+            const { files } = this.state;
+            if (this.dragOverIndex === null || this.dragOverIndex === index) return;
+            file = files[index];
+            files.splice(this.dragOverIndex, 0, file);
+            this.dragOverIndex < index
+              ? files.splice(index + 1, 1)
+              : files.splice(index, 1);
+            this.dragOverIndex = null;
+            this.setState({ files });
+            this.handleChange(files);
+          }}
+          onDrop={(e) => {
+            const dataset = e.target.dataset || { dragOverIndex: null };
+            this.dragOverIndex = dataset.index;
+          }}
+        >
+          <div
+            data-index={index}
+            style={{ backgroundImage: `url(${file.value})` }}
+          />
+          <p data-index={index}>
+            <span>{file.name}</span>
+            <Icon
+              type="delete"
+              onClick={() => {
+                this.onRemove(index);
+              }}
+            />
+          </p>
+        </li>
+      );
+    });
+  }
+
+  render() {
+    const { prefixCls, className, disabled } = this.props;
+    const cls = this.classNames(`${prefixCls}`, className);
+    return (
+      <div className={cls}>
+        <div
+          className={`${prefixCls}-wrap`}
+          ref={(node) => {
+            this.dragdropRef = node;
+          }}
+        >
+          <Button
+            disabled={disabled}
+            size="small"
+            onClick={() => {
+              this.fileRef.click();
+            }}
+          >
+            <Icon type="cloud-upload" />拖拽或点击上传
+          </Button>
+          <input
+            type="file"
+            onChange={this.onChange}
+            ref={(node) => {
+              this.fileRef = node;
+            }}
+          />
+          <p>只能上传png、gif、jpg格式图片，并不超过10M</p>
+          <ul
+            className={`${prefixCls}-list`}
+            ref={(node) => {
+              this.listing = node;
+            }}
+          >
+            {this.renderPreview()}
+          </ul>
+        </div>
+      </div>
+    );
+  }
+}
+
+Dragger.propTypes = {
+  prefixCls: PropTypes.string,
+  onChange: PropTypes.func,
+  onRemove: PropTypes.func,
+  disabled: PropTypes.bool,
+};
+Dragger.defaultProps = {
+  prefixCls: 'w-upload-dragger',
+  disabled: false,
+  onChange: () => {},
+  onRemove: () => {},
+};

src/upload/Upload.js

@@ -0,0 +1,2 @@
+
+

src/upload/index.js

@@ -0,0 +1,6 @@
+import Upload from './Upload';
+import Dragger from './Dragger';
+
+Upload.Dragger = Dragger;
+
+export default Upload;