From 31dfceef505ec0560c84ca00beaeca9bd1604715 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Wed, 4 Jun 2025 16:11:18 -0400 Subject: [PATCH 1/2] feat(deps): Allowed support for React 19 --- .eslintrc.json | 9 +- README.md | 8 +- packages/demo-app-ts/src/App.test.tsx | 8 +- packages/demo-app-ts/src/App.tsx | 8 +- .../src/components/CustomCircleNode.tsx | 4 +- .../src/components/CustomPathNode.tsx | 1 - .../src/components/CustomPolygonNode.tsx | 1 - .../src/components/CustomRectNode.tsx | 1 - .../src/components/DemoDefaultEdge.tsx | 4 +- .../src/components/DemoDefaultGroup.tsx | 4 +- .../src/components/DemoDefaultNode.tsx | 4 +- .../demo-app-ts/src/components/GroupHull.tsx | 4 +- .../demo-app-ts/src/components/MultiEdge.tsx | 1 - .../demo-app-ts/src/components/NodeRect.tsx | 1 - .../components/actionsComponentFactory.tsx | 1 - .../src/components/shapes/Path.tsx | 1 - .../src/components/shapes/Polygon.tsx | 4 +- packages/demo-app-ts/src/demos/Basics.tsx | 18 +-- .../src/demos/CollapsibleGroups.tsx | 16 +- packages/demo-app-ts/src/demos/Connectors.tsx | 16 +- .../demo-app-ts/src/demos/ContextMenus.tsx | 14 +- .../demo-app-ts/src/demos/DemoControlBar.tsx | 1 - packages/demo-app-ts/src/demos/DragDrop.tsx | 16 +- packages/demo-app-ts/src/demos/Groups.tsx | 6 +- packages/demo-app-ts/src/demos/Layouts.tsx | 6 +- packages/demo-app-ts/src/demos/PanZoom.tsx | 6 +- packages/demo-app-ts/src/demos/Selection.tsx | 18 +-- packages/demo-app-ts/src/demos/Shapes.tsx | 6 +- .../demos/pipelineGroupsDemo/DemoTaskEdge.tsx | 1 - .../pipelineGroupsDemo/DemoTaskGroup.tsx | 1 - .../demos/pipelineGroupsDemo/DemoTaskNode.tsx | 1 - .../demos/pipelineGroupsDemo/OptionsBar.tsx | 4 +- .../pipelineGroupsDemo/PipelineGroupsDemo.tsx | 10 +- .../PipelineGroupsDemoContext.tsx | 4 +- .../pipelineGroupsComponentFactory.tsx | 1 - .../demos/pipelinesDemo/DemoFinallyNode.tsx | 1 - .../pipelinesDemo/DemoPipelinesGroup.tsx | 1 - .../src/demos/pipelinesDemo/DemoTaskEdge.tsx | 4 +- .../demos/pipelinesDemo/DemoTaskGroupEdge.tsx | 4 +- .../src/demos/pipelinesDemo/DemoTaskNode.tsx | 4 +- .../pipelinesDemo/PipelineDemoContext.tsx | 4 +- .../pipelinesDemo/PipelineLayoutDemo.tsx | 10 +- .../pipelinesDemo/PipelineOptionsBar.tsx | 4 +- .../demos/pipelinesDemo/PipelineTasksDemo.tsx | 10 +- .../pipelineComponentFactory.tsx | 1 - .../pipelinesDemo/useDemoPipelineNodes.tsx | 4 +- .../demos/statusConnectorsDemo/FailedEdge.tsx | 1 - .../StatusConnectorNode.tsx | 4 +- .../statusConnectorsDemo/StatusConnectors.tsx | 8 +- .../statusConnectorsDemo/SuccessEdge.tsx | 1 - .../useSourceStatusAnchor.tsx | 6 +- .../useTargetStatusAnchor.tsx | 6 +- .../src/demos/stylesDemo/StyleEdge.tsx | 4 +- .../src/demos/stylesDemo/StyleGroup.tsx | 4 +- .../src/demos/stylesDemo/StyleNode.tsx | 6 +- .../src/demos/stylesDemo/Styles.tsx | 34 ++-- .../src/demos/stylesDemo/styleUtils.ts | 1 - .../stylesDemo/stylesComponentFactory.tsx | 1 - .../topologyPackageDemo/AreaDragHint.tsx | 1 - .../demos/topologyPackageDemo/DemoContext.tsx | 4 +- .../demos/topologyPackageDemo/DemoEdge.tsx | 4 +- .../demos/topologyPackageDemo/DemoGroup.tsx | 4 +- .../demos/topologyPackageDemo/DemoNode.tsx | 6 +- .../topologyPackageDemo/OptionsContextBar.tsx | 16 +- .../topologyPackageDemo/OptionsViewBar.tsx | 12 +- .../topologyPackageDemo/TopologyPackage.tsx | 18 +-- .../demoComponentFactory.tsx | 1 - packages/demo-app-ts/src/index.tsx | 6 +- .../src/utils/withTopologySetup.tsx | 1 - packages/demo-app-ts/tsconfig.json | 13 +- packages/module/package.json | 148 +++++++++--------- .../content/examples/AboutTopology.md | 1 + .../content/examples/TopologyAnchors.md | 1 + .../content/examples/TopologyAnchorsDemo.tsx | 4 +- .../content/examples/TopologyContextMenu.md | 1 + .../examples/TopologyContextMenuDemo.tsx | 4 +- .../content/examples/TopologyControlBar.md | 56 +++---- .../examples/TopologyControlBarDemo.tsx | 6 +- .../content/examples/TopologyCustomEdges.md | 1 + .../examples/TopologyCustomEdgesDemo.tsx | 6 +- .../content/examples/TopologyCustomNodes.md | 1 + .../examples/TopologyCustomNodesDemo.tsx | 6 +- .../content/examples/TopologyDragDropDemo.md | 1 + .../content/examples/TopologyDragDropDemo.tsx | 6 +- .../examples/TopologyGettingStartedDemo.tsx | 6 +- .../content/examples/TopologyLayouts.md | 1 + .../content/examples/TopologyLayoutsDemo.tsx | 10 +- .../content/examples/TopologyPanZoom.md | 1 + .../content/examples/TopologyPanZoomDemo.tsx | 6 +- .../TopologyPipelinesGettingStarted.md | 1 + .../TopologyPipelinesGettingStartedDemo.tsx | 4 +- .../content/examples/TopologySelectable.md | 1 + .../examples/TopologySelectableDemo.tsx | 6 +- .../content/examples/TopologySidebar.md | 1 + .../content/examples/TopologySidebarDemo.tsx | 6 +- .../content/examples/TopologyToolbar.md | 1 + .../content/examples/TopologyToolbarDemo.tsx | 10 +- .../module/patternfly-docs/pages/index.js | 1 + packages/module/src/behavior/useAnchor.tsx | 8 +- .../module/src/behavior/useAreaSelection.tsx | 8 +- packages/module/src/behavior/useBendpoint.tsx | 12 +- packages/module/src/behavior/useDndDrag.tsx | 24 +-- packages/module/src/behavior/useDndDrop.tsx | 20 +-- packages/module/src/behavior/useDragNode.tsx | 8 +- packages/module/src/behavior/usePanZoom.tsx | 6 +- .../module/src/behavior/usePolygonAnchor.tsx | 8 +- packages/module/src/behavior/useReconnect.tsx | 1 - packages/module/src/behavior/useSelection.tsx | 10 +- packages/module/src/behavior/useSvgAnchor.tsx | 6 +- .../module/src/behavior/withContextMenu.tsx | 12 +- .../src/behavior/withCreateConnector.tsx | 22 +-- .../src/behavior/withRemoveConnector.tsx | 8 +- .../components/ComputeElementDimensions.tsx | 6 +- .../src/components/DefaultCreateConnector.tsx | 4 +- .../src/components/DefaultRemoveConnector.tsx | 4 +- .../module/src/components/ElementWrapper.tsx | 6 +- .../module/src/components/GraphComponent.tsx | 4 +- .../module/src/components/SVGArrowMarker.tsx | 1 - .../TopologyControlBar/TopologyControlBar.tsx | 1 - .../__tests__/TopologyControlBar.test.tsx | 2 - .../TopologySideBar/TopologySideBar.tsx | 10 +- .../__tests__/TopologySideBar.test.tsx | 2 - .../components/TopologyView/TopologyView.tsx | 1 - .../__tests__/TopologyView.test.tsx | 1 - .../src/components/VisualizationProvider.tsx | 4 +- .../src/components/VisualizationSurface.tsx | 22 +-- .../ComputeElementDimensions.test.tsx | 1 - .../components/contextmenu/ContextMenu.tsx | 10 +- .../contextmenu/ContextSubMenuItem.tsx | 10 +- .../src/components/decorators/Decorator.tsx | 1 - packages/module/src/components/defs/Defs.tsx | 6 +- .../module/src/components/defs/SVGDefs.tsx | 4 +- .../src/components/defs/SVGDefsProvider.tsx | 6 +- .../src/components/defs/SVGDefsSetter.tsx | 4 +- .../src/components/defs/__mocks__/SVGDefs.tsx | 1 - .../components/defs/__tests__/Defs.test.tsx | 1 - .../defs/__tests__/SVGDefs.spec.tsx | 2 - .../components/edges/DefaultConnectorTag.tsx | 4 +- .../src/components/edges/DefaultEdge.tsx | 4 +- .../edges/terminals/ConnectorArrow.tsx | 6 +- .../edges/terminals/ConnectorArrowAlt.tsx | 1 - .../edges/terminals/ConnectorCircle.tsx | 1 - .../edges/terminals/ConnectorCross.tsx | 1 - .../edges/terminals/ConnectorSquare.tsx | 1 - .../terminals/DefaultConnectorTerminal.tsx | 1 - .../factories/RegisterComponentFactory.tsx | 1 - .../factories/RegisterElementFactory.tsx | 1 - .../factories/RegisterLayoutFactory.tsx | 1 - .../src/components/groups/DefaultGroup.tsx | 1 - .../groups/DefaultGroupCollapsed.tsx | 1 - .../groups/DefaultGroupExpanded.tsx | 8 +- .../module/src/components/groups/types.ts | 2 +- .../module/src/components/layers/Layer.tsx | 10 +- .../src/components/layers/LayerContainer.tsx | 6 +- .../src/components/layers/LayersProvider.tsx | 4 +- .../src/components/nodes/DefaultNode.tsx | 20 +-- .../src/components/nodes/NodeShadows.tsx | 1 - .../nodes/labels/LabelActionIcon.tsx | 4 +- .../components/nodes/labels/LabelBadge.tsx | 4 +- .../nodes/labels/LabelContextMenu.tsx | 4 +- .../src/components/nodes/labels/LabelIcon.tsx | 4 +- .../src/components/nodes/labels/NodeLabel.tsx | 4 +- .../src/components/nodes/shapes/Ellipse.tsx | 2 +- .../src/components/nodes/shapes/Hexagon.tsx | 1 - .../src/components/nodes/shapes/Octagon.tsx | 1 - .../src/components/nodes/shapes/Rectangle.tsx | 1 - .../src/components/nodes/shapes/Rhombus.tsx | 4 +- .../components/nodes/shapes/SidedShape.tsx | 4 +- .../src/components/nodes/shapes/Stadium.tsx | 4 +- .../src/components/nodes/shapes/Trapezoid.tsx | 4 +- .../src/components/nodes/shapes/shapeUtils.ts | 1 - .../module/src/components/popper/Popper.tsx | 32 ++-- .../module/src/components/popper/Portal.tsx | 4 +- .../components/svg/SvgDropShadowFilter.tsx | 1 - .../module/src/hooks/useComponentFactory.tsx | 4 +- .../module/src/hooks/useElementFactory.tsx | 4 +- .../module/src/hooks/useEventListener.tsx | 4 +- .../module/src/hooks/useLayoutFactory.tsx | 4 +- packages/module/src/hooks/useModel.tsx | 4 +- packages/module/src/hooks/useScaleNode.tsx | 12 +- .../src/hooks/useVisualizationController.tsx | 4 +- .../src/hooks/useVisualizationState.tsx | 10 +- .../pipelines/components/edges/TaskEdge.tsx | 1 - .../pipelines/components/edges/WhenEdge.tsx | 1 - .../components/groups/DefaultTaskGroup.tsx | 1 - .../groups/DefaultTaskGroupCollapsed.tsx | 1 - .../groups/DefaultTaskGroupExpanded.tsx | 8 +- .../components/groups/TaskGroupPillLabel.tsx | 4 +- .../components/nodes/FinallyNode.tsx | 1 - .../pipelines/components/nodes/SpacerNode.tsx | 1 - .../pipelines/components/nodes/TaskBadge.tsx | 4 +- .../pipelines/components/nodes/TaskNode.tsx | 10 +- .../pipelines/components/nodes/TaskPill.tsx | 12 +- .../pipelines/decorators/WhenDecorator.tsx | 6 +- .../module/src/pipelines/utils/StatusIcon.tsx | 1 - packages/module/src/utils/useCombineRefs.tsx | 4 +- packages/module/src/utils/useHover.ts | 12 +- packages/module/src/utils/useSize.ts | 8 +- packages/module/tsconfig.json | 27 ++-- 199 files changed, 610 insertions(+), 674 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 0864a267..d128d331 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -9,6 +9,7 @@ "plugin:react/recommended", "plugin:react-hooks/recommended", "plugin:@typescript-eslint/recommended", + "plugin:react/jsx-runtime", "prettier" ], "overrides": [ @@ -31,13 +32,7 @@ "version": "detect" } }, - "plugins": [ - "react", - "react-hooks", - "@typescript-eslint", - "patternfly-react", - "prettier" - ], + "plugins": ["react", "react-hooks", "@typescript-eslint", "patternfly-react", "prettier"], "rules": { "@typescript-eslint/adjacent-overload-signatures": "error", "@typescript-eslint/array-type": "error", diff --git a/README.md b/README.md index 3fae65c3..a2e9b129 100644 --- a/README.md +++ b/README.md @@ -78,7 +78,7 @@ To use Topology out of the box, follow these steps: ## Example ```ts -import * as React from 'react'; +import { memo, useState, useMemo } from 'react'; import { EdgeStyle, Model, @@ -172,10 +172,10 @@ const EDGES = [ } ]; -export const TopologyBaselineDemo = React.memo(() => { - const [selectedIds, setSelectedIds] = React.useState([]); +export const TopologyBaselineDemo = memo(() => { + const [selectedIds, setSelectedIds] = useState([]); - const controller = React.useMemo(() => { + const controller = useMemo(() => { const model: Model = { nodes: NODES, edges: EDGES, diff --git a/packages/demo-app-ts/src/App.test.tsx b/packages/demo-app-ts/src/App.test.tsx index a754b201..1c039be5 100755 --- a/packages/demo-app-ts/src/App.test.tsx +++ b/packages/demo-app-ts/src/App.test.tsx @@ -1,9 +1,9 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; +import { createRoot } from 'react-dom/client'; import App from './App'; it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); + const root = createRoot(div); + root.render(); + root.unmount(); }); diff --git a/packages/demo-app-ts/src/App.tsx b/packages/demo-app-ts/src/App.tsx index 7e363842..933448ec 100755 --- a/packages/demo-app-ts/src/App.tsx +++ b/packages/demo-app-ts/src/App.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import { createElement } from 'react'; import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'; import { Page, @@ -81,7 +81,7 @@ class App extends React.Component<{}, AppState> { style={{ zIndex: 2 }} id={`/${demo.id}-nav-link/${subDemo.id}-nav-link`} > - {React.createElement(subDemo.componentType)} + {createElement(subDemo.componentType)} )} key={demo.id} @@ -94,7 +94,7 @@ class App extends React.Component<{}, AppState> { path={`/${demo.id}-nav-link`} render={() => ( - {React.createElement(demo.componentType)} + {createElement(demo.componentType)} )} key={demo.id} @@ -108,7 +108,7 @@ class App extends React.Component<{}, AppState> { path="/" render={() => ( - {React.createElement(defaultDemo.componentType)} + {createElement(defaultDemo.componentType)} )} key={defaultDemo.id} diff --git a/packages/demo-app-ts/src/components/CustomCircleNode.tsx b/packages/demo-app-ts/src/components/CustomCircleNode.tsx index 3aa438dc..f9e813f0 100644 --- a/packages/demo-app-ts/src/components/CustomCircleNode.tsx +++ b/packages/demo-app-ts/src/components/CustomCircleNode.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import { useEffect } from 'react'; import { observer } from 'mobx-react'; import { WithCreateConnectorProps, @@ -28,7 +28,7 @@ type CustomCircleNodeProps = { const CustomCircle: React.FunctionComponent = ({ element, className }) => { useAnchor(EllipseAnchor); - React.useEffect(() => { + useEffect(() => { // init height element.setDimensions(new Dimensions(40, 40)); }, [element]); diff --git a/packages/demo-app-ts/src/components/CustomPathNode.tsx b/packages/demo-app-ts/src/components/CustomPathNode.tsx index e69bd690..d36cb9bd 100644 --- a/packages/demo-app-ts/src/components/CustomPathNode.tsx +++ b/packages/demo-app-ts/src/components/CustomPathNode.tsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import { observer } from 'mobx-react'; import { WithCreateConnectorProps, diff --git a/packages/demo-app-ts/src/components/CustomPolygonNode.tsx b/packages/demo-app-ts/src/components/CustomPolygonNode.tsx index 17ad52e4..3a6e98b5 100644 --- a/packages/demo-app-ts/src/components/CustomPolygonNode.tsx +++ b/packages/demo-app-ts/src/components/CustomPolygonNode.tsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import { observer } from 'mobx-react'; import { WithCreateConnectorProps, diff --git a/packages/demo-app-ts/src/components/CustomRectNode.tsx b/packages/demo-app-ts/src/components/CustomRectNode.tsx index 6677b8b5..666ac7a1 100644 --- a/packages/demo-app-ts/src/components/CustomRectNode.tsx +++ b/packages/demo-app-ts/src/components/CustomRectNode.tsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import { observer } from 'mobx-react'; import { WithCreateConnectorProps, diff --git a/packages/demo-app-ts/src/components/DemoDefaultEdge.tsx b/packages/demo-app-ts/src/components/DemoDefaultEdge.tsx index 858396c1..ba28626a 100644 --- a/packages/demo-app-ts/src/components/DemoDefaultEdge.tsx +++ b/packages/demo-app-ts/src/components/DemoDefaultEdge.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import { useState } from 'react'; import { observer } from 'mobx-react'; import { Edge, @@ -25,7 +25,7 @@ interface BendpointProps { } const Bendpoint: React.FunctionComponent = observer(({ point }) => { - const [hover, setHover] = React.useState(false); + const [hover, setHover] = useState(false); const [, ref] = useBendpoint(point); return ( = ({ }) => { const nodeElement = element as Node; useAnchor(RectAnchor); - const boxRef = React.useRef(null); + const boxRef = useRef(null); const refs = useCombineRefs(dragNodeRef, dndDragRef, dndDropRef); if (!droppable || !boxRef.current) { diff --git a/packages/demo-app-ts/src/components/DemoDefaultNode.tsx b/packages/demo-app-ts/src/components/DemoDefaultNode.tsx index 046d069e..0265b50b 100644 --- a/packages/demo-app-ts/src/components/DemoDefaultNode.tsx +++ b/packages/demo-app-ts/src/components/DemoDefaultNode.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import { useEffect } from 'react'; import classNames from 'classnames'; import { observer } from 'mobx-react'; import { @@ -52,7 +52,7 @@ const DemoDefaultNode: React.FunctionComponent = ({ }); const ShapeComponent = (getCustomShape && getCustomShape(nodeElement)) || getShapeComponent(nodeElement); - React.useEffect(() => { + useEffect(() => { if (hover) { onShowCreateConnector && onShowCreateConnector(); } else { diff --git a/packages/demo-app-ts/src/components/GroupHull.tsx b/packages/demo-app-ts/src/components/GroupHull.tsx index 441f52c5..0b693d31 100644 --- a/packages/demo-app-ts/src/components/GroupHull.tsx +++ b/packages/demo-app-ts/src/components/GroupHull.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import { useRef } from 'react'; import { observer } from 'mobx-react'; import { polygonHull } from 'd3-polygon'; import { @@ -45,7 +45,7 @@ const GroupHull: React.FunctionComponent = ({ canDrop }) => { const nodeElement = element as Node; - const pathRef = React.useRef(null); + const pathRef = useRef(null); const refs = useCombineRefs(dragNodeRef, dndDragRef, dndDropRef); useAnchor(RectAnchor); diff --git a/packages/demo-app-ts/src/components/MultiEdge.tsx b/packages/demo-app-ts/src/components/MultiEdge.tsx index 824092d7..8ccda5b8 100644 --- a/packages/demo-app-ts/src/components/MultiEdge.tsx +++ b/packages/demo-app-ts/src/components/MultiEdge.tsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import { observer } from 'mobx-react'; import { Edge, vecSum, vecScale, unitNormal, GraphElement } from '@patternfly/react-topology'; diff --git a/packages/demo-app-ts/src/components/NodeRect.tsx b/packages/demo-app-ts/src/components/NodeRect.tsx index a1d1808a..3ccb1100 100644 --- a/packages/demo-app-ts/src/components/NodeRect.tsx +++ b/packages/demo-app-ts/src/components/NodeRect.tsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import { observer } from 'mobx-react'; import { Node, diff --git a/packages/demo-app-ts/src/components/actionsComponentFactory.tsx b/packages/demo-app-ts/src/components/actionsComponentFactory.tsx index 6b4d3625..e331446f 100644 --- a/packages/demo-app-ts/src/components/actionsComponentFactory.tsx +++ b/packages/demo-app-ts/src/components/actionsComponentFactory.tsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import { GraphElement, ComponentFactory, diff --git a/packages/demo-app-ts/src/components/shapes/Path.tsx b/packages/demo-app-ts/src/components/shapes/Path.tsx index c44676b7..d91b5776 100644 --- a/packages/demo-app-ts/src/components/shapes/Path.tsx +++ b/packages/demo-app-ts/src/components/shapes/Path.tsx @@ -1,5 +1,4 @@ import { ShapeProps, useCombineRefs, useSvgAnchor } from '@patternfly/react-topology'; -import * as React from 'react'; const Path: React.FunctionComponent = ({ className, width, height, filter, dndDropRef }) => { const anchorRef = useSvgAnchor(); diff --git a/packages/demo-app-ts/src/components/shapes/Polygon.tsx b/packages/demo-app-ts/src/components/shapes/Polygon.tsx index 8c4e6804..428448ca 100644 --- a/packages/demo-app-ts/src/components/shapes/Polygon.tsx +++ b/packages/demo-app-ts/src/components/shapes/Polygon.tsx @@ -1,8 +1,8 @@ import { PointTuple, ShapeProps, usePolygonAnchor } from '@patternfly/react-topology'; -import * as React from 'react'; +import { useMemo } from 'react'; const Polygon: React.FunctionComponent = ({ className, width, height, filter, dndDropRef }) => { - const points: PointTuple[] = React.useMemo( + const points: PointTuple[] = useMemo( () => [ [width / 2, 0], [width - width / 8, height], diff --git a/packages/demo-app-ts/src/demos/Basics.tsx b/packages/demo-app-ts/src/demos/Basics.tsx index 55e2b47f..e2b31bf7 100644 --- a/packages/demo-app-ts/src/demos/Basics.tsx +++ b/packages/demo-app-ts/src/demos/Basics.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import { useMemo, useCallback, useState } from 'react'; import { DefaultNode, Model, @@ -17,7 +17,7 @@ import { Tab, Tabs, TabTitleText } from '@patternfly/react-core'; export const SingleNode = withTopologySetup(() => { useComponentFactory(defaultComponentFactory); useModel( - React.useMemo( + useMemo( (): Model => ({ graph: { id: 'g1', @@ -43,7 +43,7 @@ export const SingleNode = withTopologySetup(() => { export const SingleEdge = withTopologySetup(() => { useComponentFactory(defaultComponentFactory); useModel( - React.useMemo( + useMemo( (): Model => ({ graph: { id: 'g1', @@ -89,7 +89,7 @@ export const SingleEdge = withTopologySetup(() => { export const MultiEdge = withTopologySetup(() => { useComponentFactory(defaultComponentFactory); useComponentFactory( - React.useCallback((kind) => { + useCallback((kind) => { if (kind === ModelKind.node) { return withDragNode()(DefaultNode); } @@ -97,7 +97,7 @@ export const MultiEdge = withTopologySetup(() => { }, []) ); useModel( - React.useMemo( + useMemo( (): Model => ({ graph: { id: 'g1', @@ -193,7 +193,7 @@ const groupStory = () => { useComponentFactory(defaultComponentFactory); useModel( - React.useMemo( + useMemo( (): Model => ({ graph: { id: 'g1', @@ -247,7 +247,7 @@ export const GroupHull = withTopologySetup(groupStory('group-hull')); export const AutoSizeNode = withTopologySetup(() => { useComponentFactory(defaultComponentFactory); useComponentFactory( - React.useCallback((kind, type) => { + useCallback((kind, type) => { if (type === 'autoSize-circle') { return CustomCircleNode; } @@ -258,7 +258,7 @@ export const AutoSizeNode = withTopologySetup(() => { }, []) ); useModel( - React.useMemo( + useMemo( (): Model => ({ graph: { id: 'g1', @@ -317,7 +317,7 @@ export const AutoSizeNode = withTopologySetup(() => { }); export const Basics: React.FunctionComponent = () => { - const [activeKey, setActiveKey] = React.useState(0); + const [activeKey, setActiveKey] = useState(0); const handleTabClick = (_event: React.MouseEvent, tabIndex: string | number) => { setActiveKey(tabIndex); diff --git a/packages/demo-app-ts/src/demos/CollapsibleGroups.tsx b/packages/demo-app-ts/src/demos/CollapsibleGroups.tsx index b92fcb65..437800a7 100644 --- a/packages/demo-app-ts/src/demos/CollapsibleGroups.tsx +++ b/packages/demo-app-ts/src/demos/CollapsibleGroups.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import { useState, useEffect } from 'react'; import { action } from 'mobx'; import { TopologyView, @@ -117,12 +117,12 @@ interface TopologyViewComponentProps { } const TopologyViewComponent: React.FunctionComponent = ({ vis }) => { - const [selectedIds, setSelectedIds] = React.useState(); - const [collapseBlue, setCollapseBlue] = React.useState(false); - const [collapseLightBlue, setCollapseLightBlue] = React.useState(false); - const [collapseCyan, setCollapseCyan] = React.useState(false); - const [collapseOrange, setCollapseOrange] = React.useState(false); - const [collapsePink, setCollapsePink] = React.useState(false); + const [selectedIds, setSelectedIds] = useState(); + const [collapseBlue, setCollapseBlue] = useState(false); + const [collapseLightBlue, setCollapseLightBlue] = useState(false); + const [collapseCyan, setCollapseCyan] = useState(false); + const [collapseOrange, setCollapseOrange] = useState(false); + const [collapsePink, setCollapsePink] = useState(false); useEventListener(SELECTION_EVENT, (ids) => { setSelectedIds(ids); @@ -183,7 +183,7 @@ const TopologyViewComponent: React.FunctionComponent ); - React.useEffect(() => { + useEffect(() => { action(() => { const collapsedTypes: string[] = []; if (collapseBlue) { diff --git a/packages/demo-app-ts/src/demos/Connectors.tsx b/packages/demo-app-ts/src/demos/Connectors.tsx index 72e0b384..53f08359 100644 --- a/packages/demo-app-ts/src/demos/Connectors.tsx +++ b/packages/demo-app-ts/src/demos/Connectors.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import { useCallback, useMemo, useState } from 'react'; import { Model, ModelKind, @@ -38,7 +38,7 @@ import { Tab, Tabs, TabTitleText } from '@patternfly/react-core'; export const Reconnect = withTopologySetup(() => { useComponentFactory(defaultComponentFactory); useComponentFactory( - React.useCallback((kind) => { + useCallback((kind) => { if (kind === ModelKind.graph) { return withPanZoom()(GraphComponent); } @@ -96,7 +96,7 @@ export const Reconnect = withTopologySetup(() => { }, []) ); useModel( - React.useMemo( + useMemo( (): Model => ({ graph: { id: 'g1', @@ -158,7 +158,7 @@ type ColorChoice = ConnectorChoice & { }; export const CreateConnector = withTopologySetup(() => { - const model = React.useMemo( + const model = useMemo( (): Model => ({ graph: { id: 'g1', @@ -196,7 +196,7 @@ export const CreateConnector = withTopologySetup(() => { const controller = useVisualizationController(); useComponentFactory(defaultComponentFactory); useComponentFactory( - React.useCallback( + useCallback( (kind) => { if (kind === ModelKind.graph) { return withDndDrop({ @@ -295,7 +295,7 @@ const NodeWithPointAnchor: React.FunctionComponent<{ element: GraphElement } & W export const Anchors = withTopologySetup(() => { useComponentFactory(defaultComponentFactory); useComponentFactory( - React.useCallback((kind) => { + useCallback((kind) => { if (kind === ModelKind.node) { return withDragNode()(NodeWithPointAnchor); } @@ -303,7 +303,7 @@ export const Anchors = withTopologySetup(() => { }, []) ); useModel( - React.useMemo( + useMemo( (): Model => ({ graph: { id: 'g1', @@ -357,7 +357,7 @@ export const Anchors = withTopologySetup(() => { }); export const Connectors: React.FunctionComponent = () => { - const [activeKey, setActiveKey] = React.useState(0); + const [activeKey, setActiveKey] = useState(0); const handleTabClick = (_event: React.MouseEvent, tabIndex: string | number) => { setActiveKey(tabIndex); diff --git a/packages/demo-app-ts/src/demos/ContextMenus.tsx b/packages/demo-app-ts/src/demos/ContextMenus.tsx index 2eb87934..d703126d 100644 --- a/packages/demo-app-ts/src/demos/ContextMenus.tsx +++ b/packages/demo-app-ts/src/demos/ContextMenus.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import { useState, useCallback, useMemo } from 'react'; import { ContextMenu, ContextMenuItem, @@ -42,7 +42,7 @@ export const UncontrolledContextMenu = () => ( ); export const ControlledContextMenu = () => { - const [open, setOpen] = React.useState(false); + const [open, setOpen] = useState(false); return ( <>