update to react 18

We were stuck on react 16.x for a long time but dependencies seem to
have caught up enough that migration is trivial now.
This commit is contained in:
David Lechner
2023-05-17 16:33:47 -05:00
committed by David Lechner
parent ca63d048aa
commit bf4670b25d
66 changed files with 226 additions and 449 deletions
+6 -6
View File
@@ -71,7 +71,7 @@ type ActionButtonProps = {
onClick: () => void;
};
const ActionButton: React.VoidFunctionComponent<ActionButtonProps> = ({
const ActionButton: React.FunctionComponent<ActionButtonProps> = ({
id,
icon,
tooltip,
@@ -109,7 +109,7 @@ type ActionButtonGroupProps = {
item: TreeItem;
};
const FileActionButtonGroup: React.VoidFunctionComponent<ActionButtonGroupProps> = ({
const FileActionButtonGroup: React.FunctionComponent<ActionButtonGroupProps> = ({
item,
}) => {
const i18n = useI18n();
@@ -174,7 +174,7 @@ const FileActionButtonGroup: React.VoidFunctionComponent<ActionButtonGroupProps>
const archiveButtonId = 'pb-explorer-archive-button';
const newButtonId = 'pb-explorer-add-button';
const Header: React.VoidFunctionComponent = () => {
const Header: React.FunctionComponent = () => {
const exportButtonId = useId();
const dispatch = useDispatch();
const i18n = useI18n();
@@ -263,7 +263,7 @@ function useLiveDescriptors(): LiveDescriptors {
* REVISIT: maybe there will be a better way to do this some day:
* https://github.com/lukasbach/react-complex-tree/issues/47
*/
const TreeContainer: React.VoidFunctionComponent<RenderProps<'renderTreeContainer'>> = (
const TreeContainer: React.FunctionComponent<RenderProps<'renderTreeContainer'>> = (
props,
) => {
const dispatch = useDispatch();
@@ -352,7 +352,7 @@ const TreeContainer: React.VoidFunctionComponent<RenderProps<'renderTreeContaine
return <div onKeyDown={handleKeyDown}>{renderers.renderTreeContainer(props)}</div>;
};
const FileTree: React.VoidFunctionComponent = () => {
const FileTree: React.FunctionComponent = () => {
const [focusedItem, setFocusedItem] = useState<TreeItemIndex>();
const files = useFileStorageMetadata();
const liveDescriptors = useLiveDescriptors();
@@ -447,7 +447,7 @@ const FileTree: React.VoidFunctionComponent = () => {
);
};
const Explorer: React.VFC = () => {
const Explorer: React.FunctionComponent = () => {
return (
<div className="pb-explorer">
<Header />
+2 -4
View File
@@ -1,5 +1,5 @@
// SPDX-License-Identifier: MIT
// Copyright (c) 2022 The Pybricks Authors
// Copyright (c) 2022-2023 The Pybricks Authors
import { Intent } from '@blueprintjs/core';
import React from 'react';
@@ -10,9 +10,7 @@ type FileInUseAlertProps = {
fileName: string;
};
const FileInUseAlert: React.VoidFunctionComponent<FileInUseAlertProps> = ({
fileName,
}) => {
const FileInUseAlert: React.FunctionComponent<FileInUseAlertProps> = ({ fileName }) => {
const i18n = useI18n();
return <>{i18n.translate('fileInUse.message', { fileName })}</>;
};
+2 -2
View File
@@ -1,12 +1,12 @@
// SPDX-License-Identifier: MIT
// Copyright (c) 2022 The Pybricks Authors
// Copyright (c) 2022-2023 The Pybricks Authors
import { Icon, Intent } from '@blueprintjs/core';
import React from 'react';
import type { CreateToast } from '../../toasterTypes';
import { useI18n } from './i18n';
const NoFilesToBackup: React.VoidFunctionComponent = () => {
const NoFilesToBackup: React.FunctionComponent = () => {
const i18n = useI18n();
return (
<>
+1 -1
View File
@@ -7,7 +7,7 @@ import { pythonFileExtension } from '../../pybricksMicropython/lib';
import type { CreateToast } from '../../toasterTypes';
import { useI18n } from './i18n';
const NoPyFiles: React.VoidFunctionComponent = () => {
const NoPyFiles: React.FunctionComponent = () => {
const i18n = useI18n();
return (
<>
@@ -1,5 +1,5 @@
// SPDX-License-Identifier: MIT
// Copyright (c) 2022 The Pybricks Authors
// Copyright (c) 2022-2023 The Pybricks Authors
import { Alert, Classes, Intent } from '@blueprintjs/core';
import React, { useCallback } from 'react';
@@ -8,7 +8,7 @@ import { useSelector } from '../../reducers';
import { deleteFileAlertDidAccept, deleteFileAlertDidCancel } from './actions';
import { useI18n } from './i18n';
const DeleteFileAlert: React.VoidFunctionComponent = () => {
const DeleteFileAlert: React.FunctionComponent = () => {
const { isOpen, fileName } = useSelector((s) => s.explorer.deleteFileAlert);
const dispatch = useDispatch();
const i18n = useI18n();
@@ -1,5 +1,5 @@
// SPDX-License-Identifier: MIT
// Copyright (c) 2022 The Pybricks Authors
// Copyright (c) 2022-2023 The Pybricks Authors
import { Button, Classes, Dialog } from '@blueprintjs/core';
import React, { useCallback, useRef, useState } from 'react';
@@ -14,7 +14,7 @@ import FileNameFormGroup from '../fileNameFormGroup/FileNameFormGroup';
import { duplicateFileDialogDidAccept, duplicateFileDialogDidCancel } from './actions';
import { useI18n } from './i18n';
const DuplicateFileDialog: React.VFC = () => {
const DuplicateFileDialog: React.FunctionComponent = () => {
const i18n = useI18n();
const dispatch = useDispatch();
const isOpen = useSelector((s) => s.explorer.duplicateFileDialog.isOpen);
@@ -1,5 +1,5 @@
// SPDX-License-Identifier: MIT
// Copyright (c) 2022 The Pybricks Authors
// Copyright (c) 2022-2023 The Pybricks Authors
import { Classes, Code, FormGroup, InputGroup, Intent, Tag } from '@blueprintjs/core';
import type { AriaButtonProps } from '@react-types/button';
@@ -39,7 +39,7 @@ function replaceInvalidCharacters(value: string): string {
type FixItButtonProps = Pick<AriaButtonProps<'a'>, 'onPress'>;
const FixItButton: React.VoidFunctionComponent<FixItButtonProps> = (props) => {
const FixItButton: React.FunctionComponent<FixItButtonProps> = (props) => {
const i18n = useI18n();
const ref = useRef<HTMLAnchorElement>(null);
@@ -66,7 +66,7 @@ type FileNameHelpTextProps = {
/**
* Component that maps FileNameValidationResult to help message to display to user.
*/
const FileNameHelpText: React.VoidFunctionComponent<FileNameHelpTextProps> = ({
const FileNameHelpText: React.FunctionComponent<FileNameHelpTextProps> = ({
fileName,
validation,
onFix,
@@ -145,7 +145,7 @@ type FileNameFormGroupProps = {
/**
* Component used to get a valid new file name.
*/
const FileNameFormGroup: React.VoidFunctionComponent<FileNameFormGroupProps> = ({
const FileNameFormGroup: React.FunctionComponent<FileNameFormGroupProps> = ({
fileName,
fileExtension,
validationResult,
+1 -1
View File
@@ -27,7 +27,7 @@ import FileNameFormGroup from '../fileNameFormGroup/FileNameFormGroup';
import { newFileWizardDidAccept, newFileWizardDidCancel } from './actions';
import { useI18n } from './i18n';
const NewFileWizard: React.VoidFunctionComponent = () => {
const NewFileWizard: React.FunctionComponent = () => {
const i18n = useI18n();
const dispatch = useDispatch();
@@ -1,5 +1,5 @@
// SPDX-License-Identifier: MIT
// Copyright (c) 2022 The Pybricks Authors
// Copyright (c) 2022-2023 The Pybricks Authors
import { Button, Classes, Dialog } from '@blueprintjs/core';
import React, { useCallback, useRef, useState } from 'react';
@@ -14,7 +14,7 @@ import FileNameFormGroup from '../fileNameFormGroup/FileNameFormGroup';
import { renameFileDialogDidAccept, renameFileDialogDidCancel } from './actions';
import { useI18n } from './i18n';
const RenameFileDialog: React.VFC = () => {
const RenameFileDialog: React.FunctionComponent = () => {
const i18n = useI18n();
const dispatch = useDispatch();
const isOpen = useSelector((s) => s.explorer.renameFileDialog.isOpen);
@@ -1,5 +1,5 @@
// SPDX-License-Identifier: MIT
// Copyright (c) 2022 The Pybricks Authors
// Copyright (c) 2022-2023 The Pybricks Authors
import { Button, Classes, Dialog } from '@blueprintjs/core';
import React, { useCallback, useRef, useState } from 'react';
@@ -15,7 +15,7 @@ import FileNameFormGroup from '../fileNameFormGroup/FileNameFormGroup';
import { renameImportDialogDidAccept, renameImportDialogDidCancel } from './actions';
import { useI18n } from './i18n';
const RenameImportDialog: React.VFC = () => {
const RenameImportDialog: React.FunctionComponent = () => {
const i18n = useI18n();
const dispatch = useDispatch();
const isOpen = useSelector((s) => s.explorer.renameImportDialog.isOpen);
@@ -13,7 +13,7 @@ import {
} from './actions';
import { useI18n } from './i18n';
const RenameImportDialog: React.VFC = () => {
const RenameImportDialog: React.FunctionComponent = () => {
const i18n = useI18n();
const dispatch = useDispatch();
const isOpen = useSelector((s) => s.explorer.replaceImportDialog.isOpen);