From c64d6916111f1921cf8874f83cc403baeb7180fc Mon Sep 17 00:00:00 2001 From: infeng Date: Mon, 9 Apr 2018 17:17:58 +0800 Subject: [PATCH] feat: support download --- README.md | 7 +++++++ demo/index.tsx | 3 +++ src/Icon.tsx | 1 + src/ViewerCore.tsx | 35 +++++++++++++++++++++++++++++++---- src/ViewerProps.ts | 4 ++++ src/ViewerToolbar.tsx | 11 +++++++++++ src/style/fonts/icomoon.eot | Bin 2188 -> 2320 bytes src/style/fonts/icomoon.svg | 1 + src/style/fonts/icomoon.ttf | Bin 2024 -> 2156 bytes src/style/fonts/icomoon.woff | Bin 2100 -> 2232 bytes src/style/index.less | 6 +++++- 11 files changed, 63 insertions(+), 5 deletions(-) mode change 100644 => 100755 src/style/fonts/icomoon.eot mode change 100644 => 100755 src/style/fonts/icomoon.svg mode change 100644 => 100755 src/style/fonts/icomoon.ttf mode change 100644 => 100755 src/style/fonts/icomoon.woff 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 ffcad2a471ff18ab641094c3cc58ec52cc0b2f74..2f0f4175d8a4cd689c5efb2c65dee6bfdce3bc12 GIT binary patch delta 739 zcmXYvT}V@57{{OYyxTdOE4R7MW^CEkWSfj6_Hkw+aR?HNwk!2!`LWctWXt)18C`e? zGt`mF0U;skB62rHAfiOXh@iX?FZ#NQpo`eB%R-XQ={d7=czNF6|9{@+JkN7Z!Maq( zT8sc$!!j%AHWt@5m&KdYeE{$ZSN}jRl`q~e&H@k@av_}>&ttS87cm;r*<05<9lKwU zUjXRZGDE3B%g;ym0Q7t43mFu+H*^<(ZA5O&31O7Arfq#yfh&*aIE?;0S zPSbf>0xNbU!~~z;$MHtO3yucDvCN;K&DPS@T~s6@ZI6z%2mE3@nOqHrbP7RfU!O?q z&Cg-&FsYU(-cW}SHIk^0t0fM*1M^{42O|vZ!pKPA7}0IM#d0-%R|zXe4%y#Ds7N3v}4!v(z;m3|;1H WB`?Vi`OP$F!@;^bfv)ecugO1Oh{NCj delta 620 zcmYL_O=uHQ5XWcUekBGIt8PMR3BgDdVnfm9gHXbHDJX;%DZN-o*5=EQ*kB8-2sVcx zNOMSBC|G*X>LCz3ReG?3K`bOE5nJ(WFDA4%g%at;+4LZfeKWuR{NL=nS2J@Vlv2tg0-n+y#IS^u_1$YGKczIRS8(xRh2G3KY)~zockN=N_f%;pQfB4S@Tc zNva9U(*8#PAxHHtQqaJ4h-QpeJltTAPq#~&mD$h8CvsQ*E`O8XYNKpOi?UlQtjjgvER7mLA4;+r<$x0z>v}z* zdQC54v2`#psYJKele~_E$HK;;egueOuffp*D^2J(qu*miyTijG=wJ#K^#jvxA91fgjyqS-?XYS>~*`3v?snwmVKQVj9y~dQve~*y~W?}m3&5=RFVp!!XLH8QK zmW_YLhGVVNZp=3R2P}O5dG@X~Um1xJwRd80(0Z!(i@+!lD?Fg6nIx}g9A;q?e!y?c c;uCz1@9`&D=sxrk(|tS8UR5q`<)zp75B6@QH2?qr 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 0b788d4dfe3dc0ce2a1d556f6f2f4b769cc756ab..2ec06f714b80cb78bd19facce6f48d808465ee07 GIT binary patch delta 733 zcmXw%U1-x#7>2)dk|yh>c3n+d*c`2$ZAVc@x+Y}|sS0DL?Jjh?sohrRTpg|Jx-lkR zEXbVf2b}~22Qn}G>5U=`QN)WX!rYBa@b5|nUTAB*REEREFDssK`0~6bdGmfJ=ewm` zI|T#)YCr)7TDndi6fJdpA1W_!_77x|+5ENq3;=0BUKmP_WwF*G=do4|r7xaycdma% zehk32rv{T}Ykw|Z1u&IyT}q+Azhc$_xF+PLRAziq1mZ;QL~c)y3>;2!G5#3}(v&Hk#}3`y$bJd?_fh8bN8(6pNMTW-%vB z=miEZs6z;uNyy9ZA`ZI){m|7xBSg`Zd{1}SW(%D6`8#r>YxK>ghN4!_iovCLJer%G zE5~9c!wmES3uqQn)3m;eLo1&1?DZWWK5wX1K15_GC}KeLms!x1MR_3_U67@=HmP#Q zn%RC&AaF*K+J+Oo^L`xjy@}zFD4uR^R$o$Q!tL6>b4Nw3JW*Zat8eh!#9iIqZ0tn= z4o`^%z)XYIpp|i3-B#Wc3epW7bhuOK*IY~?q9_!JfYG0!6Hp>6Kj3V_lRiuP zFQ{SB72xByhgberb{&Lf`wj3#B1ofM~mmKS@KoG$mo%lJ~BNO?1o0(2y}o*46cGaQ-tF% zOzb9h-h+}lfqvGV$G&M@YWE5}%$9-9>-tWi~IH)g<>L9pxv%7O@5>IwF zk2Y=1zGk?Y()V>8P;WS%IUY*;Qd{~aeU)C*22>Z(slLL?v#iZk;TZKAML(J(GfF`h zGS>Ea!s8>0fV5JrVW(;_(=x};j6rC)Fil&q+ zVXyCIVz5zXwLOgj8lPESkKe(L){0=fzh33(CRONBOYBtI%6ZQCS)eb*YGsJ_Y zEQCt&cqtT&M1qGNZ{|lm!#DDg+{Sz|Ilqw$q(`oLmRM}zzsB$cvoLgSpr_N27*gqM z$g>2nc8hz=x>EJ=&6KVGH&}S%O=0VN?ZrQ<+Qm?(^)P;r1V)B9#si9KTJ)XnhY?tX b9r%Sge1K2zEq*77@t>?P1Z?e%_#XcP`=6t8 diff --git a/src/style/fonts/icomoon.woff b/src/style/fonts/icomoon.woff old mode 100644 new mode 100755 index 837e46c47046366e50e39cd545d4710f6a37e50e..36cf90eaead6b8dc36887812e05b12d09f4a1153 GIT binary patch delta 801 zcmX|!ziL@#PCdZ}U&55bG}B02bV5K%lxVg(N>#p^k56E4*Z;>+e53TWRzuEq zUz?M`un~iMld6mS_yc z+f%7USu*Ja(V97#T%DW6d%&cTr})5DG$Ixf2?|??$L+y-Sk=SDiK?r)&W@PV89o_m zOpJ}La4*($g!*BVBrm2??PIfZtI4F96$2x00xT9m!yj!Xfd(GSi7q#GB}+ z5%@qusF{RV-dBfpjin3?0t9!l?*L-)^U__FRHZ^Ir)Z69v?XIn< z&`LzLHMFfRa1H0kW{+o66?pu^YycKccE}FuclaGbAR==g4KUz#zE}6rd|XvIv*`)U&iTIk-FweDTb-}X*7;~S z3<$LJ9x(E#`>C$!?N40R#T(<<#0&tYNL}LCv#at{VwP)l;`)CuPi5{-l6C+feBdYr zD(k6aVgf+BMIIlAasJD@6p5t$Cf>)PdoS#!vU3XnqLsLx!wp!>OplZAns}82nL`X{ zDf7|jX!we6DSjePwHvBXW^~bzzhP2 z)OF8(YJW*B;Mu;~sai+PQ}fs2t>ab;uvN7^w>^-KrH1rX`YgSq3&_W!9^&Oi))2~Y zh8hW?8+DQaC7+CpHC#@Aso2b6Zl@ZKh9aA*Nlg=p9%&2p<}W}LTV;VZn5b5-0liKW z+U!miL^}&%u9+*A{7%=cXt=t=Do0HcnwsS5X5IE&;3$3ySg#I!N&;#cbH#&Mn zoe3qY%`W56pic>+VmAqnUN`f4f^29|W~xc(4vgK*1k&5fBO}Y(Y41erx?_cf9{U0T zpOTM6@(Rzi2JPs@O9Nfp!mZK;#jygg@kV&Wy5l>OALAXvhhWsu`~dd)D{KFw8WWW+ z(}~_b1V({)NCPOUuSD1RVTi#xe1ii_<9&RJZ}A6Ns2v)_Xxk3J)bD87u;^akUk6&G Ag8%>k 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 {