chore(editor): ♻️ Revert tables to arrays

Yet another refacto. I improved many many mechanisms on this one including dnd. It is now end 2 end tested 🎉
2022-02-04 19:00:08 +01:00
parent 8a350eee6c
commit 524ef0812c
123 changed files with 2998 additions and 3112 deletions
--- a/apps/builder/components/shared/Graph/Nodes/ItemNode/ItemNode.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/ItemNode/ItemNode.tsx
@ -0,0 +1,90 @@
+import { Flex } from '@chakra-ui/react'
+import { ContextMenu } from 'components/shared/ContextMenu'
+import { Coordinates } from 'contexts/GraphContext'
+import { NodePosition, useDragDistance } from 'contexts/GraphDndContext'
+import { useTypebot } from 'contexts/TypebotContext'
+import { ButtonItem, Item, ItemIndices, ItemType } from 'models'
+import React, { useRef, useState } from 'react'
+import { setMultipleRefs } from 'services/utils'
+import { SourceEndpoint } from '../../Endpoints/SourceEndpoint'
+import { ItemNodeContent } from './ItemNodeContent'
+import { ItemNodeContextMenu } from './ItemNodeContextMenu'
+
+type Props = {
+  item: Item
+  indices: ItemIndices
+  isReadOnly: boolean
+  isLastItem: boolean
+  onMouseDown?: (
+    stepNodePosition: { absolute: Coordinates; relative: Coordinates },
+    item: ButtonItem
+  ) => void
+}
+
+export const ItemNode = ({
+  item,
+  indices,
+  isReadOnly,
+  isLastItem,
+  onMouseDown,
+}: Props) => {
+  const { typebot } = useTypebot()
+  const [isMouseOver, setIsMouseOver] = useState(false)
+  const itemRef = useRef<HTMLDivElement | null>(null)
+  const onDrag = (position: NodePosition) => {
+    if (!onMouseDown || item.type !== ItemType.BUTTON) return
+    onMouseDown(position, item)
+  }
+  useDragDistance({
+    ref: itemRef,
+    onDrag,
+    isDisabled: !onMouseDown || item.type !== ItemType.BUTTON,
+  })
+
+  const handleMouseEnter = () => setIsMouseOver(true)
+  const handleMouseLeave = () => setIsMouseOver(false)
+
+  return (
+    <ContextMenu<HTMLDivElement>
+      renderMenu={() => <ItemNodeContextMenu indices={indices} />}
+    >
+      {(ref, isOpened) => (
+        <Flex
+          data-testid="item"
+          ref={setMultipleRefs([ref, itemRef])}
+          align="center"
+          pos="relative"
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          shadow="sm"
+          _hover={isReadOnly ? {} : { shadow: 'md' }}
+          transition="box-shadow 200ms"
+          borderWidth="1px"
+          rounded="md"
+          borderColor={isOpened ? 'blue.400' : 'gray.300'}
+          pointerEvents={isReadOnly ? 'none' : 'all'}
+          w="full"
+        >
+          <ItemNodeContent
+            item={item}
+            isMouseOver={isMouseOver}
+            indices={indices}
+            isLastItem={isLastItem}
+          />
+          {typebot && (
+            <SourceEndpoint
+              source={{
+                blockId: typebot.blocks[indices.blockIndex].id,
+                stepId: item.stepId,
+                itemId: item.id,
+              }}
+              pos="absolute"
+              right="15px"
+              pointerEvents="all"
+            />
+          )}
+        </Flex>
+      )}
+    </ContextMenu>
+  )
+}