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

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>
)