diff --git a/.eslintrc.json b/.eslintrc.json index d1a3773..550c1e3 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": [ diff --git a/packages/module/package.json b/packages/module/package.json index b8dc1d9..379eb6e 100644 --- a/packages/module/package.json +++ b/packages/module/package.json @@ -45,8 +45,8 @@ "xterm-addon-fit": "^0.8.0" }, "peerDependencies": { - "react": "^17 || ^18", - "react-dom": "^17 || ^18" + "react": "^17 || ^18 || ^19", + "react-dom": "^17 || ^18 || ^19" }, "devDependencies": { "@patternfly/documentation-framework": "6.0.0-alpha.108", diff --git a/packages/module/patternfly-docs/content/extensions/react-console/examples/ReactConsole.md b/packages/module/patternfly-docs/content/extensions/react-console/examples/ReactConsole.md index e09aeca..5ab2d83 100644 --- a/packages/module/patternfly-docs/content/extensions/react-console/examples/ReactConsole.md +++ b/packages/module/patternfly-docs/content/extensions/react-console/examples/ReactConsole.md @@ -10,6 +10,7 @@ sourceLink: https://github.com/patternfly/react-console ### Note React console lives in its own package at [`@patternfly/react-console`](https://www.npmjs.com/package/@patternfly/react-console) +import { useState, useRef, useEffect, useCallback, createRef } from 'react'; import { AccessConsoles, SerialConsole, VncConsole, DesktopViewer } from '@patternfly/react-console'; import { SerialConsoleCustom } from './SerialConsoleCustom.jsx'; import { debounce } from '@patternfly/react-core'; @@ -19,20 +20,20 @@ import '@patternfly/react-console/dist/css/xterm.css'; ### Basic Usage ```js isFullscreen -import React from 'react'; +import { useState, useRef, useCallback, createRef } from 'react'; import { AccessConsoles, SerialConsole, VncConsole, DesktopViewer } from '@patternfly/react-console'; import { SerialConsoleCustom } from './SerialConsoleCustom.jsx'; import { debounce } from '@patternfly/react-core'; AccessConsolesVariants = () => { - const [status, setStatus] = React.useState('disconnected'); - const setConnected = React.useRef(debounce(() => setStatus('connected'), 3000)).current; - const onConnect = React.useCallback(() => { + const [status, setStatus] = useState('disconnected'); + const setConnected = useRef(debounce(() => setStatus('connected'), 3000)).current; + const onConnect = useCallback(() => { setStatus('loading'); setConnected(); }, [setConnected]) - const onDisconnect = React.useCallback(() => setStatus('disconnected'), []) - const ref = React.createRef(); + const onDisconnect = useCallback(() => setStatus('disconnected'), []) + const ref = createRef(); return ( diff --git a/packages/module/patternfly-docs/content/extensions/react-console/examples/SerialConsoleCustom.jsx b/packages/module/patternfly-docs/content/extensions/react-console/examples/SerialConsoleCustom.jsx index 2cd4962..56f4dde 100644 --- a/packages/module/patternfly-docs/content/extensions/react-console/examples/SerialConsoleCustom.jsx +++ b/packages/module/patternfly-docs/content/extensions/react-console/examples/SerialConsoleCustom.jsx @@ -1,11 +1,11 @@ -import React from 'react'; +import { useState, useRef, createRef } from 'react'; import { debounce } from '@patternfly/react-core'; import { SerialConsole } from '@patternfly/react-console'; export const SerialConsoleCustom = () => { - const [status, setStatus] = React.useState('disconnected'); - const setConnected = React.useRef(debounce(() => setStatus('connected'), 3000)).current; - const ref2 = React.createRef(); + const [status, setStatus] = useState('disconnected'); + const setConnected = useRef(debounce(() => setStatus('connected'), 3000)).current; + const ref2 = createRef(); return ( - {\n const [status, setStatus] = React.useState('disconnected');\n const setConnected = React.useRef(debounce(() => setStatus('connected'), 3000)).current;\n const onConnect = React.useCallback(() => {\n setStatus('loading');\n setConnected();\n }, [setConnected])\n const onDisconnect = React.useCallback(() => setStatus('disconnected'), [])\n const ref = React.createRef();\n\n return (\n \n \n {\n ref.current.onDataReceived(data);\n }}\n ref={ref}\n />\n \n \n \n );\n};","title":"Basic Usage","lang":"js","isFullscreen":true,"className":""}}> + {\n const [status, setStatus] = useState('disconnected');\n const setConnected = useRef(debounce(() => setStatus('connected'), 3000)).current;\n const onConnect = useCallback(() => {\n setStatus('loading');\n setConnected();\n }, [setConnected])\n const onDisconnect = useCallback(() => setStatus('disconnected'), [])\n const ref = createRef();\n\n return (\n \n \n {\n ref.current.onDataReceived(data);\n }}\n ref={ref}\n />\n \n \n \n );\n};","title":"Basic Usage","lang":"js","isFullscreen":true,"className":""}}> }; @@ -372,7 +378,7 @@ const Component = () => ( {`Note`} -

