2
0
Files
bot/apps/builder/components/shared/Graph/Nodes/StepNode/StepNode.tsx

308 lines
9.2 KiB
TypeScript
Raw Normal View History

2022-01-06 16:54:23 +01:00
import {
Flex,
HStack,
Popover,
PopoverTrigger,
2022-01-19 09:44:21 +01:00
useDisclosure,
2022-01-06 16:54:23 +01:00
useEventListener,
} from '@chakra-ui/react'
import React, { useEffect, useState } from 'react'
import {
BubbleStep,
BubbleStepContent,
DraggableStep,
Step,
StepOptions,
TextBubbleStep,
Webhook,
} from 'models'
import { Coordinates, useGraph } from 'contexts/GraphContext'
import { StepIcon } from 'components/editor/StepsSideBar/StepIcon'
import { isBubbleStep, isTextBubbleStep, isWebhookStep } from 'utils'
2022-01-22 18:24:57 +01:00
import { StepNodeContent } from './StepNodeContent/StepNodeContent'
2022-01-12 09:10:59 +01:00
import { useTypebot } from 'contexts/TypebotContext'
import { ContextMenu } from 'components/shared/ContextMenu'
2022-01-06 16:54:23 +01:00
import { SettingsPopoverContent } from './SettingsPopoverContent'
2022-01-12 09:10:59 +01:00
import { StepNodeContextMenu } from './StepNodeContextMenu'
import { SourceEndpoint } from '../../Endpoints/SourceEndpoint'
2022-01-15 17:30:20 +01:00
import { hasDefaultConnector } from 'services/typebots'
import { useRouter } from 'next/router'
2022-01-19 09:44:21 +01:00
import { SettingsModal } from './SettingsPopoverContent/SettingsModal'
import { StepSettings } from './SettingsPopoverContent/SettingsPopoverContent'
import { TextBubbleEditor } from './TextBubbleEditor'
import { TargetEndpoint } from '../../Endpoints'
import { MediaBubblePopoverContent } from './MediaBubblePopoverContent'
2021-12-16 10:43:49 +01:00
export const StepNode = ({
step,
isConnectable,
onMouseMoveBottomOfElement,
onMouseMoveTopOfElement,
onMouseDown,
}: {
2022-01-06 09:40:56 +01:00
step: Step
2021-12-16 10:43:49 +01:00
isConnectable: boolean
onMouseMoveBottomOfElement?: () => void
onMouseMoveTopOfElement?: () => void
onMouseDown?: (
stepNodePosition: { absolute: Coordinates; relative: Coordinates },
2022-01-08 07:40:55 +01:00
step: DraggableStep
) => void
2021-12-16 10:43:49 +01:00
}) => {
const { query } = useRouter()
const {
setConnectingIds,
connectingIds,
openedStepId,
setOpenedStepId,
blocksCoordinates,
} = useGraph()
const { detachStepFromBlock, updateStep, typebot, updateWebhook } =
useTypebot()
const [localStep, setLocalStep] = useState(step)
const [localWebhook, setLocalWebhook] = useState(
isWebhookStep(step)
? typebot?.webhooks.byId[step.options.webhookId ?? '']
: undefined
)
2021-12-16 10:43:49 +01:00
const [isConnecting, setIsConnecting] = useState(false)
const [isPopoverOpened, setIsPopoverOpened] = useState(
openedStepId === step.id
)
const [mouseDownEvent, setMouseDownEvent] =
useState<{ absolute: Coordinates; relative: Coordinates }>()
2022-01-07 07:33:01 +01:00
const [isEditing, setIsEditing] = useState<boolean>(
2022-01-08 07:40:55 +01:00
isTextBubbleStep(step) && step.content.plainText === ''
2022-01-07 07:33:01 +01:00
)
2022-01-19 09:44:21 +01:00
const {
isOpen: isModalOpen,
onOpen: onModalOpen,
onClose: onModalClose,
} = useDisclosure()
2021-12-16 10:43:49 +01:00
useEffect(() => {
setLocalStep(step)
}, [step])
useEffect(() => {
if (query.stepId?.toString() === step.id) setOpenedStepId(step.id)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [query])
2021-12-16 10:43:49 +01:00
useEffect(() => {
setIsConnecting(
connectingIds?.target?.blockId === step.blockId &&
connectingIds?.target?.stepId === step.id
)
}, [connectingIds, step.blockId, step.id])
const handleModalClose = () => {
updateStep(localStep.id, { ...localStep })
onModalClose()
}
2021-12-16 10:43:49 +01:00
const handleMouseEnter = () => {
if (connectingIds?.target)
setConnectingIds({
...connectingIds,
target: { ...connectingIds.target, stepId: step.id },
})
}
const handleMouseLeave = () => {
if (connectingIds?.target)
setConnectingIds({
...connectingIds,
target: { ...connectingIds.target, stepId: undefined },
})
}
const handleMouseDown = (e: React.MouseEvent) => {
if (!onMouseDown) return
e.stopPropagation()
const element = e.currentTarget as HTMLDivElement
const rect = element.getBoundingClientRect()
const relativeX = e.clientX - rect.left
const relativeY = e.clientY - rect.top
setMouseDownEvent({
absolute: { x: e.clientX + relativeX, y: e.clientY + relativeY },
relative: { x: relativeX, y: relativeY },
})
}
const handleGlobalMouseUp = () => {
setMouseDownEvent(undefined)
}
useEventListener('mouseup', handleGlobalMouseUp)
const handleMouseUp = () => {
if (mouseDownEvent) {
setIsEditing(true)
}
2021-12-16 10:43:49 +01:00
}
const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
if (!onMouseMoveBottomOfElement || !onMouseMoveTopOfElement) return
const isMovingAndIsMouseDown =
mouseDownEvent &&
onMouseDown &&
(event.movementX > 0 || event.movementY > 0)
2022-01-08 07:40:55 +01:00
if (isMovingAndIsMouseDown && step.type !== 'start') {
onMouseDown(mouseDownEvent, step)
detachStepFromBlock(step.id)
setMouseDownEvent(undefined)
}
2021-12-16 10:43:49 +01:00
const element = event.currentTarget as HTMLDivElement
const rect = element.getBoundingClientRect()
const y = event.clientY - rect.top
if (y > rect.height / 2) onMouseMoveBottomOfElement()
else onMouseMoveTopOfElement()
}
const handleCloseEditor = () => {
setIsEditing(false)
}
const handleClick = (e: React.MouseEvent) => {
e.stopPropagation()
setOpenedStepId(step.id)
}
const handleExpandClick = () => {
setOpenedStepId(undefined)
onModalOpen()
}
const updateOptions = () => {
updateStep(localStep.id, { ...localStep })
if (localWebhook) updateWebhook(localWebhook.id, { ...localWebhook })
}
const handleOptionsChange = (options: StepOptions) => {
setLocalStep({ ...localStep, options } as Step)
}
const handleContentChange = (content: BubbleStepContent) =>
setLocalStep({ ...localStep, content } as Step)
const handleWebhookChange = (updates: Partial<Webhook>) => {
if (!localWebhook) return
setLocalWebhook({ ...localWebhook, ...updates })
}
useEffect(() => {
if (isPopoverOpened && openedStepId !== step.id) updateOptions()
setIsPopoverOpened(openedStepId === step.id)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [openedStepId])
return isEditing && isTextBubbleStep(localStep) ? (
<TextBubbleEditor
stepId={localStep.id}
initialValue={localStep.content.richText}
onClose={handleCloseEditor}
/>
) : (
<ContextMenu<HTMLDivElement>
2022-01-06 09:40:56 +01:00
renderMenu={() => <StepNodeContextMenu stepId={step.id} />}
>
{(ref, isOpened) => (
<Popover
placement="left"
isLazy
isOpen={isPopoverOpened}
closeOnBlur={false}
>
2022-01-06 16:54:23 +01:00
<PopoverTrigger>
<Flex
pos="relative"
ref={ref}
onMouseMove={handleMouseMove}
onMouseDown={handleMouseDown}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onMouseUp={handleMouseUp}
onClick={handleClick}
2022-01-06 16:54:23 +01:00
data-testid={`step-${step.id}`}
2022-01-12 09:10:59 +01:00
w="full"
2022-01-06 16:54:23 +01:00
>
<HStack
flex="1"
userSelect="none"
p="3"
2022-01-19 09:44:21 +01:00
borderWidth="1px"
borderColor={isConnecting || isOpened ? 'blue.400' : 'gray.300'}
2022-01-06 16:54:23 +01:00
rounded="lg"
cursor={'pointer'}
bgColor="white"
2022-01-12 09:10:59 +01:00
align="flex-start"
2022-01-22 18:24:57 +01:00
w="full"
2022-01-06 16:54:23 +01:00
>
<StepIcon
type={localStep.type}
mt="1"
data-testid={`${localStep.id}-icon`}
/>
<StepNodeContent step={localStep} />
2022-01-15 17:30:20 +01:00
<TargetEndpoint
pos="absolute"
left="-32px"
top="19px"
stepId={localStep.id}
2022-01-15 17:30:20 +01:00
/>
{blocksCoordinates &&
isConnectable &&
hasDefaultConnector(localStep) && (
<SourceEndpoint
source={{
blockId: localStep.blockId,
stepId: localStep.id,
}}
pos="absolute"
right="15px"
bottom="18px"
/>
)}
2022-01-06 16:54:23 +01:00
</HStack>
</Flex>
</PopoverTrigger>
{hasSettingsPopover(localStep) && (
<SettingsPopoverContent
step={localStep}
webhook={localWebhook}
onExpandClick={handleExpandClick}
onOptionsChange={handleOptionsChange}
onWebhookChange={handleWebhookChange}
onTestRequestClick={updateOptions}
/>
2022-01-19 09:44:21 +01:00
)}
{isMediaBubbleStep(localStep) && (
<MediaBubblePopoverContent
step={localStep}
onContentChange={handleContentChange}
/>
)}
<SettingsModal isOpen={isModalOpen} onClose={handleModalClose}>
<StepSettings
step={localStep}
webhook={localWebhook}
onOptionsChange={handleOptionsChange}
onWebhookChange={handleWebhookChange}
onTestRequestClick={updateOptions}
/>
2022-01-19 09:44:21 +01:00
</SettingsModal>
2022-01-06 16:54:23 +01:00
</Popover>
2021-12-16 10:43:49 +01:00
)}
</ContextMenu>
2021-12-16 10:43:49 +01:00
)
}
2022-01-20 16:14:47 +01:00
const hasSettingsPopover = (step: Step): step is Exclude<Step, BubbleStep> =>
!isBubbleStep(step)
const isMediaBubbleStep = (
2022-01-20 16:14:47 +01:00
step: Step
): step is Exclude<BubbleStep, TextBubbleStep> =>
isBubbleStep(step) && !isTextBubbleStep(step)