From e3b6d87fa2b7c3ad616b5e67e9a85ab3b48c5dab Mon Sep 17 00:00:00 2001 From: Kaidoj Date: Sun, 22 Mar 2020 14:42:29 +0200 Subject: [PATCH 1/3] Added possibility to add toolbar for image slide views --- README.md | 29 +++++ __tests__/ReactNativeSmartGallery-test.js | 36 ++++++- src/index.js | 125 ++++++++++++---------- 3 files changed, 128 insertions(+), 62 deletions(-) diff --git a/README.md b/README.md index becd124..443a00b 100644 --- a/README.md +++ b/README.md @@ -155,6 +155,35 @@ render() { //... ``` +## :tada: Toolbar usage example + +Sometimes you would want some custom touchable elements with your image component. This is the way you can use touchable elements. You can add custom styles, etc. To style image container use ```imageContainerStyle``` prop. + +```javascript +import SmartGallery from "react-native-smart-gallery"; + +//... +render() { + return ( + ( + + console.log('toolbar button pressed')} + > + Toolbar button + + + )} + /> + ); +} +//... +``` +
--- diff --git a/__tests__/ReactNativeSmartGallery-test.js b/__tests__/ReactNativeSmartGallery-test.js index 6bf4c52..571e321 100644 --- a/__tests__/ReactNativeSmartGallery-test.js +++ b/__tests__/ReactNativeSmartGallery-test.js @@ -1,13 +1,41 @@ -import "react-native"; +import { View, TouchableOpacity, Text } from "react-native"; import React from "react"; import { data } from "./mocks/dataMock"; -import SmartGallery from "../src"; +import SmartGallery from "../src/index"; // Note: test renderer must be required after react-native. import renderer from "react-test-renderer"; -it("React Native Smart Gallery renders correctly", () => { - renderer.create(); +describe("React Native Smart Gallery", () => { + it("should render correctly", () => { + const r = renderer.create(); + expect(JSON.stringify(r.toJSON())).not.toMatch(new RegExp("Toolbar button")); + }); + + it("should render toolbar correctly", () => { + const r = renderer.create( ( + + jest.fn()} + > + Toolbar button + + + )} + />); + expect(JSON.stringify(r.toJSON())).toMatch(new RegExp("Toolbar button")); + }); + + it("should consume image container styles", () => { + const r = renderer.create(); + expect(r.toJSON()) + .toHaveProperty("props.imageContainerStyle.backgroundColor", "#f1f2f3"); + }); }); diff --git a/src/index.js b/src/index.js index 19f9ff0..3a8f2d7 100644 --- a/src/index.js +++ b/src/index.js @@ -55,6 +55,8 @@ export default class SmartGallery extends PureComponent { renderItem: PropTypes.func, errorComponent: PropTypes.func, scrollViewProps: PropTypes.object, + toolbarItem: PropTypes.func, + imageContainerStyle: PropTypes.object, }; static defaultProps = { @@ -67,7 +69,11 @@ export default class SmartGallery extends PureComponent { scrollViewProps: {}, onEndReachedThreshold: 0.5, loadMinimal: true, - loadMinimalSize: 2 + loadMinimalSize: 2, + toolbarItem: undefined, + imageContainerStyle: { + flex: 0.8 + } }; imageRefs = new Map(); @@ -302,65 +308,68 @@ export default class SmartGallery extends PureComponent { onTransformGestureReleased, onSwipeUpReleased, onSwipeDownReleased, onDoubleTapStartReached, onDoubleTapEndReached, resizeMode, enableResistance, enableScale, maxScale, enableTranslate, resistantStrHorizontal, resistantStrVertical, maxOverScrollDistance, errorComponent, - renderItem, style + renderItem, style, toolbarItem, imageContainerStyle } = this.props; return ( - { - onViewTransformed && - onViewTransformed(transform, index); - }} - onPinchTransforming={(transform) => { - onPinchTransforming && - onPinchTransforming(transform, index); - }} - onPinchStartReached={(transform) => { - onPinchStartReached && - onPinchStartReached(transform, index); - }} - onPinchEndReached={(transform) => { - onPinchEndReached && - onPinchEndReached(transform, index); - }} - onTransformGestureReleased={(transform) => { - // need the "return" here because the - // return value is checked in ViewTransformer - return onTransformGestureReleased && - onTransformGestureReleased(transform, index); - }} - onSwipeUpReleased={(transform) => { - onSwipeUpReleased && - onSwipeUpReleased(transform, index); - }} - onSwipeDownReleased={(transform) => { - onSwipeDownReleased && - onSwipeDownReleased(transform, index); - }} - onDoubleTapStartReached={(transform) => { - onDoubleTapStartReached && - onDoubleTapStartReached(transform, index); - }} - onDoubleTapEndReached={(transform) => { - onDoubleTapEndReached && - onDoubleTapEndReached(transform, index); - }} - ref={(ref) => { this.imageRefs.set(index, ref); }} - key={`innerImage#${item.key || index}`} - errorComponent={errorComponent} - imageComponent={renderItem} - image={item} - index={index} - enableScale={enableScale} - maxScale={maxScale} - enableTranslate={enableTranslate} - enableResistance={enableResistance} - resistantStrHorizontal={resistantStrHorizontal} - resistantStrVertical={resistantStrVertical} - maxOverScrollDistance={maxOverScrollDistance} - resizeMode={resizeMode} - style={style} - /> + + { + onViewTransformed && + onViewTransformed(transform, index); + }} + onPinchTransforming={(transform) => { + onPinchTransforming && + onPinchTransforming(transform, index); + }} + onPinchStartReached={(transform) => { + onPinchStartReached && + onPinchStartReached(transform, index); + }} + onPinchEndReached={(transform) => { + onPinchEndReached && + onPinchEndReached(transform, index); + }} + onTransformGestureReleased={(transform) => { + // need the "return" here because the + // return value is checked in ViewTransformer + return onTransformGestureReleased && + onTransformGestureReleased(transform, index); + }} + onSwipeUpReleased={(transform) => { + onSwipeUpReleased && + onSwipeUpReleased(transform, index); + }} + onSwipeDownReleased={(transform) => { + onSwipeDownReleased && + onSwipeDownReleased(transform, index); + }} + onDoubleTapStartReached={(transform) => { + onDoubleTapStartReached && + onDoubleTapStartReached(transform, index); + }} + onDoubleTapEndReached={(transform) => { + onDoubleTapEndReached && + onDoubleTapEndReached(transform, index); + }} + ref={(ref) => { this.imageRefs.set(index, ref); }} + key={`innerImage#${item.key || index}`} + errorComponent={errorComponent} + imageComponent={renderItem} + image={item} + index={index} + enableScale={enableScale} + maxScale={maxScale} + enableTranslate={enableTranslate} + enableResistance={enableResistance} + resistantStrHorizontal={resistantStrHorizontal} + resistantStrVertical={resistantStrVertical} + maxOverScrollDistance={maxOverScrollDistance} + resizeMode={resizeMode} + style={style} + /> + + {toolbarItem ? toolbarItem(item, index) : null} ); } @@ -420,7 +429,7 @@ export default class SmartGallery extends PureComponent { this._galleryViewPager = component; }} scrollViewStyle={this.props.scrollViewStyle} - scrollEnabled={false} + scrollEnabled={this.props.toolbarItem ? true : false} renderItem={this.renderPage} data={images} {...gestureResponder} From 0a703f698fe10c26a367b69c04776885c0e6b81a Mon Sep 17 00:00:00 2001 From: Kaidoj Date: Sun, 22 Mar 2020 14:50:53 +0200 Subject: [PATCH 2/3] Readme typo fix --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 443a00b..d47103c 100644 --- a/README.md +++ b/README.md @@ -169,7 +169,7 @@ render() { images={[ { uri: "https://luehangs.site/pic-chat-app-images/beautiful-blond-blonde-hair-478544.jpg", ]} - toolBarItem={() => ( + toolbarItem={() => ( console.log('toolbar button pressed')} From 139bde0d47c908cf340301be875f8c51d8c11d76 Mon Sep 17 00:00:00 2001 From: Kaidoj Date: Sun, 22 Mar 2020 15:16:07 +0200 Subject: [PATCH 3/3] Removed redundant test check --- __tests__/ReactNativeSmartGallery-test.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/__tests__/ReactNativeSmartGallery-test.js b/__tests__/ReactNativeSmartGallery-test.js index 571e321..4b576e4 100644 --- a/__tests__/ReactNativeSmartGallery-test.js +++ b/__tests__/ReactNativeSmartGallery-test.js @@ -10,8 +10,7 @@ import renderer from "react-test-renderer"; describe("React Native Smart Gallery", () => { it("should render correctly", () => { - const r = renderer.create(); - expect(JSON.stringify(r.toJSON())).not.toMatch(new RegExp("Toolbar button")); + renderer.create(); }); it("should render toolbar correctly", () => {