From 8ea2bc94f73481e53978903828c89120dcaaab77 Mon Sep 17 00:00:00 2001 From: Andre Kovac Date: Wed, 1 Mar 2017 18:10:56 -0300 Subject: [PATCH 1/4] Add .npmignore to remove Demo out of npm package --- .npmignore | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 .npmignore diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..43e2b4f --- /dev/null +++ b/.npmignore @@ -0,0 +1,4 @@ +.idea/ +.gitignore + +Demo/ From f30f6b7a84c221c0767c59bbbf5c609155884aed Mon Sep 17 00:00:00 2001 From: Andre Kovac Date: Wed, 1 Mar 2017 18:13:18 -0300 Subject: [PATCH 2/4] Add defaultProps for all non-required props --- library/TransformableImage.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/library/TransformableImage.js b/library/TransformableImage.js index 17dd7d3..c70297a 100644 --- a/library/TransformableImage.js +++ b/library/TransformableImage.js @@ -28,9 +28,13 @@ export default class TransformableImage extends Component { }; static defaultProps = { + pixels: undefined, enableTransform: true, enableScale: true, - enableTranslate: true + enableTranslate: true, + onSingleTapConfirmed: undefined, + onTransformGestureReleased: undefined, + onViewTransformed: undefined, }; constructor(props) { From f6010285ca40585bec4b5ef80862d1a67c342227 Mon Sep 17 00:00:00 2001 From: Andre Kovac Date: Wed, 1 Mar 2017 18:18:23 -0300 Subject: [PATCH 3/4] Add onSingleTap and onDoubleTap props and pass on to ViewTransformer as props Complementary change to commits in react-native-view-transformer of addition of these callbacks. --- library/TransformableImage.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/library/TransformableImage.js b/library/TransformableImage.js index c70297a..2e8a41b 100644 --- a/library/TransformableImage.js +++ b/library/TransformableImage.js @@ -22,7 +22,21 @@ export default class TransformableImage extends Component { enableTransform: PropTypes.bool, enableScale: PropTypes.bool, enableTranslate: PropTypes.bool, + /** + * Callback after a single tap (includes first and second tap of double-tap) + */ + onSingleTap: PropTypes.func, + /** + * Callback after a single tap which is not part of a double-tap + */ onSingleTapConfirmed: PropTypes.func, + /** + * Callback on a double tap (if supplied, it overwrites the default scaling behavior) + * + * The first two arguments of the callback are the x- and y-coordinates of the + * finger while tapping, respectively. + */ + onDoubleTap: PropTypes.func, onTransformGestureReleased: PropTypes.func, onViewTransformed: PropTypes.func }; @@ -32,7 +46,9 @@ export default class TransformableImage extends Component { enableTransform: true, enableScale: true, enableTranslate: true, + onSingleTap: undefined, onSingleTapConfirmed: undefined, + onDoubleTap: undefined, onTransformGestureReleased: undefined, onViewTransformed: undefined, }; @@ -98,7 +114,9 @@ export default class TransformableImage extends Component { enableResistance={true} onTransformGestureReleased={this.props.onTransformGestureReleased} onViewTransformed={this.props.onViewTransformed} + onSingleTap={this.props.onSingleTap} onSingleTapConfirmed={this.props.onSingleTapConfirmed} + onDoubleTap={this.props.onDoubleTap} maxScale={maxScale} contentAspectRatio={contentAspectRatio} onLayout={this.onLayout.bind(this)} From f231ad20ccb4c489dd8e4821ee265fcbeed1800b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Ra=CC=88dlinger?= Date: Tue, 7 Mar 2017 17:02:54 +0100 Subject: [PATCH 4/4] add imageComponent prop to make the used Image Component configurable --- library/TransformableImage.js | 37 +++++++++++++++++++++++------------ 1 file changed, 25 insertions(+), 12 deletions(-) diff --git a/library/TransformableImage.js b/library/TransformableImage.js index 2e8a41b..ea4f5b0 100644 --- a/library/TransformableImage.js +++ b/library/TransformableImage.js @@ -38,7 +38,11 @@ export default class TransformableImage extends Component { */ onDoubleTap: PropTypes.func, onTransformGestureReleased: PropTypes.func, - onViewTransformed: PropTypes.func + onViewTransformed: PropTypes.func, + /** + * specify used Image-Component + */ + imageComponent: PropTypes.func, }; static defaultProps = { @@ -51,6 +55,7 @@ export default class TransformableImage extends Component { onDoubleTap: undefined, onTransformGestureReleased: undefined, onViewTransformed: undefined, + imageComponent: Image, }; constructor(props) { @@ -75,12 +80,14 @@ export default class TransformableImage extends Component { componentWillReceiveProps(nextProps) { if (!sameSource(this.props.source, nextProps.source)) { //image source changed, clear last image's pixels info if any - this.setState({pixels: undefined, keyAcumulator: this.state.keyAcumulator + 1}) + this.setState({ pixels: undefined, keyAcumulator: this.state.keyAcumulator + 1 }) this.getImageSize(nextProps.source); } } render() { + // jsx components must be uppercase + const { imageComponent: ImageComponent } = this.props; let maxScale = 1; let contentAspectRatio = undefined; let width, height; //pixels @@ -120,14 +127,19 @@ export default class TransformableImage extends Component { maxScale={maxScale} contentAspectRatio={contentAspectRatio} onLayout={this.onLayout.bind(this)} - style={this.props.style}> - + ); @@ -148,7 +160,7 @@ export default class TransformableImage extends Component { } onLayout(e) { - let {width, height} = e.nativeEvent.layout; + let { width, height } = e.nativeEvent.layout; if (this.state.width !== width || this.state.height !== height) { this.setState({ width: width, @@ -158,21 +170,22 @@ export default class TransformableImage extends Component { } getImageSize(source) { - if(!source) return; + if (!source) return; + const { imageComponent: ImageComponent } = this.props; DEV && console.log('getImageSize...' + JSON.stringify(source)); - if (typeof Image.getSize === 'function') { + if (typeof ImageComponent.getSize === 'function') { if (source && source.uri) { - Image.getSize( + ImageComponent.getSize( source.uri, (width, height) => { DEV && console.log('getImageSize...width=' + width + ', height=' + height); if (width && height) { - if(this.state.pixels && this.state.pixels.width === width && this.state.pixels.height === height) { + if (this.state.pixels && this.state.pixels.width === width && this.state.pixels.height === height) { //no need to update state } else { - this.setState({pixels: {width, height}}); + this.setState({ pixels: { width, height } }); } } },