From 711c80cc3c10bc1b9d3347330cf82b2dc6197b77 Mon Sep 17 00:00:00 2001 From: tienifr Date: Thu, 13 Jun 2024 06:35:42 +0700 Subject: [PATCH 1/2] fix: badge is not crossed out when deleted offline --- src/components/CustomStyleProvider.tsx | 21 +++++++++++++++++++++ src/components/OfflineWithFeedback.tsx | 3 ++- src/components/Text.tsx | 5 ++++- 3 files changed, 27 insertions(+), 2 deletions(-) create mode 100644 src/components/CustomStyleProvider.tsx diff --git a/src/components/CustomStyleProvider.tsx b/src/components/CustomStyleProvider.tsx new file mode 100644 index 000000000000..81ab16adafb1 --- /dev/null +++ b/src/components/CustomStyleProvider.tsx @@ -0,0 +1,21 @@ +import React, {useMemo} from 'react'; +import type {StyleProp, TextStyle, ViewStyle} from 'react-native'; + +type CustomStyleContextType = StyleProp | null; + +const CustomStyleContext = React.createContext(null); + +type CustomStyleProviderProps = React.PropsWithChildren & { + style: StyleProp | null; +}; + +function CustomStyleProvider({children, style}: CustomStyleProviderProps) { + const value = useMemo(() => style, [style]); + + return {children}; +} + +CustomStyleProvider.displayName = 'CustomStyleProvider'; + +export default CustomStyleProvider; +export {CustomStyleContext}; diff --git a/src/components/OfflineWithFeedback.tsx b/src/components/OfflineWithFeedback.tsx index 1ff3ee2ed737..e65b5a8727b4 100644 --- a/src/components/OfflineWithFeedback.tsx +++ b/src/components/OfflineWithFeedback.tsx @@ -15,6 +15,7 @@ import type * as OnyxCommon from '@src/types/onyx/OnyxCommon'; import type {ReceiptError, ReceiptErrors} from '@src/types/onyx/Transaction'; import type ChildrenProps from '@src/types/utils/ChildrenProps'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; +import CustomStyleProvider from './CustomStyleProvider'; import MessagesRow from './MessagesRow'; /** @@ -140,7 +141,7 @@ function OfflineWithFeedback({ style={[needsOpacity ? styles.offlineFeedback.pending : {}, contentContainerStyle]} needsOffscreenAlphaCompositing={shouldRenderOffscreen ? needsOpacity && needsOffscreenAlphaCompositing : undefined} > - {children} + {children} )} {shouldShowErrorMessages && hasErrorMessages && ( diff --git a/src/components/Text.tsx b/src/components/Text.tsx index b94530a423f7..adbed157317c 100644 --- a/src/components/Text.tsx +++ b/src/components/Text.tsx @@ -1,5 +1,5 @@ import type {ForwardedRef} from 'react'; -import React from 'react'; +import React, {useContext} from 'react'; // eslint-disable-next-line no-restricted-imports import {Text as RNText, StyleSheet} from 'react-native'; import type {TextProps as RNTextProps, TextStyle} from 'react-native'; @@ -8,6 +8,7 @@ import type {FontUtilsType} from '@styles/utils/FontUtils'; import FontUtils from '@styles/utils/FontUtils'; import variables from '@styles/variables'; import type ChildrenProps from '@src/types/utils/ChildrenProps'; +import {CustomStyleContext} from './CustomStyleProvider'; type TextProps = RNTextProps & ChildrenProps & { @@ -29,6 +30,7 @@ type TextProps = RNTextProps & function Text({color, fontSize = variables.fontSizeNormal, textAlign = 'left', children, family = 'EXP_NEUE', style = {}, ...props}: TextProps, ref: ForwardedRef) { const theme = useTheme(); + const customStyle = useContext(CustomStyleContext); const componentStyle: TextStyle = { color: color ?? theme.text, @@ -36,6 +38,7 @@ function Text({color, fontSize = variables.fontSizeNormal, textAlign = 'left', c textAlign, fontFamily: FontUtils.fontFamily.platform[family], ...StyleSheet.flatten(style), + ...StyleSheet.flatten(customStyle), }; if (!componentStyle.lineHeight && componentStyle.fontSize === variables.fontSizeNormal) { From d98c01342a3061dc6108146fb5715021ba80ab83 Mon Sep 17 00:00:00 2001 From: tienifr Date: Thu, 20 Jun 2024 15:48:32 +0700 Subject: [PATCH 2/2] rename to CustomStylesForChildren --- src/components/CustomStyleProvider.tsx | 21 ------------------- .../CustomStylesForChildrenProvider.tsx | 21 +++++++++++++++++++ src/components/OfflineWithFeedback.tsx | 4 ++-- src/components/Text.tsx | 4 ++-- 4 files changed, 25 insertions(+), 25 deletions(-) delete mode 100644 src/components/CustomStyleProvider.tsx create mode 100644 src/components/CustomStylesForChildrenProvider.tsx diff --git a/src/components/CustomStyleProvider.tsx b/src/components/CustomStyleProvider.tsx deleted file mode 100644 index 81ab16adafb1..000000000000 --- a/src/components/CustomStyleProvider.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React, {useMemo} from 'react'; -import type {StyleProp, TextStyle, ViewStyle} from 'react-native'; - -type CustomStyleContextType = StyleProp | null; - -const CustomStyleContext = React.createContext(null); - -type CustomStyleProviderProps = React.PropsWithChildren & { - style: StyleProp | null; -}; - -function CustomStyleProvider({children, style}: CustomStyleProviderProps) { - const value = useMemo(() => style, [style]); - - return {children}; -} - -CustomStyleProvider.displayName = 'CustomStyleProvider'; - -export default CustomStyleProvider; -export {CustomStyleContext}; diff --git a/src/components/CustomStylesForChildrenProvider.tsx b/src/components/CustomStylesForChildrenProvider.tsx new file mode 100644 index 000000000000..6fc7efa81ed8 --- /dev/null +++ b/src/components/CustomStylesForChildrenProvider.tsx @@ -0,0 +1,21 @@ +import React, {useMemo} from 'react'; +import type {StyleProp, TextStyle, ViewStyle} from 'react-native'; + +type CustomStylesForChildrenContextType = StyleProp | null; + +const CustomStylesForChildrenContext = React.createContext(null); + +type CustomStylesForChildrenProviderProps = React.PropsWithChildren & { + style: StyleProp | null; +}; + +function CustomStylesForChildrenProvider({children, style}: CustomStylesForChildrenProviderProps) { + const value = useMemo(() => style, [style]); + + return {children}; +} + +CustomStylesForChildrenProvider.displayName = 'CustomStylesForChildrenProvider'; + +export default CustomStylesForChildrenProvider; +export {CustomStylesForChildrenContext}; diff --git a/src/components/OfflineWithFeedback.tsx b/src/components/OfflineWithFeedback.tsx index 41214e5dccf2..28e1d81b30e4 100644 --- a/src/components/OfflineWithFeedback.tsx +++ b/src/components/OfflineWithFeedback.tsx @@ -13,7 +13,7 @@ import type * as OnyxCommon from '@src/types/onyx/OnyxCommon'; import type {ReceiptError, ReceiptErrors} from '@src/types/onyx/Transaction'; import type ChildrenProps from '@src/types/utils/ChildrenProps'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; -import CustomStyleProvider from './CustomStyleProvider'; +import CustomStylesForChildrenProvider from './CustomStylesForChildrenProvider'; import MessagesRow from './MessagesRow'; /** @@ -135,7 +135,7 @@ function OfflineWithFeedback({ style={[needsOpacity ? styles.offlineFeedback.pending : {}, contentContainerStyle]} needsOffscreenAlphaCompositing={shouldRenderOffscreen ? needsOpacity && needsOffscreenAlphaCompositing : undefined} > - {children} + {children} )} {shouldShowErrorMessages && hasErrorMessages && ( diff --git a/src/components/Text.tsx b/src/components/Text.tsx index adbed157317c..7d2303e31066 100644 --- a/src/components/Text.tsx +++ b/src/components/Text.tsx @@ -8,7 +8,7 @@ import type {FontUtilsType} from '@styles/utils/FontUtils'; import FontUtils from '@styles/utils/FontUtils'; import variables from '@styles/variables'; import type ChildrenProps from '@src/types/utils/ChildrenProps'; -import {CustomStyleContext} from './CustomStyleProvider'; +import {CustomStylesForChildrenContext} from './CustomStylesForChildrenProvider'; type TextProps = RNTextProps & ChildrenProps & { @@ -30,7 +30,7 @@ type TextProps = RNTextProps & function Text({color, fontSize = variables.fontSizeNormal, textAlign = 'left', children, family = 'EXP_NEUE', style = {}, ...props}: TextProps, ref: ForwardedRef) { const theme = useTheme(); - const customStyle = useContext(CustomStyleContext); + const customStyle = useContext(CustomStylesForChildrenContext); const componentStyle: TextStyle = { color: color ?? theme.text,