@aarhus-university/au-lib-react-components 12.6.1 → 12.6.3

package/src/lib/hooks.ts

@@ -1,157 +1,157 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-empty-function */
-/* eslint-disable import/prefer-default-export */
-import { useEffect, useState, useRef } from 'react';
-import { showModal, hideModal } from '@aarhus-university/au-designsystem-delphinus/source/js/components/modal-view';
-
-const modalIsVisible = (modalElement: Element | null) => (!modalElement ? false : getComputedStyle(modalElement).display !== 'none');
-
-const useModal = (
-  domId: string,
-  sender: HTMLButtonElement | HTMLTableRowElement | null,
-  show = true,
-  closeable = true,
-  onClose: () => void = () => { },
-): void => {
-  useEffect(() => {
-    let cleanUp: ExtendedCleanUpPair[] = [];
-    const modalView = document.getElementById(domId);
-    if (modalView) {
-      const header = modalView.querySelector('.modal-view__header');
-      if (header && !header.getAttribute('id')) {
-        header.setAttribute('id', `${domId}-header`);
-        modalView.setAttribute('aria-labelledby', `${domId}-header`);
-      }
-    }
-
-    if (sender && show) {
-      cleanUp = showModal(domId, sender, () => {
-        onClose();
-      }, closeable);
-    }
-
-    if (sender && !show && modalIsVisible(modalView)) {
-      hideModal(domId, sender);
-    }
-
-    return () => {
-      cleanUp.forEach((c) => {
-        if (c.clickEvent) {
-          c.element.removeEventListener('click', c.clickEvent);
-        }
-        if (c.keyUpEvent) {
-          c.element.removeEventListener('keyup', c.keyUpEvent);
-        }
-      });
-    };
-  });
-};
-
-const useTranslation = <T>(
-  initialObject: T,
-  promises: [Promise<any>, Promise<any> | null],
-  lang: string,
-): T => {
-  const [translations, setTranslations] = useState<T>(initialObject);
-  const loadTranslation = async (): Promise<void> => {
-    const translation = await Promise.all(promises);
-    if (translation[1] == null) {
-      setTranslations(translation[0].default);
-    } else {
-      setTranslations({ ...translation[0].default, ...translation[1].default });
-    }
-  };
-
-  useEffect(() => {
-    loadTranslation();
-  }, [lang]);
-
-  return translations;
-};
-
-const isTextArea = (element: HTMLInputElement): boolean => element.tagName === 'TEXTAREA';
-
-const setAutoExpand = (input: HTMLInputElement, parent: HTMLElement): void => {
-  if (isTextArea(input)) {
-    parent.classList.add('form__field__textarea-autoexpand');
-  }
-};
-
-const setDataValue = (formFieldElement: HTMLElement, inputElement: HTMLInputElement): void => {
-  if (isTextArea(inputElement)) {
-    formFieldElement.setAttribute('data-value', inputElement.value);
-  }
-};
-
-const setText = (
-  formField: HTMLElement,
-  overflow: number,
-): void => {
-  if (formField) {
-    const inputField = formField.querySelector('input[type="text"], textarea');
-    if (inputField) {
-      setDataValue(formField, inputField as HTMLInputElement);
-    }
-    if (overflow > 0) {
-      formField.classList.add('form__field__character-count--overflow');
-    } else {
-      formField.classList.remove('form__field__character-count--overflow');
-    }
-  }
-};
-
-const useCharacterCount = (
-  type: string,
-  initialChars: number,
-  maxChars: number,
-): {
-  ref: React.RefObject<HTMLDivElement>,
-  remaining: number;
-  overflow: number;
-} => {
-  const ref = useRef<HTMLDivElement>(null);
-  const [count, setCount] = useState<number>(0);
-  const remaining = maxChars - count;
-  const overflow = count - maxChars;
-
-  useEffect(() => {
-    const inputEvent = (event: Event) => {
-      if (event.target) {
-        setDataValue(ref.current as HTMLElement, event.target as HTMLInputElement);
-      }
-      setCount((event.target as HTMLInputElement).value.length);
-    };
-    const inputField = ref.current?.querySelector('input[type="text"], textarea');
-    if (inputField) {
-      ref.current?.setAttribute(`data-${type}-length`, maxChars.toString());
-      setAutoExpand(inputField as HTMLInputElement, ref.current as HTMLElement);
-      inputField.addEventListener('input', inputEvent);
-    }
-
-    return () => {
-      if (inputField) {
-        inputField.removeEventListener('input', inputEvent);
-      }
-    };
-  }, []);
-
-  useEffect(() => {
-    setCount(initialChars);
-  }, [initialChars]);
-
-  useEffect(() => {
-    setText(ref.current as HTMLElement, overflow);
-  }, [count]);
-
-  return {
-    ref,
-    remaining,
-    overflow,
-  };
-};
-
-export {
-  useModal,
-  useTranslation,
-  useCharacterCount,
-};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-disable import/prefer-default-export */
+import { useEffect, useState, useRef } from 'react';
+import { showModal, hideModal } from '@aarhus-university/au-designsystem-delphinus/source/js/components/modal-view';
+
+const modalIsVisible = (modalElement: Element | null) => (!modalElement ? false : getComputedStyle(modalElement).display !== 'none');
+
+const useModal = (
+  domId: string,
+  sender: HTMLButtonElement | HTMLTableRowElement | null,
+  show = true,
+  closeable = true,
+  onClose: () => void = () => { },
+): void => {
+  useEffect(() => {
+    let cleanUp: ExtendedCleanUpPair[] = [];
+    const modalView = document.getElementById(domId);
+    if (modalView) {
+      const header = modalView.querySelector('.modal-view__header');
+      if (header && !header.getAttribute('id')) {
+        header.setAttribute('id', `${domId}-header`);
+        modalView.setAttribute('aria-labelledby', `${domId}-header`);
+      }
+    }
+
+    if (sender && show) {
+      cleanUp = showModal(domId, sender, () => {
+        onClose();
+      }, closeable);
+    }
+
+    if (sender && !show && modalIsVisible(modalView)) {
+      hideModal(domId, sender);
+    }
+
+    return () => {
+      cleanUp.forEach((c) => {
+        if (c.clickEvent) {
+          c.element.removeEventListener('click', c.clickEvent);
+        }
+        if (c.keyUpEvent) {
+          c.element.removeEventListener('keyup', c.keyUpEvent);
+        }
+      });
+    };
+  });
+};
+
+const useTranslation = <T>(
+  initialObject: T,
+  promises: [Promise<any>, Promise<any> | null],
+  lang: string,
+): T => {
+  const [translations, setTranslations] = useState<T>(initialObject);
+  const loadTranslation = async (): Promise<void> => {
+    const translation = await Promise.all(promises);
+    if (translation[1] == null) {
+      setTranslations(translation[0].default);
+    } else {
+      setTranslations({ ...translation[0].default, ...translation[1].default });
+    }
+  };
+
+  useEffect(() => {
+    loadTranslation();
+  }, [lang]);
+
+  return translations;
+};
+
+const isTextArea = (element: HTMLInputElement): boolean => element.tagName === 'TEXTAREA';
+
+const setAutoExpand = (input: HTMLInputElement, parent: HTMLElement): void => {
+  if (isTextArea(input)) {
+    parent.classList.add('form__field__textarea-autoexpand');
+  }
+};
+
+const setDataValue = (formFieldElement: HTMLElement, inputElement: HTMLInputElement): void => {
+  if (isTextArea(inputElement)) {
+    formFieldElement.setAttribute('data-value', inputElement.value);
+  }
+};
+
+const setText = (
+  formField: HTMLElement,
+  overflow: number,
+): void => {
+  if (formField) {
+    const inputField = formField.querySelector('input[type="text"], textarea');
+    if (inputField) {
+      setDataValue(formField, inputField as HTMLInputElement);
+    }
+    if (overflow > 0) {
+      formField.classList.add('form__field__character-count--overflow');
+    } else {
+      formField.classList.remove('form__field__character-count--overflow');
+    }
+  }
+};
+
+const useCharacterCount = (
+  type: string,
+  initialChars: number,
+  maxChars: number,
+): {
+  ref: React.RefObject<HTMLDivElement>,
+  remaining: number;
+  overflow: number;
+} => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [count, setCount] = useState<number>(0);
+  const remaining = maxChars - count;
+  const overflow = count - maxChars;
+
+  useEffect(() => {
+    const inputEvent = (event: Event) => {
+      if (event.target) {
+        setDataValue(ref.current as HTMLElement, event.target as HTMLInputElement);
+      }
+      setCount((event.target as HTMLInputElement).value.length);
+    };
+    const inputField = ref.current?.querySelector('input[type="text"], textarea');
+    if (inputField) {
+      ref.current?.setAttribute(`data-${type}-length`, maxChars.toString());
+      setAutoExpand(inputField as HTMLInputElement, ref.current as HTMLElement);
+      inputField.addEventListener('input', inputEvent);
+    }
+
+    return () => {
+      if (inputField) {
+        inputField.removeEventListener('input', inputEvent);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    setCount(initialChars);
+  }, [initialChars]);
+
+  useEffect(() => {
+    setText(ref.current as HTMLElement, overflow);
+  }, [count]);
+
+  return {
+    ref,
+    remaining,
+    overflow,
+  };
+};
+
+export {
+  useModal,
+  useTranslation,
+  useCharacterCount,
+};