Merge pull request #192 from XiaoMi/hotfix/upload

fix upload ref
XiaoMi · May 9, 2019 · f8fd992 · f8fd992
2 parents b24f435 + 5cc68fe
commit f8fd992
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 22 deletions.
diff --git a/components/upload/Preview.js b/components/upload/Preview.js
@@ -11,7 +11,6 @@ export default class Preview extends Component {
       extraClass: '',
       style: {}
     }
-    this.imgRef = React.createRef()
   }
 
   static propTypes = {
@@ -34,8 +33,8 @@ export default class Preview extends Component {
 
   imgOnLoad () {
     const radio = 0.6
-    const imgWidth = this.imgRef.current.clientWidth
-    const imgHeight = this.imgRef.current.clientHeight
+    const imgWidth = this.imgRef.clientWidth
+    const imgHeight = this.imgRef.clientHeight
     const windowRadio = window.innerWidth / window.innerHeight
     const imgRadio = imgWidth / imgHeight
     if (isNaN(imgRadio)) {
@@ -71,14 +70,16 @@ export default class Preview extends Component {
     return (
       <ReactCSSTransitionGroup
         transitionName='hi-preview'
-        transitionEnterTimeout={300}
-        transitionLeaveTimeout={300}
+        transitionEnterTimeout={50}
+        transitionLeaveTimeout={50}
         component='div'
       >
         <div key={src} className={classNames('hi-preview', extraClass, {'hi-preview--hide': !show})} onClick={this.onClose.bind(this)}>
           <div className='hi-preview-image' style={style}>
             <img
-              ref={this.imgRef}
+              ref={node => {
+                this.imgRef = node
+              }}
               src={src}
               onLoad={this.imgOnLoad.bind(this)}
             />

diff --git a/components/upload/UploadAvatar.js b/components/upload/UploadAvatar.js
@@ -36,9 +36,6 @@ class UploadAvatar extends Upload {
     )
     this.onDraging = this.onDraging.bind(this)
     this.onDragEnd = this.onDragEnd.bind(this)
-    this.cropperRef = React.createRef()
-    this.canvasRef = React.createRef()
-    this.uploadRef = React.createRef()
   }
 
   componentWillReceiveProps (nextProps) {
@@ -125,7 +122,7 @@ class UploadAvatar extends Upload {
   resetParams () {
     window.removeEventListener('mousemove', this.onDraging)
     window.removeEventListener('mouseup', this.onDragEnd)
-    this.uploadRef.current.value = ''
+    this.uploadRef.value = ''
 
     this.scale = 1
     this.img = null
@@ -166,7 +163,7 @@ class UploadAvatar extends Upload {
     } = this.state
     const canvasOrigin = document.getElementById('canvas-origin')
     const originRect = canvasOrigin.getBoundingClientRect()
-    const cropperRect = this.cropperRef.current.getBoundingClientRect()
+    const cropperRect = this.cropperRef.getBoundingClientRect()
     const canvasPreview = document.getElementById('canvas-preview')
     canvasPreview.width = cropperWidth
     canvasPreview.height = cropperHeight
@@ -201,7 +198,7 @@ class UploadAvatar extends Upload {
   }
 
   zoom(e) { // 缩放canvas
-    e.preventDefault()
+    // e.preventDefault()
     const wheelDelta = e.wheelDelta || e.deltaY/120
     let scale = this.scale + wheelDelta
 
@@ -220,7 +217,7 @@ class UploadAvatar extends Upload {
       cropperWidth,
       cropperHeight
     } = this.state
-    const canvasRect = this.canvasRef.current.getBoundingClientRect()
+    const canvasRect = this.canvasRef.getBoundingClientRect()
     const deltaHeight = (this.containerHeight-cropperHeight)/2
     const deltaWidth = (this.containerWidth-cropperWidth)/2
     let maxTop
@@ -367,7 +364,9 @@ class UploadAvatar extends Upload {
               <li className='upload-li'>
                 <label>
                   <input
-                    ref={this.uploadRef}
+                    ref={ node => {
+                      this.uploadRef = node
+                    }}
                     type='file'
                     className='upload-input'
                     accept={accept}
@@ -396,11 +395,13 @@ class UploadAvatar extends Upload {
               id='canvas-origin'
               className='upload-canvas__canvas'
               style={{top: position.top, left: position.left}}
-              ref={this.canvasRef}
+              ref={node => {
+                this.canvasRef = node
+              }}
             />
             <div className="upload-canvas__mask--top" style={{bottom: topMaskBottom}}></div>
             <div className="upload-canvas__mask--left" style={{top: leftMaskTop, bottom: leftMaskTop, right: leftMaskRight}}></div>
-            <div ref={this.cropperRef} className='upload-canvas__cropper' id='upload-canvas__cropper' style={{height: cropperHeight, width: cropperWidth}}></div>
+            <div ref={node=>{this.cropperRef=node}} className='upload-canvas__cropper' id='upload-canvas__cropper' style={{height: cropperHeight, width: cropperWidth}}></div>
             <div className="upload-canvas__mask--right" style={{top: leftMaskTop, bottom: leftMaskTop, left: leftMaskRight}}></div>
             <div className="upload-canvas__mask--bottom" style={{top: topMaskBottom}}></div>
           </div>

diff --git a/components/upload/UploadPhoto.js b/components/upload/UploadPhoto.js
@@ -16,7 +16,6 @@ class UploadPhoto extends Upload {
       },
       this.state
     )
-    this.uploadRef = React.createRef()
   }
 
   closeModal () {
@@ -87,7 +86,9 @@ class UploadPhoto extends Upload {
           <li>
             <label>
               <input
-                ref={this.uploadRef}
+                ref={node => {
+                  this.uploadRef = node
+                }}
                 type='file'
                 className='upload-input'
                 accept={accept}

diff --git a/components/upload/style/preview.scss b/components/upload/style/preview.scss
@@ -5,8 +5,7 @@
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.54);
-  z-index: 1800;
-  transition: background 0.3s ease-out;
+  z-index: 9999;
 
   &-leave {
     display: block !important;

diff --git a/docs/zh-CN/components/upload.md b/docs/zh-CN/components/upload.md
@@ -265,13 +265,13 @@ render () {
 					return true
 				}}
 				customUpload={files => {
-					fileList.push({
+					const _fileList = fileList.concat({
 						name: files[0].name,
 						fileType: 'img',
 						uploadState: 'success'
 					})
 					this.setState({
-						fileList
+						fileList: _fileList
 					})
 				}}
 				buttonText="上传文件"