Examples - Drag and drop - Using the theme styles for the sidebar nodes

Otherwise the styles diverge and nodes look different on the sidebar and the canvas.
xyflow · Jun 17, 2021 · 9098083 · 9098083
1 parent c956ac2
commit 9098083
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 23 deletions.
diff --git a/example/src/DragNDrop/Sidebar.tsx b/example/src/DragNDrop/Sidebar.tsx
@@ -8,14 +8,14 @@ const onDragStart = (event: DragEvent, nodeType: string) => {
 const Sidebar = () => {
   return (
     <aside>
-      <div className="description">You can drag these nodes to the pane on the right.</div>
-      <div className="dndnode input" onDragStart={(event: DragEvent) => onDragStart(event, 'input')} draggable>
+      <div className="description">You can drag these nodes to the pane on the left.</div>
+      <div className="react-flow__node-input" onDragStart={(event: DragEvent) => onDragStart(event, 'input')} draggable>
         Input Node
       </div>
-      <div className="dndnode" onDragStart={(event: DragEvent) => onDragStart(event, 'default')} draggable>
+      <div className="react-flow__node-default" onDragStart={(event: DragEvent) => onDragStart(event, 'default')} draggable>
         Default Node
       </div>
-      <div className="dndnode output" onDragStart={(event: DragEvent) => onDragStart(event, 'output')} draggable>
+      <div className="react-flow__node-output" onDragStart={(event: DragEvent) => onDragStart(event, 'output')} draggable>
         Output Node
       </div>
     </aside>

diff --git a/example/src/DragNDrop/dnd.css b/example/src/DragNDrop/dnd.css
@@ -11,28 +11,13 @@
   background: #fcfcfc;
 }
 
-.dndflow aside .description {
+.dndflow aside > * {
   margin-bottom: 10px;
-}
-
-.dndflow .dndnode {
-  height: 20px;
-  padding: 4px;
-  border: 1px solid #1a192b;
-  border-radius: 2px;
-  margin-bottom: 10px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   cursor: grab;
 }
 
-.dndflow .dndnode.input {
-  border-color: #0041d0;
-}
-
-.dndflow .dndnode.output {
-  border-color: #ff0072;
+.dndflow aside .description {
+  margin-bottom: 10px;
 }
 
 .dndflow .reactflow-wrapper {
@@ -47,6 +32,6 @@
 
   .dndflow aside {
     width: 20%;
-    max-width: 250px;
+    max-width: 180px;
   }
 }