From 7c69a1bc6067f3326cf074fbd3dfbdf59249fa33 Mon Sep 17 00:00:00 2001 From: Adam Dobrawy Date: Fri, 11 Feb 2022 06:03:16 +0100 Subject: [PATCH] chore: improve React import reference consistency (#18608) --- .../src/DataTable/components/Pagination.tsx | 4 +- superset-frontend/spec/__mocks__/svgrMock.tsx | 4 +- .../SqlLab/components/TableElement/index.tsx | 4 +- .../src/components/AsyncAceEditor/index.tsx | 4 +- .../components/AsyncEsmComponent/index.tsx | 60 ++++++++++--------- .../IndeterminateCheckbox/index.tsx | 8 +-- .../components/ListViewCard/ImageLoader.tsx | 4 +- .../src/components/RefreshLabel/index.tsx | 4 +- .../Select/WindowedSelect/windowed.tsx | 9 ++- .../superset-ui/test/__mocks__/svgrMock.tsx | 4 +- 10 files changed, 57 insertions(+), 48 deletions(-) diff --git a/superset-frontend/plugins/plugin-chart-table/src/DataTable/components/Pagination.tsx b/superset-frontend/plugins/plugin-chart-table/src/DataTable/components/Pagination.tsx index de4ca2bd0..8d7e81ac1 100644 --- a/superset-frontend/plugins/plugin-chart-table/src/DataTable/components/Pagination.tsx +++ b/superset-frontend/plugins/plugin-chart-table/src/DataTable/components/Pagination.tsx @@ -16,7 +16,7 @@ * specific language governing permissions and limitations * under the License. */ -import React, { CSSProperties } from 'react'; +import React, { CSSProperties, forwardRef } from 'react'; export interface PaginationProps { pageCount: number; // number of pages @@ -72,7 +72,7 @@ export function generatePageItems( } export default React.memo( - React.forwardRef(function Pagination( + forwardRef(function Pagination( { style, pageCount, diff --git a/superset-frontend/spec/__mocks__/svgrMock.tsx b/superset-frontend/spec/__mocks__/svgrMock.tsx index 6073fd6d9..b057bc67b 100644 --- a/superset-frontend/spec/__mocks__/svgrMock.tsx +++ b/superset-frontend/spec/__mocks__/svgrMock.tsx @@ -17,9 +17,9 @@ * under the License. */ -import React, { SVGProps } from 'react'; +import React, { SVGProps, forwardRef } from 'react'; -const SvgrMock = React.forwardRef>( +const SvgrMock = forwardRef>( (props, ref) => , ); diff --git a/superset-frontend/src/SqlLab/components/TableElement/index.tsx b/superset-frontend/src/SqlLab/components/TableElement/index.tsx index 2e285a1c7..6e5b18d28 100644 --- a/superset-frontend/src/SqlLab/components/TableElement/index.tsx +++ b/superset-frontend/src/SqlLab/components/TableElement/index.tsx @@ -16,7 +16,7 @@ * specific language governing permissions and limitations * under the License. */ -import React, { useState } from 'react'; +import React, { useState, useRef } from 'react'; import Collapse from 'src/components/Collapse'; import Card from 'src/components/Card'; import ButtonGroup from 'src/components/ButtonGroup'; @@ -77,7 +77,7 @@ const Fade = styled.div` const TableElement = ({ table, actions, ...props }: TableElementProps) => { const [sortColumns, setSortColumns] = useState(false); const [hovered, setHovered] = useState(false); - const tableNameRef = React.useRef(null); + const tableNameRef = useRef(null); const setHover = (hovered: boolean) => { debounce(() => setHovered(hovered), 100)(); diff --git a/superset-frontend/src/components/AsyncAceEditor/index.tsx b/superset-frontend/src/components/AsyncAceEditor/index.tsx index 412872cc4..6d4619b32 100644 --- a/superset-frontend/src/components/AsyncAceEditor/index.tsx +++ b/superset-frontend/src/components/AsyncAceEditor/index.tsx @@ -16,7 +16,7 @@ * specific language governing permissions and limitations * under the License. */ -import React from 'react'; +import React, { forwardRef } from 'react'; import { Editor as OrigEditor, IEditSession, @@ -112,7 +112,7 @@ export default function AsyncAceEditor( defaultTheme || aceModules.find(x => x.startsWith('theme/'))?.replace('theme/', ''); - return React.forwardRef( + return forwardRef( function ExtendedAceEditor( { keywords, diff --git a/superset-frontend/src/components/AsyncEsmComponent/index.tsx b/superset-frontend/src/components/AsyncEsmComponent/index.tsx index ebee09b1b..e395b6717 100644 --- a/superset-frontend/src/components/AsyncEsmComponent/index.tsx +++ b/superset-frontend/src/components/AsyncEsmComponent/index.tsx @@ -16,7 +16,13 @@ * specific language governing permissions and limitations * under the License. */ -import React, { CSSProperties, useEffect, useState, RefObject } from 'react'; +import React, { + CSSProperties, + useEffect, + useState, + RefObject, + forwardRef, +} from 'react'; import Loading from '../Loading'; export type PlaceholderProps = { @@ -96,33 +102,31 @@ export default function AsyncEsmComponent< preload?: typeof waitForPromise; }; - const AsyncComponent: AsyncComponent = React.forwardRef( - function AsyncComponent( - props: FullProps, - ref: RefObject>, - ) { - const [loaded, setLoaded] = useState(component !== undefined); - useEffect(() => { - let isMounted = true; - if (!loaded) { - // update state to trigger a re-render - waitForPromise().then(() => { - if (isMounted) { - setLoaded(true); - } - }); - } - return () => { - isMounted = false; - }; - }); - const Component = component || placeholder; - return Component ? ( - // placeholder does not get the ref - - ) : null; - }, - ); + const AsyncComponent: AsyncComponent = forwardRef(function AsyncComponent( + props: FullProps, + ref: RefObject>, + ) { + const [loaded, setLoaded] = useState(component !== undefined); + useEffect(() => { + let isMounted = true; + if (!loaded) { + // update state to trigger a re-render + waitForPromise().then(() => { + if (isMounted) { + setLoaded(true); + } + }); + } + return () => { + isMounted = false; + }; + }); + const Component = component || placeholder; + return Component ? ( + // placeholder does not get the ref + + ) : null; + }); // preload the async component before rendering AsyncComponent.preload = waitForPromise; diff --git a/superset-frontend/src/components/IndeterminateCheckbox/index.tsx b/superset-frontend/src/components/IndeterminateCheckbox/index.tsx index b29b24377..d1e746e2b 100644 --- a/superset-frontend/src/components/IndeterminateCheckbox/index.tsx +++ b/superset-frontend/src/components/IndeterminateCheckbox/index.tsx @@ -16,7 +16,7 @@ * specific language governing permissions and limitations * under the License. */ -import React from 'react'; +import React, { forwardRef, useRef, useEffect } from 'react'; import { styled } from '@superset-ui/core'; import Icons from 'src/components/Icons'; @@ -67,7 +67,7 @@ const InputContainer = styled.div` position: relative; `; -const IndeterminateCheckbox = React.forwardRef( +const IndeterminateCheckbox = forwardRef( ( { indeterminate, @@ -79,10 +79,10 @@ const IndeterminateCheckbox = React.forwardRef( }: IndeterminateCheckboxProps, ref: React.MutableRefObject, ) => { - const defaultRef = React.useRef(); + const defaultRef = useRef(); const resolvedRef = ref || defaultRef; - React.useEffect(() => { + useEffect(() => { resolvedRef.current.indeterminate = indeterminate; }, [resolvedRef, indeterminate]); diff --git a/superset-frontend/src/components/ListViewCard/ImageLoader.tsx b/superset-frontend/src/components/ListViewCard/ImageLoader.tsx index f08a237d2..d19c932be 100644 --- a/superset-frontend/src/components/ListViewCard/ImageLoader.tsx +++ b/superset-frontend/src/components/ListViewCard/ImageLoader.tsx @@ -16,7 +16,7 @@ * specific language governing permissions and limitations * under the License. */ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import { styled, logging } from '@superset-ui/core'; export type BackgroundPosition = 'top' | 'bottom'; @@ -52,7 +52,7 @@ export default function ImageLoader({ position, ...rest }: ImageLoaderProps) { - const [imgSrc, setImgSrc] = React.useState(fallback); + const [imgSrc, setImgSrc] = useState(fallback); useEffect(() => { if (src) { diff --git a/superset-frontend/src/components/RefreshLabel/index.tsx b/superset-frontend/src/components/RefreshLabel/index.tsx index 40b3215eb..cb8ed1b6e 100644 --- a/superset-frontend/src/components/RefreshLabel/index.tsx +++ b/superset-frontend/src/components/RefreshLabel/index.tsx @@ -16,7 +16,7 @@ * specific language governing permissions and limitations * under the License. */ -import React, { MouseEventHandler } from 'react'; +import React, { MouseEventHandler, forwardRef } from 'react'; import { SupersetTheme } from '@superset-ui/core'; import { Tooltip } from 'src/components/Tooltip'; import Icons, { IconType } from 'src/components/Icons'; @@ -28,7 +28,7 @@ export interface RefreshLabelProps { const RefreshLabel = ({ onClick, tooltipContent }: RefreshLabelProps) => { // eslint-disable-next-line @typescript-eslint/no-unused-vars - const IconWithoutRef = React.forwardRef((props: IconType, ref: any) => ( + const IconWithoutRef = forwardRef((props: IconType, ref: any) => ( )); diff --git a/superset-frontend/src/components/Select/WindowedSelect/windowed.tsx b/superset-frontend/src/components/Select/WindowedSelect/windowed.tsx index 257e2a889..4c2f64aa1 100644 --- a/superset-frontend/src/components/Select/WindowedSelect/windowed.tsx +++ b/superset-frontend/src/components/Select/WindowedSelect/windowed.tsx @@ -16,7 +16,12 @@ * specific language governing permissions and limitations * under the License. */ -import React, { ComponentType, FunctionComponent, ReactElement } from 'react'; +import React, { + ComponentType, + FunctionComponent, + ReactElement, + forwardRef, +} from 'react'; import Select, { Props as SelectProps, OptionTypeBase, @@ -71,5 +76,5 @@ export default function windowed( const components = { ...components_, MenuList }; return ; } - return React.forwardRef(WindowedSelect); + return forwardRef(WindowedSelect); } diff --git a/superset-frontend/temporary_superset_ui/superset-ui/test/__mocks__/svgrMock.tsx b/superset-frontend/temporary_superset_ui/superset-ui/test/__mocks__/svgrMock.tsx index 6073fd6d9..b057bc67b 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/test/__mocks__/svgrMock.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/test/__mocks__/svgrMock.tsx @@ -17,9 +17,9 @@ * under the License. */ -import React, { SVGProps } from 'react'; +import React, { SVGProps, forwardRef } from 'react'; -const SvgrMock = React.forwardRef>( +const SvgrMock = forwardRef>( (props, ref) => , );