applications/calendar/src/app/components/eventModal/rows/RowDescription.tsx

   1 import { c } from 'ttag';
   2
   3 import { removeZoomInfoFromDescription } from '@proton/calendar/components/videoConferencing/zoom/zoomHelpers';
   4 import { IconRow, TextAreaTwo } from '@proton/components';
   5 import { DESCRIPTION_INPUT_ID, MAX_CHARS_API } from '@proton/shared/lib/calendar/constants';
   6 import type { EventModel } from '@proton/shared/lib/interfaces/calendar';
   7
   8 import createHandlers from '../eventForm/createPropFactory';
   9
  10 interface Props {
  11     canEditSharedEventData: boolean;
  12     model: EventModel;
  13     setModel: (value: EventModel) => void;
  14 }
  15
  16 export const RowDescription = ({ canEditSharedEventData, model, setModel }: Props) => {
  17     if (!canEditSharedEventData) {
  18         return null;
  19     }
  20
  21     return (
  22         <IconRow
  23             icon="text-align-left"
  24             iconClassName="rtl:mirror"
  25             title={c('Label').t`Description`}
  26             id={DESCRIPTION_INPUT_ID}
  27         >
  28             <TextAreaTwo
  29                 id={DESCRIPTION_INPUT_ID}
  30                 minRows={2}
  31                 autoGrow
  32                 placeholder={c('Placeholder').t`Add description`}
  33                 maxLength={MAX_CHARS_API.EVENT_DESCRIPTION}
  34                 className="max-h-custom"
  35                 title={c('Title').t`Add more information related to this event`}
  36                 {...createHandlers({
  37                     // We need to remove the zoom info from the description to avoid displaying it to users editing the description
  38                     model: { ...model, description: removeZoomInfoFromDescription(model.description) },
  39                     setModel,
  40                     field: 'description',
  41                 }).native}
  42             />
  43         </IconRow>
  44     );
  45 };