blsmedia/bot
2
0
Fork 0
Code Activity

feat(inputs): ✨ Add buttons input

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-01-12 09:10:59 +01:00
parent b20bcb1408
commit c02c61cd8b
47 changed files with 1109 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
apps/builder/components/board/graph/BlockNode/StepNode/ChoiceInputStepNode/ChoiceItemNode.tsx Normal file
View File

@ -0,0 +1,148 @@
import {
EditablePreview,
EditableInput,
Editable,
useEventListener,
Flex,
Fade,
IconButton,
} from '@chakra-ui/react'
import { PlusIcon } from 'assets/icons'
import { ContextMenu } from 'components/shared/ContextMenu'
import { Coordinates } from 'contexts/GraphContext'
import { useTypebot } from 'contexts/TypebotContext'
import { ChoiceInputStep, ChoiceItem } from 'models'
import React, { useState } from 'react'
import { isDefined, isSingleChoiceInput } from 'utils'
import { SourceEndpoint } from '../SourceEndpoint'
import { ChoiceItemNodeContextMenu } from './ChoiceItemNodeContextMenu'
type ChoiceItemNodeProps = {
item: ChoiceItem
onMouseMoveBottomOfElement?: () => void
onMouseMoveTopOfElement?: () => void
onMouseDown?: (
stepNodePosition: { absolute: Coordinates; relative: Coordinates },
item: ChoiceItem
) => void
}
export const ChoiceItemNode = ({
item,
onMouseDown,
onMouseMoveBottomOfElement,
onMouseMoveTopOfElement,
}: ChoiceItemNodeProps) => {
const { deleteChoiceItem, updateChoiceItem, typebot, createChoiceItem } =
useTypebot()
const [mouseDownEvent, setMouseDownEvent] =
useState<{ absolute: Coordinates; relative: Coordinates }>()
const [isMouseOver, setIsMouseOver] = useState(false)
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 handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
if (!onMouseMoveBottomOfElement || !onMouseMoveTopOfElement) return
const isMovingAndIsMouseDown =
mouseDownEvent &&
onMouseDown &&
(event.movementX > 0 || event.movementY > 0)
if (isMovingAndIsMouseDown) {
onMouseDown(mouseDownEvent, item)
deleteChoiceItem(item.id)
setMouseDownEvent(undefined)
}
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 handleInputSubmit = (content: string) =>
updateChoiceItem(item.id, { content: content === '' ? undefined : content })
const handlePlusClick = () => {
const nextIndex =
(
typebot?.steps.byId[item.stepId] as ChoiceInputStep
).options.itemIds.indexOf(item.id) + 1
createChoiceItem({ stepId: item.stepId }, nextIndex)
}
const handleMouseEnter = () => setIsMouseOver(true)
const handleMouseLeave = () => setIsMouseOver(false)
return (
<ContextMenu<HTMLDivElement>
renderMenu={() => <ChoiceItemNodeContextMenu itemId={item.id} />}
>
{(ref, isOpened) => (
<Flex
align="center"
pos="relative"
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
justifyContent="center"
>
<Editable
ref={ref}
px="4"
py="2"
rounded="md"
bgColor="green.200"
borderWidth="2px"
borderColor={isOpened ? 'blue.400' : 'gray.400'}
defaultValue={item.content ?? 'Click to edit'}
flex="1"
startWithEditView={!isDefined(item.content)}
onSubmit={handleInputSubmit}
onMouseDown={handleMouseDown}
onMouseMove={handleMouseMove}
>
<EditablePreview />
<EditableInput />
</Editable>
{typebot && isSingleChoiceInput(typebot.steps.byId[item.stepId]) && (
<SourceEndpoint
source={{
blockId: typebot.steps.byId[item.stepId].blockId,
stepId: item.stepId,
choiceItemId: item.id,
}}
pos="absolute"
right="15px"
/>
)}
<Fade
in={isMouseOver}
style={{ position: 'absolute', bottom: '-15px', zIndex: 3 }}
unmountOnExit
>
<IconButton
aria-label="Add item"
icon={<PlusIcon />}
size="xs"
onClick={handlePlusClick}
/>
</Fade>
</Flex>
)}
</ContextMenu>
)
}

17
apps/builder/components/board/graph/BlockNode/StepNode/ChoiceInputStepNode/ChoiceItemNodeContextMenu.tsx Normal file
View File

@ -0,0 +1,17 @@
import { MenuList, MenuItem } from '@chakra-ui/react'
import { TrashIcon } from 'assets/icons'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
export const ChoiceItemNodeContextMenu = ({ itemId }: { itemId: string }) => {
const { deleteChoiceItem } = useTypebot()
const handleDeleteClick = () => deleteChoiceItem(itemId)
return (
<MenuList>
<MenuItem icon={<TrashIcon />} onClick={handleDeleteClick}>
Delete
</MenuItem>
</MenuList>
)
}

28
apps/builder/components/board/graph/BlockNode/StepNode/ChoiceInputStepNode/ChoiceItemNodeOverlay.tsx Normal file
View File

@ -0,0 +1,28 @@
import { Flex, FlexProps } from '@chakra-ui/react'
import { ChoiceItem } from 'models'
import React from 'react'
type ChoiceItemNodeOverlayProps = {
item: ChoiceItem
} & FlexProps
export const ChoiceItemNodeOverlay = ({
item,
...props
}: ChoiceItemNodeOverlayProps) => {
return (
<Flex
px="4"
py="2"
rounded="md"
bgColor="green.200"
borderWidth="2px"
borderColor={'gray.400'}
w="212px"
pointerEvents="none"
{...props}
>
{item.content ?? 'Click to edit'}
</Flex>
)
}

