feat: upgrade react to 18 in react-components (#2836)

examples/x6-example-features/package.json

@@ -9,27 +9,28 @@
     "precommit": "lint-staged"
   },
   "dependencies": {
-    "@antv/x6": "^2.0.x",
-    "@antv/x6-plugin-clipboard": "^2.0.x",
-    "@antv/x6-plugin-dnd": "^2.0.x",
-    "@antv/x6-plugin-history": "^2.0.x",
-    "@antv/x6-plugin-keyboard": "^2.0.x",
-    "@antv/x6-plugin-minimap": "^2.0.x",
-    "@antv/x6-plugin-scroller": "^2.0.x",
-    "@antv/x6-plugin-selection": "^2.0.x",
-    "@antv/x6-plugin-snapline": "^2.0.x",
-    "@antv/x6-plugin-stencil": "^2.0.x",
-    "@antv/x6-plugin-transform": "^2.0.x",
-    "@antv/x6-plugin-export": "^2.0.x",
-    "@antv/x6-react-components": "^2.0.x",
-    "@antv/x6-react-shape": "^2.0.x",
+    "@antv/x6": "^2.0.0",
+    "@antv/x6-plugin-clipboard": "^2.0.0",
+    "@antv/x6-plugin-dnd": "^2.0.0",
+    "@antv/x6-plugin-history": "^2.0.0",
+    "@antv/x6-plugin-keyboard": "^2.0.0",
+    "@antv/x6-plugin-minimap": "^2.0.0",
+    "@antv/x6-plugin-scroller": "^2.0.0",
+    "@antv/x6-plugin-selection": "^2.0.0",
+    "@antv/x6-plugin-snapline": "^2.0.0",
+    "@antv/x6-plugin-stencil": "^2.0.0",
+    "@antv/x6-plugin-transform": "^2.0.0",
+    "@antv/x6-plugin-export": "^2.0.0",
+    "@antv/x6-react-components": "^2.0.0",
+    "@antv/x6-react-shape": "^2.0.0",
     "antd": "^4.4.2",
     "classnames": "^2.2.6",
     "dagre": "^0.8.5",
     "elkjs": "^0.7.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-helmet": "^6.0.0"
+    "react-helmet": "^6.0.0",
+    "@antv/hierarchy": "^0.6.8"
   },
   "devDependencies": {
     "@ant-design/icons": "^4.2.2",
@@ -49,8 +50,7 @@
     "umi": "^2.9.0",
     "umi-plugin-react": "^1.8.0",
     "umi-types": "^0.3.0",
-    "babel-plugin-import": "^1.13.5",
-    "@antv/hierarchy": "^0.6.8"
+    "babel-plugin-import": "^1.13.5"
   },
   "lint-staged": {
     "src/**/*.ts": [

packages/x6-react-components/package.json

@@ -49,8 +49,8 @@
   ],
   "peerDependencies": {
     "antd": ">=4.4.2",
-    "react": ">=16.8.6 || >=17.0.0",
-    "react-dom": ">=16.8.6 || >=17.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "dependencies": {
     "clamp": "^1.0.1",
@@ -62,13 +62,14 @@
     "ua-parser-js": "^0.7.20"
   },
   "devDependencies": {
-    "@types/react": "^16.9.13",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "@types/react-color": "^3.0.1",
     "@types/react-resize-detector": "^5.0.0",
     "@types/ua-parser-js": "^0.7.33",
-    "antd": "^4.4.2",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0"
+    "antd": "^4.4.2"
   },
   "author": {
     "name": "bubkoo",

packages/x6-react-components/src/auto-scroll-box/index.tsx

@@ -1,9 +1,9 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 import ResizeDetector from 'react-resize-detector'
 import { ScrollBox } from '../scroll-box'
 
 export class AutoScrollBox extends React.PureComponent<
-  AutoScrollBox.Props,
+  PropsWithChildren<AutoScrollBox.Props>,
   AutoScrollBox.State
 > {
   constructor(props: AutoScrollBox.Props) {

packages/x6-react-components/src/context-menu/index.tsx

@@ -1,7 +1,9 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 import { Dropdown } from '../dropdown'
 
-export class ContextMenu extends React.PureComponent<ContextMenu.Props> {
+export class ContextMenu extends React.PureComponent<
+  PropsWithChildren<ContextMenu.Props>
+> {
   render() {
     const { children, menu, overlay, ...props } = this.props
     return (

packages/x6-react-components/src/dropdown/index.tsx

@@ -1,8 +1,11 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 import classNames from 'classnames'
 import RcDropdown from 'rc-dropdown'
 
-export class Dropdown extends React.Component<Dropdown.Props, any> {
+export class Dropdown extends React.Component<
+  PropsWithChildren<Dropdown.Props>,
+  any
+> {
   // getTransitionName() {
   //   const { placement = '', transitionName } = this.props
   //   if (transitionName !== undefined) {

packages/x6-react-components/src/menu/divider.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { MenuContext } from './context'
 
-export const MenuDivider: React.SFC = () => (
+export const MenuDivider: React.FC = () => (
   <MenuContext.Consumer>
     {({ prefixCls }) => (
       <div className={`${prefixCls}-item ${prefixCls}-item-divider`} />

packages/x6-react-components/src/menu/item.tsx

@@ -94,7 +94,7 @@ export namespace MenuItemInner {
   }
 }
 
-export const MenuItem: React.SFC<MenuItem.Props> = (props) => (
+export const MenuItem: React.FC<MenuItem.Props> = (props) => (
   <MenuContext.Consumer>
     {(context) => <MenuItemInner context={context} {...props} />}
   </MenuContext.Consumer>

packages/x6-react-components/src/menu/menu.tsx

@@ -1,11 +1,11 @@
-import React, { MouseEvent } from 'react'
+import React, { MouseEvent, PropsWithChildren } from 'react'
 import classNames from 'classnames'
 import { MenuItem } from './item'
 import { MenuDivider } from './divider'
 import { MenuContext } from './context'
 import { MenuSubMenu } from './submenu'
 
-export class Menu extends React.PureComponent<Menu.Props> {
+export class Menu extends React.PureComponent<PropsWithChildren<Menu.Props>> {
   private onClick = (name: string, e?: MouseEvent) => {
     if (this.props.stopPropagation && e != null) {
       e.stopPropagation()

packages/x6-react-components/src/menu/submenu.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { MenuContext } from './context'
 import { MenuItem, MenuItemInner } from './item'
 
-export const MenuSubMenu: React.SFC<MenuItem.Props> = (props) => {
+export const MenuSubMenu: React.FC<MenuItem.Props> = (props) => {
   const { hotkey, children, ...others } = props
   return (
     <MenuContext.Consumer>

packages/x6-react-components/src/menubar/item.tsx

@@ -1,14 +1,14 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events  */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 import classnames from 'classnames'
 import addEventListener from 'rc-util/lib/Dom/addEventListener'
 import { MenubarContext } from './context'
 
 const cacheDeactiveMap = new WeakMap()
 class MenubarItemInner extends React.PureComponent<
-  MenubarItemInner.Props,
+  PropsWithChildren<MenubarItemInner.Props>,
   MenubarItemInner.State
 > {
   private readonly popupClassName: string
@@ -174,7 +174,7 @@ namespace MenubarItemInner {
   }
 }
 
-export const MenubarItem: React.SFC<MenubarItem.Props> = (props) => (
+export const MenubarItem: React.FC<MenubarItem.Props> = (props) => (
   <MenubarContext.Consumer>
     {(context) => <MenubarItemInner context={context} {...props} />}
   </MenubarContext.Consumer>

packages/x6-react-components/src/menubar/menubar.tsx

@@ -1,10 +1,13 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 import classnames from 'classnames'
 import addEventListener from 'rc-util/lib/Dom/addEventListener'
 import { MenubarItem } from './item'
 import { MenubarContext } from './context'
 
-export class Menubar extends React.PureComponent<Menubar.Props, Menubar.State> {
+export class Menubar extends React.PureComponent<
+  PropsWithChildren<Menubar.Props>,
+  Menubar.State
+> {
   private removeDocClickEvent: (() => void) | null
 
   constructor(props: Menubar.Props) {

packages/x6-react-components/src/scroll-box/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 import clamp from 'clamp'
 import classNames from 'classnames'
 import { debounce } from '../util'
@@ -8,7 +8,7 @@ import { MouseMoveTracker } from '../util/dom/MouseMoveTracker'
 import { Scrollbar } from '../scrollbar'
 
 export class ScrollBox extends React.PureComponent<
-  ScrollBox.Props,
+  PropsWithChildren<ScrollBox.Props>,
   ScrollBox.State
 > {
   private containerElem: HTMLDivElement

packages/x6-react-components/src/split-box/box.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 
-export class Box extends React.PureComponent<Box.Props> {
+export class Box extends React.PureComponent<PropsWithChildren<Box.Props>> {
   render() {
     const { refIt, className, index, currentSize, oppositeSize, vertical } =
       this.props

packages/x6-react-components/src/split-box/splitbox.tsx

@@ -1,11 +1,11 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 import clamp from 'clamp'
 import classNames from 'classnames'
 import { Box } from './box'
 import { Resizer } from './resizer'
 
 export class SplitBox extends React.PureComponent<
-  SplitBox.Props,
+  PropsWithChildren<SplitBox.Props>,
   SplitBox.State
 > {
   private container: HTMLDivElement

packages/x6-react-components/src/toolbar/group.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 import classNames from 'classnames'
 import { ToolbarContext } from './context'
 
-export const ToolbarGroup: React.SFC<ToolbarGroup.Props> = ({
+export const ToolbarGroup: React.FC<PropsWithChildren<ToolbarGroup.Props>> = ({
   children,
   className,
 }) => (

packages/x6-react-components/src/toolbar/item.tsx

@@ -130,7 +130,7 @@ namespace ToolbarItemInner {
   }
 }
 
-export const ToolbarItem: React.SFC<ToolbarItem.Props> = (props) => (
+export const ToolbarItem: React.FC<ToolbarItem.Props> = (props) => (
   <ToolbarContext.Consumer>
     {(context) => <ToolbarItemInner context={context} {...props} />}
   </ToolbarContext.Consumer>

packages/x6-react-components/src/toolbar/toolbar.tsx

@@ -1,10 +1,12 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 import classNames from 'classnames'
 import { ToolbarItem } from './item'
 import { ToolbarGroup } from './group'
 import { ToolbarContext } from './context'
 
-export class Toolbar extends React.PureComponent<Toolbar.Props> {
+export class Toolbar extends React.PureComponent<
+  PropsWithChildren<Toolbar.Props>
+> {
   onClick = (key: string, value?: any) => {
     if (this.props.onClick) {
       this.props.onClick(key, value)

packages/x6/package.json

@@ -31,7 +31,7 @@
     "clean": "rss",
     "build:esm": "rss",
     "build:cjs": "rss",
-    "build:umd": "rss",
+    "build:umd": "rollup -c --bundleConfigAsCjs",
     "build:less": "rss",
     "build:dev": "rss",
     "build:watch": "rss",

packages/x6/rollup.config.js

@@ -0,0 +1,5 @@
+import { config } from '../../rollup.config'
+
+export default config({
+  context: 'window',
+})

pnpm-workspace.yaml

@@ -1,5 +1,5 @@
 packages:
   - 'packages/*'
   - 'scripts/*'
-  # - 'examples/*'
+  - 'examples/*'
   # - 'sites/*'