TerribleDev/ente
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Unwrap

Browse Source
This commit is contained in:
Manav Rathi
2025-02-25 17:27:34 +05:30
parent 3e527e3c41
commit 930bd4ce2e
1 changed files with 53 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
web/packages/gallery/components/FileInfo.tsx
View File

@@ -87,7 +87,7 @@ import {
type ButtonProps,
type DialogProps,
} from "@mui/material";
import { Formik } from "formik";
import { useFormik } from "formik";
import { t } from "i18next";
import React, { useEffect, useMemo, useRef, useState } from "react";
import * as Yup from "yup";
@@ -540,7 +540,7 @@ const EditButton: React.FC<EditButtonProps> = ({ onClick, loading }) => (
);
interface CaptionFormValues {
caption: string;
caption: string | undefined;
}
type CaptionProps = Pick<
@@ -566,6 +566,7 @@ const Caption: React.FC<CaptionProps> = ({
const onSubmit = async (values: CaptionFormValues) => {
const newCaption = values.caption;
if (!newCaption) return;
if (caption == newCaption) {
return;
}
@@ -585,74 +586,63 @@ const Caption: React.FC<CaptionProps> = ({
setIsSaving(false);
};
const { values, errors, handleChange, handleSubmit, resetForm } =
useFormik<CaptionFormValues>({
initialValues: { caption },
validationSchema: Yup.object().shape({
caption: Yup.string().max(5000, t("caption_character_limit")),
}),
validateOnBlur: false,
onSubmit,
});
if (!caption?.length && !allowEdits) {
return <></>;
}
return (
<Box sx={{ p: 1 }}>
<Formik<CaptionFormValues>
// @ts-ignore
initialValues={{ caption }}
validationSchema={Yup.object().shape({
caption: Yup.string().max(
5000,
t("caption_character_limit"),
),
})}
validateOnBlur={false}
onSubmit={onSubmit}
>
{({
values,
errors,
handleChange,
handleSubmit,
resetForm,
}) => (
<form noValidate onSubmit={handleSubmit}>
<TextField
hiddenLabel
fullWidth
id="caption"
name="caption"
type="text"
multiline
placeholder={t("caption_placeholder")}
value={values.caption}
onChange={handleChange("caption")}
error={Boolean(errors.caption)}
helperText={errors.caption}
disabled={!allowEdits || isSaving}
/>
{values.caption !== caption && (
<FlexWrapper justifyContent={"flex-end"}>
<IconButton type="submit" disabled={isSaving}>
{isSaving ? (
<CircularProgress
size={"18px"}
color="inherit"
/>
) : (
<DoneIcon />
)}
</IconButton>
<IconButton
onClick={() =>
resetForm({
values: { caption: caption ?? "" },
touched: { caption: false },
})
}
disabled={isSaving}
>
<CloseIcon />
</IconButton>
</FlexWrapper>
)}
</form>
<form noValidate onSubmit={handleSubmit}>
<TextField
hiddenLabel
fullWidth
id="caption"
name="caption"
type="text"
multiline
placeholder={t("caption_placeholder")}
value={values.caption}
onChange={handleChange("caption")}
error={Boolean(errors.caption)}
helperText={errors.caption}
disabled={!allowEdits || isSaving}
/>
{values.caption !== caption && (
<FlexWrapper justifyContent={"flex-end"}>
<IconButton type="submit" disabled={isSaving}>
{isSaving ? (
<CircularProgress
size={"18px"}
color="inherit"
/>
) : (
<DoneIcon />
)}
</IconButton>
<IconButton
onClick={() =>
resetForm({
values: { caption: caption ?? "" },
touched: { caption: false },
})
}
disabled={isSaving}
>
<CloseIcon />
</IconButton>
</FlexWrapper>
)}
</Formik>
</form>
</Box>
);
};