diff --git a/apps/desktop/src/renderer/src/modules/editor/components/SchemaSidebarEditor/forms/BlockBaseForm.tsx b/apps/desktop/src/renderer/src/modules/editor/components/SchemaSidebarEditor/forms/BlockBaseForm.tsx index cd2051b..d09d940 100644 --- a/apps/desktop/src/renderer/src/modules/editor/components/SchemaSidebarEditor/forms/BlockBaseForm.tsx +++ b/apps/desktop/src/renderer/src/modules/editor/components/SchemaSidebarEditor/forms/BlockBaseForm.tsx @@ -1,15 +1,18 @@ +import { useEffect, useRef, useState } from 'react' +import { combine } from 'effector' +import { useStore } from 'effector-react' +import { useReactFlow } from 'reactflow' import { closestCenter, DndContext, DragEndEvent } from '@dnd-kit/core' import { restrictToVerticalAxis } from '@dnd-kit/modifiers' import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable' import { Accordion, ActionIcon, + Box, Divider, Group, ScrollArea, Stack, - Text, - TextInput, Tooltip } from '@mantine/core' import { @@ -20,12 +23,8 @@ import { } from '@renderer/modules/editor/stores' import { zoomToNode } from '@renderer/modules/editor/utils' import { IconEye, IconTrash } from '@tabler/icons' -import { combine } from 'effector' -import { useStore } from 'effector-react' import { Enum, Model } from 'prisma-state/_new/blocks' -import { useEffect, useRef, useState } from 'react' -import { useReactFlow } from 'reactflow' -import { PaperSection } from './PaperSection' +import { BlockNameInput } from './BlockNameInput' const $store = combine({ selectedNodeId: $selectedNodeId, @@ -97,9 +96,9 @@ export const BlockBaseForm: React.FC = ({ - - {block.name} - + + + @@ -120,11 +119,6 @@ export const BlockBaseForm: React.FC = ({ {form} - - - - - = ({ block }) => { + const { selectedNodeId, schemaState } = useStore($store) + + const [isOpen, setIsOpen] = useBoolean(false) + const [name, setName] = useState(block?.name || '') + + useEffect(() => { + setIsOpen(false) + }, [selectedNodeId]) + + const handleCloseEdit = () => { + if (block) setName(block.name) + + setIsOpen(false) + } + + const handleOpenEdit = () => setIsOpen(true) + + const handleInputChange = (event: React.ChangeEvent) => + setName(event.target.value) + + const handleSaveChanges = () => { + block.setName(name) + setPrismaSchemaEvent(schemaState._clone()) + } + + if (isOpen) + return ( + + ) + + return ( + + {block.name} + + ) +}