{...renderers}
renderTreeContainer={renderTreeContainer}
- renderRenameInput={renderRenameInput}
items={treeItems}
getItemTitle={getItemTitle}
viewState={viewState}
liveDescriptors={liveDescriptors}
- onStartRenamingItem={handleStartRenamingItem}
+ canRename={false} // we implement our own rename handler
onFocusItem={(item) => setFocusedItem(item.index)}
>
@@ -397,13 +347,6 @@ const FileTree: React.VFC = () => {
treeId={treeId}
rootItem={rootItemIndex}
treeLabel={i18n.translate(ExplorerStringId.TreeLabel)}
- ref={treeRef}
- />
-
@@ -416,6 +359,7 @@ const Explorer: React.VFC = () => {
+
);
};
diff --git a/src/explorer/actions.ts b/src/explorer/actions.ts
index 1f7cc4fe..d1d43d2c 100644
--- a/src/explorer/actions.ts
+++ b/src/explorer/actions.ts
@@ -61,6 +61,29 @@ export const explorerCreateNewFile = createAction(
}),
);
+/**
+ * Action that requests to rename a file.
+ * @param fileName The file name.
+ */
+export const explorerRenameFile = createAction((fileName: string) => ({
+ type: 'explorer.action.renameFile',
+ fileName,
+}));
+
+/**
+ * Action that indicates that {@link explorerRenameFile} succeeded.
+ */
+export const explorerDidRenameFile = createAction(() => ({
+ type: 'explorer.action.didRenameFile',
+}));
+
+/**
+ * Action that indicates that {@link explorerRenameFile} failed.
+ */
+export const explorerDidFailToRenameFile = createAction(() => ({
+ type: 'explorer.action.didFailToRenameFile',
+}));
+
/**
* Action that requests to delete a file.
* @param fileName The file name.
diff --git a/src/explorer/i18n.en.json b/src/explorer/i18n.en.json
index c89fa76a..7518657a 100644
--- a/src/explorer/i18n.en.json
+++ b/src/explorer/i18n.en.json
@@ -47,11 +47,5 @@
"action": {
"create": "Create"
}
- },
- "renameFile": {
- "title": "Rename '{fileName}'",
- "action": {
- "rename": "Rename"
- }
}
}
diff --git a/src/explorer/i18n.test.ts b/src/explorer/i18n.test.ts
index 43c545b2..6c478b14 100644
--- a/src/explorer/i18n.test.ts
+++ b/src/explorer/i18n.test.ts
@@ -2,7 +2,7 @@
// Copyright (c) 2022 The Pybricks Authors
import { lookup } from '../../test';
-import { ExplorerStringId, NewFileWizardStringId, RenameFileStringId } from './i18n';
+import { ExplorerStringId, NewFileWizardStringId } from './i18n';
import en from './i18n.en.json';
describe('Ensure .json file has matches for ExplorerStringId', () => {
@@ -16,9 +16,3 @@ describe('Ensure .json file has matches for NewFileWizardStringId', () => {
expect(lookup(en, id)).toBeDefined();
});
});
-
-describe('Ensure .json file has matches for RenameFileStringId', () => {
- test.each(Object.values(RenameFileStringId))('%s', (id) => {
- expect(lookup(en, id)).toBeDefined();
- });
-});
diff --git a/src/explorer/i18n.ts b/src/explorer/i18n.ts
index 24c39c8a..1a1eaefc 100644
--- a/src/explorer/i18n.ts
+++ b/src/explorer/i18n.ts
@@ -33,8 +33,3 @@ export enum NewFileWizardStringId {
SmartHubLabel = 'newFileWizard.smartHub.label',
ActionCreate = 'newFileWizard.action.create',
}
-
-export enum RenameFileStringId {
- Title = 'renameFile.title',
- ActionRename = 'renameFile.action.rename',
-}
diff --git a/src/explorer/reducers.ts b/src/explorer/reducers.ts
new file mode 100644
index 00000000..03f36dfd
--- /dev/null
+++ b/src/explorer/reducers.ts
@@ -0,0 +1,8 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2022 The Pybricks Authors
+
+import { combineReducers } from 'redux';
+
+import renameFileDialog from './renameFileDialog/reducers';
+
+export default combineReducers({ renameFileDialog });
diff --git a/src/explorer/renameFileDialog/18n.test.ts b/src/explorer/renameFileDialog/18n.test.ts
new file mode 100644
index 00000000..afd2a2f5
--- /dev/null
+++ b/src/explorer/renameFileDialog/18n.test.ts
@@ -0,0 +1,12 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2022 The Pybricks Authors
+
+import { lookup } from '../../../test';
+import { RenameFileDialogStringId } from './i18n';
+import en from './i18n.en.json';
+
+describe('Ensure .json file has matches for RenameFileStringId', () => {
+ test.each(Object.values(RenameFileDialogStringId))('%s', (id) => {
+ expect(lookup(en, id)).toBeDefined();
+ });
+});
diff --git a/src/explorer/RenameFileDialog.test.tsx b/src/explorer/renameFileDialog/RenameFileDialog.test.tsx
similarity index 53%
rename from src/explorer/RenameFileDialog.test.tsx
rename to src/explorer/renameFileDialog/RenameFileDialog.test.tsx
index 2ff96644..120476a1 100644
--- a/src/explorer/RenameFileDialog.test.tsx
+++ b/src/explorer/renameFileDialog/RenameFileDialog.test.tsx
@@ -4,21 +4,15 @@
import { waitFor } from '@testing-library/dom';
import userEvent from '@testing-library/user-event';
import React from 'react';
-import { testRender } from '../../test';
+import { testRender } from '../../../test';
import RenameFileDialog from './RenameFileDialog';
+import { renameFileDialogDidAccept, renameFileDialogDidCancel } from './actions';
describe('rename button', () => {
it('should accept the dialog Rename is clicked', async () => {
- const onAccept = jest.fn();
- const onCancel = jest.fn();
- const [dialog] = testRender(
- ,
- );
+ const [dialog, dispatch] = testRender(, {
+ explorer: { renameFileDialog: { isOpen: true, fileName: 'old.file' } },
+ });
const button = dialog.getByRole('button', { name: 'Rename' });
@@ -29,48 +23,36 @@ describe('rename button', () => {
await waitFor(() => expect(button).not.toBeDisabled());
userEvent.click(button);
- expect(onAccept).toHaveBeenCalledWith('old.file', 'new.file');
+ expect(dispatch).toHaveBeenCalledWith(
+ renameFileDialogDidAccept('old.file', 'new.file'),
+ );
});
it('should accept the dialog when enter is pressed in the text input', async () => {
- const onAccept = jest.fn();
- const onCancel = jest.fn();
- const [dialog] = testRender(
- ,
- );
+ const [dialog, dispatch] = testRender(, {
+ explorer: { renameFileDialog: { isOpen: true, fileName: 'old.file' } },
+ });
// have to type a new file name before Rename button is enabled
const input = dialog.getByLabelText('File name');
await waitFor(() => expect(input).toHaveFocus());
userEvent.type(input, 'new{enter}');
- expect(onAccept).toHaveBeenCalledWith('old.file', 'new.file');
+ expect(dispatch).toHaveBeenCalledWith(
+ renameFileDialogDidAccept('old.file', 'new.file'),
+ );
});
it('should be cancellable', async () => {
- const onAccept = jest.fn();
- const onCancel = jest.fn();
-
- const [dialog, dispatch] = testRender(
- ,
- );
+ const [dialog, dispatch] = testRender(, {
+ explorer: { renameFileDialog: { isOpen: true } },
+ });
const button = dialog.getByRole('button', { name: 'Close' });
await waitFor(() => expect(button).toBeVisible());
userEvent.click(button);
- expect(onCancel).toHaveBeenCalled();
- expect(dispatch).not.toHaveBeenCalled();
+ expect(dispatch).toHaveBeenCalledWith(renameFileDialogDidCancel());
});
});
diff --git a/src/explorer/RenameFileDialog.tsx b/src/explorer/renameFileDialog/RenameFileDialog.tsx
similarity index 62%
rename from src/explorer/RenameFileDialog.tsx
rename to src/explorer/renameFileDialog/RenameFileDialog.tsx
index 55225fbf..7755c803 100644
--- a/src/explorer/RenameFileDialog.tsx
+++ b/src/explorer/renameFileDialog/RenameFileDialog.tsx
@@ -4,30 +4,26 @@
import { Button, Classes, Dialog } from '@blueprintjs/core';
import { useI18n } from '@shopify/react-i18n';
import React, { useCallback, useRef, useState } from 'react';
-import { FileNameValidationResult, validateFileName } from '../pybricksMicropython/lib';
-import { useSelector } from '../reducers';
-import FileNameFormGroup from './FileNameFormGroup';
-import { RenameFileStringId } from './i18n';
+import { useDispatch } from 'react-redux';
+import {
+ FileNameValidationResult,
+ validateFileName,
+} from '../../pybricksMicropython/lib';
+import { useSelector } from '../../reducers';
+import FileNameFormGroup from '../FileNameFormGroup';
+import { renameFileDialogDidAccept, renameFileDialogDidCancel } from './actions';
+import { RenameFileDialogStringId } from './i18n';
import en from './i18n.en.json';
-type RenameFileDialogProps = {
- /** The current file name (including file extension). */
- oldName: string;
- /** Controls the dialog open state. */
- isOpen: boolean;
- /** Called when the dialog is accepted. */
- onAccept: (oldName: string, newName: string) => void;
- /** Called when the dialog is canceled. */
- onCancel: () => void;
-};
-
-const RenameFileDialog: React.VoidFunctionComponent = ({
- oldName,
- isOpen,
- onAccept,
- onCancel,
-}) => {
- const [i18n] = useI18n({ id: 'explorer', translations: { en }, fallback: en });
+const RenameFileDialog: React.VFC = () => {
+ const dispatch = useDispatch();
+ const isOpen = useSelector((s) => s.explorer.renameFileDialog.isOpen);
+ const oldName = useSelector((s) => s.explorer.renameFileDialog.fileName);
+ const [i18n] = useI18n({
+ id: 'renameFileDialog',
+ translations: { en },
+ fallback: en,
+ });
const [baseName, extension] = oldName.split(/(\.\w+)$/);
@@ -40,14 +36,18 @@ const RenameFileDialog: React.VoidFunctionComponent = ({
const handleSubmit = useCallback(
(e) => {
e.preventDefault();
- onAccept(oldName, `${newName}${extension}`);
+ dispatch(renameFileDialogDidAccept(oldName, `${newName}${extension}`));
},
- [onAccept, oldName, newName, extension],
+ [dispatch, oldName, newName, extension],
);
+ const handleClose = useCallback(() => {
+ dispatch(renameFileDialogDidCancel());
+ }, [dispatch]);
+
return (