diff --git a/README.md b/README.md index 94e7c61..1deb843 100644 --- a/README.md +++ b/README.md @@ -60,6 +60,13 @@ class App extends React.Component { | 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 diff --git a/demo/index.tsx b/demo/index.tsx index 57be165..749ea80 100644 --- a/demo/index.tsx +++ b/demo/index.tsx @@ -127,6 +127,9 @@ class App extends React.Component> { activeIndex={this.state.activeIndex} attribute={false} container={inline ? this.container : null} + download={{ + onDownload: (url) => { console.log(url); }, + }} />
diff --git a/src/Icon.tsx b/src/Icon.tsx index f636e5c..7f153e0 100644 --- a/src/Icon.tsx +++ b/src/Icon.tsx @@ -11,6 +11,7 @@ export enum ActionType { close = 8, scaleX = 9, scaleY = 10, + download = 11, } export interface IconProps { diff --git a/src/ViewerCore.tsx b/src/ViewerCore.tsx index a4f7064..f11480e 100644 --- a/src/ViewerCore.tsx +++ b/src/ViewerCore.tsx @@ -258,11 +258,21 @@ export default class ViewerCore extends React.Component { + 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 { + 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 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 ) => void; + /** 下载配置 */ + download?: { + onDownload: (url) => void; + }; } export default ViewerProps; diff --git a/src/ViewerToolbar.tsx b/src/ViewerToolbar.tsx index 0aa7803..9f07e2d 100644 --- a/src/ViewerToolbar.tsx +++ b/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 { @@ -98,6 +99,16 @@ export default class ViewerToolbar extends React.Component, ]); } + if (this.props.downloadable) { + featureNodeArr = featureNodeArr.concat([ +
  • {this.handleAction(ActionType.download);}}> + +
  • , + ]); + } return (
    {attributeNode} diff --git a/src/style/fonts/icomoon.eot b/src/style/fonts/icomoon.eot old mode 100644 new mode 100755 index ffcad2a..2f0f417 Binary files a/src/style/fonts/icomoon.eot and b/src/style/fonts/icomoon.eot differ diff --git a/src/style/fonts/icomoon.svg b/src/style/fonts/icomoon.svg old mode 100644 new mode 100755 index 766aace..e88d376 --- a/src/style/fonts/icomoon.svg +++ b/src/style/fonts/icomoon.svg @@ -10,6 +10,7 @@ + diff --git a/src/style/fonts/icomoon.ttf b/src/style/fonts/icomoon.ttf old mode 100644 new mode 100755 index 0b788d4..2ec06f7 Binary files a/src/style/fonts/icomoon.ttf and b/src/style/fonts/icomoon.ttf differ diff --git a/src/style/fonts/icomoon.woff b/src/style/fonts/icomoon.woff old mode 100644 new mode 100755 index 837e46c..36cf90e Binary files a/src/style/fonts/icomoon.woff and b/src/style/fonts/icomoon.woff differ diff --git a/src/style/index.less b/src/style/index.less index e0892e8..b8109b1 100644 --- a/src/style/index.less +++ b/src/style/index.less @@ -254,7 +254,11 @@ &-scaleY:before { content: '\ea5f'; - } + } + + &-download:before { + content: '\e9c7'; + } } .spin {