fix(@types): improve types of DiagramNode

antonioru · Dec 4, 2020 · 470b944 · 470b944
1 parent b1d0ed4
commit 470b944
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/@types/DiagramSchema.ts b/@types/DiagramSchema.ts
@@ -1,4 +1,4 @@
-import { ElementType, ReactNode } from 'react';
+import { ElementType, ReactElement, ReactNode } from 'react';
 
 export type PortAlignment = 'right' | 'left' | 'top' | 'bottom';
 
@@ -18,13 +18,16 @@ export type Node<P> = {
   inputs?: Port[];
   outputs?: Port[];
   type?: 'default';
-  render?: (
-    props: Omit<Node<P>, 'coordinates'>
-  ) => ElementType | ReactNode;
+  render?: (props: NodeRenderProps<P>) => ElementType | ReactNode;
   className?: string;
   data?: P;
 };
 
+export type NodeRenderProps<P> = Omit<
+  Node<P>,
+  'coordinates' | 'disableDrag' | 'inputs' | 'outputs'
+> & { inputs: ReactElement<Port>[]; outputs: ReactElement<Port>[] };
+
 export type Link = {
   input: string;
   output: string;

diff --git a/index-tests.tsx b/index-tests.tsx
@@ -48,19 +48,22 @@ export const UncontrolledDiagram2 = () => {
         schema.nodes[schema.nodes.length - 1].coordinates[0] + 10,
         schema.nodes[schema.nodes.length - 1].coordinates[1] + 20,
       ],
-      render: ({ content, data }) => (
+      render: ({ content, data, inputs, outputs }) => (
         <div
           onDoubleClick={data?.onDoubleClick}
           role='button'
           style={{ padding: '15px', background: 'purple' }}
         >
           {content}
+          {inputs?.map((input) => (<div>{input.props.id}</div>))}
+          {outputs?.map((output) => (<div>{output.props.id}</div>))}
         </div>
       ),
       data: {
         onDoubleClick: () => alert(`Schema length is: ${schema.nodes.length}`),
       },
       inputs: [{ id: `port-${schema.nodes.length + 1}` }],
+      outputs: [{ id: `port-${schema.nodes.length + 1}` }],
     });
 
   const removeLast = () => {