+

{`React console lives in its own package at `} diff --git a/packages/module/patternfly-docs/pages/index.js b/packages/module/patternfly-docs/pages/index.js index a3b8bde..2af4d81 100644 --- a/packages/module/patternfly-docs/pages/index.js +++ b/packages/module/patternfly-docs/pages/index.js @@ -1,3 +1,4 @@ +// eslint-disable-next-line @typescript-eslint/no-unused-vars import React from 'react'; import { Title, PageSection } from '@patternfly/react-core'; diff --git a/packages/module/src/components/AccessConsoles/AccessConsoles.test.tsx b/packages/module/src/components/AccessConsoles/AccessConsoles.test.tsx index b039fdf..508b4a2 100644 --- a/packages/module/src/components/AccessConsoles/AccessConsoles.test.tsx +++ b/packages/module/src/components/AccessConsoles/AccessConsoles.test.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; diff --git a/packages/module/src/components/AccessConsoles/AccessConsoles.tsx b/packages/module/src/components/AccessConsoles/AccessConsoles.tsx index f3f2adb..093ee48 100644 --- a/packages/module/src/components/AccessConsoles/AccessConsoles.tsx +++ b/packages/module/src/components/AccessConsoles/AccessConsoles.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import {useState, Children, Fragment } from 'react'; import { MenuToggle, MenuToggleElement, @@ -72,15 +72,15 @@ export const AccessConsoles: React.FunctionComponent = ({ [VNC_CONSOLE_TYPE]: textVncConsole, [DESKTOP_VIEWER_CONSOLE_TYPE]: textDesktopViewerConsole }; - const [type, setType] = React.useState( + const [type, setType] = useState( preselectedType !== NONE_TYPE ? { value: preselectedType, toString: () => typeMap[preselectedType] } : null ); - const [isOpen, setIsOpen] = React.useState(false); + const [isOpen, setIsOpen] = useState(false); const getConsoleForType = (type: any) => - React.Children.map(children as React.ReactElement[], (child: any) => { + Children.map(children as React.ReactElement[], (child: any) => { if (getChildTypeName(child) === type.value) { - return {child}; + return {child}; } else { return null; } @@ -113,7 +113,7 @@ export const AccessConsoles: React.FunctionComponent = ({ }; const selectOptions: any[] = []; - React.Children.toArray(children as React.ReactElement[]).forEach((child: any) => { + Children.toArray(children as React.ReactElement[]).forEach((child: any) => { if (isChildOfType(child, VNC_CONSOLE_TYPE)) { selectOptions.push( = ({ }); return (

- {React.Children.toArray(children).length > 1 && ( + {Children.toArray(children).length > 1 && (