block name input

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<BlockBaseFormProps> = ({
     <Stack w="100%" h="100%">
       <Stack pr="md">
         <Group w="100%" noWrap>
-          <Text sx={{ flex: 1 }} fw={500}>
-            {block.name}
-          </Text>
+          <Box sx={{ flex: 1 }}>
+            <BlockNameInput block={block} />
+          </Box>
           <Group>
             <Tooltip label="Remove">
               <ActionIcon onClick={handleRemoveNode} size="sm">
@@ -120,11 +119,6 @@ export const BlockBaseForm: React.FC<BlockBaseFormProps> = ({
       {form}
       <ScrollArea h="100%" offsetScrollbars>
         <Stack w="100%" h="100%">
-          <PaperSection>
-            <TextInput label="Name" value={block.name} />
-          </PaperSection>
-          <Divider />
-
           <DndContext
             onDragStart={handleOnDragStart}
             onDragEnd={handleOnDragEnd}

apps/desktop/src/renderer/src/modules/editor/components/SchemaSidebarEditor/forms/BlockNameInput.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useState } from 'react'
+import { combine } from 'effector'
+import { useStore } from 'effector-react'
+import { useBoolean } from 'react-use'
+import { Enum, Model } from 'prisma-state/_new/blocks'
+import {
+  $schemaState,
+  $selectedNodeId,
+  setPrismaSchemaEvent
+} from '@renderer/modules/editor/stores'
+import { ConfirmInput } from '@renderer/core/components'
+import { Text } from '@mantine/core'
+
+interface BlockNameInputProps {
+  block: Model | Enum
+}
+
+const $store = combine({
+  selectedNodeId: $selectedNodeId,
+  schemaState: $schemaState
+})
+
+export const BlockNameInput: React.FC<BlockNameInputProps> = ({ 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<HTMLInputElement>) =>
+    setName(event.target.value)
+
+  const handleSaveChanges = () => {
+    block.setName(name)
+    setPrismaSchemaEvent(schemaState._clone())
+  }
+
+  if (isOpen)
+    return (
+      <ConfirmInput
+        value={name}
+        onChange={handleInputChange}
+        onCancel={handleCloseEdit}
+        onConfirm={handleSaveChanges}
+        disableClose={!block}
+        disableConfirm={!name}
+        placeholder="Model name..."
+        sx={{ flexGrow: 1 }}
+      />
+    )
+
+  return (
+    <Text
+      fw={500}
+      sx={{
+        cursor: 'pointer'
+      }}
+      onClick={handleOpenEdit}
+    >
+      {block.name}
+    </Text>
+  )
+}