155
apps/builder/components/board/graph/BlockNode/StepNode/ChoiceInputStepNode/ChoiceItemsList.tsx Normal file
View File

@ -0,0 +1,155 @@
import { Flex, Portal, Stack, Text, useEventListener } from '@chakra-ui/react'
import { useDnd } from 'contexts/DndContext'
import { Coordinates } from 'contexts/GraphContext'
import { useTypebot } from 'contexts/TypebotContext'
import { ChoiceInputStep, ChoiceItem } from 'models'
import React, { useMemo, useState } from 'react'
import { SourceEndpoint } from '../SourceEndpoint'
import { ChoiceItemNode } from './ChoiceItemNode'
import { ChoiceItemNodeOverlay } from './ChoiceItemNodeOverlay'
type ChoiceItemsListProps = {
step: ChoiceInputStep
}
export const ChoiceItemsList = ({ step }: ChoiceItemsListProps) => {
const { typebot, createChoiceItem } = useTypebot()
const {
draggedChoiceItem,
mouseOverBlockId,
setDraggedChoiceItem,
setMouseOverBlockId,
} = useDnd()
const showSortPlaceholders = useMemo(
() => mouseOverBlockId === step.blockId && draggedChoiceItem,
[draggedChoiceItem, mouseOverBlockId, step.blockId]
)
const [position, setPosition] = useState({
x: 0,
y: 0,
})
const [relativeCoordinates, setRelativeCoordinates] = useState({ x: 0, y: 0 })
const [expandedPlaceholderIndex, setExpandedPlaceholderIndex] = useState<
number | undefined
>()
const handleStepMove = (event: MouseEvent) => {
if (!draggedChoiceItem) return
const { clientX, clientY } = event
setPosition({
...position,
x: clientX - relativeCoordinates.x,
y: clientY - relativeCoordinates.y,
})
}
useEventListener('mousemove', handleStepMove)
const handleMouseUp = (e: React.MouseEvent<HTMLDivElement>) => {
if (expandedPlaceholderIndex === undefined || !draggedChoiceItem) return
e.stopPropagation()
setMouseOverBlockId(undefined)
setExpandedPlaceholderIndex(undefined)
setDraggedChoiceItem(undefined)
createChoiceItem(draggedChoiceItem, expandedPlaceholderIndex)
}
const handleStepMouseDown = (
{ absolute, relative }: { absolute: Coordinates; relative: Coordinates },
item: ChoiceItem
) => {
setPosition(absolute)
setRelativeCoordinates(relative)
setMouseOverBlockId(typebot?.steps.byId[item.stepId].blockId)
setDraggedChoiceItem(item)
}
const handleMouseOnTopOfStep = (stepIndex: number) => {
if (!draggedChoiceItem) return
setExpandedPlaceholderIndex(stepIndex === 0 ? 0 : stepIndex)
}
const handleMouseOnBottomOfStep = (stepIndex: number) => {
if (!draggedChoiceItem) return
setExpandedPlaceholderIndex(stepIndex + 1)
}
const stopPropagating = (e: React.MouseEvent) => e.stopPropagation()
return (
<Stack
flex={1}
spacing={1}
onMouseUpCapture={handleMouseUp}
onClick={stopPropagating}
>
<Flex
h={expandedPlaceholderIndex === 0 ? '50px' : '2px'}
bgColor={'gray.400'}
visibility={showSortPlaceholders ? 'visible' : 'hidden'}
rounded="lg"
transition={showSortPlaceholders ? 'height 200ms' : 'none'}
/>
{step.options.itemIds.map((itemId, idx) => (
<Stack key={itemId} spacing={1}>
{typebot?.choiceItems.byId[itemId] && (
<ChoiceItemNode
item={typebot?.choiceItems.byId[itemId]}
onMouseMoveTopOfElement={() => handleMouseOnTopOfStep(idx)}
onMouseMoveBottomOfElement={() => {
handleMouseOnBottomOfStep(idx)
}}
onMouseDown={handleStepMouseDown}
/>
)}
<Flex
h={
showSortPlaceholders && expandedPlaceholderIndex === idx + 1
? '50px'
: '2px'
}
bgColor={'gray.400'}
visibility={showSortPlaceholders ? 'visible' : 'hidden'}
rounded="lg"
transition={showSortPlaceholders ? 'height 200ms' : 'none'}
/>
</Stack>
))}
<Stack>
<Flex
px="4"
py="2"
bgColor="gray.200"
borderWidth="2px"
rounded="md"
pos="relative"
align="center"
>
<Text>Default</Text>
<SourceEndpoint
source={{
blockId: step.blockId,
stepId: step.id,
}}
pos="absolute"
right="15px"
/>
</Flex>
</Stack>
{draggedChoiceItem && draggedChoiceItem.stepId === step.id && (
<Portal>
<ChoiceItemNodeOverlay
item={draggedChoiceItem}
onMouseUp={handleMouseUp}
pos="fixed"
top="0"
left="0"
style={{
transform: `translate(${position.x}px, ${position.y}px) rotate(-2deg)`,
}}
/>
</Portal>
)}
</Stack>
)
}

1
apps/builder/components/board/graph/BlockNode/StepNode/ChoiceInputStepNode/index.tsx Normal file
View File

@ -0,0 +1 @@
export { ChoiceItemsList as ChoiceInputStepNodeContent } from './ChoiceItemsList'