alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(lib): use react 18

Browse Source
This commit is contained in:
moklick
2022-04-11 16:11:14 +02:00
parent 97c8316f8d
commit 607e8061c9
21 changed files with 129 additions and 513 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/additional-components/Controls/index.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import React, { memo, useCallback, FC, useEffect, useState } from 'react';
import React, { memo, useCallback, FC, useEffect, useState, PropsWithChildren } from 'react';
import cc from 'classcat';
import { useStore, useStoreApi } from '../../store';
@@ -12,7 +12,7 @@ import UnlockIcon from './Icons/Unlock';
import { ControlProps, ControlButtonProps, ReactFlowState } from '../../types';
export const ControlButton: FC<ControlButtonProps> = ({ children, className, ...rest }) => (
export const ControlButton: FC<PropsWithChildren<ControlButtonProps>> = ({ children, className, ...rest }) => (
<button type="button" className={cc(['react-flow__controls-button', className])} {...rest}>
{children}
</button>
@@ -20,7 +20,7 @@ export const ControlButton: FC<ControlButtonProps> = ({ children, className, ...
const isInteractiveSelector = (s: ReactFlowState) => s.nodesDraggable && s.nodesConnectable && s.elementsSelectable;
const Controls: FC<ControlProps> = ({
const Controls: FC<PropsWithChildren<ControlProps>> = ({
style,
showZoom = true,
showFitView = true,
src/additional-components/ReactFlowProvider/index.tsx
+3 -1
View File
@@ -2,7 +2,9 @@ import React, { FC, PropsWithChildren } from 'react';
import { Provider, createStore } from '../../store';
const ReactFlowProvider: FC<PropsWithChildren<{}>> = ({ children }) => <Provider createStore={createStore}>{children}</Provider>;
const ReactFlowProvider: FC<PropsWithChildren<{}>> = ({ children }) => (
<Provider createStore={createStore}>{children}</Provider>
);
ReactFlowProvider.displayName = 'ReactFlowProvider';
src/components/Edges/EdgeText.tsx
+2 -2
View File
@@ -1,9 +1,9 @@
import React, { memo, useRef, useState, useEffect, FC } from 'react';
import React, { memo, useRef, useState, useEffect, FC, PropsWithChildren } from 'react';
import cc from 'classcat';
import { EdgeTextProps, Rect } from '../../types';
const EdgeText: FC<EdgeTextProps> = ({
const EdgeText: FC<PropsWithChildren<EdgeTextProps>> = ({
x,
y,
label,
src/components/Edges/wrapEdge.tsx
+1 -1
View File
@@ -140,7 +140,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
const handleEdgeUpdater = useCallback(
(event: React.MouseEvent<SVGGElement, MouseEvent>, isSourceHandle: boolean) => {
const nodeId = isSourceHandle ? target : source;
const handleId = isSourceHandle ? targetHandleId : sourceHandleId;
const handleId = (isSourceHandle ? targetHandleId : sourceHandleId) || null;
const handleType = isSourceHandle ? 'target' : 'source';
const isValidConnection = () => true;
const isTarget = isSourceHandle;
src/components/Nodes/wrapNode.tsx
+1
View File
@@ -232,6 +232,7 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
]);
return (
// @ts-ignore
<DraggableCore
onStart={onDragStart}
onDrag={onDrag}
src/components/NodesSelection/index.tsx
+1
View File
@@ -113,6 +113,7 @@ function NodesSelection({
return (
<div className={cc(['react-flow__nodesselection', 'react-flow__container', noPanClassName])} style={style}>
{/* @ts-ignore */}
<DraggableCore
scale={tScale}
grid={grid}
src/container/EdgeRenderer/index.tsx
+2 -1
View File
@@ -15,11 +15,12 @@ import {
OnEdgeUpdateFunc,
HandleType,
ReactFlowState,
EdgeTypesWrapped,
} from '../../types';
import useVisibleEdges from '../../hooks/useVisibleEdges';
interface EdgeRendererProps {
edgeTypes: any;
edgeTypes: EdgeTypesWrapped;
connectionLineType: ConnectionLineType;
connectionLineStyle?: CSSProperties;
connectionLineComponent?: ConnectionLineComponent;
src/container/EdgeRenderer/utils.ts
+6 -5
View File
@@ -4,6 +4,7 @@ import wrapEdge from '../../components/Edges/wrapEdge';
import {
EdgeProps,
EdgeTypes,
EdgeTypesWrapped,
HandleElement,
NodeHandleBounds,
NodeInternals,
@@ -14,10 +15,10 @@ import {
} from '../../types';
import { rectToBox } from '../../utils';
export type CreateEdgeTypes = (edgeTypes: EdgeTypes) => EdgeTypes;
export type CreateEdgeTypes = (edgeTypes: EdgeTypes) => EdgeTypesWrapped;
export function createEdgeTypes(edgeTypes: EdgeTypes): EdgeTypes {
const standardTypes: EdgeTypes = {
export function createEdgeTypes(edgeTypes: EdgeTypes): EdgeTypesWrapped {
const standardTypes: EdgeTypesWrapped = {
default: wrapEdge((edgeTypes.default || BezierEdge) as ComponentType<EdgeProps>),
straight: wrapEdge((edgeTypes.bezier || StraightEdge) as ComponentType<EdgeProps>),
step: wrapEdge((edgeTypes.step || StepEdge) as ComponentType<EdgeProps>),
@@ -25,8 +26,8 @@ export function createEdgeTypes(edgeTypes: EdgeTypes): EdgeTypes {
simplebezier: wrapEdge((edgeTypes.simplebezier || SimpleBezierEdge) as ComponentType<EdgeProps>),
};
const wrappedTypes = {} as EdgeTypes;
const specialTypes: EdgeTypes = Object.keys(edgeTypes)
const wrappedTypes = {} as EdgeTypesWrapped;
const specialTypes: EdgeTypesWrapped = Object.keys(edgeTypes)
.filter((k) => !['default', 'bezier'].includes(k))
.reduce((res, key) => {
res[key] = wrapEdge((edgeTypes[key] || BezierEdge) as ComponentType<EdgeProps>);
src/container/GraphView/index.tsx
+5 -4
View File
@@ -5,11 +5,12 @@ import NodeRenderer from '../NodeRenderer';
import EdgeRenderer from '../EdgeRenderer';
import Viewport from '../Viewport';
import useOnInitHandler from '../../hooks/useOnInitHandler';
import { NodeTypes, EdgeTypes, ConnectionLineType, KeyCode, ReactFlowProps } from '../../types';
import { NodeTypesWrapped, EdgeTypesWrapped, ConnectionLineType, KeyCode, ReactFlowProps } from '../../types';
export interface GraphViewProps extends Omit<ReactFlowProps, 'onSelectionChange' | 'nodes' | 'edges'> {
nodeTypes: NodeTypes;
edgeTypes: EdgeTypes;
export interface GraphViewProps
extends Omit<ReactFlowProps, 'onSelectionChange' | 'nodes' | 'edges' | 'nodeTypes' | 'edgeTypes'> {
nodeTypes: NodeTypesWrapped;
edgeTypes: EdgeTypesWrapped;
selectionKeyCode: KeyCode | null;
deleteKeyCode: KeyCode | null;
multiSelectionKeyCode: KeyCode | null;
src/container/NodeRenderer/index.tsx
+2 -2
View File
@@ -3,10 +3,10 @@ import shallow from 'zustand/shallow';
import useVisibleNodes from '../../hooks/useVisibleNodes';
import { useStore } from '../../store';
import { Node, NodeTypes, Position, ReactFlowState, WrapNodeProps } from '../../types';
import { Node, NodeTypesWrapped, Position, ReactFlowState, WrapNodeProps } from '../../types';
interface NodeRendererProps {
nodeTypes: NodeTypes;
nodeTypes: NodeTypesWrapped;
selectNodesOnDrag: boolean;
onNodeClick?: (event: MouseEvent, element: Node) => void;
onNodeDoubleClick?: (event: MouseEvent, element: Node) => void;
src/container/NodeRenderer/utils.ts
+6 -6
View File
@@ -5,20 +5,20 @@ import InputNode from '../../components/Nodes/InputNode';
import OutputNode from '../../components/Nodes/OutputNode';
import GroupNode from '../../components/Nodes/GroupNode';
import wrapNode from '../../components/Nodes/wrapNode';
import { NodeTypes, NodeProps } from '../../types';
import { NodeTypes, NodeProps, NodeTypesWrapped } from '../../types';
export type CreateNodeTypes = (nodeTypes: NodeTypes) => NodeTypes;
export type CreateNodeTypes = (nodeTypes: NodeTypes) => NodeTypesWrapped;
export function createNodeTypes(nodeTypes: NodeTypes): NodeTypes {
const standardTypes: NodeTypes = {
export function createNodeTypes(nodeTypes: NodeTypes): NodeTypesWrapped {
const standardTypes: NodeTypesWrapped = {
input: wrapNode((nodeTypes.input || InputNode) as ComponentType<NodeProps>),
default: wrapNode((nodeTypes.default || DefaultNode) as ComponentType<NodeProps>),
output: wrapNode((nodeTypes.output || OutputNode) as ComponentType<NodeProps>),
group: wrapNode((nodeTypes.group || GroupNode) as ComponentType<NodeProps>),
};
const wrappedTypes = {} as NodeTypes;
const specialTypes: NodeTypes = Object.keys(nodeTypes)
const wrappedTypes = {} as NodeTypesWrapped;
const specialTypes: NodeTypesWrapped = Object.keys(nodeTypes)
.filter((k) => !['input', 'default', 'output', 'group'].includes(k))
.reduce((res, key) => {
res[key] = wrapNode((nodeTypes[key] || DefaultNode) as ComponentType<NodeProps>);
src/container/ReactFlow/Wrapper.tsx
+2 -2
View File
@@ -1,8 +1,8 @@
import React, { FC } from 'react';
import React, { FC, PropsWithChildren } from 'react';
import { Provider, createStore, useStoreApi } from '../../store';
const Wrapper: FC = ({ children }) => {
const Wrapper: FC<PropsWithChildren<{}>> = ({ children }) => {
let isWrapped = true;
try {
src/container/ReactFlow/index.tsx
+9 -7
View File
@@ -13,7 +13,9 @@ import {
ConnectionLineType,
ConnectionMode,
EdgeTypes,
EdgeTypesWrapped,
NodeTypes,
NodeTypesWrapped,
PanOnScrollMode,
ReactFlowProps,
ReactFlowRefType,
@@ -21,7 +23,7 @@ import {
import { createEdgeTypes } from '../EdgeRenderer/utils';
import GraphView from '../GraphView';
import { createNodeTypes } from '../NodeRenderer/utils';
import injectStyle, { useNodeOrEdgeTypes } from './utils';
import { injectStyle, useNodeOrEdgeTypes } from './utils';
import Wrapper from './Wrapper';
if (__INJECT_STYLES__) {
@@ -29,13 +31,13 @@ if (__INJECT_STYLES__) {
injectStyle(theme as unknown as string);
}
const defaultNodeTypes = {
const defaultNodeTypes: NodeTypes = {
input: InputNode,
default: DefaultNode,
output: OutputNode,
};
const defaultEdgeTypes = {
const defaultEdgeTypes: EdgeTypes = {
default: BezierEdge,
straight: StraightEdge,
step: StepEdge,
@@ -139,8 +141,8 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
},
ref
) => {
const nodeTypesParsed = useNodeOrEdgeTypes(nodeTypes, createNodeTypes) as NodeTypes;
const edgeTypesParsed = useNodeOrEdgeTypes(edgeTypes, createEdgeTypes) as EdgeTypes;
const nodeTypesWrapped = useNodeOrEdgeTypes(nodeTypes, createNodeTypes) as NodeTypesWrapped;
const edgeTypesWrapped = useNodeOrEdgeTypes(edgeTypes, createEdgeTypes) as EdgeTypesWrapped;
const reactFlowClasses = cc(['react-flow', className]);
return (
@@ -161,8 +163,8 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
onNodeDragStart={onNodeDragStart}
onNodeDrag={onNodeDrag}
onNodeDragStop={onNodeDragStop}
nodeTypes={nodeTypesParsed}
edgeTypes={edgeTypesParsed}
nodeTypes={nodeTypesWrapped}
edgeTypes={edgeTypesWrapped}
connectionLineType={connectionLineType}
connectionLineStyle={connectionLineStyle}
connectionLineComponent={connectionLineComponent}
src/container/ReactFlow/utils.ts
+4 -4
View File
@@ -1,12 +1,12 @@
import { useMemo, useRef } from 'react';
import shallow from 'zustand/shallow';
import { EdgeTypes, NodeTypes } from '../../types';
import { EdgeTypes, EdgeTypesWrapped, NodeTypes, NodeTypesWrapped } from '../../types';
import { CreateEdgeTypes } from '../EdgeRenderer/utils';
import { CreateNodeTypes } from '../NodeRenderer/utils';
export function useNodeOrEdgeTypes(nodeOrEdgeTypes: NodeTypes, createTypes: CreateNodeTypes): NodeTypes;
export function useNodeOrEdgeTypes(nodeOrEdgeTypes: EdgeTypes, createTypes: CreateEdgeTypes): EdgeTypes;
export function useNodeOrEdgeTypes(nodeOrEdgeTypes: NodeTypes, createTypes: CreateNodeTypes): NodeTypesWrapped;
export function useNodeOrEdgeTypes(nodeOrEdgeTypes: EdgeTypes, createTypes: CreateEdgeTypes): EdgeTypesWrapped;
export function useNodeOrEdgeTypes(nodeOrEdgeTypes: any, createTypes: any): any {
const typesKeysRef = useRef<string[] | null>(null);
@@ -28,7 +28,7 @@ export function useNodeOrEdgeTypes(nodeOrEdgeTypes: any, createTypes: any): any
return typesParsed;
}
export default function injectStyle(css: string): void {
export function injectStyle(css: string): void {
if (!css || typeof document === 'undefined') return;
const head = document.head || document.getElementsByTagName('head')[0];
src/types/edges.ts
+5 -5
View File
@@ -1,4 +1,4 @@
import React, { CSSProperties, HTMLAttributes, ReactNode } from 'react';
import React, { CSSProperties, ComponentType, HTMLAttributes, ReactNode } from 'react';
import { Connection } from './general';
import { HandleElement, HandleType } from './handles';
import { Node } from './nodes';
@@ -101,8 +101,8 @@ export interface WrapEdgeProps<T = any> {
style?: CSSProperties;
source: string;
target: string;
sourceHandleId: string | null;
targetHandleId: string | null;
sourceHandleId?: string | null;
targetHandleId?: string | null;
sourceX: number;
sourceY: number;
targetX: number;
@@ -111,7 +111,7 @@ export interface WrapEdgeProps<T = any> {
targetPosition: Position;
elementsSelectable?: boolean;
hidden?: boolean;
onEdgeUpdate: OnEdgeUpdateFunc;
onEdgeUpdate?: OnEdgeUpdateFunc;
onContextMenu?: EdgeMouseHandler;
onMouseEnter?: EdgeMouseHandler;
onMouseMove?: EdgeMouseHandler;
@@ -162,7 +162,7 @@ export type ConnectionLineComponentProps = {
sourceHandle?: HandleElement;
};
export type ConnectionLineComponent = React.ComponentType<ConnectionLineComponentProps>;
export type ConnectionLineComponent = ComponentType<ConnectionLineComponentProps>;
export type OnEdgeUpdateFunc<T = any> = (oldEdge: Edge<T>, newConnection: Connection) => void;
src/types/general.ts
+7 -5
View File
@@ -1,16 +1,18 @@
import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
import { MouseEvent as ReactMouseEvent, ComponentType, MemoExoticComponent } from 'react';
import { Selection as D3Selection, ZoomBehavior } from 'd3';
import { XYPosition, Rect, Transform, CoordinateExtent } from './utils';
import { NodeChange, EdgeChange } from './changes';
import { Node, NodeInternals, NodeDimensionUpdate, NodeDiffUpdate } from './nodes';
import { Edge } from './edges';
import { Node, NodeInternals, NodeDimensionUpdate, NodeDiffUpdate, NodeProps, WrapNodeProps } from './nodes';
import { Edge, EdgeProps, WrapEdgeProps } from './edges';
import { HandleType, StartHandle } from './handles';
import { DefaultEdgeOptions } from '.';
import { ReactFlowInstance } from './instance';
export type NodeTypes = { [key: string]: ReactNode };
export type EdgeTypes = NodeTypes;
export type NodeTypes = { [key: string]: ComponentType<NodeProps> };
export type NodeTypesWrapped = { [key: string]: MemoExoticComponent<ComponentType<WrapNodeProps>> };
export type EdgeTypes = { [key: string]: ComponentType<EdgeProps> };
export type EdgeTypesWrapped = { [key: string]: MemoExoticComponent<ComponentType<WrapEdgeProps>> };
export type FitView = (fitViewOptions?: FitViewOptions) => void;