fix: console error

apps/demo-fixed-layout-simple/src/components/node-adder.tsx

@@ -1,8 +1,13 @@
-import { FlowNodeEntity, FlowOperationService, useClientContext, usePlayground, useService } from "@flowgram.ai/fixed-layout-editor"
+import {
+  FlowNodeEntity,
+  FlowOperationService,
+  useClientContext,
+  usePlayground,
+  useService,
+} from '@flowgram.ai/fixed-layout-editor';
+import { Dropdown } from '@douyinfe/semi-ui';
+import { IconPlusCircle } from '@douyinfe/semi-icons';
 
-import { Dropdown } from '@douyinfe/semi-ui'
-
-import { IconPlusCircle } from "@douyinfe/semi-icons";
 import { nodeRegistries } from '../node-registries';
 
 export const NodeAdder = (props: {
@@ -35,10 +40,17 @@ export const NodeAdder = (props: {
     <Dropdown
       render={
         <Dropdown.Menu>
-          {nodeRegistries.map(registry => <Dropdown.Item onClick={() => {
-            const props = registry?.onAdd(context, from);
-            add(props);
-          }}>{registry.type}</Dropdown.Item>)}
+          {nodeRegistries.map((registry) => (
+            <Dropdown.Item
+              key={registry.type}
+              onClick={() => {
+                const props = registry?.onAdd(context, from);
+                add(props);
+              }}
+            >
+              {registry.type}
+            </Dropdown.Item>
+          ))}
         </Dropdown.Menu>
       }
     >
@@ -49,19 +61,19 @@ export const NodeAdder = (props: {
           backgroundColor: 'rgb(143, 149, 158)',
           color: '#fff',
           borderRadius: '50%',
-          cursor: 'pointer'
+          cursor: 'pointer',
         }}
       >
-        {hoverActivated ?
+        {hoverActivated ? (
           <IconPlusCircle
             style={{
               color: '#3370ff',
               backgroundColor: '#fff',
-              borderRadius: 15
+              borderRadius: 15,
             }}
-          /> : null
-        }
+          />
+        ) : null}
       </div>
     </Dropdown>
   );
-}
+};

apps/demo-fixed-layout/src/components/tools/minimap-switch.tsx

@@ -1,6 +1,5 @@
 import { Tooltip, IconButton } from '@douyinfe/semi-ui';
-
-import { UIIconGridRectangle } from './styles';
+import { IconGridRectangle } from '@douyinfe/semi-icons';
 
 export const MinimapSwitch = (props: {
   minimapVisible: boolean;
@@ -12,8 +11,16 @@ export const MinimapSwitch = (props: {
     <Tooltip content="Minimap">
       <IconButton
         theme="borderless"
-        icon={<UIIconGridRectangle visible={minimapVisible} />}
-        onClick={() => setMinimapVisible(!minimapVisible)}
+        icon={
+          <IconGridRectangle
+            style={{
+              color: minimapVisible ? undefined : '#060709cc',
+            }}
+          />
+        }
+        onClick={() => {
+          setMinimapVisible(Boolean(!minimapVisible));
+        }}
       />
     </Tooltip>
   );

apps/demo-fixed-layout/src/components/tools/styles.tsx

@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import { IconGridRectangle } from '@douyinfe/semi-icons';
 
 export const ToolContainer = styled.div`
   position: absolute;
@@ -39,7 +38,3 @@ export const MinimapContainer = styled.div`
   bottom: 60px;
   width: 182px;
 `;
-
-export const UIIconGridRectangle = styled(IconGridRectangle)<{ visible: boolean }>`
-  color: ${props => (props.visible ? undefined : '#060709cc')};
-`;

apps/demo-free-layout-simple/src/app.tsx

@@ -1,5 +1,7 @@
-import ReactDOM from 'react-dom';
-import { Editor } from './editor'
+import { createRoot } from 'react-dom/client';
 
+import { Editor } from './editor';
 
-ReactDOM.render(<Editor />, document.getElementById('root'));
+const app = createRoot(document.getElementById('root')!);
+
+app.render(<Editor />);

apps/demo-free-layout/src/app.tsx

@@ -1,5 +1,7 @@
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import { Editor } from './editor';
 
-ReactDOM.render(<Editor />, document.getElementById('root'));
+const app = createRoot(document.getElementById('root')!);
+
+app.render(<Editor />);