@aarhus-university/au-lib-react-components 10.0.7 → 10.0.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "sideEffects": false,
   "name": "@aarhus-university/au-lib-react-components",
-  "version": "10.0.7",
+  "version": "10.0.9",
   "description": "Library for shared React components for various applications on au.dk",
   "scripts": {
     "build": "webpack --config ./webpack.config.js"

package/src/components/AUModalComponent.tsx

@@ -61,7 +61,11 @@ const AUModalComponent: FC<AUModalComponentProps> = ({
               </button>
             )
           }
-          {children}
+          <div className="modal-view__container">
+            <div className="modal-view__body">
+              {children}
+            </div>
+          </div>
         </div>
       </div>,
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

package/src/lib/helpers.ts

@@ -176,6 +176,19 @@ const prettyPrintPhone = (countryCodes: AU.ICountryCode[], phone: string) => {
 
 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,
@@ -191,4 +204,5 @@ export {
   splitPhoneNumber,
   prettyPrintPhone,
   scrollTo,
+  replace,
 };

package/src/lib/hooks.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable import/prefer-default-export */
 import { useState, useEffect } from 'react';
 import { showModal, hideModal } from '@aarhus-university/au-designsystem-delphinus/source/js/components/modal-view';
@@ -28,6 +29,25 @@ const useModal = (
   return [modal, setModal];
 };
 
+const useTranslation = <T>(initialObject: T, promises: [Promise<any>, Promise<any> | null]): 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();
+  }, []);
+
+  return translations;
+};
+
 export {
   useModal,
+  useTranslation,
 };