blsmedia/bot
2
0
Fork 0
Code Activity

🐛 Fix outside click on picture choice

Browse Source
This commit is contained in:
Baptiste Arnaud
2023-05-26 18:06:46 +02:00
parent 4dec06fc75
commit 4230f47be9
2 changed files with 38 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceItemSettings.tsx
View File

@@ -5,11 +5,10 @@ import {
Button, Button,
HStack, HStack,
Popover, Popover,
PopoverAnchor,
PopoverContent, PopoverContent,
PopoverTrigger,
Stack, Stack,
Text, Text,
useDisclosure,
} from '@chakra-ui/react' } from '@chakra-ui/react'
import { ImageUploadContent } from '@/components/ImageUploadContent' import { ImageUploadContent } from '@/components/ImageUploadContent'
@@ -24,12 +23,10 @@ export const PictureChoiceItemSettings = ({
item, item,
onItemChange, onItemChange,
}: Props) => { }: Props) => {
const { isOpen, onOpen, onClose } = useDisclosure()
const updateTitle = (title: string) => onItemChange({ ...item, title }) const updateTitle = (title: string) => onItemChange({ ...item, title })
const updateImage = (pictureSrc: string) => { const updateImage = (pictureSrc: string) => {
onItemChange({ ...item, pictureSrc }) onItemChange({ ...item, pictureSrc })
onClose()
} }
const updateDescription = (description: string) => const updateDescription = (description: string) =>
@@ -39,19 +36,25 @@ export const PictureChoiceItemSettings = ({
<Stack> <Stack>
<HStack> <HStack>
<Text fontWeight="medium">Image:</Text> <Text fontWeight="medium">Image:</Text>
<Popover isLazy isOpen={isOpen}> <Popover isLazy>
<PopoverAnchor> {({ onClose }) => (
<Button size="sm" onClick={onOpen}> <>
Pick an image <PopoverTrigger>
</Button> <Button size="sm">Pick an image</Button>
</PopoverAnchor> </PopoverTrigger>
<PopoverContent p="4" w="500px"> <PopoverContent p="4" w="500px">
<ImageUploadContent <ImageUploadContent
filePath={`typebots/${typebotId}/blocks/${item.blockId}/items/${item.id}`} filePath={`typebots/${typebotId}/blocks/${item.blockId}/items/${item.id}`}
defaultUrl={item.pictureSrc} defaultUrl={item.pictureSrc}
onSubmit={updateImage} onSubmit={(url) => {
/> updateImage(url)
</PopoverContent> onClose()
}}
excludedTabs={['emoji']}
/>
</PopoverContent>
</>
)}
</Popover> </Popover>
</HStack> </HStack>
<TextInput <TextInput

35
apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/ButtonThemeSettings.tsx
View File

@@ -10,11 +10,10 @@ import {
MenuItem, MenuItem,
MenuList, MenuList,
Popover, Popover,
PopoverAnchor,
PopoverContent, PopoverContent,
PopoverTrigger,
Stack, Stack,
Text, Text,
useDisclosure,
} from '@chakra-ui/react' } from '@chakra-ui/react'
import { ButtonTheme } from '@typebot.io/js/dist/features/bubble/types' import { ButtonTheme } from '@typebot.io/js/dist/features/bubble/types'
import React from 'react' import React from 'react'
@@ -25,8 +24,6 @@ type Props = {
} }
export const ButtonThemeSettings = ({ buttonTheme, onChange }: Props) => { export const ButtonThemeSettings = ({ buttonTheme, onChange }: Props) => {
const { isOpen, onOpen, onClose } = useDisclosure()
const updateBackgroundColor = (backgroundColor: string) => { const updateBackgroundColor = (backgroundColor: string) => {
onChange({ onChange({
...buttonTheme, ...buttonTheme,
@@ -39,7 +36,6 @@ export const ButtonThemeSettings = ({ buttonTheme, onChange }: Props) => {
...buttonTheme, ...buttonTheme,
customIconSrc, customIconSrc,
}) })
onClose()
} }
const updateSize = (size: ButtonTheme['size']) => const updateSize = (size: ButtonTheme['size']) =>
@@ -73,18 +69,23 @@ export const ButtonThemeSettings = ({ buttonTheme, onChange }: Props) => {
</HStack> </HStack>
<HStack justify="space-between"> <HStack justify="space-between">
<Text>Custom icon</Text> <Text>Custom icon</Text>
<Popover isLazy isOpen={isOpen}> <Popover isLazy>
<PopoverAnchor> {({ onClose }) => (
<Button size="sm" onClick={onOpen}> <>
Pick an image <PopoverTrigger>
</Button> <Button size="sm">Pick an image</Button>
</PopoverAnchor> </PopoverTrigger>
<PopoverContent p="4" w="500px"> <PopoverContent p="4" w="500px">
<ImageUploadContent <ImageUploadContent
onSubmit={updateCustomIconSrc} onSubmit={(url) => {
filePath={undefined} updateCustomIconSrc(url)
/> onClose()
</PopoverContent> }}
filePath={undefined}
/>
</PopoverContent>
</>
)}
</Popover> </Popover>
</HStack> </HStack>
</Stack> </Stack>