feat: support download

README.md

@@ -60,6 +60,13 @@ class App extends React.Component<any, any> {
 | rotatable   | boolean      | true    | whether to show 'rotate' button | false |
 | scalable    | boolean      | true    | whether to show 'scale' button | false |
 | onMaskClick | (e) => void  |   -     | callback function when mask is clicked |
+| download    | [Download](#Download)     |  -      | download config |
+
+### Download
+
+| props       | type         | default | description                 | required |
+|-------------|--------------|---------|-----------------------------|----------|
+| onDownload  | function(url: string)  |  -  | callback when download is clicked | true |
 
 ## Keyboard support
 

demo/index.tsx

@@ -127,6 +127,9 @@ class App extends React.Component<any, Partial<State>> {
           activeIndex={this.state.activeIndex}
           attribute={false}
           container={inline ? this.container : null}
+          download={{
+            onDownload: (url) => { console.log(url); },
+          }}
           />
         </div>
         <div className="footer">

src/Icon.tsx

@@ -11,6 +11,7 @@ export enum ActionType {
   close = 8,
   scaleX = 9,
   scaleY = 10,
+  download = 11,
 }
 
 export interface IconProps {

src/ViewerCore.tsx

@@ -258,11 +258,21 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
       case ActionType.scaleY:
         this.handleScaleY(-1);
         break;
+      case ActionType.download:
+        this.handleDownload();
+        break;
       default:
         break;
     }
   }
 
+  handleDownload = () => {
+    const activeImage = this.getActiveImage();
+    if (this.props.download && this.props.download.onDownload) {
+      this.props.download.onDownload(activeImage.src);
+    }
+  }
+
   handleScaleX(newScale: 1 | -1) {
     this.setState({
       scaleX: this.state.scaleX * newScale,
@@ -459,6 +469,20 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
     this.props.onMaskClick(e);
   }
 
+  getActiveImage = () => {
+    let activeImg: ImageDecorator = {
+      src: '',
+      alt: '',
+    };
+
+    let images = this.props.images || [];
+    if (images.length > 0 && this.state.activeIndex >= 0) {
+      activeImg = images[this.state.activeIndex];
+    }
+
+    return activeImg;
+  }
+
   render() {
     let activeImg: ImageDecorator = {
       src: '',
@@ -482,10 +506,7 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
       viewerStryle.display = 'block';
     }
     if (this.state.visible && this.state.transitionEnd) {
-      let images = this.props.images || [];
-      if (images.length > 0 && this.state.activeIndex >= 0) {
-        activeImg = images[this.state.activeIndex];
-      }
+      activeImg = this.getActiveImage();
     }
 
     let className = `${this.prefixCls} ${this.prefixCls}-transition`;
@@ -493,6 +514,11 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
       className += ` ${this.prefixCls}-inline`;
     }
 
+    let downloadable = false;
+    if (this.props.download) {
+      downloadable = true;
+    }
+
     return (
       <div
       ref="viewerCore"
@@ -539,6 +565,7 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
           rotatable={this.props.rotatable}
           scalable={this.props.scalable}
           changeable={true}
+          downloadable={downloadable}
           />
           <ViewerNav
           prefixCls={this.prefixCls}

src/ViewerProps.ts

@@ -28,6 +28,10 @@ interface ViewerProps {
   scalable?: boolean;
   /** callback function when mask is clicked */
   onMaskClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+  /** 下载配置 */
+  download?: {
+    onDownload: (url) => void;
+  };
 }
 
 export default ViewerProps;

src/ViewerToolbar.tsx

@@ -12,6 +12,7 @@ export interface ViewerToolbarProps {
   rotatable: boolean;
   scalable: boolean;
   changeable: boolean;
+  downloadable: boolean;
 }
 
 export default class ViewerToolbar extends React.Component<ViewerToolbarProps, any> {
@@ -98,6 +99,16 @@ export default class ViewerToolbar extends React.Component<ViewerToolbarProps, a
         </li>,
       ]);
     }
+    if (this.props.downloadable) {
+      featureNodeArr = featureNodeArr.concat([
+        <li
+        key="download"
+        className={`${this.props.prefixCls}-btn`}
+        onClick={() => {this.handleAction(ActionType.download);}}>
+          <Icon type={ActionType.download}/>
+        </li>,
+      ]);
+    }
     return (
       <div>
         {attributeNode}

src/style/fonts/icomoon.svg

@@ -10,6 +10,7 @@
 <glyph unicode="&#xe967;" glyph-name="rotate-left" d="M761.862-64c113.726 206.032 132.888 520.306-313.862 509.824v-253.824l-384 384 384 384v-248.372c534.962 13.942 594.57-472.214 313.862-775.628z" />
 <glyph unicode="&#xe968;" glyph-name="rotate-right" d="M576 711.628v248.372l384-384-384-384v253.824c-446.75 10.482-427.588-303.792-313.86-509.824-280.712 303.414-221.1 789.57 313.86 775.628z" />
 <glyph unicode="&#xe984;" glyph-name="reset" d="M1024 576h-384l143.53 143.53c-72.53 72.526-168.96 112.47-271.53 112.47s-199-39.944-271.53-112.47c-72.526-72.53-112.47-168.96-112.47-271.53s39.944-199 112.47-271.53c72.53-72.526 168.96-112.47 271.53-112.47s199 39.944 271.528 112.472c6.056 6.054 11.86 12.292 17.456 18.668l96.32-84.282c-93.846-107.166-231.664-174.858-385.304-174.858-282.77 0-512 229.23-512 512s229.23 512 512 512c141.386 0 269.368-57.326 362.016-149.984l149.984 149.984v-384z" />
+<glyph unicode="&#xe9c7;" glyph-name="download" d="M736 512l-256-256-256 256h160v384h192v-384zM480 256h-480v-256h960v256h-480zM896 128h-128v64h128v-64z" />
 <glyph unicode="&#xea0a;" glyph-name="zoom-in" d="M992 576h-352v352c0 17.672-14.328 32-32 32h-192c-17.672 0-32-14.328-32-32v-352h-352c-17.672 0-32-14.328-32-32v-192c0-17.672 14.328-32 32-32h352v-352c0-17.672 14.328-32 32-32h192c17.672 0 32 14.328 32 32v352h352c17.672 0 32 14.328 32 32v192c0 17.672-14.328 32-32 32z" />
 <glyph unicode="&#xea0b;" glyph-name="zoom-out" d="M0 544v-192c0-17.672 14.328-32 32-32h960c17.672 0 32 14.328 32 32v192c0 17.672-14.328 32-32 32h-960c-17.672 0-32-14.328-32-32z" />
 <glyph unicode="&#xea0f;" glyph-name="close" d="M1014.662 137.34c-0.004 0.004-0.008 0.008-0.012 0.010l-310.644 310.65 310.644 310.65c0.004 0.004 0.008 0.006 0.012 0.010 3.344 3.346 5.762 7.254 7.312 11.416 4.246 11.376 1.824 24.682-7.324 33.83l-146.746 146.746c-9.148 9.146-22.45 11.566-33.828 7.32-4.16-1.55-8.070-3.968-11.418-7.31 0-0.004-0.004-0.006-0.008-0.010l-310.648-310.652-310.648 310.65c-0.004 0.004-0.006 0.006-0.010 0.010-3.346 3.342-7.254 5.76-11.414 7.31-11.38 4.248-24.682 1.826-33.83-7.32l-146.748-146.748c-9.148-9.148-11.568-22.452-7.322-33.828 1.552-4.16 3.97-8.072 7.312-11.416 0.004-0.002 0.006-0.006 0.010-0.010l310.65-310.648-310.65-310.652c-0.002-0.004-0.006-0.006-0.008-0.010-3.342-3.346-5.76-7.254-7.314-11.414-4.248-11.376-1.826-24.682 7.322-33.83l146.748-146.746c9.15-9.148 22.452-11.568 33.83-7.322 4.16 1.552 8.070 3.97 11.416 7.312 0.002 0.004 0.006 0.006 0.010 0.010l310.648 310.65 310.648-310.65c0.004-0.002 0.008-0.006 0.012-0.008 3.348-3.344 7.254-5.762 11.414-7.314 11.378-4.246 24.684-1.826 33.828 7.322l146.746 146.748c9.148 9.148 11.57 22.454 7.324 33.83-1.552 4.16-3.97 8.068-7.314 11.414z" />

src/style/index.less

@@ -254,7 +254,11 @@
 
   &-scaleY:before {
     content: '\ea5f';
-  }     
+  }
+  
+  &-download:before {
+    content: '\e9c7';
+  }   
 }
 
 .spin {