Merge pull request #30 from CaanDoll/master

feat: brokenElement新增函数方式

README.md

@@ -83,7 +83,7 @@ function ImageView() {
 | viewClassName  | string                            | 否   | 图片容器 className         |
 | imageClassName | string                            | 否   | 图片 className             |
 | loadingElement | JSX.Element                       | 否   | 自定义 loading             |
-| brokenElement  | JSX.Element                       | 否   | 加载失败 Element           |
+| brokenElement  | JSX.Element | ((photoProps: brokenElementDataType) => JSX.Element)                       | 否   | 加载失败 Element           |
 
 #### PhotoConsumer
 

src/Photo.tsx

@@ -4,9 +4,11 @@ import Spinner from './components/Spinner';
 import getSuitableImageSize from './utils/getSuitableImageSize';
 import useMountedState from './utils/useMountedState';
 import './Photo.less';
+import { brokenElementDataType } from './types';
 
 export interface IPhotoProps extends React.HTMLAttributes<any> {
   src: string;
+  intro?: React.ReactNode;
   loaded: boolean;
   broken: boolean;
   width: number;
@@ -15,22 +17,25 @@ export interface IPhotoProps extends React.HTMLAttributes<any> {
   className?: string;
   onImageLoad: (PhotoParams, callback?: Function) => void;
   loadingElement?: JSX.Element;
-  brokenElement?: JSX.Element;
+  brokenElement?: JSX.Element | ((photoProps: brokenElementDataType) => JSX.Element);
 }
 
-const Photo: React.FC<IPhotoProps> = ({
-  src,
-  loaded,
-  broken,
-  width,
-  height,
-  rotate,
-  className,
-  onImageLoad,
-  loadingElement,
-  brokenElement,
-  ...restProps
-}) => {
+const Photo: React.FC<IPhotoProps> = props => {
+  const {
+    src,
+    intro,
+    loaded,
+    broken,
+    width,
+    height,
+    rotate,
+    className,
+    onImageLoad,
+    loadingElement,
+    brokenElement,
+    ...restProps
+  } = props;
+
   const isMounted = useMountedState();
 
   function handleImageLoaded(e) {
@@ -75,7 +80,16 @@ const Photo: React.FC<IPhotoProps> = ({
     }
     return loadingElement || <Spinner />;
   }
-  return brokenElement || null;
+  if (brokenElement) {
+    if (typeof brokenElement === 'function') {
+      return brokenElement({
+        src,
+        intro,
+      });
+    }
+    return brokenElement;
+  }
+  return null;
 };
 
 Photo.displayName = 'Photo';

src/PhotoSlider.tsx

@@ -396,6 +396,7 @@ export default class PhotoSlider extends React.Component<IPhotoSliderProps, Phot
                       <PhotoView
                         key={item.key || realIndex}
                         src={item.src}
+                        intro={item.intro}
                         onReachMove={this.handleReachMove}
                         onReachUp={this.handleReachUp}
                         onPhotoTap={this.handlePhotoTap}

src/PhotoView.tsx

@@ -18,6 +18,7 @@ import {
   TouchStartEnum,
   ShowAnimateEnum,
   OriginRectType,
+  brokenElementDataType,
 } from './types';
 import './PhotoView.less';
 import getSuitableImageSize from './utils/getSuitableImageSize';
@@ -26,6 +27,8 @@ import correctSuitablePosition from './utils/correctSuitablePosition';
 export interface IPhotoViewProps {
   // 图片地址
   src: string;
+  // 介绍
+  intro?: React.ReactNode;
   // 容器类名
   viewClassName?: string;
   // 图片类名
@@ -35,7 +38,7 @@ export interface IPhotoViewProps {
   // 自定义 loading
   loadingElement?: JSX.Element;
   // 加载失败 Element
-  brokenElement?: JSX.Element;
+  brokenElement?: JSX.Element | ((photoProps: brokenElementDataType) => JSX.Element);
   // 旋转状态
   rotate: number;
 
@@ -445,6 +448,7 @@ export default class PhotoView extends React.Component<IPhotoViewProps, typeof i
   render() {
     const {
       src,
+      intro,
       viewClassName,
       className,
       style,
@@ -478,6 +482,7 @@ export default class PhotoView extends React.Component<IPhotoViewProps, typeof i
           <Photo
             className={className}
             src={src}
+            intro={intro}
             width={width}
             height={height}
             loaded={loaded}

src/types.ts

@@ -14,6 +14,11 @@ export type dataType = {
   intro?: React.ReactNode;
 };
 
+/**
+ * brokenElement函数使用参数
+ */
+export type brokenElementDataType = Pick<dataType, 'src' | 'intro'>;
+
 export type overlayRenderProps = {
   // 图片列表
   images: dataType[];
@@ -57,7 +62,7 @@ export interface IPhotoProviderBase {
   // 自定义 loading
   loadingElement?: JSX.Element;
   // 加载失败 Element
-  brokenElement?: JSX.Element;
+  brokenElement?: JSX.Element | ((photoProps: brokenElementDataType) => JSX.Element);
 }
 
 export type ReachMoveFunction = (reachState: ReachTypeEnum, clientX: number, clientY: number, scale?: number) => void;