Skip to content

Commit

Permalink
ref: removed proptypes files. Fix type issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@kubabutkiewicz
kubabutkiewicz committed Nov 28, 2023
1 parent 6a7ad2c commit cbec630
Show file tree
Hide file tree
Showing 19 changed files with 98 additions and 241 deletions.
5 changes: 2 additions & 3 deletions src/components/Attachments/AttachmentCarousel/CarouselButtons.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
import _ from 'underscore';
import * as AttachmentCarouselViewPropTypes from '@components/Attachments/propTypes';
import Button from '@components/Button';
import * as Expensicons from '@components/Icon/Expensicons';
import Tooltip from '@components/Tooltip';
Expand Down Expand Up @@ -45,6 +42,7 @@ function CarouselButtons({page, attachments, shouldShowArrows, onBack, onForward
onPress={onBack}
onPressIn={cancelAutoHideArrow}
onPressOut={autoHideArrow}
text=""
/>
</View>
</Tooltip>
Expand All @@ -61,6 +59,7 @@ function CarouselButtons({page, attachments, shouldShowArrows, onBack, onForward
onPress={onForward}
onPressIn={cancelAutoHideArrow}
onPressOut={autoHideArrow}
text=""
/>
</View>
</Tooltip>
Expand Down
54 changes: 28 additions & 26 deletions src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
/* eslint-disable es/no-optional-chaining */
import PropTypes from 'prop-types';
import React, {useContext, useEffect, useRef, useState} from 'react';
import {ActivityIndicator, PixelRatio, StyleSheet, View} from 'react-native';
import * as AttachmentsPropTypes from '@components/Attachments/propTypes';
import Image from '@components/Image';
import AttachmentCarouselPagerContext from './AttachmentCarouselPagerContext';
import ImageTransformer from './ImageTransformer';
import ImageWrapper from './ImageWrapper';

function getCanvasFitScale({canvasWidth, canvasHeight, imageWidth, imageHeight}) {
type CanvasDimensions = {canvasWidth: number; canvasHeight: number; imageWidth: number; imageHeight: number};
type OnLoadEvent = {nativeEvent: {width: number; height: number}};

function getCanvasFitScale({canvasWidth, canvasHeight, imageWidth, imageHeight}: CanvasDimensions) {
const imageScaleX = canvasWidth / imageWidth;
const imageScaleY = canvasHeight / imageHeight;

Expand All @@ -17,22 +17,14 @@ function getCanvasFitScale({canvasWidth, canvasHeight, imageWidth, imageHeight})

const cachedDimensions = new Map();

const pagePropTypes = {
/** Whether source url requires authentication */
isAuthTokenRequired: PropTypes.bool,

/** URL to full-sized attachment, SVG function, or numeric static image on native platforms */
source: AttachmentsPropTypes.attachmentSourcePropType.isRequired,

isActive: PropTypes.bool.isRequired,
};

const defaultProps = {
isAuthTokenRequired: false,
type AttachmentCarouselPageProps = {
isAuthTokenRequired?: boolean;
source: string;
isActive: boolean;
};

function AttachmentCarouselPage({source, isAuthTokenRequired, isActive: initialIsActive}) {
const {canvasWidth, canvasHeight} = useContext(AttachmentCarouselPagerContext);
function AttachmentCarouselPage({source, isAuthTokenRequired = false, isActive: initialIsActive}: AttachmentCarouselPageProps) {
const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext);

const dimensions = cachedDimensions.get(source);

Expand All @@ -49,7 +41,7 @@ function AttachmentCarouselPage({source, isAuthTokenRequired, isActive: initialI
}, [initialIsActive]);

const [initialActivePageLoad, setInitialActivePageLoad] = useState(isActive);
const isImageLoaded = useRef(null);
const isImageLoaded = useRef<boolean | null>(null);
const [isImageLoading, setIsImageLoading] = useState(false);
const [isFallbackLoading, setIsFallbackLoading] = useState(false);
const [showFallback, setShowFallback] = useState(true);
Expand Down Expand Up @@ -88,13 +80,20 @@ function AttachmentCarouselPage({source, isAuthTokenRequired, isActive: initialI
onLoadEnd={() => {
setShowFallback(false);
setIsImageLoading(false);
isImageLoaded.current = true;
if (isImageLoaded.current) {
isImageLoaded.current = true;
}
}}
onLoad={(evt) => {
onLoad={(evt: OnLoadEvent) => {
const imageWidth = (evt.nativeEvent?.width || 0) / PixelRatio.get();
const imageHeight = (evt.nativeEvent?.height || 0) / PixelRatio.get();

const {imageScaleX, imageScaleY} = getCanvasFitScale({canvasWidth, canvasHeight, imageWidth, imageHeight});
const {imageScaleX, imageScaleY} = getCanvasFitScale({
canvasWidth: attachmentCarouselPagerContext?.canvasWidth ?? 0,
canvasHeight: attachmentCarouselPagerContext?.canvasHeight ?? 0,
imageWidth,
imageHeight,
});

// Don't update the dimensions if they are already set
if (
Expand Down Expand Up @@ -145,11 +144,16 @@ function AttachmentCarouselPage({source, isAuthTokenRequired, isActive: initialI
}
setIsFallbackLoading(false);
}}
onLoad={(evt) => {
onLoad={(evt: OnLoadEvent) => {
const imageWidth = evt.nativeEvent.width;
const imageHeight = evt.nativeEvent.height;

const {imageScaleX, imageScaleY} = getCanvasFitScale({canvasWidth, canvasHeight, imageWidth, imageHeight});
const {imageScaleX, imageScaleY} = getCanvasFitScale({
canvasWidth: attachmentCarouselPagerContext?.canvasWidth ?? 0,
canvasHeight: attachmentCarouselPagerContext?.canvasHeight ?? 0,
imageWidth,
imageHeight,
});
const minImageScale = Math.min(imageScaleX, imageScaleY);

const scaledImageWidth = imageWidth * minImageScale;
Expand Down Expand Up @@ -182,8 +186,6 @@ function AttachmentCarouselPage({source, isAuthTokenRequired, isActive: initialI
);
}

AttachmentCarouselPage.propTypes = pagePropTypes;
AttachmentCarouselPage.defaultProps = defaultProps;
AttachmentCarouselPage.displayName = 'AttachmentCarouselPage';

export default AttachmentCarouselPage;
6 changes: 4 additions & 2 deletions src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import {ComponentType, createContext, RefObject} from 'react';
import {createContext, RefObject} from 'react';
import PagerView from 'react-native-pager-view';
import {SharedValue} from 'react-native-reanimated';

type AttachmentCarouselPagerContextValue = {
canvasWidth: number;
canvasHeight: number;
isScrolling: SharedValue<boolean>;
pagerRef: RefObject<ComponentType>;
pagerRef: RefObject<PagerView>;
shouldPagerScroll: SharedValue<boolean>;
onPinchGestureChange: (value?: boolean) => void;
onTap: () => void;
Expand All @@ -17,3 +18,4 @@ type AttachmentCarouselPagerContextValue = {
const AttachmentCarouselContextPager = createContext<AttachmentCarouselPagerContextValue | null>(null);

export default AttachmentCarouselContextPager;
export type {AttachmentCarouselPagerContextValue};
5 changes: 3 additions & 2 deletions src/components/Attachments/AttachmentCarousel/Pager/ImageTransformer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';
import React, {ComponentType, RefObject, useContext, useEffect, useMemo, useRef, useState} from 'react';
import {View} from 'react-native';
import {Gesture, GestureDetector} from 'react-native-gesture-handler';
import Animated, {
Expand Down Expand Up @@ -45,6 +45,7 @@ type ImageTransformerProps = ChildrenProps & {
imageScaleY?: number;
scaledImageWidth?: number;
scaledImageHeight?: number;
minImageScale?: number;

Check failure on line 48 in src/components/Attachments/AttachmentCarousel/Pager/ImageTransformer.tsx

View workflow job for this annotation

GitHub Actions / lint 

'minImageScale' PropType is defined but prop is never used
isActive: boolean;
};

Expand Down Expand Up @@ -342,7 +343,7 @@ function ImageTransformer({imageWidth = 0, imageHeight = 0, imageScaleX = 1, ima
};
}
})
.simultaneousWithExternalGesture(attachmentCarouselPagerContext?.pagerRef ?? {current: undefined}, doubleTap, singleTap)
.simultaneousWithExternalGesture((attachmentCarouselPagerContext?.pagerRef as unknown as RefObject<ComponentType>) ?? {current: undefined}, doubleTap, singleTap)
.onBegin(() => {
stopAnimation();
})
Expand Down
35 changes: 21 additions & 14 deletions src/components/Attachments/AttachmentCarousel/Pager/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,31 @@
import React, {ForwardedRef, ReactNode, useImperativeHandle, useMemo, useRef, useState} from 'react';
import React, {ComponentType, ForwardedRef, ReactNode, RefObject, useImperativeHandle, useMemo, useRef, useState} from 'react';
import {View} from 'react-native';
import {createNativeWrapper, GestureHandlerRootView} from 'react-native-gesture-handler';
import PagerView from 'react-native-pager-view';
import PagerView, {PagerViewOnPageScrollEventData} from 'react-native-pager-view';
import {OnPageSelectedEventData} from 'react-native-pager-view/lib/typescript/PagerViewNativeComponent';
import Animated, {runOnJS, useAnimatedProps, useAnimatedReaction, useEvent, useHandler, useSharedValue} from 'react-native-reanimated';
import {DependencyList} from 'react-native-reanimated/lib/typescript/reanimated2/hook';
import {DirectEventHandler} from 'react-native/Libraries/Types/CodegenTypes';
import {Attachment} from '@components/Attachments/AttachmentCarousel/types';
import useThemeStyles from '@styles/useThemeStyles';
import AttachmentCarouselPagerContext from './AttachmentCarouselPagerContext';
import AttachmentCarouselPagerContext, {AttachmentCarouselPagerContextValue} from './AttachmentCarouselPagerContext';

type PagerScrollEvent = PagerViewOnPageScrollEventData & {
eventName?: string;
};

const AnimatedPagerView = Animated.createAnimatedComponent(createNativeWrapper(PagerView));

function usePageScrollHandler(handlers: {onPageScroll: (e) => void}, dependencies: DependencyList) {
function usePageScrollHandler<TContext extends Record<string, unknown>>(handlers: {onPageScroll: (event: PagerScrollEvent, context: TContext) => void}, dependencies: DependencyList) {
const {context, doDependenciesDiffer} = useHandler(handlers, dependencies);
const subscribeForEvents = ['onPageScroll'];

return useEvent(
return useEvent<PagerScrollEvent>(
(event) => {
'worklet';

const {onPageScroll} = handlers;
if (onPageScroll && event.eventName.endsWith('onPageScroll')) {
if (onPageScroll && event.eventName?.endsWith('onPageScroll')) {
onPageScroll(event, context);
}
},
Expand All @@ -38,12 +44,12 @@ type PagerProps = {
items: Attachment[];
renderItem: (props: {item: Attachment; isActive: boolean; index: number}) => ReactNode;
initialIndex?: number;
onPageSelected?: () => void;
onPageSelected: DirectEventHandler<OnPageSelectedEventData>;
onTap?: () => void;
onSwipe?: () => void;
onSwipeSuccess?: () => void;
onSwipeDown?: () => void;
onPinchGestureChange?: () => void;
onPinchGestureChange?: (value?: boolean) => void;
containerWidth: number;
containerHeight: number;
};
Expand All @@ -66,7 +72,7 @@ function AttachmentCarouselPager(
) {
const styles = useThemeStyles();
const shouldPagerScroll = useSharedValue(true);
const pagerRef = useRef(null);
const pagerRef = useRef<PagerView>(null);

const isScrolling = useSharedValue(false);
const activeIndex = useSharedValue(initialIndex);
Expand Down Expand Up @@ -100,17 +106,18 @@ function AttachmentCarouselPager(

useImperativeHandle(
ref,
() => ({
setPage: (...props) => pagerRef.current.setPage(...props),
}),
() =>
({
setPage: (...props) => pagerRef?.current?.setPage(...props),
} as PagerView),
[],
);

const animatedProps = useAnimatedProps(() => ({
scrollEnabled: shouldPagerScroll.value,
}));

const contextValue = useMemo(
const contextValue: AttachmentCarouselPagerContextValue = useMemo(
() => ({
canvasWidth: containerWidth,
canvasHeight: containerHeight,
Expand All @@ -135,7 +142,7 @@ function AttachmentCarouselPager(
onPageScroll={pageScrollHandler}
animatedProps={animatedProps}
onPageSelected={onPageSelected}
ref={pagerRef}
ref={pagerRef as unknown as RefObject<ComponentType<PagerView>>}
style={styles.flex1}
initialPage={initialIndex}
>
Expand Down
46 changes: 0 additions & 46 deletions src/components/Attachments/AttachmentCarousel/attachmentCarouselPropTypes.js
View file

This file was deleted.

16 changes: 9 additions & 7 deletions src/components/Attachments/AttachmentCarousel/index.native.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,13 @@ import compose from '@libs/compose';
import Navigation from '@libs/Navigation/Navigation';
import useThemeStyles from '@styles/useThemeStyles';
import variables from '@styles/variables';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import CarouselButtons from './CarouselButtons';
import CarouselItem, {Attachment} from './CarouselItem';
import extractAttachmentsFromReport from './extractAttachmentsFromReport';
import AttachmentCarouselPager from './Pager';
import AttachmentCarouselProps, {AttachmentCarouselOnyxProps} from './types';
import AttachmentCarouselProps, {AttachmentCarouselOnyxProps, TransactionAttachmentCarouselOnyxProps} from './types';
import useCarouselArrows from './useCarouselArrows';

function AttachmentCarousel(props: AttachmentCarouselProps) {
Expand Down Expand Up @@ -146,8 +147,8 @@ function AttachmentCarousel(props: AttachmentCarouselProps) {
renderItem={renderItem}
initialIndex={page}
onPageSelected={({nativeEvent: {position: newPage}}) => updatePage(newPage)}
onPinchGestureChange={(newIsPinchGestureRunning) => {
setIsPinchGestureRunning(newIsPinchGestureRunning);
onPinchGestureChange={(newIsPinchGestureRunning?: boolean) => {
setIsPinchGestureRunning(newIsPinchGestureRunning ?? false);
if (!newIsPinchGestureRunning && !shouldShowArrows) {
setShouldShowArrows(true);
}
Expand Down Expand Up @@ -181,14 +182,15 @@ export default compose(
canEvict: false,
},
}),
withLocalize,
// eslint-disable-next-line rulesdir/no-multiple-onyx-in-file
withOnyx<AttachmentCarouselProps, AttachmentCarouselOnyxProps>({
withOnyx<AttachmentCarouselProps, TransactionAttachmentCarouselOnyxProps>({
transaction: {
key: ({report, parentReportActions}) => {
const parentReportAction = lodashGet(parentReportActions, [report.parentReportActionID]);
return `${ONYXKEYS.COLLECTION.TRANSACTION}${lodashGet(parentReportAction, 'originalMessage.IOUTransactionID', 0)}`;
const parentReportAction = parentReportActions?.[report?.parentReportActionID ?? ''];
const originalMessage = parentReportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.IOU ? parentReportAction?.originalMessage : null;
return `${ONYXKEYS.COLLECTION.TRANSACTION}${originalMessage?.IOUTransactionID ?? 0}`;
},
},
}),
withLocalize,
)(AttachmentCarousel);
Loading

0 comments on commit cbec630

Please sign in to comment.