@aarhus-university/au-lib-react-components 11.4.0 → 11.4.2

package/src/lib/helpers.ts

@@ -1,208 +1,208 @@
-/* eslint-env browser */
-/* NO IMPORTS! */
-
-// eslint-disable-next-line no-control-regex
-const emailRegex = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/;
-
-const sortAlphaObj = (a, b) => {
-  if (typeof a.name !== 'undefined' && typeof b.name !== 'undefined') {
-    return a.name.toLowerCase().localeCompare(b.name.toLowerCase(), 'da', { ignorePunctuation: true });
-  }
-  return 0;
-};
-
-const isElementInViewport = (element: HTMLElement): boolean => {
-  if (element === null) {
-    return false;
-  }
-
-  const rect = element.getBoundingClientRect();
-
-  return rect.bottom > 0
-    && rect.right > 0
-    && rect.left < (window.innerWidth || document.documentElement.clientWidth)
-    && rect.top < (window.innerHeight || document.documentElement.clientHeight);
-};
-
-const isElementPartlyInViewport = (element: HTMLElement): boolean => {
-  let top = element.offsetTop;
-  let left = element.offsetLeft;
-  const width = element.offsetWidth;
-  const height = element.offsetHeight;
-
-  let offsetElement = element;
-  while (offsetElement.offsetParent) {
-    offsetElement = element.offsetParent as HTMLElement;
-    top += element.offsetTop;
-    left += element.offsetLeft;
-  }
-
-  return (
-    top < (window.pageYOffset + window.innerHeight)
-    && left < (window.pageXOffset + window.innerWidth)
-    && (top + height) > window.pageYOffset
-    && (left + width) > window.pageXOffset
-  );
-};
-
-const setCookie = (
-  cookieName: string,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  value: any,
-  maxAge: number | null = null,
-  exdays: number | null = null,
-  path = ';path=/;domain=au.dk',
-): void => {
-  let cookieValue = encodeURI(value);
-  if (exdays != null) {
-    const exdate = new Date();
-    exdate.setDate(exdate.getDate() + exdays);
-    cookieValue = `${cookieValue}; expires=${exdate.toUTCString()}`;
-  } else if (maxAge != null) {
-    cookieValue = `${cookieValue}; max-age=${maxAge}`;
-  }
-
-  document.cookie = `${cookieName}=${cookieValue}${path}`;
-};
-
-const getCookie = (cookieName: string): string | null | boolean => {
-  let cookieValue: string | null | boolean = document.cookie;
-  let cookieStart = cookieValue.indexOf(` ${cookieName}=`);
-  if (cookieStart === -1) {
-    cookieStart = cookieValue.indexOf(`${cookieName}=`);
-  }
-  if (cookieStart === -1) {
-    cookieValue = null;
-  } else {
-    cookieStart = cookieValue.indexOf('=', cookieStart) + 1;
-    let cookieEnd = cookieValue.indexOf(';', cookieStart);
-    if (cookieEnd === -1) {
-      cookieEnd = cookieValue.length;
-    }
-    cookieValue = decodeURI(cookieValue.substring(cookieStart, cookieEnd));
-  }
-  return cookieValue;
-};
-
-const addToSessionStorage = (key: string, data: unknown): unknown => {
-  if (window.sessionStorage) {
-    sessionStorage.setItem(key, JSON.stringify(data));
-  }
-
-  return data;
-};
-
-const getFromSessionStorage = (key: string): unknown | null => {
-  if (window.sessionStorage) {
-    const data = sessionStorage.getItem(key);
-    if (data) {
-      return JSON.parse(data);
-    }
-  }
-
-  return null;
-};
-
-const addToLocalStorage = (key: string, data: unknown): unknown => {
-  if (window.localStorage) {
-    localStorage.setItem(key, JSON.stringify(data));
-  }
-
-  return data;
-};
-
-const getFromLocalStorage = (key: string): unknown | null => {
-  if (window.localStorage) {
-    const data = localStorage.getItem(key);
-    if (data) {
-      return JSON.parse(data);
-    }
-  }
-
-  return null;
-};
-
-// Credits: http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea/
-const setCaretPosition = (element: HTMLInputElement, pos: number): void => {
-  // Modern browsers
-  if (element && element.setSelectionRange) {
-    element.focus();
-    element.setSelectionRange(pos, pos);
-  }
-};
-
-const splitPhoneNumber = (
-  countryCodes: AU.ICountryCode[],
-  phoneNumber: string,
-): AU.IPhoneNumber => {
-  const countryCodeFound = (code: string) => countryCodes.filter(
-    (x) => x.code === parseInt(code, 10),
-  ).length > 0;
-
-  const findPrefix = (): string => {
-    if (countryCodes.length > 0) {
-      const skip = phoneNumber.length > 0 ? '' : '+'; // Hackish...
-      let count = 1;
-      let prefix = `${countryCodes.find((x) => x.important)?.code}`;
-      while (count < phoneNumber.length) {
-        const split = phoneNumber.substring(skip.length, skip.length + count);
-        if (countryCodeFound(split)) {
-          prefix = split;
-        }
-        count += 1;
-      }
-      return skip + prefix;
-    }
-    return '';
-  };
-
-  const prefix = findPrefix();
-  return {
-    prefix,
-    number: phoneNumber.replace(prefix, ''),
-  };
-};
-
-const prettyPrintPhone = (countryCodes: AU.ICountryCode[], phone: string) => {
-  if (phone) {
-    const { prefix, number } = splitPhoneNumber(countryCodes, phone);
-    if (prefix) {
-      return `${prefix} ${number?.match(/\d{1,2}/g)?.join(' ')}`;
-    }
-    return number?.match(/\d{1,2}/g)?.join(' ');
-  }
-  return '';
-};
-
-const scrollTo = (x = 0, y = 0) => window.scrollTo(x, y);
-
-const replace = (text: string, find: string[], replaceWith: string[]): string => {
-  if (find.length !== replaceWith.length) {
-    return text;
-  }
-
-  let newText = text;
-  find.forEach((placeholder, index) => {
-    newText = newText.replace(`{{${placeholder}}}`, replaceWith[index]);
-  });
-
-  return newText;
-};
-
-export {
-  emailRegex,
-  sortAlphaObj,
-  isElementInViewport,
-  isElementPartlyInViewport,
-  setCookie,
-  getCookie,
-  addToLocalStorage,
-  getFromLocalStorage,
-  addToSessionStorage,
-  getFromSessionStorage,
-  setCaretPosition,
-  splitPhoneNumber,
-  prettyPrintPhone,
-  scrollTo,
-  replace,
-};
+/* eslint-env browser */
+/* NO IMPORTS! */
+
+// eslint-disable-next-line no-control-regex
+const emailRegex = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/;
+
+const sortAlphaObj = (a, b) => {
+  if (typeof a.name !== 'undefined' && typeof b.name !== 'undefined') {
+    return a.name.toLowerCase().localeCompare(b.name.toLowerCase(), 'da', { ignorePunctuation: true });
+  }
+  return 0;
+};
+
+const isElementInViewport = (element: HTMLElement): boolean => {
+  if (element === null) {
+    return false;
+  }
+
+  const rect = element.getBoundingClientRect();
+
+  return rect.bottom > 0
+    && rect.right > 0
+    && rect.left < (window.innerWidth || document.documentElement.clientWidth)
+    && rect.top < (window.innerHeight || document.documentElement.clientHeight);
+};
+
+const isElementPartlyInViewport = (element: HTMLElement): boolean => {
+  let top = element.offsetTop;
+  let left = element.offsetLeft;
+  const width = element.offsetWidth;
+  const height = element.offsetHeight;
+
+  let offsetElement = element;
+  while (offsetElement.offsetParent) {
+    offsetElement = element.offsetParent as HTMLElement;
+    top += element.offsetTop;
+    left += element.offsetLeft;
+  }
+
+  return (
+    top < (window.pageYOffset + window.innerHeight)
+    && left < (window.pageXOffset + window.innerWidth)
+    && (top + height) > window.pageYOffset
+    && (left + width) > window.pageXOffset
+  );
+};
+
+const setCookie = (
+  cookieName: string,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  value: any,
+  maxAge: number | null = null,
+  exdays: number | null = null,
+  path = ';path=/;domain=au.dk',
+): void => {
+  let cookieValue = encodeURI(value);
+  if (exdays != null) {
+    const exdate = new Date();
+    exdate.setDate(exdate.getDate() + exdays);
+    cookieValue = `${cookieValue}; expires=${exdate.toUTCString()}`;
+  } else if (maxAge != null) {
+    cookieValue = `${cookieValue}; max-age=${maxAge}`;
+  }
+
+  document.cookie = `${cookieName}=${cookieValue}${path}`;
+};
+
+const getCookie = (cookieName: string): string | null | boolean => {
+  let cookieValue: string | null | boolean = document.cookie;
+  let cookieStart = cookieValue.indexOf(` ${cookieName}=`);
+  if (cookieStart === -1) {
+    cookieStart = cookieValue.indexOf(`${cookieName}=`);
+  }
+  if (cookieStart === -1) {
+    cookieValue = null;
+  } else {
+    cookieStart = cookieValue.indexOf('=', cookieStart) + 1;
+    let cookieEnd = cookieValue.indexOf(';', cookieStart);
+    if (cookieEnd === -1) {
+      cookieEnd = cookieValue.length;
+    }
+    cookieValue = decodeURI(cookieValue.substring(cookieStart, cookieEnd));
+  }
+  return cookieValue;
+};
+
+const addToSessionStorage = (key: string, data: unknown): unknown => {
+  if (window.sessionStorage) {
+    sessionStorage.setItem(key, JSON.stringify(data));
+  }
+
+  return data;
+};
+
+const getFromSessionStorage = (key: string): unknown | null => {
+  if (window.sessionStorage) {
+    const data = sessionStorage.getItem(key);
+    if (data) {
+      return JSON.parse(data);
+    }
+  }
+
+  return null;
+};
+
+const addToLocalStorage = (key: string, data: unknown): unknown => {
+  if (window.localStorage) {
+    localStorage.setItem(key, JSON.stringify(data));
+  }
+
+  return data;
+};
+
+const getFromLocalStorage = (key: string): unknown | null => {
+  if (window.localStorage) {
+    const data = localStorage.getItem(key);
+    if (data) {
+      return JSON.parse(data);
+    }
+  }
+
+  return null;
+};
+
+// Credits: http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea/
+const setCaretPosition = (element: HTMLInputElement, pos: number): void => {
+  // Modern browsers
+  if (element && element.setSelectionRange) {
+    element.focus();
+    element.setSelectionRange(pos, pos);
+  }
+};
+
+const splitPhoneNumber = (
+  countryCodes: AU.ICountryCode[],
+  phoneNumber: string,
+): AU.IPhoneNumber => {
+  const countryCodeFound = (code: string) => countryCodes.filter(
+    (x) => x.code === parseInt(code, 10),
+  ).length > 0;
+
+  const findPrefix = (): string => {
+    if (countryCodes.length > 0) {
+      const skip = phoneNumber.length > 0 ? '' : '+'; // Hackish...
+      let count = 1;
+      let prefix = `${countryCodes.find((x) => x.important)?.code}`;
+      while (count < phoneNumber.length) {
+        const split = phoneNumber.substring(skip.length, skip.length + count);
+        if (countryCodeFound(split)) {
+          prefix = split;
+        }
+        count += 1;
+      }
+      return skip + prefix;
+    }
+    return '';
+  };
+
+  const prefix = findPrefix();
+  return {
+    prefix,
+    number: phoneNumber.replace(prefix, ''),
+  };
+};
+
+const prettyPrintPhone = (countryCodes: AU.ICountryCode[], phone: string) => {
+  if (phone) {
+    const { prefix, number } = splitPhoneNumber(countryCodes, phone);
+    if (prefix) {
+      return `${prefix} ${number?.match(/\d{1,2}/g)?.join(' ')}`;
+    }
+    return number?.match(/\d{1,2}/g)?.join(' ');
+  }
+  return '';
+};
+
+const scrollTo = (x = 0, y = 0) => window.scrollTo(x, y);
+
+const replace = (text: string, find: string[], replaceWith: string[]): string => {
+  if (find.length !== replaceWith.length) {
+    return text;
+  }
+
+  let newText = text;
+  find.forEach((placeholder, index) => {
+    newText = newText.replace(`{{${placeholder}}}`, replaceWith[index]);
+  });
+
+  return newText;
+};
+
+export {
+  emailRegex,
+  sortAlphaObj,
+  isElementInViewport,
+  isElementPartlyInViewport,
+  setCookie,
+  getCookie,
+  addToLocalStorage,
+  getFromLocalStorage,
+  addToSessionStorage,
+  getFromSessionStorage,
+  setCaretPosition,
+  splitPhoneNumber,
+  prettyPrintPhone,
+  scrollTo,
+  replace,
+};

package/src/lib/hooks.ts

@@ -1,75 +1,75 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-empty-function */
-/* eslint-disable import/prefer-default-export */
-import { useEffect, useState } 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 | 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;
-};
-
-export {
-  useModal,
-  useTranslation,
-};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-disable import/prefer-default-export */
+import { useEffect, useState } 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 | 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;
+};
+
+export {
+  useModal,
+  useTranslation,
+};