blsmedia/bot
2
0
Fork 0
Code Activity

🐛 Fix background image popover closing on variable select

Browse Source 
Closes #1755
This commit is contained in:
Baptiste Arnaud
2024-09-02 12:07:44 +02:00
parent d51cf00f69
commit 64b3439521
1 changed files with 54 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
apps/builder/src/features/theme/components/general/BackgroundContent.tsx
View File

@ -4,11 +4,12 @@ import {
Flex, Flex,
Popover, Popover,
PopoverContent, PopoverContent,
PopoverTrigger,
Text, Text,
Image, Image,
Button, Button,
Portal, Portal,
PopoverAnchor,
useDisclosure,
} from '@chakra-ui/react' } from '@chakra-ui/react'
import { isNotEmpty } from '@typebot.io/lib' import { isNotEmpty } from '@typebot.io/lib'
import { Background } from '@typebot.io/schemas' import { Background } from '@typebot.io/schemas'
@ -20,6 +21,7 @@ import {
defaultBackgroundType, defaultBackgroundType,
} from '@typebot.io/schemas/features/typebot/theme/constants' } from '@typebot.io/schemas/features/typebot/theme/constants'
import { useTranslate } from '@tolgee/react' import { useTranslate } from '@tolgee/react'
import { useOutsideClick } from '@/hooks/useOutsideClick'
type BackgroundContentProps = { type BackgroundContentProps = {
background?: Background background?: Background
@ -30,48 +32,65 @@ export const BackgroundContent = ({
background, background,
onBackgroundContentChange, onBackgroundContentChange,
}: BackgroundContentProps) => { }: BackgroundContentProps) => {
const { isOpen, onClose, onOpen } = useDisclosure()
const { t } = useTranslate() const { t } = useTranslate()
const { typebot } = useTypebot() const { typebot } = useTypebot()
const handleContentChange = (content: string) => const handleContentChange = (content: string) =>
onBackgroundContentChange(content) onBackgroundContentChange(content)
const popoverContainerRef = React.useRef<HTMLDivElement>(null)
useOutsideClick({
ref: popoverContainerRef,
handler: onClose,
isEnabled: isOpen,
})
if ((background?.type ?? defaultBackgroundType) === BackgroundType.IMAGE) { if ((background?.type ?? defaultBackgroundType) === BackgroundType.IMAGE) {
if (!typebot) return null if (!typebot) return null
return ( return (
<Popover isLazy placement="top"> <Flex ref={popoverContainerRef}>
<PopoverTrigger> <Popover isLazy isOpen={isOpen} placement="top">
{isNotEmpty(background?.content) ? ( <PopoverAnchor>
<Image {isNotEmpty(background?.content) ? (
src={background?.content} <Image
alt={t('theme.sideMenu.global.background.image.alt')} src={background?.content}
cursor="pointer" alt={t('theme.sideMenu.global.background.image.alt')}
_hover={{ filter: 'brightness(.9)' }} onClick={onOpen}
transition="filter 200ms" cursor="pointer"
rounded="md" _hover={{ filter: 'brightness(.9)' }}
maxH="200px" transition="filter 200ms"
objectFit="cover" rounded="md"
/> w="full"
) : ( maxH="200px"
<Button> objectFit="cover"
{t('theme.sideMenu.global.background.image.button')} />
</Button> ) : (
)} <Button onClick={onOpen} w="full">
</PopoverTrigger> {t('theme.sideMenu.global.background.image.button')}
<Portal> </Button>
<PopoverContent p="4" w="500px"> )}
<ImageUploadContent </PopoverAnchor>
uploadFileProps={{ <Portal>
workspaceId: typebot.workspaceId, <PopoverContent
typebotId: typebot.id, p="4"
fileName: 'background', w="500px"
}} onMouseDown={(e) => e.stopPropagation()}
defaultUrl={background?.content} onPointerDown={(e) => e.stopPropagation()}
onSubmit={handleContentChange} >
excludedTabs={['giphy', 'icon']} <ImageUploadContent
/> uploadFileProps={{
</PopoverContent> workspaceId: typebot.workspaceId,
</Portal> typebotId: typebot.id,
</Popover> fileName: 'background',
}}
defaultUrl={background?.content}
onSubmit={handleContentChange}
excludedTabs={['giphy', 'icon']}
/>
</PopoverContent>
</Portal>
</Popover>
</Flex>
) )
} }
if ((background?.type ?? defaultBackgroundType) === BackgroundType.COLOR) { if ((background?.type ?? defaultBackgroundType) === BackgroundType.COLOR) {