@@ -64,8 +64,9 @@ export interface ImageGalleryProps
6464 showToolbar ?: boolean ;
6565 /** 是否内嵌 */
6666 embed ?: boolean ;
67- items : Array < ImageGalleryItem > ;
67+ items ? : Array < ImageGalleryItem > ;
6868 position ?: ImageGalleryPosition ;
69+ enlargeWithGallary ?: boolean ;
6970}
7071
7172export interface ImageGalleryState {
@@ -74,6 +75,8 @@ export interface ImageGalleryState {
7475 items : Array < ImageGalleryItem > ;
7576 /** 图片缩放比例尺 */
7677 scale : number ;
78+ /** 默认图片缩放比例尺 */
79+ defaultScale : number ;
7780 /** 图片旋转角度 */
7881 rotate : number ;
7982 /**
@@ -95,7 +98,7 @@ export interface ImageGalleryState {
9598 /** 图片是否加载中 */
9699 imageLoading : boolean ;
97100 /** 图片信息 */
98- imageLoadInfo ? : {
101+ imageLoadInfo : {
99102 naturalWidth : number ;
100103 naturalHeight : number ;
101104 url : string ;
@@ -149,33 +152,37 @@ export class ImageGallery extends React.Component<
149152 tx : 0 ,
150153 ty : 0 ,
151154 scale : 1 ,
155+ defaultScale : 1 ,
152156 rotate : 0 ,
153157 showToolbar : false ,
154158 imageGallaryClassName : '' ,
155159 actions : ImageGallery . defaultProps . actions ,
156- imageLoading : false ,
157- isNaturalSize : false
160+ imageLoading : true ,
161+ isNaturalSize : false ,
162+ imageLoadInfo : {
163+ naturalWidth : 0 ,
164+ naturalHeight : 0 ,
165+ url : ''
166+ }
158167 } ;
159168
160169 galleryMain ?: HTMLDivElement ;
161170
162171 constructor ( props : ImageGalleryProps ) {
163172 super ( props ) ;
164173
165- const hasItems = ! ! props ?. items ;
166-
167174 this . state = {
168175 ...this . state ,
169- items : hasItems ? props . items : [ ] ,
170- index : hasItems ? 0 : - 1 ,
176+ items : props . items ?? [ ] ,
177+ index : ! ! props ?. items ? 0 : - 1 ,
171178 showToolbar : ! ! props ?. showToolbar
172179 } ;
173180 }
174181
175182 componentDidUpdate ( prevProps : Readonly < ImageGalleryProps > ) : void {
176183 if ( this . props . items !== prevProps . items ) {
177184 this . setState ( {
178- items : this . props . items
185+ items : this . props . items ?? [ ]
179186 } ) ;
180187 }
181188 if ( this . props ?. showToolbar !== prevProps ?. showToolbar ) {
@@ -189,6 +196,12 @@ export class ImageGallery extends React.Component<
189196 position : this . props . position
190197 } ) ;
191198 }
199+
200+ if ( this . props . enlargeWithGallary !== prevProps . enlargeWithGallary ) {
201+ this . setState ( {
202+ enlargeWithGallary : this . props . enlargeWithGallary
203+ } ) ;
204+ }
192205 }
193206
194207 @autobind
@@ -291,6 +304,7 @@ export class ImageGallery extends React.Component<
291304 enlargeWithGallary : info . enlargeWithGallary ,
292305 imageGallaryClassName : info . imageGallaryClassName ,
293306 position : info ?. position ,
307+ imageLoading : true ,
294308 /** 外部传入合法key值的actions才会生效 */
295309 actions : Array . isArray ( info . toolbarActions )
296310 ? info . toolbarActions . filter ( action =>
@@ -301,8 +315,9 @@ export class ImageGallery extends React.Component<
301315 }
302316
303317 resetImageAction ( ) {
318+ const { defaultScale} = this . state ;
304319 this . setState ( {
305- scale : 1 ,
320+ scale : defaultScale ,
306321 rotate : 0 ,
307322 isNaturalSize : false
308323 } ) ;
@@ -319,15 +334,13 @@ export class ImageGallery extends React.Component<
319334 @autobind
320335 prev ( ) {
321336 const index = this . state . index ;
322- this . setState ( { index : index - 1 , imageLoading : true } ) ;
323- this . resetImageAction ( ) ;
337+ this . setIndex ( index - 1 ) ;
324338 }
325339
326340 @autobind
327341 next ( ) {
328342 const index = this . state . index ;
329- this . setState ( { index : index + 1 , imageLoading : true } ) ;
330- this . resetImageAction ( ) ;
343+ this . setIndex ( index + 1 ) ;
331344 }
332345
333346 @autobind
@@ -340,8 +353,16 @@ export class ImageGallery extends React.Component<
340353 * 设置当前选中
341354 */
342355 @autobind
343- setIndex ( index : number ) {
344- this . setState ( { index, imageLoading : true } ) ;
356+ setIndex ( cIndex : number ) {
357+ const { items, index} = this . state ;
358+ const bool = items [ index ] . originalSrc === items [ cIndex ] . originalSrc ;
359+ console . log ( bool ) ;
360+ this . setState ( {
361+ index : cIndex ,
362+ imageLoading : ! bool ,
363+ tx : 0 ,
364+ ty : 0
365+ } ) ;
345366 this . resetImageAction ( ) ;
346367 }
347368
@@ -379,10 +400,11 @@ export class ImageGallery extends React.Component<
379400 return ;
380401 }
381402
403+ const { defaultScale} = this . state ;
382404 switch ( action . key ) {
383405 case ImageActionKey . DEFAULT_VIEW :
384406 this . setState ( {
385- scale : 1 ,
407+ scale : defaultScale ,
386408 isNaturalSize : false ,
387409 tx : 0 ,
388410 ty : 0
@@ -421,13 +443,24 @@ export class ImageGallery extends React.Component<
421443 @autobind
422444 handleImageLoad ( e : React . SyntheticEvent < HTMLImageElement > ) {
423445 const { index, items} = this . state ;
446+ const { clientWidth, clientHeight} = this . galleryMain ! ;
447+ // @ts -ignore
448+ const naturalHeight = e . target ?. naturalHeight ;
449+ // @ts -ignore
450+ const naturalWidth = e . target ?. naturalWidth ;
451+ let scale = 1 ;
452+ if ( naturalHeight >= clientHeight || naturalWidth >= clientWidth ) {
453+ const p1 = clientHeight / naturalHeight ;
454+ const p2 = clientWidth / naturalWidth ;
455+ scale = p1 > p2 ? p2 : p1 ;
456+ }
424457 this . setState ( {
458+ scale,
459+ defaultScale : scale ,
425460 imageLoadInfo : {
426461 url : items [ index ] ?. src ,
427- // @ts -ignore
428- naturalHeight : e . target ?. naturalHeight ,
429- // @ts -ignore
430- naturalWidth : e . target ?. naturalWidth
462+ naturalHeight,
463+ naturalWidth
431464 } ,
432465 imageLoading : false
433466 } ) ;
@@ -465,9 +498,10 @@ export class ImageGallery extends React.Component<
465498 if ( action . key === ImageActionKey . DRAG ) {
466499 return (
467500 < DragProgress
468- value = { 1 }
501+ value = { scale }
469502 onChange = { this . handleDragProgress }
470503 skin = { embed ? 'light' : 'dark' }
504+ max = { 2 }
471505 />
472506 ) ;
473507 }
@@ -559,7 +593,7 @@ export class ImageGallery extends React.Component<
559593 return [
560594 ~ index && items [ index ] ? (
561595 < >
562- < div className = { cx ( 'ImageGallery-main' ) } ref = { this . galleryMainRef } >
596+ < div className = { cx ( 'ImageGallery-main' ) } >
563597 < div
564598 className = { cx (
565599 'ImageGallery-preview' ,
@@ -576,7 +610,10 @@ export class ImageGallery extends React.Component<
576610 : ''
577611 ) }
578612 >
579- < div className = { cx ( 'ImageGallery-image-wrap' ) } >
613+ < div
614+ className = { cx ( 'ImageGallery-image-wrap' ) }
615+ ref = { this . galleryMainRef }
616+ >
580617 < img
581618 draggable = { false }
582619 src = { items [ index ] . originalSrc }
0 commit comments