Skip to content

Commit

Permalink
feat(fscomponents): add ability to hide oveflow on carousel
Browse files Browse the repository at this point in the history
 - optional prop for horizontal scroll, allows for movement exclusively by left right swipes
  • Loading branch information
varzaman committed Jun 15, 2021
1 parent 1fa0f22 commit 379ccb0
Show file tree
Hide file tree
Showing 5 changed files with 15 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -310,7 +310,7 @@ export class MultiCarousel<ItemT> extends Component<MultiCarouselProps<ItemT>, M
flexBasis: 'auto',
flexDirection: 'row',
overflowY: 'hidden',
overflowX: 'scroll'
overflowX: this.props.hideOverflow ? 'hidden' : 'scroll'
}}
onMouseDown={this.handleMouseStart}
onMouseUp={this.handleMouseEnd}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,4 +36,5 @@ export interface MultiCarouselProps<ItemT> {
keyExtractor?: (item: ItemT, index: number) => string;
hideZoomButton?: boolean;
contentContainerStyle?: StyleProp<ViewStyle>;
hideOverflow?: boolean;
}
Original file line number Diff line number Diff line change
Expand Up @@ -375,6 +375,7 @@ export class ZoomCarousel extends Component<ZoomCarouselProps, ZoomCarouselState
style={this.props.fillContainer ? S.fullHeight : null}
nextArrowOnBlur={this.props.nextArrowOnBlur}
hidePageIndicator={this.props.hidePageIndicator}
hideOverflow={this.props.hideOverflow}
/>

{!this.props.hideZoomButton && (
Expand Down
1 change: 1 addition & 0 deletions packages/fscomponents/src/components/ZoomCarousel/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export interface ZoomCarouselProps {
showThumbnails?: boolean;
thumbnailStyle?: any;
thumbnailContainerStyle?: any;
hideOverflow?: boolean;

/**
* The styling of the container that holds the image carousel and thumbnails
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -57,4 +57,15 @@ storiesOf('ZoomCarousel', module)
showThumbnails={boolean('Show Thumbnails', true)}
showImageCounter={boolean('Show Image Counter', true)}
/>
)).add('without horizontal overflow', () => (
<ZoomCarousel
images={object('Images', defaultImages)}
peekSize={number('Peek Size', 20)}
gapSize={number('Gap Size', 10)}
centerMode={boolean('Center Mode', true)}
showArrow={boolean('Show Arrow', true)}
hideZoomButton={boolean('Hide Zoom Button', false)}
fillContainer={boolean('Fill Container', false)}
hideOverflow={true}
/>
));

0 comments on commit 379ccb0

Please sign in to comment.