feat(ImgViewer): add ctrl between img

Author: zWingz

src/lib/ImgPreview/ImgPreview.jsx

@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom'
 import LoadingIcon from '../LoadingIcon'
 import ErrorIcon from '../ErrorIcon'
 import Image from '../Image'
-import {createObserver} from '../Image/observer'
+import { createObserver } from '../Image/observer'
 // import Store from './imgViewStore'
 function find(list, arg) {
   return list.findIndex(each => each === arg)
@@ -286,7 +286,6 @@ export default class ImgPpreview extends React.PureComponent {
   }
 
   imgOnError = () => {
-    console.log('onError')
     this.setState({
       loaded: true,
       error: true
@@ -310,8 +309,6 @@ export default class ImgPpreview extends React.PureComponent {
     return {
       left: left + 'px',
       top: top + 'px',
-      // width: ((rotate / 90) % 2 === 0 ? width : height) * scaleFixed + 'px',
-      // height: ((rotate / 90) % 2 === 0 ? height : width) * scaleFixed + 'px',
       transform: `rotate(${rotate}deg) scale(${scaleFixed})`
     }
   }
@@ -341,64 +338,75 @@ export default class ImgPpreview extends React.PureComponent {
     }
   }
 
-  render() {
+  _renderIcon() {
+    return (
+      <>
+        <div className="img-viewer-close">
+          <i
+            ref={el => {
+              this.$close = el
+            }}
+            className="react-image-icon"
+            style={{ pointerEvents: 'none' }}
+          >
+            &#xe904;
+          </i>
+        </div>
+        <i className="img-viewer-prev react-image-icon" onClick={this.prev}>
+          &#xe914;
+        </i>
+        <i className="img-viewer-next react-image-icon" onClick={this.next}>
+          &#xe914;
+        </i>
+      </>
+    )
+  }
+
+  _renderImg() {
     const {
       state,
       currentImg,
-      mouseUpHandle,
-      mouseWheelHandle,
       mouseDownHandle,
       imgOnLoad,
       imgOnError,
-      imgSty,
-      prev,
-      next,
-      rotateFnc
+      imgSty
     } = this
-    const { current, images } = state
     return (
-      <div
-        id="imgPreview"
-        ref={el => {
-          this.$el = el
-        }}
-        className="img-viewer-container"
-        style={{ display: state.open ? 'flex' : 'none' }}
-        onMouseUp={mouseUpHandle}
-        onWheel={mouseWheelHandle}
-        draggable="false"
-      >
-        <div
-          className="img-viewer-close"
-          ref={el => {
-            this.$close = el
-          }}
-        >
-          <i className="react-image-icon" style={{ pointerEvents: 'none' }}>
-            &#xe904;
-          </i>
-        </div>
-        {state.changed && (
-          <React.Fragment>
-            <img
-              className={[
-                'img-viewer-current',
-                state.loaded && !state.error ? '' : 'dis-none'
-              ].join(' ')}
-              onMouseDown={mouseDownHandle}
-              onLoad={imgOnLoad}
-              onError={imgOnError}
-              src={currentImg}
-              alt=""
-              draggable="false"
-              style={imgSty}
-            />
-            {!state.loaded && <LoadingIcon />}
-            {state.error && (
-              <ErrorIcon style={{ width: '300px', height: '300px' }} />
-            )}
-          </React.Fragment>
+      <>
+        <img
+          className={[
+            'img-viewer-current',
+            state.loaded && !state.error ? '' : 'dis-none'
+          ].join(' ')}
+          onMouseDown={mouseDownHandle}
+          onLoad={imgOnLoad}
+          onError={imgOnError}
+          src={state.changed ? currentImg : ''}
+          alt=""
+          draggable={false}
+          style={imgSty}
+        />
+        {!state.loaded && (
+          <div className="img-viewer-status">
+            <LoadingIcon />
+          </div>
         )}
+        {state.error && (
+          <div className="img-viewer-status">
+            <ErrorIcon style={{ width: '300px', height: '300px' }} />
+          </div>
+        )}
+      </>
+    )
+  }
+
+  _renderFooter() {
+    const {
+      state, prev, next, rotateFnc
+    } = this
+    const { images, current } = state
+    return (
+      <>
         <div
           className="img-viewer-footer"
           ref={ref => {
@@ -407,23 +415,23 @@ export default class ImgPpreview extends React.PureComponent {
         >
           <div className="img-viewer-ctrl">
             <i
-              className="icon react-image-icon"
+              className="react-image-icon"
               onClick={prev}
               style={{ transform: 'rotateY(180deg)' }}
             >
               &#xe914;
             </i>
-            <i className="icon react-image-icon" onClick={() => rotateFnc(90)}>
+            <i className="react-image-icon" onClick={() => rotateFnc(90)}>
               &#xe91a;
             </i>
             <i
-              className="icon react-image-icon"
+              className="react-image-icon"
               onClick={() => rotateFnc(-90)}
               style={{ transform: 'rotateY(180deg)' }}
             >
               &#xe91a;
             </i>
-            <i className="icon react-image-icon" onClick={next}>
+            <i className="react-image-icon" onClick={next}>
               &#xe914;
             </i>
           </div>
@@ -453,6 +461,29 @@ export default class ImgPpreview extends React.PureComponent {
             </div>
           </div>
         </div>
+      </>
+    )
+  }
+
+  render() {
+    const { state, mouseUpHandle, mouseWheelHandle } = this
+    return (
+      <div
+        id="imgPreview"
+        ref={el => {
+          this.$el = el
+        }}
+        className="img-viewer-container"
+        style={{ display: state.open ? 'flex' : 'none' }}
+        onMouseUp={mouseUpHandle}
+        onWheel={mouseWheelHandle}
+        draggable="false"
+      >
+        {this._renderIcon()}
+
+        {this._renderImg()}
+
+        {this._renderFooter()}
       </div>
     )
   }

src/lib/ImgPreview/style.scss

@@ -9,22 +9,52 @@
   align-items: center;
   justify-content: center;
   background: rgba(0, 0, 0, 0.5);
-  transition: left 0.3s ease;
   height: 100%;
   overflow: hidden;
   user-select: none;
   z-index: 999;
+  .react-image-icon {
+    color: #e3e3e9;
+    cursor: pointer;
+    &:hover {
+      color: #6a82ec;
+    }
+  }
+  > .react-image-icon {
+    font-size: 56px;
+    position: absolute;
+    z-index: 2;
+    top: 50%;
+    transform: translateY(-50%);
+    &.img-viewer-prev {
+      left: 10%;
+      transform: rotateY(180deg) translateY(-50%) ;
+    }
+    &.img-viewer-next {
+      right: 10%;
+    }
+  }
 }
-
-// .img-viewer-inner {
-//   width: 100%;
-//   height: 100%;
-// }
 .img-viewer-current {
-  flex-shrink: 0;
   position: relative;
-  transition: transform .2s;
+  transition: transform .45s;
+  animation: preview-ani 0.5s linear;
 }
+@keyframes preview-ani {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.img-viewer-status {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate3d(-50%, -50%, 0);
+}
+
 .img-viewer-close {
   position: fixed;
   right: 0px;
@@ -63,13 +93,6 @@
   line-height: 30px;
   margin: 10px auto 0;
   flex-shrink: 0;
-  .icon {
-    color: #e3e3e9;
-    cursor: pointer;
-    &:hover {
-      color: #6a82ec;
-    }
-  }
 }
 
 .img-viewer-list {