From dfab58ce33503046cbf2c5e69046bf694ff0bae9 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Mon, 7 Oct 2024 21:05:28 +0530 Subject: [PATCH 1/3] Loading button --- .../photos/components/SingleInputFormV2.tsx | 52 ++++++++++++++----- 1 file changed, 38 insertions(+), 14 deletions(-) diff --git a/web/packages/new/photos/components/SingleInputFormV2.tsx b/web/packages/new/photos/components/SingleInputFormV2.tsx index 1caa137090..5e7117e03a 100644 --- a/web/packages/new/photos/components/SingleInputFormV2.tsx +++ b/web/packages/new/photos/components/SingleInputFormV2.tsx @@ -7,6 +7,7 @@ import { DialogContent, DialogTitle, TextField, + type ButtonProps, type TextFieldProps, } from "@mui/material"; import { useFormik } from "formik"; @@ -109,29 +110,51 @@ export const SingleInputFormV2: React.FC = ({ > {t("cancel")} - - {formik.isSubmitting ? ( - - ) : ( - submitButtonTitle - )} - + {submitButtonTitle} + ); }; +/** + * A button that shows a indeterminate progress indicator if the {@link loading} + * prop is set. + * + * TODO: This duplicates the existing SubmitButton and EnteButton. Merge these + * three gradually (didn't want to break existing layouts, so will do it + * piecewise). + */ +export const LoadingButton: React.FC = ({ + loading, + disabled, + color, + sx, + children, + ...rest +}) => ( + + {loading ? : children} + +); + export const SingleInputDialogTest: React.FC = ({ open, onClose, @@ -169,6 +192,7 @@ export const SingleInputDialogTest: React.FC = ({ autoFocus label="Add name" placeholder="Enter name" + initialValue="tt" submitButtonTitle="Add person" onCancel={onClose} onSubmit={handleSubmit} From ca08b3eb5fb7aadfae7e04dbb43add31655bd81f Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Mon, 7 Oct 2024 21:11:17 +0530 Subject: [PATCH 2/3] Move --- .../photos/components/SingleInputFormV2.tsx | 35 +----------------- .../photos/components/mui/LoadingButton.tsx | 37 +++++++++++++++++++ 2 files changed, 38 insertions(+), 34 deletions(-) create mode 100644 web/packages/new/photos/components/mui/LoadingButton.tsx diff --git a/web/packages/new/photos/components/SingleInputFormV2.tsx b/web/packages/new/photos/components/SingleInputFormV2.tsx index 5e7117e03a..bf72f19e13 100644 --- a/web/packages/new/photos/components/SingleInputFormV2.tsx +++ b/web/packages/new/photos/components/SingleInputFormV2.tsx @@ -2,12 +2,10 @@ import log from "@/base/log"; import { wait } from "@/utils/promise"; import { Box, - CircularProgress, Dialog, DialogContent, DialogTitle, TextField, - type ButtonProps, type TextFieldProps, } from "@mui/material"; import { useFormik } from "formik"; @@ -15,6 +13,7 @@ import { t } from "i18next"; import React from "react"; import { FocusVisibleButton } from "./FocusVisibleButton"; import type { DialogVisibilityProps } from "./mui/Dialog"; +import { LoadingButton } from "./mui/LoadingButton"; type SingleInputFormProps = Pick< TextFieldProps, @@ -123,38 +122,6 @@ export const SingleInputFormV2: React.FC = ({ ); }; -/** - * A button that shows a indeterminate progress indicator if the {@link loading} - * prop is set. - * - * TODO: This duplicates the existing SubmitButton and EnteButton. Merge these - * three gradually (didn't want to break existing layouts, so will do it - * piecewise). - */ -export const LoadingButton: React.FC = ({ - loading, - disabled, - color, - sx, - children, - ...rest -}) => ( - - {loading ? : children} - -); - export const SingleInputDialogTest: React.FC = ({ open, onClose, diff --git a/web/packages/new/photos/components/mui/LoadingButton.tsx b/web/packages/new/photos/components/mui/LoadingButton.tsx new file mode 100644 index 0000000000..a129c32cac --- /dev/null +++ b/web/packages/new/photos/components/mui/LoadingButton.tsx @@ -0,0 +1,37 @@ +import { CircularProgress, type ButtonProps } from "@mui/material"; +import React from "react"; +import { FocusVisibleButton } from "../FocusVisibleButton"; + +/** + * A button that shows a indeterminate progress indicator if the {@link loading} + * prop is set. + * + * The button is also disabled when in the loading state. + * + * TODO: This duplicates the existing SubmitButton and EnteButton. Merge these + * three gradually (didn't want to break existing layouts, so will do it + * piecewise). + */ +export const LoadingButton: React.FC = ({ + loading, + disabled, + color, + sx, + children, + ...rest +}) => ( + + {loading ? : children} + +); From 28529560f09b240b70dadc575208ddd9e1756919 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Mon, 7 Oct 2024 21:12:09 +0530 Subject: [PATCH 3/3] Move --- web/apps/photos/src/components/Upload/UploadTypeSelector.tsx | 2 +- .../new/photos/components/CollectionMappingChoiceDialog.tsx | 2 +- web/packages/new/photos/components/DevSettings.tsx | 2 +- web/packages/new/photos/components/SingleInputFormV2.tsx | 2 +- web/packages/new/photos/components/WhatsNew.tsx | 2 +- .../new/photos/components/{ => mui}/FocusVisibleButton.tsx | 0 web/packages/new/photos/components/mui/LoadingButton.tsx | 2 +- web/packages/shared/components/DialogBox/index.tsx | 2 +- 8 files changed, 7 insertions(+), 7 deletions(-) rename web/packages/new/photos/components/{ => mui}/FocusVisibleButton.tsx (100%) diff --git a/web/apps/photos/src/components/Upload/UploadTypeSelector.tsx b/web/apps/photos/src/components/Upload/UploadTypeSelector.tsx index 0a055764ec..b989983f20 100644 --- a/web/apps/photos/src/components/Upload/UploadTypeSelector.tsx +++ b/web/apps/photos/src/components/Upload/UploadTypeSelector.tsx @@ -1,7 +1,7 @@ import { useIsTouchscreen } from "@/base/hooks"; -import { FocusVisibleButton } from "@/new/photos/components/FocusVisibleButton"; import { SpaceBetweenFlex } from "@/new/photos/components/mui"; import { DialogCloseIconButton } from "@/new/photos/components/mui/Dialog"; +import { FocusVisibleButton } from "@/new/photos/components/mui/FocusVisibleButton"; import DialogTitleWithCloseButton, { dialogCloseHandler, } from "@ente/shared/components/DialogBox/TitleWithCloseButton"; diff --git a/web/packages/new/photos/components/CollectionMappingChoiceDialog.tsx b/web/packages/new/photos/components/CollectionMappingChoiceDialog.tsx index 5c16915dc9..89ea187304 100644 --- a/web/packages/new/photos/components/CollectionMappingChoiceDialog.tsx +++ b/web/packages/new/photos/components/CollectionMappingChoiceDialog.tsx @@ -1,5 +1,4 @@ import type { CollectionMapping } from "@/base/types/ipc"; -import { FocusVisibleButton } from "@/new/photos/components/FocusVisibleButton"; import FolderIcon from "@mui/icons-material/Folder"; import FolderCopyIcon from "@mui/icons-material/FolderCopy"; import { @@ -16,6 +15,7 @@ import { DialogCloseIconButton, type DialogVisibilityProps, } from "./mui/Dialog"; +import { FocusVisibleButton } from "./mui/FocusVisibleButton"; type CollectionMappingChoiceModalProps = DialogVisibilityProps & { didSelect: (mapping: CollectionMapping) => void; diff --git a/web/packages/new/photos/components/DevSettings.tsx b/web/packages/new/photos/components/DevSettings.tsx index 2235a1b60d..89e0273fb7 100644 --- a/web/packages/new/photos/components/DevSettings.tsx +++ b/web/packages/new/photos/components/DevSettings.tsx @@ -18,7 +18,7 @@ import { useFormik } from "formik"; import { t } from "i18next"; import React, { useEffect, useState } from "react"; import { z } from "zod"; -import { FocusVisibleButton } from "./FocusVisibleButton"; +import { FocusVisibleButton } from "./mui/FocusVisibleButton"; import { SlideUpTransition } from "./mui/SlideUpTransition"; interface DevSettingsProps { diff --git a/web/packages/new/photos/components/SingleInputFormV2.tsx b/web/packages/new/photos/components/SingleInputFormV2.tsx index bf72f19e13..a13287683e 100644 --- a/web/packages/new/photos/components/SingleInputFormV2.tsx +++ b/web/packages/new/photos/components/SingleInputFormV2.tsx @@ -11,8 +11,8 @@ import { import { useFormik } from "formik"; import { t } from "i18next"; import React from "react"; -import { FocusVisibleButton } from "./FocusVisibleButton"; import type { DialogVisibilityProps } from "./mui/Dialog"; +import { FocusVisibleButton } from "./mui/FocusVisibleButton"; import { LoadingButton } from "./mui/LoadingButton"; type SingleInputFormProps = Pick< diff --git a/web/packages/new/photos/components/WhatsNew.tsx b/web/packages/new/photos/components/WhatsNew.tsx index 997afc30e8..1a8555d244 100644 --- a/web/packages/new/photos/components/WhatsNew.tsx +++ b/web/packages/new/photos/components/WhatsNew.tsx @@ -14,7 +14,7 @@ import { } from "@mui/material"; import React, { useEffect } from "react"; import { didShowWhatsNew } from "../services/changelog"; -import { FocusVisibleButton } from "./FocusVisibleButton"; +import { FocusVisibleButton } from "./mui/FocusVisibleButton"; import { SlideUpTransition } from "./mui/SlideUpTransition"; interface WhatsNewProps { diff --git a/web/packages/new/photos/components/FocusVisibleButton.tsx b/web/packages/new/photos/components/mui/FocusVisibleButton.tsx similarity index 100% rename from web/packages/new/photos/components/FocusVisibleButton.tsx rename to web/packages/new/photos/components/mui/FocusVisibleButton.tsx diff --git a/web/packages/new/photos/components/mui/LoadingButton.tsx b/web/packages/new/photos/components/mui/LoadingButton.tsx index a129c32cac..af328e3457 100644 --- a/web/packages/new/photos/components/mui/LoadingButton.tsx +++ b/web/packages/new/photos/components/mui/LoadingButton.tsx @@ -1,6 +1,6 @@ import { CircularProgress, type ButtonProps } from "@mui/material"; import React from "react"; -import { FocusVisibleButton } from "../FocusVisibleButton"; +import { FocusVisibleButton } from "./FocusVisibleButton"; /** * A button that shows a indeterminate progress indicator if the {@link loading} diff --git a/web/packages/shared/components/DialogBox/index.tsx b/web/packages/shared/components/DialogBox/index.tsx index 74fca76b77..b0f4b67928 100644 --- a/web/packages/shared/components/DialogBox/index.tsx +++ b/web/packages/shared/components/DialogBox/index.tsx @@ -1,4 +1,4 @@ -import { FocusVisibleButton } from "@/new/photos/components/FocusVisibleButton"; +import { FocusVisibleButton } from "@/new/photos/components/mui/FocusVisibleButton"; import { Breakpoint, DialogActions,