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

   1 import { c } from 'ttag';
   2
   3 import { Input } from '@proton/atoms';
   4 import { IconRow } from '@proton/components';
   5 import { MAX_CHARS_API, TITLE_INPUT_ID } 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 RowTitle = ({ canEditSharedEventData, model, setModel }: Props) => {
  17     if (!canEditSharedEventData) {
  18         return null;
  19     }
  20
  21     return (
  22         <IconRow icon="text-title" id={TITLE_INPUT_ID} title={c('Label').t`Event title`}>
  23             <Input
  24                 id={TITLE_INPUT_ID}
  25                 placeholder={c('Placeholder').t`Add title`}
  26                 title={c('Title').t`Add event title`}
  27                 autoFocus
  28                 maxLength={MAX_CHARS_API.TITLE}
  29                 {...createHandlers({ model, setModel, field: 'title' }).native}
  30             />
  31         </IconRow>
  32     );
  33 };