feat(fscomponents): add renderModalContent prop

**Description** add prop to override modal content
brandingbrand · Aug 5, 2019 · a753357 · a753357
1 parent 5674f95
commit a753357
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 28 deletions.
diff --git a/packages/fscomponents/src/components/ZoomCarousel/ZoomCarousel.tsx b/packages/fscomponents/src/components/ZoomCarousel/ZoomCarousel.tsx
@@ -537,7 +537,9 @@ export class ZoomCarousel extends Component<ZoomCarouselProps, ZoomCarouselState
         transparent={true}
         onRequestClose={this.closeZoom}
       >
-        <ZoomImages
+        {this.props.renderModalContent && this.props.renderModalContent(this.closeZoom)}
+        {!this.props.renderModalContent && <View>
+        `<ZoomImages
           gapSizeScaled={this.gapSizeScaled}
           zoomContainerWidth={this.zoomContainerWidth}
           images={this.props.images}
@@ -578,7 +580,8 @@ export class ZoomCarousel extends Component<ZoomCarouselProps, ZoomCarouselState
               dotActiveStyle={this.props.dotActiveStyle}
             />
           )}
-        </Animated.View>
+        </Animated.View>`
+        </View>}
       </Modal>
     );
   }

diff --git a/packages/fscomponents/src/components/ZoomCarousel/ZoomCarousel.web.tsx b/packages/fscomponents/src/components/ZoomCarousel/ZoomCarousel.web.tsx
@@ -15,6 +15,7 @@ import {
   View
 } from 'react-native';
 import { ImageData, ZoomCarouselProps } from './types';
+import { Modal } from '../Modal';
 import { MultiCarousel } from '../MultiCarousel';
 import { PhotoSwipe } from './PhotoSwipe.web';
 
@@ -259,6 +260,44 @@ export class ZoomCarousel extends Component<ZoomCarouselProps, ZoomCarouselState
     );
   }
 
+  renderModal = () => {
+    if (this.props.renderModalContent) {
+      return(
+        <Modal visible={this.state.isZooming} transparent={true}>
+          {this.props.renderModalContent(this.closeZoom)}
+        </Modal>
+      );
+    } else {
+      return(
+        <PhotoSwipe
+          isOpen={this.state.isZooming}
+          items={this.props.images
+            .map(img => img.zoomSrc || img.src)
+            .map((img, i) => ({
+              src: img.uri || img,
+              w: this.state.screenWidth,
+              h: this.state.imageSizes[i]
+                ? this.state.screenWidth *
+                  this.state.imageSizes[i].height /
+                  this.state.imageSizes[i].width
+                : this.state.imageHeight
+            }))}
+          options={{
+            loop: false,
+            fullscreenEl: false,
+            shareEl: false,
+            captionEl: false,
+            history: false,
+            closeOnScroll: false,
+            index: this.state.currentIndex
+          }}
+          afterChange={this.handleZoomCarouselChange}
+          onClose={this.closeZoom}
+        />
+      );
+    }
+  }
+
   render(): JSX.Element {
     const { peekSize = 0, gapSize = 0 } = this.props;
 
@@ -302,32 +341,7 @@ export class ZoomCarousel extends Component<ZoomCarouselProps, ZoomCarouselState
                   </TouchableOpacity>
                 )}
               </View>}
-
-            <PhotoSwipe
-              isOpen={this.state.isZooming}
-              items={this.props.images
-                .map(img => img.zoomSrc || img.src)
-                .map((img, i) => ({
-                  src: img.uri || img,
-                  w: this.state.screenWidth,
-                  h: this.state.imageSizes[i]
-                    ? this.state.screenWidth *
-                      this.state.imageSizes[i].height /
-                      this.state.imageSizes[i].width
-                    : this.state.imageHeight
-                }))}
-              options={{
-                loop: false,
-                fullscreenEl: false,
-                shareEl: false,
-                captionEl: false,
-                history: false,
-                closeOnScroll: false,
-                index: this.state.currentIndex
-              }}
-              afterChange={this.handleZoomCarouselChange}
-              onClose={this.closeZoom}
-            />
+            {this.renderModal()}
           </div>
         </View>
 

diff --git a/packages/fscomponents/src/components/ZoomCarousel/types.ts b/packages/fscomponents/src/components/ZoomCarousel/types.ts
@@ -29,6 +29,7 @@ export interface ZoomCarouselProps {
   ) => React.ReactNode;
   renderImageWeb?: (data: any, i: number) => React.ReactNode;
   renderCloseButton?: (closeZoom: () => void) => React.ReactNode;
+  renderModalContent?: (closeModal: () => void) => React.ReactNode;
   renderPageIndicator?: (
     currentIndex: number,
     itemsCount: number