blsmedia/bot
2
0
Fork 0
Code Activity

feat(inputs): ✨ Add text options

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-01-06 16:54:23 +01:00
parent eea522f5bd
commit f712c7ad98
16 changed files with 356 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/SettingsPopoverContent.tsx Normal file
View File

@ -0,0 +1,40 @@
import { PopoverContent, PopoverArrow, PopoverBody } from '@chakra-ui/react'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
import { Step, StepType, TextInputOptions } from 'models'
import { TextInputSettingsBody } from './TextInputSettingsBody'
type Props = {
step: Step
}
export const SettingsPopoverContent = ({ step }: Props) => {
const handleMouseDown = (e: React.MouseEvent) => e.stopPropagation()
return (
<PopoverContent onMouseDown={handleMouseDown}>
<PopoverArrow />
<PopoverBody p="6">
<SettingsPopoverBodyContent step={step} />
</PopoverBody>
</PopoverContent>
)
}
const SettingsPopoverBodyContent = ({ step }: Props) => {
const { updateStep } = useTypebot()
const handleOptionsChange = (options: TextInputOptions) =>
updateStep(step.id, { options } as Partial<Step>)
switch (step.type) {
case StepType.TEXT_INPUT: {
return (
<TextInputSettingsBody
options={step.options}
onOptionsChange={handleOptionsChange}
/>
)
}
default: {
return <></>
}
}
}

55
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/TextInputSettingsBody.tsx Normal file
View File

@ -0,0 +1,55 @@
import { FormLabel, Stack } from '@chakra-ui/react'
import { DebouncedInput } from 'components/shared/DebouncedInput'
import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
import { TextInputOptions } from 'models'
import React from 'react'
type TextInputSettingsBodyProps = {
options?: TextInputOptions
onOptionsChange: (options: TextInputOptions) => void
}
export const TextInputSettingsBody = ({
options,
onOptionsChange,
}: TextInputSettingsBodyProps) => {
const handlePlaceholderChange = (placeholder: string) =>
onOptionsChange({ ...options, labels: { ...options?.labels, placeholder } })
const handleButtonLabelChange = (button: string) =>
onOptionsChange({ ...options, labels: { ...options?.labels, button } })
const handleLongChange = (isLong: boolean) =>
onOptionsChange({ ...options, isLong })
return (
<Stack spacing={4}>
<SwitchWithLabel
id="switch"
label="Long text?"
initialValue={options?.isLong ?? false}
onCheckChange={handleLongChange}
/>
<Stack>
<FormLabel mb="0" htmlFor="placeholder">
Placeholder:
</FormLabel>
<DebouncedInput
id="placeholder"
initialValue={options?.labels?.placeholder ?? 'Type your answer...'}
delay={100}
onChange={handlePlaceholderChange}
/>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="button">
Button label:
</FormLabel>
<DebouncedInput
id="button"
initialValue={options?.labels?.button ?? 'Send'}
delay={100}
onChange={handleButtonLabelChange}
/>
</Stack>
</Stack>
)
}

1
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/index.ts Normal file
View File

@ -0,0 +1 @@
export { SettingsPopoverContent } from './SettingsPopoverContent'

118
apps/builder/components/board/graph/BlockNode/StepNode/StepNode.tsx
View File

@ -1,4 +1,11 @@
import { Box, Flex, HStack, useEventListener } from '@chakra-ui/react'
import {
Box,
Flex,
HStack,
Popover,
PopoverTrigger,
useEventListener,
} from '@chakra-ui/react'
import React, { useEffect, useMemo, useState } from 'react'
import { Block, Step, StepType } from 'models'
import { SourceEndpoint } from './SourceEndpoint'
@ -11,6 +18,7 @@ import { StepContent } from './StepContent'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
import { ContextMenu } from 'components/shared/ContextMenu'
import { StepNodeContextMenu } from './RightClickMenu'
import { SettingsPopoverContent } from './SettingsPopoverContent'
export const StepNode = ({
step,
@ -144,58 +152,64 @@ export const StepNode = ({
renderMenu={() => <StepNodeContextMenu stepId={step.id} />}
>
{(ref, isOpened) => (
<Flex
pos="relative"
ref={ref}
onMouseMove={handleMouseMove}
onMouseDown={handleMouseDown}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onMouseUp={handleMouseUp}
>
{connectedStubPosition === 'left' && (
<Box
h="2px"
pos="absolute"
left="-18px"
top="25px"
w="18px"
bgColor="blue.500"
/>
)}
<HStack
flex="1"
userSelect="none"
p="3"
borderWidth="2px"
borderColor={isConnecting || isOpened ? 'blue.400' : 'gray.400'}
rounded="lg"
cursor={'pointer'}
bgColor="white"
>
<StepIcon type={step.type} />
<StepContent {...step} />
{isConnectable && (
<SourceEndpoint
onConnectionDragStart={handleConnectionDragStart}
pos="absolute"
right="20px"
/>
)}
</HStack>
<Popover placement="left" isLazy>
<PopoverTrigger>
<Flex
pos="relative"
ref={ref}
onMouseMove={handleMouseMove}
onMouseDown={handleMouseDown}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onMouseUp={handleMouseUp}
data-testid={`step-${step.id}`}
>
{connectedStubPosition === 'left' && (
<Box
h="2px"
pos="absolute"
left="-18px"
top="25px"
w="18px"
bgColor="blue.500"
/>
)}
<HStack
flex="1"
userSelect="none"
p="3"
borderWidth="2px"
borderColor={isConnecting || isOpened ? 'blue.400' : 'gray.400'}
rounded="lg"
cursor={'pointer'}
bgColor="white"
>
<StepIcon type={step.type} />
<StepContent {...step} />
{isConnectable && (
<SourceEndpoint
onConnectionDragStart={handleConnectionDragStart}
pos="absolute"
right="20px"
/>
)}
</HStack>
{isDefined(connectedStubPosition) && (
<Box
h="2px"
pos="absolute"
right={connectedStubPosition === 'left' ? undefined : '-18px'}
left={connectedStubPosition === 'left' ? '-18px' : undefined}
top="25px"
w="18px"
bgColor="gray.500"
/>
)}
</Flex>
{isDefined(connectedStubPosition) && (
<Box
h="2px"
pos="absolute"
right={connectedStubPosition === 'left' ? undefined : '-18px'}
left={connectedStubPosition === 'left' ? '-18px' : undefined}
top="25px"
w="18px"
bgColor="gray.500"
/>
)}
</Flex>
</PopoverTrigger>
<SettingsPopoverContent step={step} />
</Popover>
)}
</ContextMenu>
)