(QuickStartContext);
- React.useMemo(
+ useMemo(
() => ({
type: 'lang',
regex: /\[(.+)]{{(admonition) ([\w-]+)}}/g,
diff --git a/packages/module/src/ConsoleShared/src/components/markdown-extensions/code-extension.tsx b/packages/module/src/ConsoleShared/src/components/markdown-extensions/code-extension.tsx
index 265487c5..cc17fa27 100644
--- a/packages/module/src/ConsoleShared/src/components/markdown-extensions/code-extension.tsx
+++ b/packages/module/src/ConsoleShared/src/components/markdown-extensions/code-extension.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react';
+import { useMemo } from 'react';
import { removeTemplateWhitespace } from './utils';
import { renderToStaticMarkup } from 'react-dom/server';
import { CodeBlock } from '@patternfly/react-core';
const useCodeShowdownExtension = () =>
- React.useMemo(
+ useMemo(
() => ({
type: 'output',
regex: /(.*?)\n?<\/code><\/pre>/g,
diff --git a/packages/module/src/ConsoleShared/src/components/markdown-extensions/inline-clipboard-extension.tsx b/packages/module/src/ConsoleShared/src/components/markdown-extensions/inline-clipboard-extension.tsx
index 4c4bef8a..067f3547 100644
--- a/packages/module/src/ConsoleShared/src/components/markdown-extensions/inline-clipboard-extension.tsx
+++ b/packages/module/src/ConsoleShared/src/components/markdown-extensions/inline-clipboard-extension.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useContext, useMemo } from 'react';
import { QuickStartContext, QuickStartContextValues } from '@quickstarts/utils/quick-start-context';
import { MARKDOWN_COPY_BUTTON_ID, MARKDOWN_SNIPPET_ID } from './const';
import { removeTemplateWhitespace } from './utils';
@@ -6,8 +6,8 @@ import { renderToStaticMarkup } from 'react-dom/server';
import CopyIcon from '@patternfly/react-icons/dist/js/icons/copy-icon';
const useInlineCopyClipboardShowdownExtension = () => {
- const { getResource } = React.useContext(QuickStartContext);
- return React.useMemo(
+ const { getResource } = useContext(QuickStartContext);
+ return useMemo(
() => ({
type: 'lang',
regex: /`([^`](.*?)[^`])`{{copy}}/g,
diff --git a/packages/module/src/ConsoleShared/src/components/markdown-extensions/multiline-clipboard-extension.tsx b/packages/module/src/ConsoleShared/src/components/markdown-extensions/multiline-clipboard-extension.tsx
index 225af115..fbbfe3a0 100644
--- a/packages/module/src/ConsoleShared/src/components/markdown-extensions/multiline-clipboard-extension.tsx
+++ b/packages/module/src/ConsoleShared/src/components/markdown-extensions/multiline-clipboard-extension.tsx
@@ -1,13 +1,13 @@
/* eslint-disable max-len */
-import * as React from 'react';
+import { useContext, useMemo } from 'react';
import { QuickStartContext, QuickStartContextValues } from '@quickstarts/utils/quick-start-context';
import { MARKDOWN_COPY_BUTTON_ID, MARKDOWN_SNIPPET_ID } from './const';
import { renderToStaticMarkup } from 'react-dom/server';
import CopyIcon from '@patternfly/react-icons/dist/js/icons/copy-icon';
const useMultilineCopyClipboardShowdownExtension = () => {
- const { getResource } = React.useContext(QuickStartContext);
- return React.useMemo(
+ const { getResource } = useContext(QuickStartContext);
+ return useMemo(
() => ({
type: 'lang',
regex: /```[\n]\s*((((?!```).)*?\n)+)\s*```{{copy}}/g,
diff --git a/packages/module/src/ConsoleShared/src/components/markdown-highlight-extension/MarkdownHighlightExtension.tsx b/packages/module/src/ConsoleShared/src/components/markdown-highlight-extension/MarkdownHighlightExtension.tsx
index e998a8a3..f788f460 100644
--- a/packages/module/src/ConsoleShared/src/components/markdown-highlight-extension/MarkdownHighlightExtension.tsx
+++ b/packages/module/src/ConsoleShared/src/components/markdown-highlight-extension/MarkdownHighlightExtension.tsx
@@ -1,16 +1,16 @@
-import * as React from 'react';
+import { FC, useEffect, useState } from 'react';
import { Spotlight } from '../spotlight';
interface MarkdownHighlightExtensionProps {
docContext: Document;
rootSelector: string;
}
-const MarkdownHighlightExtension: React.FC = ({
+const MarkdownHighlightExtension: FC = ({
docContext,
rootSelector,
}) => {
- const [selector, setSelector] = React.useState(null);
- React.useEffect(() => {
+ const [selector, setSelector] = useState(null);
+ useEffect(() => {
const elements = docContext.querySelectorAll(`${rootSelector} [data-highlight]`);
let timeoutId: NodeJS.Timeout;
function startHighlight(e) {
@@ -29,7 +29,7 @@ const MarkdownHighlightExtension: React.FC = ({
elements && elements.forEach((elm) => elm.removeEventListener('click', startHighlight));
};
}, [docContext, rootSelector]);
- React.useEffect(() => {
+ useEffect(() => {
const elements = docContext.querySelectorAll(`${rootSelector} [class^=data-highlight__]`);
let timeoutId: NodeJS.Timeout;
function startHighlight(e) {
diff --git a/packages/module/src/ConsoleShared/src/components/modal/Modal.tsx b/packages/module/src/ConsoleShared/src/components/modal/Modal.tsx
index ffe3f77c..b1ae3fdc 100644
--- a/packages/module/src/ConsoleShared/src/components/modal/Modal.tsx
+++ b/packages/module/src/ConsoleShared/src/components/modal/Modal.tsx
@@ -1,13 +1,13 @@
-import * as React from 'react';
+import { FC, Ref } from 'react';
import { Modal as PfModal, ModalProps as PfModalProps } from '@patternfly/react-core/deprecated';
import { css } from '@patternfly/react-styles';
type ModalProps = {
isFullScreen?: boolean;
- ref?: React.LegacyRef;
+ ref?: Ref;
} & PfModalProps;
-const Modal: React.FC = ({ isFullScreen = false, className, ...props }) => (
+const Modal: FC = ({ isFullScreen = false, className, ...props }) => (
Element);
interface PortalProps {
- children: React.ReactNode;
+ children: ReactNode;
container?: GetContainer;
}
@@ -13,13 +13,13 @@ const getContainer = (container: GetContainer): Element | null | undefined =>
typeof container === 'function' ? container() : container;
const Portal = ({ children, container }: PortalProps) => {
- const [containerNode, setContainerNode] = React.useState();
+ const [containerNode, setContainerNode] = useState();
useIsomorphicLayoutEffect(() => {
setContainerNode(getContainer(container) || document.body);
}, [container]);
- return containerNode ? ReactDOM.createPortal(children, containerNode) : null;
+ return containerNode ? createPortal(children, containerNode) : null;
};
export default Portal;
diff --git a/packages/module/src/ConsoleShared/src/components/popper/SimplePopper.tsx b/packages/module/src/ConsoleShared/src/components/popper/SimplePopper.tsx
index caa27996..a43090d3 100644
--- a/packages/module/src/ConsoleShared/src/components/popper/SimplePopper.tsx
+++ b/packages/module/src/ConsoleShared/src/components/popper/SimplePopper.tsx
@@ -1,25 +1,25 @@
-import * as React from 'react';
+import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
import Portal from './Portal';
interface SimplePopperProps {
- children: React.ReactNode;
+ children: ReactNode;
}
const SimplePopper = ({ children }: SimplePopperProps) => {
const openProp = true;
- const nodeRef = React.useRef();
- const popperRef = React.useRef(null);
- const [isOpen, setOpenState] = React.useState(openProp);
+ const nodeRef = useRef(null);
+ const popperRef = useRef(null);
+ const [isOpen, setOpenState] = useState(openProp);
- const setOpen = React.useCallback((newOpen: boolean) => {
+ const setOpen = useCallback((newOpen: boolean) => {
setOpenState(newOpen);
}, []);
- React.useEffect(() => {
+ useEffect(() => {
setOpen(openProp);
}, [openProp, setOpen]);
- const onKeyDown = React.useCallback(
+ const onKeyDown = useCallback(
(e: KeyboardEvent) => {
if (e.keyCode === 27) {
setOpen(false);
@@ -28,7 +28,7 @@ const SimplePopper = ({ children }: SimplePopperProps) => {
[setOpen],
);
- const onClickOutside = React.useCallback(
+ const onClickOutside = useCallback(
(e: MouseEvent) => {
if (!nodeRef.current || (e.target instanceof Node && !nodeRef.current.contains(e.target))) {
setOpen(false);
@@ -37,7 +37,7 @@ const SimplePopper = ({ children }: SimplePopperProps) => {
[setOpen],
);
- const destroy = React.useCallback(() => {
+ const destroy = useCallback(() => {
if (popperRef.current) {
popperRef.current.destroy();
document.removeEventListener('keydown', onKeyDown, true);
@@ -46,7 +46,7 @@ const SimplePopper = ({ children }: SimplePopperProps) => {
}
}, [onClickOutside, onKeyDown]);
- const initialize = React.useCallback(() => {
+ const initialize = useCallback(() => {
if (!nodeRef.current || !isOpen) {
return;
}
@@ -54,7 +54,7 @@ const SimplePopper = ({ children }: SimplePopperProps) => {
destroy();
}, [isOpen, destroy]);
- const nodeRefCallback = React.useCallback(
+ const nodeRefCallback = useCallback(
(node) => {
nodeRef.current = node;
initialize();
@@ -62,18 +62,18 @@ const SimplePopper = ({ children }: SimplePopperProps) => {
[initialize],
);
- React.useEffect(() => {
+ useEffect(() => {
initialize();
}, [initialize]);
- React.useEffect(
+ useEffect(
() => () => {
destroy();
},
[destroy],
);
- React.useEffect(() => {
+ useEffect(() => {
if (!isOpen) {
destroy();
}
diff --git a/packages/module/src/ConsoleShared/src/components/spotlight/InteractiveSpotlight.tsx b/packages/module/src/ConsoleShared/src/components/spotlight/InteractiveSpotlight.tsx
index 79cdd4a7..1a18aeb1 100644
--- a/packages/module/src/ConsoleShared/src/components/spotlight/InteractiveSpotlight.tsx
+++ b/packages/module/src/ConsoleShared/src/components/spotlight/InteractiveSpotlight.tsx
@@ -1,5 +1,5 @@
import './spotlight.scss';
-import * as React from 'react';
+import { CSSProperties, FC, useEffect, useState } from 'react';
import { Portal, SimplePopper } from '../popper';
interface InteractiveSpotlightProps {
@@ -16,9 +16,9 @@ const isInViewport = (elementToCheck: Element) => {
);
};
-const InteractiveSpotlight: React.FC = ({ element }) => {
+const InteractiveSpotlight: FC = ({ element }) => {
const { top, bottom, left, right, height, width } = element.getBoundingClientRect();
- const style: React.CSSProperties = {
+ const style: CSSProperties = {
height,
width,
top,
@@ -26,9 +26,9 @@ const InteractiveSpotlight: React.FC = ({ element })
bottom,
right,
};
- const [clicked, setClicked] = React.useState(false);
+ const [clicked, setClicked] = useState(false);
- React.useEffect(() => {
+ useEffect(() => {
if (!clicked) {
if (!isInViewport(element)) {
element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
diff --git a/packages/module/src/ConsoleShared/src/components/spotlight/Spotlight.tsx b/packages/module/src/ConsoleShared/src/components/spotlight/Spotlight.tsx
index 9e8b80f4..330193bd 100644
--- a/packages/module/src/ConsoleShared/src/components/spotlight/Spotlight.tsx
+++ b/packages/module/src/ConsoleShared/src/components/spotlight/Spotlight.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { FC, useMemo } from 'react';
import InteractiveSpotlight from './InteractiveSpotlight';
import StaticSpotlight from './StaticSpotlight';
@@ -7,9 +7,9 @@ interface SpotlightProps {
interactive?: boolean;
}
-const Spotlight: React.FC = ({ selector, interactive }) => {
+const Spotlight: FC = ({ selector, interactive }) => {
// if target element is a hidden one return null
- const element = React.useMemo(() => {
+ const element = useMemo(() => {
const highlightElement = document.querySelector(selector);
let hiddenElement = highlightElement;
while (hiddenElement) {
diff --git a/packages/module/src/ConsoleShared/src/components/spotlight/StaticSpotlight.tsx b/packages/module/src/ConsoleShared/src/components/spotlight/StaticSpotlight.tsx
index 86ffdaec..7dd143b4 100644
--- a/packages/module/src/ConsoleShared/src/components/spotlight/StaticSpotlight.tsx
+++ b/packages/module/src/ConsoleShared/src/components/spotlight/StaticSpotlight.tsx
@@ -1,5 +1,5 @@
import './spotlight.scss';
-import * as React from 'react';
+import { CSSProperties, FC } from 'react';
import { useBoundingClientRect } from '../../hooks';
import Portal from '../popper/Portal';
@@ -7,9 +7,9 @@ interface StaticSpotlightProps {
element: Element;
}
-const StaticSpotlight: React.FC = ({ element }) => {
+const StaticSpotlight: FC = ({ element }) => {
const clientRect = useBoundingClientRect(element as HTMLElement);
- const style: React.CSSProperties = clientRect
+ const style: CSSProperties = clientRect
? {
top: clientRect.top,
left: clientRect.left,
diff --git a/packages/module/src/ConsoleShared/src/components/status/GenericStatus.tsx b/packages/module/src/ConsoleShared/src/components/status/GenericStatus.tsx
index 76d6a66e..21815c0f 100644
--- a/packages/module/src/ConsoleShared/src/components/status/GenericStatus.tsx
+++ b/packages/module/src/ConsoleShared/src/components/status/GenericStatus.tsx
@@ -1,9 +1,9 @@
-import * as React from 'react';
+import { Children, ComponentType, FC, ReactNode } from 'react';
import PopoverStatus from './PopoverStatus';
import StatusIconAndText from './StatusIconAndText';
import { StatusComponentProps } from './types';
-const GenericStatus: React.FC = (props) => {
+const GenericStatus: FC = (props) => {
const { Icon, children, popoverTitle, title, noTooltip, iconOnly, ...restProps } = props;
const renderIcon = iconOnly && !noTooltip ? : ;
const statusBody = (
@@ -15,7 +15,7 @@ const GenericStatus: React.FC = (props) => {
icon={renderIcon}
/>
);
- return React.Children.toArray(children).length ? (
+ return Children.toArray(children).length ? (
{children}
@@ -25,8 +25,8 @@ const GenericStatus: React.FC = (props) => {
};
type GenericStatusProps = StatusComponentProps & {
- Icon: React.ComponentType<{ title?: string }>;
- children?: React.ReactNode;
+ Icon: ComponentType<{ title?: string }>;
+ children?: ReactNode;
popoverTitle?: string;
noTooltip?: boolean;
};
diff --git a/packages/module/src/ConsoleShared/src/components/status/NotStartedIcon.tsx b/packages/module/src/ConsoleShared/src/components/status/NotStartedIcon.tsx
index d20d1462..56249c2e 100644
--- a/packages/module/src/ConsoleShared/src/components/status/NotStartedIcon.tsx
+++ b/packages/module/src/ConsoleShared/src/components/status/NotStartedIcon.tsx
@@ -1,6 +1,5 @@
// TODO: Pull from Patternfly when they add it
// https://github.com/patternfly/patternfly-design/issues/921#issuecomment-726183814
-import * as React from 'react';
export default (props) => (