Skip to content

Commit

Permalink
fix(PBRW-338): broken info button inside modals (#11424)
Browse files Browse the repository at this point in the history
fix: broken info button inside modals
  • Loading branch information
MounirDhahri authored Jan 22, 2025
1 parent 4e02082 commit e855fcd
Showing 3 changed files with 110 additions and 56 deletions.
158 changes: 103 additions & 55 deletions src/app/Components/Buttons/InfoButton.tsx
Original file line number Diff line number Diff line change
@@ -5,14 +5,17 @@ import {
Spacer,
Text,
Touchable,
useColor,
useSpace,
} from "@artsy/palette-mobile"
import { AutoHeightBottomSheet } from "app/Components/BottomSheet/AutoHeightBottomSheet"
import React, { forwardRef, useImperativeHandle, useState } from "react"
import { Platform, ScrollView } from "react-native"
import React, { forwardRef, useImperativeHandle, useMemo, useState } from "react"
import { Modal, Platform, ScrollView } from "react-native"
import { SafeAreaView } from "react-native-safe-area-context"
import { FullWindowOverlay } from "react-native-screens"

interface InfoButtonProps {
isPresentedModally?: boolean
modalContent: JSX.Element
modalTitle?: string
onPress?: () => void
@@ -27,74 +30,119 @@ export const InfoButton = forwardRef<
closeModal: () => void
},
InfoButtonProps
>(({ modalContent, modalTitle, onPress, subTitle, title, titleElement, trackEvent }, ref) => {
const [modalVisible, setModalVisible] = useState(false)
>(
(
{
isPresentedModally,
modalContent,
modalTitle,
onPress,
subTitle,
title,
titleElement,
trackEvent,
},
ref
) => {
const [modalVisible, setModalVisible] = useState(false)

// Expose closeModal function via the ref
useImperativeHandle(ref, () => ({
closeModal: () => setModalVisible(false),
}))
// Expose closeModal function via the ref
useImperativeHandle(ref, () => ({
closeModal: () => setModalVisible(false),
}))

return (
<>
<Touchable
onPress={() => {
setModalVisible(true)
trackEvent?.()
onPress?.()
}}
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
>
<Flex flexDirection="row" alignItems="center">
{titleElement ? (
titleElement
) : (
<Text variant="sm" mr={0.5}>
{title}
</Text>
)}

<InfoCircleIcon fill="black60" />
</Flex>
</Touchable>
return (
<>
<Touchable
onPress={() => {
setModalVisible(true)
trackEvent?.()
onPress?.()
}}
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
>
<Flex flexDirection="row" alignItems="center">
{titleElement ? (
titleElement
) : (
<Text variant="sm" mr={0.5}>
{title}
</Text>
)}

{!!subTitle && (
<Text variant="xs" color="black60">
{subTitle}
</Text>
)}

<AutoHeightInfoModal
visible={modalVisible}
onDismiss={() => setModalVisible(false)}
modalTitle={modalTitle}
title={title}
modalContent={modalContent}
/>
</>
)
})
<InfoCircleIcon fill="black60" />
</Flex>
</Touchable>

{!!subTitle && (
<Text variant="xs" color="black60">
{subTitle}
</Text>
)}

<AutoHeightInfoModal
visible={modalVisible}
onDismiss={() => setModalVisible(false)}
modalTitle={modalTitle}
title={title}
modalContent={modalContent}
isPresentedModally={isPresentedModally}
/>
</>
)
}
)

export const AutoHeightInfoModal: React.FC<{
visible: boolean
onDismiss: () => void
isPresentedModally?: boolean
modalContent: JSX.Element
modalTitle?: string
onDismiss: () => void
title?: string
modalContent: JSX.Element
}> = ({ visible, onDismiss, modalTitle, title, modalContent }) => {
visible: boolean
}> = ({ visible, onDismiss, isPresentedModally, modalTitle, title, modalContent }) => {
const space = useSpace()
const color = useColor()

const containerComponent = useMemo(() => {
if (Platform.OS === "ios") {
return ({ children }: { children: React.ReactElement }) => (
<FullWindowOverlay>{children}</FullWindowOverlay>
)
}

if (Platform.OS === "android" && isPresentedModally) {
return ({ children }: { children: React.ReactElement }) => (
<Modal visible={visible} transparent statusBarTranslucent>
{children}
</Modal>
)
}

return undefined
}, [visible, isPresentedModally])

return (
<AutoHeightBottomSheet
visible={visible}
onDismiss={onDismiss}
containerComponent={
Platform.OS === "ios"
? ({ children }) => <FullWindowOverlay>{children}</FullWindowOverlay>
containerComponent={containerComponent}
handleIndicatorStyle={
// Inside modals, the gesture detector is not working on Android.
// This is a workaround to make to hide it
Platform.OS === "android" && isPresentedModally
? {
backgroundColor: color("white100"),
}
: undefined
}
>
<Flex pb={4} pt={1}>
<SafeAreaView
style={{
paddingBottom: space(4),
paddingHorizontal: space(2),
}}
>
<Text mx={2} variant="lg-display">
{modalTitle ?? title}
</Text>
@@ -112,7 +160,7 @@ export const AutoHeightInfoModal: React.FC<{
Close
</Button>
</Flex>
</Flex>
</SafeAreaView>
</AutoHeightBottomSheet>
)
}
1 change: 1 addition & 0 deletions src/app/Scenes/SavedSearchAlert/Components/Form.tsx
Original file line number Diff line number Diff line change
@@ -116,6 +116,7 @@ export const Form: React.FC<FormProps> = ({
matching works are added to Artsy.
</Text>
}
isPresentedModally
/>
<Spacer y={4} />
</>
7 changes: 6 additions & 1 deletion src/app/Scenes/SavedSearchAlert/CreateSavedSearchAlert.tsx
Original file line number Diff line number Diff line change
@@ -58,7 +58,12 @@ export const CreateSavedSearchAlert: React.FC<CreateSavedSearchAlertProps> = (pr
saveSession(state)
}}
>
<Modal visible={visible} presentationStyle="fullScreen" statusBarTranslucent>
<Modal
visible={visible}
presentationStyle="fullScreen"
statusBarTranslucent
animationType="slide"
>
<SafeAreaView style={{ flex: 1 }}>
<KeyboardAvoidingView
style={{ flex: 1 }}

0 comments on commit e855fcd

Please sign in to comment.