From dbb28903f277096dbf18f77e3db6fed344dfd599 Mon Sep 17 00:00:00 2001
From: wangxueliang <wangxueliang@yidian-inc.com>
Date: Thu, 12 Apr 2018 14:37:22 +0800
Subject: [PATCH] add vc-upload demo

---
 components/vc-upload/demo/beforeUpload.jsx  |  44 ++++++++
 components/vc-upload/demo/drag.jsx          |  32 ++++++
 components/vc-upload/demo/simple.jsx        | 105 ++++++++++++++++++++
 components/vc-upload/src/AjaxUploader.jsx   |  29 ++++--
 components/vc-upload/src/IframeUploader.jsx |   5 +-
 components/vc-upload/src/Upload.jsx         |  15 ++-
 components/vc-upload/src/uid.js             |   2 +-
 site/routes.js                              |   2 +-
 8 files changed, 216 insertions(+), 18 deletions(-)
 create mode 100644 components/vc-upload/demo/beforeUpload.jsx
 create mode 100644 components/vc-upload/demo/drag.jsx
 create mode 100644 components/vc-upload/demo/simple.jsx

diff --git a/components/vc-upload/demo/beforeUpload.jsx b/components/vc-upload/demo/beforeUpload.jsx
new file mode 100644
index 000000000..06c0775d5
--- /dev/null
+++ b/components/vc-upload/demo/beforeUpload.jsx
@@ -0,0 +1,44 @@
+import Upload from '../index'
+
+export default {
+  render () {
+    const uploaderProps = {
+      props: {
+        action: '/upload.do',
+        multiple: true,
+        beforeUpload (file, fileList) {
+          console.log(file, fileList)
+          return new Promise((resolve) => {
+            console.log('start check')
+            setTimeout(() => {
+              console.log('check finshed')
+              resolve(file)
+            }, 3000)
+          })
+        },
+      },
+      on: {
+        start: (file) => {
+          console.log('onStart', file.name)
+        },
+        success (file) {
+          console.log('onSuccess', file)
+        },
+        error (err) {
+          console.log('onError', err)
+        },
+      },
+    }
+    return (
+      <div
+        style={{
+          margin: '100px',
+        }}
+      >
+        <div>
+          <Upload {...uploaderProps}><a>开始上传</a></Upload>
+        </div>
+      </div>
+    )
+  },
+}
diff --git a/components/vc-upload/demo/drag.jsx b/components/vc-upload/demo/drag.jsx
new file mode 100644
index 000000000..6ececc91c
--- /dev/null
+++ b/components/vc-upload/demo/drag.jsx
@@ -0,0 +1,32 @@
+import Upload from '../index'
+
+export default {
+  render () {
+    const uploaderProps = {
+      props: {
+        action: '/upload.do',
+        type: 'drag',
+        accept: '.png',
+        beforeUpload (file) {
+          console.log('beforeUpload', file.name)
+        },
+      },
+      on: {
+        start: (file) => {
+          console.log('onStart', file.name)
+        },
+        success (file) {
+          console.log('onSuccess', file)
+        },
+        progress (step, file) {
+          console.log('onProgress', Math.round(step.percent), file.name)
+        },
+        error (err) {
+          console.log('onError', err)
+        },
+      },
+      style: { display: 'inline-block', width: '200px', height: '200px', background: '#eee' },
+    }
+    return <Upload {...uploaderProps}></Upload>
+  },
+}
diff --git a/components/vc-upload/demo/simple.jsx b/components/vc-upload/demo/simple.jsx
new file mode 100644
index 000000000..401448faf
--- /dev/null
+++ b/components/vc-upload/demo/simple.jsx
@@ -0,0 +1,105 @@
+import Upload from '../index'
+
+export default {
+  data () {
+    return {
+      destroyed: false,
+    }
+  },
+  methods: {
+    destroy () {
+      this.destroyed = true
+    },
+  },
+  render () {
+    if (this.destroyed) {
+      return null
+    }
+    const propsObj = {
+      action: '/upload.do',
+      data: { a: 1, b: 2 },
+      headers: {
+        Authorization: 'xxxxxxx',
+      },
+      multiple: true,
+      beforeUpload (file) {
+        console.log('beforeUpload', file.name)
+      },
+    }
+    const propsEvent = {
+      start: (file) => {
+        console.log('onStart', file.name)
+        // this.refs.inner.abort(file);
+      },
+      success (file) {
+        console.log('onSuccess', file)
+      },
+      progress (step, file) {
+        console.log('onProgress', Math.round(step.percent), file.name)
+      },
+      error (err) {
+        console.log('onError', err)
+      },
+    }
+    const uploaderProps = {
+      props: {
+        ...propsObj,
+      },
+      on: {
+        ...propsEvent,
+      },
+      ref: 'inner',
+    }
+    const uploaderProps1 = {
+      props: {
+        ...propsObj,
+        componentTag: 'div',
+      },
+      on: {
+        ...propsEvent,
+      },
+    }
+    const style = `
+        .rc-upload-disabled {
+           opacity:0.5;
+        `
+    return (
+      <div
+        style={{
+          margin: '100px',
+        }}
+      >
+        <h2>固定位置</h2>
+
+        <style>
+          {style}
+        </style>
+
+        <div>
+          <Upload {...uploaderProps}><a>开始上传</a></Upload>
+        </div>
+
+        <h2>滚动</h2>
+
+        <div
+          style={{
+            height: '200px',
+            overflow: 'auto',
+            border: '1px solid red',
+          }}
+        >
+          <div
+            style={{
+              height: '500px',
+            }}
+          >
+            <Upload {...uploaderProps1} style={{ display: 'inline-block' }}>
+              <a>开始上传2</a></Upload>
+          </div>
+        </div>
+
+        <button onClick={this.destroy}>destroy</button>
+      </div>
+    )
+  },
+}
diff --git a/components/vc-upload/src/AjaxUploader.jsx b/components/vc-upload/src/AjaxUploader.jsx
index ab329ab06..8c5de8429 100644
--- a/components/vc-upload/src/AjaxUploader.jsx
+++ b/components/vc-upload/src/AjaxUploader.jsx
@@ -6,9 +6,10 @@ import getUid from './uid'
 import attrAccept from './attr-accept'
 
 const upLoadPropTypes = {
-  component: PropTypes.string,
+  componentTag: PropTypes.string,
   // style: PropTypes.object,
   prefixCls: PropTypes.string,
+  action: PropTypes.string,
   // className: PropTypes.string,
   multiple: PropTypes.bool,
   disabled: PropTypes.bool,
@@ -163,24 +164,32 @@ const AjaxUploader = {
   },
   render () {
     const {
-      component: Tag, prefixCls, disabled, multiple, accept,
+      componentTag: Tag, prefixCls, disabled, multiple, accept,
     } = this.$props
     const cls = classNames({
       [prefixCls]: true,
       [`${prefixCls}-disabled`]: disabled,
     })
     const events = disabled ? {} : {
-      onClick: this.onClick,
-      onKeydown: this.onKeyDown,
-      onDrop: this.onFileDrop,
-      onDragover: this.onFileDrop,
-      tabIndex: '0',
+      click: this.onClick,
+      keydown: this.onKeyDown,
+      drop: this.onFileDrop,
+      dragover: this.onFileDrop,
+    }
+    const tagProps = {
+      on: {
+        ...events,
+        ...this.$listeners,
+      },
+      attrs: {
+        role: 'button',
+        tabIndex: disabled ? null : '0',
+      },
+      class: cls,
     }
     return (
       <Tag
-        {...events}
-        class={cls}
-        role='button'
+        {...tagProps}
       >
         <input
           type='file'
diff --git a/components/vc-upload/src/IframeUploader.jsx b/components/vc-upload/src/IframeUploader.jsx
index ac1f3d598..2349ddf90 100644
--- a/components/vc-upload/src/IframeUploader.jsx
+++ b/components/vc-upload/src/IframeUploader.jsx
@@ -17,7 +17,7 @@ const IFRAME_STYLE = {
 const IframeUploader = {
   mixins: [BaseMixin],
   props: {
-    component: PropTypes.string,
+    componentTag: PropTypes.string,
     // style: PropTypes.object,
     disabled: PropTypes.bool,
     prefixCls: PropTypes.string,
@@ -242,7 +242,7 @@ const IframeUploader = {
 
   render () {
     const {
-      component: Tag, disabled,
+      componentTag: Tag, disabled,
       prefixCls,
     } = this.$props
     const iframeStyle = {
@@ -253,6 +253,7 @@ const IframeUploader = {
       [prefixCls]: true,
       [`${prefixCls}-disabled`]: disabled,
     })
+
     return (
       <Tag
         className={cls}
diff --git a/components/vc-upload/src/Upload.jsx b/components/vc-upload/src/Upload.jsx
index 8f043255c..8eb5a3522 100644
--- a/components/vc-upload/src/Upload.jsx
+++ b/components/vc-upload/src/Upload.jsx
@@ -8,7 +8,7 @@ import IframeUpload from './IframeUploader'
 // }
 
 const uploadProps = {
-  component: PropTypes.string,
+  componentTag: PropTypes.string,
   prefixCls: PropTypes.string,
   action: PropTypes.string,
   name: PropTypes.string,
@@ -35,7 +35,7 @@ export default {
   name: 'Upload',
   mixins: [BaseMixin],
   props: initDefaultProps(uploadProps, {
-    component: 'span',
+    componentTag: 'span',
     prefixCls: 'rc-upload',
     data: {},
     headers: {},
@@ -78,14 +78,21 @@ export default {
   },
 
   render () {
+    const componentProps = {
+      props: {
+        ...this.$props,
+      },
+      on: this.$listeners,
+      ref: 'uploaderRef',
+    }
     if (this.supportServerRender) {
       const ComponentUploader = this.Component
       if (ComponentUploader) {
-        return <ComponentUploader {...this.$props} ref='uploaderRef' />
+        return <ComponentUploader {...componentProps} >{this.$slots.default}</ComponentUploader>
       }
       return null
     }
     const ComponentUploader = this.getComponent()
-    return <ComponentUploader {...this.$props} ref='uploaderRef' />
+    return <ComponentUploader {...componentProps} >{this.$slots.default}</ComponentUploader>
   },
 }
diff --git a/components/vc-upload/src/uid.js b/components/vc-upload/src/uid.js
index 00a9e44f7..27aec08e3 100644
--- a/components/vc-upload/src/uid.js
+++ b/components/vc-upload/src/uid.js
@@ -2,5 +2,5 @@ const now = +(new Date())
 let index = 0
 
 export default function uid () {
-  return `rc-upload-${now}-${++index}`
+  return `vc-upload-${now}-${++index}`
 }
diff --git a/site/routes.js b/site/routes.js
index 6360a0fc8..2b214efe2 100644
--- a/site/routes.js
+++ b/site/routes.js
@@ -3,7 +3,7 @@ import Layout from './components/layout.vue'
 const AsyncTestComp = () => {
   const d = window.location.hash.replace('#', '')
   return {
-    component: import(`../components/vc-tree/demo/${d}`),
+    component: import(`../components/vc-upload/demo/${d}`),
   }
 }