修复图片加载失败无法关闭的问题

example/stories/Index.stories.js

@@ -26,9 +26,12 @@ const SmallImage = styled.img`
   cursor: pointer;
 `;
 
-export default {
-  title: '基本操作',
-};
+const Button = styled.button`
+  padding: 6px 10px;
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  cursor: pointer;
+`;
 
 storiesOf('基本操作', module)
   .add('默认预览', () => (
@@ -42,7 +45,7 @@ storiesOf('基本操作', module)
       </ImageList>
     </PhotoProvider>
   ))
-  .add('只展示两张图片', () => (
+  .add('只展示两张', () => (
     <PhotoProvider>
       <ImageList>
         {photoImages.map((item, index) => (
@@ -52,4 +55,22 @@ storiesOf('基本操作', module)
         ))}
       </ImageList>
     </PhotoProvider>
+  ))
+  .add('错误图片地址', () => (
+    <PhotoProvider>
+      <ImageList>
+        <PhotoConsumer src={null}>
+          <SmallImage src={image1} />
+        </PhotoConsumer>
+      </ImageList>
+    </PhotoProvider>
+  ))
+  .add('按钮触发', () => (
+    <PhotoProvider>
+      <ImageList>
+        <PhotoConsumer src={image4}>
+          <Button>打开预览</Button>
+        </PhotoConsumer>
+      </ImageList>
+    </PhotoProvider>
   ));

src/Photo.tsx

@@ -8,6 +8,7 @@ import './Photo.less';
 export interface IPhotoProps extends React.HTMLAttributes<any> {
   src: string;
   loaded: boolean;
+  broken: boolean;
   width: number;
   height: number;
   className?: string;
@@ -19,6 +20,7 @@ export interface IPhotoProps extends React.HTMLAttributes<any> {
 const Photo: React.FC<IPhotoProps> = ({
   src,
   loaded,
+  broken,
   width,
   height,
   className,
@@ -27,7 +29,6 @@ const Photo: React.FC<IPhotoProps> = ({
   brokenElement,
   ...restProps
 }) => {
-  const [broken, setBroken] = React.useState<boolean>(false);
   const isMounted = useMountedState();
 
   function handleImageLoaded(e) {
@@ -44,7 +45,9 @@ const Photo: React.FC<IPhotoProps> = ({
 
   function handleImageBroken() {
     if (isMounted()) {
-      setBroken(true);
+      onImageLoad({
+        broken: true,
+      });
     }
   }
 

src/PhotoSlider.tsx

@@ -364,6 +364,7 @@ export default class PhotoSlider extends React.Component<
                     },
                   )}
                   style={{ background: `rgba(0, 0, 0, ${backdropOpacity})` }}
+                  onAnimationEnd={onShowAnimateEnd}
                 />
                 {bannerVisible && (
                   <div
@@ -420,7 +421,6 @@ export default class PhotoSlider extends React.Component<
                         isActive={photoIndex === realIndex}
                         showAnimateType={showAnimateType}
                         originRect={originRect}
-                        onShowAnimateEnd={onShowAnimateEnd}
                       />
                     );
                   })}

src/PhotoView.tsx

@@ -58,8 +58,6 @@ export interface IPhotoViewProps {
   showAnimateType?: ShowAnimateEnum;
   // 动画源位置
   originRect?: OriginRectType;
-  // 进入或结束动画回调
-  onShowAnimateEnd?: () => void;
 }
 
 const initialState = {
@@ -73,6 +71,8 @@ const initialState = {
   height: 1,
   // 加载成功状态
   loaded: false,
+  // 破碎状态
+  broken: false,
 
   // 图片 X 偏移量
   x: 0,
@@ -457,7 +457,6 @@ export default class PhotoView extends React.Component<
 
       showAnimateType,
       originRect,
-      onShowAnimateEnd,
     } = this.props;
     const {
       width,
@@ -467,6 +466,7 @@ export default class PhotoView extends React.Component<
       y,
       scale,
       touched,
+      broken,
     } = this.state;
 
     const transform = `translate3d(${x}px, ${y}px, 0) scale(${scale})`;
@@ -480,13 +480,12 @@ export default class PhotoView extends React.Component<
         />
         <div
           className={classNames({
-            PhotoView__animateIn: loaded && showAnimateType === ShowAnimateEnum.In,
-            PhotoView__animateOut: loaded && showAnimateType === ShowAnimateEnum.Out,
+            PhotoView__animateIn: (loaded || broken) && showAnimateType === ShowAnimateEnum.In,
+            PhotoView__animateOut: (loaded || broken) && showAnimateType === ShowAnimateEnum.Out,
           })}
           style={{
             transformOrigin: loaded ? getAnimateOrigin(originRect, width, height) : undefined,
           }}
-          onAnimationEnd={onShowAnimateEnd}
         >
           <Photo
             className={className}
@@ -494,6 +493,7 @@ export default class PhotoView extends React.Component<
             width={width}
             height={height}
             loaded={loaded}
+            broken={broken}
             onMouseDown={isMobile ? undefined : this.handleMouseDown}
             onTouchStart={isMobile ? this.handleTouchStart : undefined}
             onWheel={this.handleWheel}