@aarhus-university/au-lib-react-components 10.0.5 → 10.0.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "sideEffects": false,
   "name": "@aarhus-university/au-lib-react-components",
-  "version": "10.0.5",
+  "version": "10.0.8",
   "description": "Library for shared React components for various applications on au.dk",
   "scripts": {
     "build": "webpack --config ./webpack.config.js"
@@ -45,7 +45,8 @@
     "webpack-cli": "^4.9.2"
   },
   "dependencies": {
-    "@aarhus-university/au-designsystem-delphinus": "^0.26.1",
+    "@aarhus-university/au-designsystem-delphinus": "0.28.0",
+    "@aarhus-university/types": "^0.1.0",
     "@types/google.analytics": "^0.0.42",
     "@types/history": "^5.0.0",
     "@types/react": "^17.0.39",

package/src/lib/helpers.ts

@@ -65,8 +65,8 @@ const setCookie = (
   document.cookie = `${cookieName}=${cookieValue}${path}`;
 };
 
-const getCookie = (cookieName: string): string | null => {
-  let cookieValue: string | null = document.cookie;
+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}=`);
@@ -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,
 };

package/tsconfig.json

@@ -41,7 +41,7 @@
     "resolveJsonModule": true,
     "typeRoots": [
       "./node_modules/@types",
-      "./node_modules/@aarhus-university/au-designsystem-delphinus/types"
+      "./node_modules/@aarhus-university/types"
     ]
   },
 }

package/types/common/interfaces/gui.d.ts

@@ -1,64 +0,0 @@
-interface IAlertButton {
-  className: string,
-  text: string,
-  dataIcon: string |null,
-  onClick: () => void,
-}
-
-interface IToastMessage {
-  header?: string,
-  message: string,
-  type: string,
-}
-
-interface IModal {
-  modal: boolean,
-  sender: HTMLElement | null,
-}
-
-interface ICalendarState {
-  day: number,
-  month: number,
-  year: number,
-  hour: number,
-  minute: number,
-  selected: Date,
-}
-
-interface IProgressable {
-  onProgress: () => Promise<IProgressable>,
-  progressed: boolean,
-}
-
-interface IReceiptButton {
-  gotoLink: string,
-  gotoText: string,
-}
-
-interface ITrackers {
-  account: string,
-  name: string,
-}
-
-interface IProfileSettings {
-  type: string,
-  url: string,
-  classNames?: string,
-  icon?: string,
-  dataGtm: string,
-  text: string,
-  disabled?: boolean,
-  onClick?: (el: Element) => void,
-}
-
-interface ITabbedObject {
-  domElement: Element,
-  rendered: boolean,
-  content?: JSX.Element,
-}
-
-interface ITabbedTab {
-  href: string,
-  text: string,
-  dataGtm: string,
-}

package/types/common/interfaces/model.d.ts

@@ -1,29 +0,0 @@
-declare namespace AU {
-  export interface IUserContext {
-    auId: number,
-    firstNames: string,
-    lastName: string,
-    name: string,
-    preferredLanguage: string,
-    userName: string,
-    memberOfGroups: IAdGroup[],
-    impersonatingUser: IUserContext | null,
-  }
-
-  export interface IAdGroup {
-    id: string,
-    name: string,
-  }
-
-  export interface ICountryCode {
-    da: string,
-    en: string,
-    code: number,
-    important?: boolean | undefined,
-  }
-
-  export interface IPhoneNumber {
-    prefix: string,
-    number: string,
-  }
-}

package/types/common/main.d.ts

@@ -1,5 +0,0 @@
-/* eslint-disable @typescript-eslint/triple-slash-reference */
-/// <reference path="./interfaces/gui.d.ts" />
-/// <reference path="./interfaces/model.d.ts" />
-/// <reference path="./payloads.d.ts" />
-/// <reference path="./props.d.ts" />

package/types/common/package.json

@@ -1,5 +0,0 @@
-{
-    "name": "common",
-    "version": "1.0.0",
-    "typings": "main.d.ts"
-  }

package/types/common/props.d.ts

@@ -1,166 +0,0 @@
-interface AUAlertComponentProps {
-  message: string,
-  children: JSX.Element,
-  alert: boolean,
-  buttons?: IAlertButton[],
-}
-
-interface AUCalendarComponentProps {
-  lang?: string,
-  day: number,
-  month: number,
-  year: number,
-  hour: number,
-  minute: number,
-  selected?: Date,
-  onSelected: (selected: Date) => void,
-  highlightWeekend?: boolean,
-  highlightHolidays?: boolean,
-  yearSpanMinus?: number,
-  yearSpanPlus?: number,
-  minuteInterval?: number,
-  showTime?: boolean,
-  closeable?: boolean,
-  onClose?: () => void,
-  limitStart?: Date | null,
-  limitEnd?: Date | null,
-  controls: string,
-}
-
-interface AUContentToggleComponentProps {
-  toggled: boolean,
-  classNames?: string | undefined,
-  children: JSX.Element,
-}
-
-interface AUDatepickerComponentProps {
-  id: string;
-  lang?: string;
-  date?: Date;
-  onDateChange: (date: Date, formatted: string) => void;
-  onHide: (date: Date, dateFormatted: string) => void;
-  format?: string;
-  showTime?: boolean;
-  showLabel?: boolean;
-  labelInline?: boolean;
-  labelText?: string;
-  fullWidth?: boolean;
-  yearSpanMinus?: number;
-  yearSpanPlus?: number;
-  limitStart?: Date | null;
-  limitEnd?: Date | null;
-  disabled?: boolean;
-}
-
-interface AUModalComponentProps {
-  domId: string,
-  children?: JSX.Element,
-  onClose?: () => void,
-  closeButton?: boolean,
-  closeButtonDisabled?: boolean,
-  lang?: string,
-  sender: HTMLElement | null,
-  className?: string,
-}
-
-interface AUSpinnerComponentProps {
-  domID?: string,
-  className?: string,
-  children: JSX.Element,
-  visible?: boolean,
-  loaded: boolean,
-  loadingCondition: boolean,
-  height?: string,
-  init?: string,
-  onLoad: () => void,
-}
-
-interface AUSubNavComponentProps {
-  children: JSX.Element,
-  className: string,
-  dataIcon: string,
-  text: string,
-  ariaLabel: string,
-  id: string,
-}
-
-interface AUTableComponentProps {
-  children: JSX.Element,
-  className: string,
-}
-
-interface TabRoutesProps {
-  onRouteChange: (location: any) => void, // Noget react-router-dom halløj her der ikke spiller...
-  content: JSX.Element[],
-}
-
-interface AUTabbedContentComponentProps {
-  tabKey?: number,
-  tabs: ITabbedTab[],
-  tabContent?: ITabbedObject[] | null,
-  children?: JSX.Element | null,
-  focus?: boolean,
-  initial?: number,
-  lang?: string,
-  callback?: () => void,
-  withRouter?: boolean,
-  classNames?: string,
-}
-
-interface AUToastComponentProps {
-  message: IToastMessage,
-  buttonText?: string,
-  dismiss?: () => void,
-  onOpen?: () => void,
-}
-
-interface AUToolbarComponentProps {
-  lang: string,
-  elements: JSX.Element[],
-}
-
-interface AUSubmitButtonContainerComponentProps {
-  lang: string,
-  disabled: boolean,
-  onSubmit: () => void,
-  onCancel: () => void,
-}
-
-interface AUMobilePrefixComponentProps {
-  countryCodes: AU.ICountryCode[],
-  important: boolean,
-}
-
-interface AUReceiptComponentProps {
-  receiptText: string,
-  helpText: JSX.Element | null,
-  showGoTo: boolean,
-  buttons: IReceiptButton[],
-}
-
-interface AUProfileWidgetComponentProps {
-  lang: string,
-  name: string,
-  auId: number,
-  studentNumber?: string,
-  settings: IProfileSettings[],
-  changeLanguageUri: string,
-  logoutUri: string,
-  profileLabels: any, // Noget med labels her?
-}
-
-interface AUProfileAvatarComponentProps {
-  user: AU.IUserContext,
-  settings: IProfileSettings[],
-  profileLabels: any, // Noget med labels her?
-  logoutUri: string,
-  changeLanguageUri?: string,
-  lang: string,
-}
-
-interface AUProfileLoginComponentProps {
-  loggedIn: boolean,
-  loginUri: string,
-  children: JSX.Element,
-  text: string,
-}