packages/pass/hooks/useMaxLengthLimiter.ts

   1 import type { KeyboardEventHandler } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { useNotifications } from '@proton/components';
   6
   7 export const useMaxLengthLimiter = () => {
   8     const { createNotification } = useNotifications();
   9
  10     return (
  11             maxLength: number,
  12             originalOnKeyDown?: KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>
  13         ): KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement> =>
  14         (event) => {
  15             if (event.key.length === 1 && event.currentTarget.value.length >= maxLength) {
  16                 createNotification({
  17                     key: 'max-length-limiter',
  18                     type: 'warning',
  19                     deduplicate: true,
  20                     text: c('Info').t`You have reached the maximum allowed length of ${maxLength} characters.`,
  21                 });
  22             }
  23             originalOnKeyDown?.(event);
  24         };
  25 };