feat(fscomponents): Add styling and prop options to ZoomCarousel

packages/fscomponents/src/components/MultiCarousel/MultiCarousel.web.tsx

@@ -322,7 +322,7 @@ export class MultiCarousel<ItemT> extends Component<MultiCarouselProps<ItemT>, M
             this.state.currentIndex,
             this.props.items.length
           )
-        ) : (
+        ) : !this.props.hidePageIndicator && (
           <PageIndicator
             style={this.props.pageIndicatorStyle}
             currentIndex={this.state.currentIndex}

packages/fscomponents/src/components/MultiCarousel/MultiCarouselProps.ts

@@ -29,6 +29,7 @@ export interface MultiCarouselProps<ItemT> {
   prevArrowOnBlur?: () => void;
   renderItem: (data: any, i: number) => ReactNode;
   renderPageIndicator?: (currentIndex: number, itemsCount: number) => ReactNode;
+  hidePageIndicator?: boolean;
   showArrow?: boolean;
   style?: any;
   zoomButtonStyle?: any;

packages/fscomponents/src/components/ZoomCarousel/ZoomCarousel.web.tsx

@@ -107,6 +107,9 @@ const S = StyleSheet.create({
   fullHeight: {
     height: '100%'
   },
+  fullHeightWithThumbnails: {
+    height: '85%'
+  },
   thumbnailImg: {
     width: '100%',
     height: '100%'
@@ -303,14 +306,18 @@ export class ZoomCarousel extends Component<ZoomCarouselProps, ZoomCarouselState
 
   render(): JSX.Element {
     const { peekSize = 0, gapSize = 0 } = this.props;
+    const height = this.props.fillContainer ? this.props.fillContainerStyle ||
+      (this.props.showThumbnails ? S.fullHeightWithThumbnails : S.fullHeight)
+       : null;
 
+    // line 316 and 324 needs to be at 100% height
     return (
       <View
-        style={this.props.fillContainer ? S.fullHeight : null}
+        style={S.fullHeight}
         onLayout={this.handleLayoutChange}
       >
         <View
-          style={this.props.fillContainer ? S.fullHeight : null}
+          style={height}
         >
           <div
             id={`zoom-carousel-${this.id}`}
@@ -330,8 +337,9 @@ export class ZoomCarousel extends Component<ZoomCarouselProps, ZoomCarouselState
               zoomButtonStyle={this.props.zoomButtonStyle}
               renderPageIndicator={this.props.renderPageIndicator}
               centerMode={this.props.centerMode}
-              style={this.props.fillContainer ? S.fullHeight : null}
+              style={height}
               nextArrowOnBlur={this.props.nextArrowOnBlur}
+              hidePageIndicator={this.props.hidePageIndicator}
             />
 
             {!this.props.hideZoomButton &&

packages/fscomponents/src/components/ZoomCarousel/types.ts

@@ -44,4 +44,18 @@ export interface ZoomCarouselProps {
   thumbnailStyle?: any;
   thumbnailContainerStyle?: any;
   contentContainerStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * Boolean to turn on and off the page indicator (dots)
+   *
+   * @example true
+   */
+  hidePageIndicator?: boolean;
+
+  /**
+   * The styling used if fill container is set to true (that makes all carousel elememts expand)
+   *
+   * @example {{height: '50%'}}
+   */
+  fillContainerStyle?: StyleProp<ViewStyle>;
 }

packages/fscomponents/src/components/__stories__/ZoomCarousel.story.tsx

@@ -31,4 +31,25 @@ storiesOf('ZoomCarousel', module)
       images={images}
       showArrow={true}
     />
+  )).add('fill container', () => (
+    <ZoomCarousel
+      peekSize={20}
+      gapSize={10}
+      centerMode={true}
+      showThumbnails={true}
+      images={images}
+      showArrow={true}
+      fillContainer={true}
+    />
+  )).add('custom fill container', () => (
+    <ZoomCarousel
+      peekSize={20}
+      gapSize={10}
+      centerMode={true}
+      showThumbnails={true}
+      images={images}
+      showArrow={true}
+      fillContainer={true}
+      fillContainerStyle={{height: '75%'}}
+    />
   ));