blsmedia/bot
2
0
Fork 0
Code Issues Activity

fix(dashboard): 🩹 typebot buttons menu

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-01-29 12:44:56 +01:00
parent 1c5bd06657
commit fc1d654772
12 changed files with 160 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
apps/builder/components/board/graph/BlockNode/BlockNode.tsx
View File

@@ -10,7 +10,7 @@ import { Block } from 'models'
import { useGraph } from 'contexts/GraphContext'
import { useStepDnd } from 'contexts/StepDndContext'
import { StepsList } from './StepsList'
import { filterTable, isDefined } from 'utils'
import { isDefined } from 'utils'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
import { ContextMenu } from 'components/shared/ContextMenu'
import { BlockNodeContextMenu } from './BlockNodeContextMenu'
@@ -114,12 +114,7 @@ export const BlockNode = ({ block }: Props) => {
/>
<EditableInput minW="0" px="1" />
</Editable>
{typebot && (
<StepsList
blockId={block.id}
steps={filterTable(block.stepIds, typebot?.steps)}
/>
)}
{typebot && <StepsList blockId={block.id} stepIds={block.stepIds} />}
</Stack>
)}
</ContextMenu>

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

@@ -44,7 +44,7 @@ export const StepNode = ({
const { query } = useRouter()
const { setConnectingIds, connectingIds, openedStepId, setOpenedStepId } =
useGraph()
const { moveStep } = useTypebot()
const { detachStepFromBlock } = useTypebot()
const [isConnecting, setIsConnecting] = useState(false)
const [mouseDownEvent, setMouseDownEvent] =
useState<{ absolute: Coordinates; relative: Coordinates }>()
@@ -116,8 +116,9 @@ export const StepNode = ({
onMouseDown &&
(event.movementX > 0 || event.movementY > 0)
if (isMovingAndIsMouseDown && step.type !== 'start') {
console.log(step)
onMouseDown(mouseDownEvent, step)
moveStep(step.id)
detachStepFromBlock(step.id)
setMouseDownEvent(undefined)
}
const element = event.currentTarget as HTMLDivElement

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

@@ -1,4 +1,4 @@
import { Box, Flex, Image, Text } from '@chakra-ui/react'
import { Box, Image, Text } from '@chakra-ui/react'
import {
Step,
StartStep,
@@ -7,9 +7,12 @@ import {
LogicStepType,
IntegrationStepType,
} from 'models'
import { isInputStep } from 'utils'
import { ChoiceItemsList } from '../ChoiceInputStepNode/ChoiceItemsList'
import { ConditionNodeContent } from './ConditionNodeContent'
import { SetVariableNodeContent } from './SetVariableNodeContent'
import { StepNodeContentWithVariable } from './StepNodeContentWithVariable'
import { TextBubbleNodeContent } from './TextBubbleNodeContent'
import { VideoStepNodeContent } from './VideoStepNodeContent'
import { WebhookContent } from './WebhookContent'
@@ -18,21 +21,12 @@ type Props = {
isConnectable?: boolean
}
export const StepNodeContent = ({ step }: Props) => {
if (isInputStep(step) && step.options.variableId) {
return <StepNodeContentWithVariable step={step} />
}
switch (step.type) {
case BubbleStepType.TEXT: {
return (
<Flex
flexDir={'column'}
opacity={step.content.html === '' ? '0.5' : '1'}
className="slate-html-container"
dangerouslySetInnerHTML={{
__html:
step.content.html === ''
? `<p>Click to edit...</p>`
: step.content.html,
}}
/>
)
return <TextBubbleNodeContent step={step} />
}
case BubbleStepType.IMAGE: {
return !step.content?.url ? (

28
apps/builder/components/board/graph/BlockNode/StepNode/StepNodeContent/StepNodeContentWithVariable.tsx Normal file
View File

@@ -0,0 +1,28 @@
import { InputStep } from 'models'
import { chakra, Text } from '@chakra-ui/react'
import React from 'react'
import { useTypebot } from 'contexts/TypebotContext'
type Props = {
step: InputStep
}
export const StepNodeContentWithVariable = ({ step }: Props) => {
const { typebot } = useTypebot()
const variableName =
typebot?.variables.byId[step.options.variableId as string].name
return (
<Text>
Collect{' '}
<chakra.span
bgColor="orange.400"
color="white"
rounded="md"
py="0.5"
px="1"
>
{variableName}
</chakra.span>
</Text>
)
}

26
apps/builder/components/board/graph/BlockNode/StepNode/StepNodeContent/TextBubbleNodeContent.tsx Normal file
View File

@@ -0,0 +1,26 @@
import { Flex } from '@chakra-ui/react'
import { useTypebot } from 'contexts/TypebotContext'
import { TextBubbleStep } from 'models'
import React from 'react'
import { parseVariableHighlight } from 'services/utils'
type Props = {
step: TextBubbleStep
}
export const TextBubbleNodeContent = ({ step }: Props) => {
const { typebot } = useTypebot()
return (
<Flex
flexDir={'column'}
opacity={step.content.html === '' ? '0.5' : '1'}
className="slate-html-container"
dangerouslySetInnerHTML={{
__html:
step.content.html === ''
? `<p>Click to edit...</p>`
: parseVariableHighlight(step.content.html, typebot),
}}
/>
)
}

75
apps/builder/components/board/graph/BlockNode/StepsList.tsx
View File

@@ -1,5 +1,5 @@
import { useEventListener, Stack, Flex, Portal } from '@chakra-ui/react'
import { DraggableStep, Step, Table } from 'models'
import { DraggableStep } from 'models'
import { useStepDnd } from 'contexts/StepDndContext'
import { Coordinates } from 'contexts/GraphContext'
import { useMemo, useState } from 'react'
@@ -8,10 +8,10 @@ import { useTypebot } from 'contexts/TypebotContext'
export const StepsList = ({
blockId,
steps,
stepIds,
}: {
blockId: string
steps: Table<Step>
stepIds: string[]
}) => {
const {
draggedStep,
@@ -21,7 +21,7 @@ export const StepsList = ({
setDraggedStepType,
setMouseOverBlockId,
} = useStepDnd()
const { createStep } = useTypebot()
const { typebot, createStep } = useTypebot()
const [expandedPlaceholderIndex, setExpandedPlaceholderIndex] = useState<
number | undefined
>()
@@ -59,14 +59,14 @@ export const StepsList = ({
e.stopPropagation()
setMouseOverBlockId(undefined)
setExpandedPlaceholderIndex(undefined)
if (draggedStepType) {
createStep(blockId, draggedStepType, expandedPlaceholderIndex)
setDraggedStepType(undefined)
}
if (draggedStep) {
createStep(blockId, draggedStep, expandedPlaceholderIndex)
setDraggedStep(undefined)
}
if (!draggedStep && !draggedStepType) return
createStep(
blockId,
draggedStep || draggedStepType,
expandedPlaceholderIndex
)
setDraggedStep(undefined)
setDraggedStepType(undefined)
}
const handleStepMouseDown = (
@@ -107,31 +107,32 @@ export const StepsList = ({
rounded="lg"
transition={showSortPlaceholders ? 'height 200ms' : 'none'}
/>
{steps.allIds.map((stepId, idx) => (
<Stack key={stepId} spacing={1}>
<StepNode
key={stepId}
step={steps.byId[stepId]}
isConnectable={steps.allIds.length - 1 === idx}
onMouseMoveTopOfElement={() => handleMouseOnTopOfStep(idx)}
onMouseMoveBottomOfElement={() => {
handleMouseOnBottomOfStep(idx)
}}
onMouseDown={handleStepMouseDown}
/>
<Flex
h={
showSortPlaceholders && expandedPlaceholderIndex === idx + 1
? '50px'
: '2px'
}
bgColor={'gray.300'}
visibility={showSortPlaceholders ? 'visible' : 'hidden'}
rounded="lg"
transition={showSortPlaceholders ? 'height 200ms' : 'none'}
/>
</Stack>
))}
{typebot &&
stepIds.map((stepId, idx) => (
<Stack key={stepId} spacing={1}>
<StepNode
key={stepId}
step={typebot?.steps.byId[stepId]}
isConnectable={stepIds.length - 1 === idx}
onMouseMoveTopOfElement={() => handleMouseOnTopOfStep(idx)}
onMouseMoveBottomOfElement={() => {
handleMouseOnBottomOfStep(idx)
}}
onMouseDown={handleStepMouseDown}
/>
<Flex
h={
showSortPlaceholders && expandedPlaceholderIndex === idx + 1
? '50px'
: '2px'
}
bgColor={'gray.300'}
visibility={showSortPlaceholders ? 'visible' : 'hidden'}
rounded="lg"
transition={showSortPlaceholders ? 'height 200ms' : 'none'}
/>
</Stack>
))}
{draggedStep && draggedStep.blockId === blockId && (
<Portal>
<StepNodeOverlay