From a533e5c82781a6aecb17add3d9a7e20150eb6369 Mon Sep 17 00:00:00 2001 From: AlexAlexandre Date: Thu, 29 Jul 2021 12:48:17 -0300 Subject: [PATCH] [IMPROVE] - migrate ImageViewer presentation layer --- .../{ImageComponent.js => ImageComponent.ts} | 2 +- ...wer.android.js => ImageViewer.android.tsx} | 79 ++++++++++--------- ...ImageViewer.ios.js => ImageViewer.ios.tsx} | 20 ++--- .../ImageViewer/{index.js => index.ts} | 0 .../ImageViewer/{types.js => types.ts} | 0 5 files changed, 53 insertions(+), 48 deletions(-) rename app/presentation/ImageViewer/{ImageComponent.js => ImageComponent.ts} (85%) rename app/presentation/ImageViewer/{ImageViewer.android.js => ImageViewer.android.tsx} (88%) rename app/presentation/ImageViewer/{ImageViewer.ios.js => ImageViewer.ios.tsx} (80%) rename app/presentation/ImageViewer/{index.js => index.ts} (100%) rename app/presentation/ImageViewer/{types.js => types.ts} (100%) diff --git a/app/presentation/ImageViewer/ImageComponent.js b/app/presentation/ImageViewer/ImageComponent.ts similarity index 85% rename from app/presentation/ImageViewer/ImageComponent.js rename to app/presentation/ImageViewer/ImageComponent.ts index cf00e4322..47249811f 100644 --- a/app/presentation/ImageViewer/ImageComponent.js +++ b/app/presentation/ImageViewer/ImageComponent.ts @@ -1,6 +1,6 @@ import { types } from './types'; -export const ImageComponent = (type) => { +export const ImageComponent = (type: string) => { let Component; if (type === types.REACT_NATIVE_IMAGE) { const { Image } = require('react-native'); diff --git a/app/presentation/ImageViewer/ImageViewer.android.js b/app/presentation/ImageViewer/ImageViewer.android.tsx similarity index 88% rename from app/presentation/ImageViewer/ImageViewer.android.js rename to app/presentation/ImageViewer/ImageViewer.android.tsx index 2cd8578bb..c458143c3 100644 --- a/app/presentation/ImageViewer/ImageViewer.android.js +++ b/app/presentation/ImageViewer/ImageViewer.android.tsx @@ -1,11 +1,7 @@ import React from 'react'; import { StyleSheet, View } from 'react-native'; import PropTypes from 'prop-types'; -import { - PanGestureHandler, - State, - PinchGestureHandler -} from 'react-native-gesture-handler'; +import { PanGestureHandler, State, PinchGestureHandler } from 'react-native-gesture-handler'; import Animated, { Easing } from 'react-native-reanimated'; import { ImageComponent } from './ImageComponent'; import { themes } from '../../constants/colors'; @@ -44,13 +40,13 @@ const { event } = Animated; -function scaleDiff(value) { +function scaleDiff(value: any) { const tmp = new Value(1); const prev = new Value(1); return [set(tmp, divide(value, prev)), set(prev, value), tmp]; } -function dragDiff(value, updating) { +function dragDiff(value: any, updating: any) { const tmp = new Value(0); const prev = new Value(0); return cond( @@ -63,7 +59,7 @@ function dragDiff(value, updating) { // returns linear friction coeff. When `value` is 0 coeff is 1 (no friction), then // it grows linearly until it reaches `MAX_FRICTION` when `value` is equal // to `MAX_VALUE` -function friction(value) { +function friction(value: any) { const MAX_FRICTION = 5; const MAX_VALUE = 100; return max( @@ -72,7 +68,7 @@ function friction(value) { ); } -function speed(value) { +function speed(value: any) { const clock = new Clock(); const dt = diff(clock); return cond(lessThan(dt, 1), 0, multiply(1000, divide(diff(value), dt))); @@ -81,7 +77,7 @@ function speed(value) { const MIN_SCALE = 1; const MAX_SCALE = 2; -function scaleRest(value) { +function scaleRest(value: any) { return cond( lessThan(value, MIN_SCALE), MIN_SCALE, @@ -89,7 +85,7 @@ function scaleRest(value) { ); } -function scaleFriction(value, rest, delta) { +function scaleFriction(value: any, rest: any, delta: any) { const MAX_FRICTION = 20; const MAX_VALUE = 0.5; const res = multiply(value, delta); @@ -105,7 +101,7 @@ function scaleFriction(value, rest, delta) { ); } -function runTiming(clock, value, dest, startStopClock = true) { +function runTiming(clock: any, value: any, dest: any, startStopClock: any = true) { const state = { finished: new Value(0), position: new Value(0), @@ -134,7 +130,7 @@ function runTiming(clock, value, dest, startStopClock = true) { ]; } -function runDecay(clock, value, velocity) { +function runDecay(clock: any, value: any, velocity: any) { const state = { finished: new Value(0), velocity: new Value(0), @@ -160,13 +156,13 @@ function runDecay(clock, value, velocity) { } function bouncyPinch( - value, - gesture, - gestureActive, - focalX, - displacementX, - focalY, - displacementY + value: any, + gesture: any, + gestureActive: any, + focalX: any, + displacementX: any, + focalY: any, + displacementY: any ) { const clock = new Clock(); @@ -212,12 +208,12 @@ function bouncyPinch( } function bouncy( - value, - gestureDiv, - gestureActive, - lowerBound, - upperBound, - f + value: any, + gestureDiv: any, + gestureActive: any, + lowerBound: any, + upperBound: any, + f: any ) { const timingClock = new Clock(); const decayClock = new Clock(); @@ -266,7 +262,7 @@ class Image extends React.PureComponent { } render() { - const { imageComponentType } = this.props; + const { imageComponentType }: any = this.props; const Component = ImageComponent(imageComponentType); @@ -277,16 +273,25 @@ const AnimatedImage = Animated.createAnimatedComponent(Image); // it was picked from https://github.com/software-mansion/react-native-reanimated/tree/master/Example/imageViewer // and changed to use FastImage animated component -export class ImageViewer extends React.Component { - static propTypes = { - uri: PropTypes.string, - width: PropTypes.number, - height: PropTypes.number, - theme: PropTypes.string, - imageComponentType: PropTypes.string - } - constructor(props) { +interface IImageViewerProps { + uri: string; + width: number; + height: number; + theme: string; + imageComponentType: string; +} + +export class ImageViewer extends React.Component { + private _onPinchEvent: any; + private _focalDisplacementX: any; + private _focalDisplacementY: any; + private _scale: any; + private _onPanEvent: any; + private _panTransX: any; + private _panTransY: any; + + constructor(props: IImageViewerProps) { super(props); // DECLARE TRANSX @@ -351,7 +356,7 @@ export class ImageViewer extends React.Component { ]); const panActive = eq(panState, State.ACTIVE); - const panFriction = value => friction(value); + const panFriction = (value: any) => friction(value); // X const panUpX = cond( diff --git a/app/presentation/ImageViewer/ImageViewer.ios.js b/app/presentation/ImageViewer/ImageViewer.ios.tsx similarity index 80% rename from app/presentation/ImageViewer/ImageViewer.ios.js rename to app/presentation/ImageViewer/ImageViewer.ios.tsx index 100bf3e6b..2dc51049e 100644 --- a/app/presentation/ImageViewer/ImageViewer.ios.js +++ b/app/presentation/ImageViewer/ImageViewer.ios.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { ScrollView, StyleSheet } from 'react-native'; -import PropTypes from 'prop-types'; import { ImageComponent } from './ImageComponent'; import { themes } from '../../constants/colors'; @@ -15,12 +14,21 @@ const styles = StyleSheet.create({ } }); +interface IImageViewer { + uri: string; + imageComponentType: string; + width: number; + height: number; + theme: string; +} + export const ImageViewer = ({ uri, imageComponentType, theme, width, height, ...props -}) => { +}: IImageViewer) => { const backgroundColor = themes[theme].previewBackground; const Component = ImageComponent(imageComponentType); return ( + // @ts-ignore ); }; - -ImageViewer.propTypes = { - uri: PropTypes.string, - imageComponentType: PropTypes.string, - width: PropTypes.number, - height: PropTypes.number, - theme: PropTypes.string -}; diff --git a/app/presentation/ImageViewer/index.js b/app/presentation/ImageViewer/index.ts similarity index 100% rename from app/presentation/ImageViewer/index.js rename to app/presentation/ImageViewer/index.ts diff --git a/app/presentation/ImageViewer/types.js b/app/presentation/ImageViewer/types.ts similarity index 100% rename from app/presentation/ImageViewer/types.js rename to app/presentation/ImageViewer/types.ts