diff --git a/__test__/features/Calendars/CalendarModal.test.tsx b/__test__/features/Calendars/CalendarModal.test.tsx index dc904b0..8290254 100644 --- a/__test__/features/Calendars/CalendarModal.test.tsx +++ b/__test__/features/Calendars/CalendarModal.test.tsx @@ -38,7 +38,7 @@ describe("CalendarPopover", () => { renderPopover(); expect(screen.getByLabelText(/Name/i)).toBeInTheDocument(); - expect(screen.getByText("calendar.addDescription")).toBeInTheDocument(); + expect(screen.getByText("event.form.addDescription")).toBeInTheDocument(); }); it("updates name and description fields", () => { @@ -48,7 +48,7 @@ describe("CalendarPopover", () => { fireEvent.change(nameInput, { target: { value: "My Calendar" } }); expect(nameInput).toHaveValue("My Calendar"); - fireEvent.click(screen.getByText("calendar.addDescription")); + fireEvent.click(screen.getByText("event.form.addDescription")); const descInput = screen.getByLabelText(/Description/i); fireEvent.change(descInput, { target: { value: "Test description" } }); expect(descInput).toHaveValue("Test description"); @@ -65,7 +65,7 @@ describe("CalendarPopover", () => { fireEvent.change(screen.getByLabelText(/Name/i), { target: { value: "Test Calendar" }, }); - fireEvent.click(screen.getByText("calendar.addDescription")); + fireEvent.click(screen.getByText("event.form.addDescription")); fireEvent.change(screen.getByLabelText(/Description/i), { target: { value: "Test Description" }, }); diff --git a/src/components/Calendar/ImportTab.tsx b/src/components/Calendar/ImportTab.tsx index 88ae361..0ebab9f 100644 --- a/src/components/Calendar/ImportTab.tsx +++ b/src/components/Calendar/ImportTab.tsx @@ -31,7 +31,7 @@ export function ImportTab({ name: string; setName: Function; description: string; - setDescription: Function; + setDescription: (d: string) => void; color: Record; setColor: Function; visibility: "public" | "private"; diff --git a/src/components/Calendar/SettingsTab.tsx b/src/components/Calendar/SettingsTab.tsx index 3e4fab5..cb22d73 100644 --- a/src/components/Calendar/SettingsTab.tsx +++ b/src/components/Calendar/SettingsTab.tsx @@ -13,6 +13,7 @@ import { useI18n } from "cozy-ui/transpiled/react/providers/I18n"; import { useState, useEffect } from "react"; import { useAppSelector } from "../../app/hooks"; import { Calendars } from "../../features/Calendars/CalendarTypes"; +import { AddDescButton } from "../Event/AddDescButton"; import { ColorPicker } from "./CalendarColorPicker"; export function SettingsTab({ @@ -29,7 +30,7 @@ export function SettingsTab({ name: string; setName: Function; description: string; - setDescription: Function; + setDescription: (d: string) => void; color: Record; setColor: Function; visibility: "public" | "private"; @@ -57,29 +58,13 @@ export function SettingsTab({ margin="dense" /> - {!toggleDesc && ( - - )} - - {toggleDesc && ( - setDescription(e.target.value)} - size="small" - margin="dense" - multiline - rows={2} - /> - )} + diff --git a/src/components/Event/AddDescButton.tsx b/src/components/Event/AddDescButton.tsx new file mode 100644 index 0000000..48076c4 --- /dev/null +++ b/src/components/Event/AddDescButton.tsx @@ -0,0 +1,69 @@ +import { Box, Button, TextField } from "@mui/material"; +import { useI18n } from "cozy-ui/transpiled/react/providers/I18n"; +import { FieldWithLabel } from "./components/FieldWithLabel"; +import { Description as DescriptionIcon } from "@mui/icons-material"; + +export function AddDescButton({ + showDescription, + setShowDescription, + showMore, + description, + setDescription, +}: { + showDescription: boolean; + setShowDescription: (b: boolean) => void; + showMore: boolean; + description: string; + setDescription: (d: string) => void; +}) { + const { t } = useI18n(); + return ( + <> + {!showDescription && ( + + + + + + )} + {showDescription && ( + + setDescription(e.target.value)} + size="small" + margin="dense" + multiline + minRows={2} + maxRows={10} + sx={{ + "& .MuiInputBase-root": { + maxHeight: "33%", + overflowY: "auto", + }, + "& textarea": { + resize: "vertical", + }, + }} + /> + + )} + + ); +} diff --git a/src/components/Event/EventFormFields.tsx b/src/components/Event/EventFormFields.tsx index 1564764..ab3df44 100644 --- a/src/components/Event/EventFormFields.tsx +++ b/src/components/Event/EventFormFields.tsx @@ -42,6 +42,7 @@ import {} from "./utils/dateRules"; import {} from "./utils/dateTimeFormatters"; import { validateEventForm } from "./utils/formValidation"; import { SnackbarAlert } from "../Loading/SnackBarAlert"; +import { AddDescButton } from "./AddDescButton"; interface EventFormFieldsProps { // Form state @@ -424,52 +425,13 @@ export default function EventFormFields({ /> - {!showDescription && ( - - - - - - )} - - {showDescription && ( - - setDescription(e.target.value)} - size="small" - margin="dense" - multiline - minRows={2} - maxRows={10} - sx={{ - "& .MuiInputBase-root": { - maxHeight: "33%", - overflowY: "auto", - }, - "& textarea": { - resize: "vertical", - }, - }} - /> - - )} +