From 419e7be5f20b363254974576a8032f9be0cbb274 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Wed, 18 Oct 2023 16:23:30 +0200 Subject: [PATCH 1/7] Rename OpacityView --- src/components/{OpacityView.js => OpacityView.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/components/{OpacityView.js => OpacityView.tsx} (100%) diff --git a/src/components/OpacityView.js b/src/components/OpacityView.tsx similarity index 100% rename from src/components/OpacityView.js rename to src/components/OpacityView.tsx From 722043e9115259eb26153b817a114ad84ee5d165 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Fri, 20 Oct 2023 14:38:38 +0200 Subject: [PATCH 2/7] Resolve problem with styles --- src/components/OpacityView.tsx | 36 +++++++++++++--------------------- 1 file changed, 14 insertions(+), 22 deletions(-) diff --git a/src/components/OpacityView.tsx b/src/components/OpacityView.tsx index daef93cdc09..74ed2a0c92b 100644 --- a/src/components/OpacityView.tsx +++ b/src/components/OpacityView.tsx @@ -1,69 +1,61 @@ import React from 'react'; import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'; -import PropTypes from 'prop-types'; +import {ViewStyle} from 'react-native'; import variables from '../styles/variables'; import * as StyleUtils from '../styles/StyleUtils'; import shouldRenderOffscreen from '../libs/shouldRenderOffscreen'; -const propTypes = { +type OpacityViewProps = { /** * Should we dim the view */ - shouldDim: PropTypes.bool.isRequired, + shouldDim: boolean; /** * Content to render */ - children: PropTypes.node.isRequired, + children: React.ReactNode; /** * Array of style objects * @default [] */ // eslint-disable-next-line react/forbid-prop-types - style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), + style: ViewStyle | ViewStyle[]; /** * The value to use for the opacity when the view is dimmed * @default 0.5 */ - dimmingValue: PropTypes.number, + dimmingValue?: number; /** Whether the view needs to be rendered offscreen (for Android only) */ - needsOffscreenAlphaCompositing: PropTypes.bool, + needsOffscreenAlphaCompositing?: boolean; }; -const defaultProps = { - style: [], - dimmingValue: variables.hoverDimValue, - needsOffscreenAlphaCompositing: false, -}; - -function OpacityView(props) { +function OpacityView({shouldDim, children, style = [], dimmingValue = variables.hoverDimValue, needsOffscreenAlphaCompositing = false}: OpacityViewProps) { const opacity = useSharedValue(1); const opacityStyle = useAnimatedStyle(() => ({ opacity: opacity.value, })); React.useEffect(() => { - if (props.shouldDim) { - opacity.value = withTiming(props.dimmingValue, {duration: 50}); + if (shouldDim) { + opacity.value = withTiming(dimmingValue, {duration: 50}); } else { opacity.value = withTiming(1, {duration: 50}); } - }, [props.shouldDim, props.dimmingValue, opacity]); + }, [shouldDim, dimmingValue, opacity]); return ( - {props.children} + {children} ); } OpacityView.displayName = 'OpacityView'; -OpacityView.propTypes = propTypes; -OpacityView.defaultProps = defaultProps; export default OpacityView; From d8772efae9355f1bc6a89adebc3d74446ef8d530 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Tue, 24 Oct 2023 14:24:01 +0200 Subject: [PATCH 3/7] Fix styles --- src/components/OpacityView.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/OpacityView.tsx b/src/components/OpacityView.tsx index 74ed2a0c92b..87e2976c4d0 100644 --- a/src/components/OpacityView.tsx +++ b/src/components/OpacityView.tsx @@ -1,9 +1,9 @@ import React from 'react'; -import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'; -import {ViewStyle} from 'react-native'; +import Animated, {AnimatedStyle, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'; +import {StyleProp, ViewStyle} from 'react-native'; import variables from '../styles/variables'; -import * as StyleUtils from '../styles/StyleUtils'; import shouldRenderOffscreen from '../libs/shouldRenderOffscreen'; +import styles from '../styles/styles'; type OpacityViewProps = { /** @@ -20,8 +20,7 @@ type OpacityViewProps = { * Array of style objects * @default [] */ - // eslint-disable-next-line react/forbid-prop-types - style: ViewStyle | ViewStyle[]; + style: StyleProp>>; /** * The value to use for the opacity when the view is dimmed @@ -49,7 +48,7 @@ function OpacityView({shouldDim, children, style = [], dimmingValue = variables. return ( {children} From f862334f9dc17289d38aecac23510ea33aa6382e Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Tue, 24 Oct 2023 15:22:47 +0200 Subject: [PATCH 4/7] Lint fixes --- src/components/OpacityView.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/OpacityView.tsx b/src/components/OpacityView.tsx index 87e2976c4d0..581b083bff8 100644 --- a/src/components/OpacityView.tsx +++ b/src/components/OpacityView.tsx @@ -3,7 +3,6 @@ import Animated, {AnimatedStyle, useAnimatedStyle, useSharedValue, withTiming} f import {StyleProp, ViewStyle} from 'react-native'; import variables from '../styles/variables'; import shouldRenderOffscreen from '../libs/shouldRenderOffscreen'; -import styles from '../styles/styles'; type OpacityViewProps = { /** From 971d506368eeb42a3c8abd752e58553e385ef5c4 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Thu, 26 Oct 2023 09:31:28 +0200 Subject: [PATCH 5/7] Changes after review for OpacityView.tsx --- src/components/OpacityView.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/OpacityView.tsx b/src/components/OpacityView.tsx index 581b083bff8..f212dd8b199 100644 --- a/src/components/OpacityView.tsx +++ b/src/components/OpacityView.tsx @@ -19,11 +19,11 @@ type OpacityViewProps = { * Array of style objects * @default [] */ - style: StyleProp>>; + style: StyleProp>; /** * The value to use for the opacity when the view is dimmed - * @default 0.5 + * @default variables.hoverDimValue */ dimmingValue?: number; From 9074f0b65647df9c2618abc311a4280755516604 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Sun, 29 Oct 2023 19:49:57 +0100 Subject: [PATCH 6/7] Fix lint problems for OpacityView --- src/components/OpacityView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/OpacityView.tsx b/src/components/OpacityView.tsx index 6d94a8a2c78..83ed2e953a8 100644 --- a/src/components/OpacityView.tsx +++ b/src/components/OpacityView.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import Animated, {AnimatedStyle, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'; import {StyleProp, ViewStyle} from 'react-native'; +import Animated, {AnimatedStyle, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'; import shouldRenderOffscreen from '@libs/shouldRenderOffscreen'; import variables from '@styles/variables'; From d1efd231819083a86ae1f1188a30bf9ce3d2b790 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Thu, 2 Nov 2023 17:19:24 +0100 Subject: [PATCH 7/7] Shrink comments --- src/components/OpacityView.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/components/OpacityView.tsx b/src/components/OpacityView.tsx index 83ed2e953a8..6f82658bcac 100644 --- a/src/components/OpacityView.tsx +++ b/src/components/OpacityView.tsx @@ -5,14 +5,10 @@ import shouldRenderOffscreen from '@libs/shouldRenderOffscreen'; import variables from '@styles/variables'; type OpacityViewProps = { - /** - * Should we dim the view - */ + /** Should we dim the view */ shouldDim: boolean; - /** - * Content to render - */ + /** Content to render */ children: React.ReactNode; /**