@aarhus-university/au-lib-react-components 10.6.0 → 10.7.0

package/src/components/AUToastComponent.tsx

@@ -1,103 +1,103 @@
-/* eslint-env browser */
-import React, {
-  useEffect, useLayoutEffect, useRef, FC,
-} from 'react';
-
-const dismissTimeout = 5000;
-let timeoutId: NodeJS.Timeout | null = null;
-
-const AUToastComponent: FC<AUToastComponentProps> = ({
-  message: pMessage,
-  buttonText,
-  dismiss,
-  onOpen,
-}: AUToastComponentProps) => {
-  const { type, message, header } = pMessage;
-  const toastRef = useRef<HTMLDivElement>(null);
-  const persistent = type !== 'confirm';
-
-  const moveOut = (element: HTMLElement): void => {
-    const moveOutClass = 'toast-notification--move-out';
-    element.classList.add(moveOutClass);
-    const moveOutElement = document.querySelector(`.${moveOutClass}`);
-    if (moveOutElement && typeof dismiss === 'function') {
-      moveOutElement.addEventListener('animationend', () => {
-        dismiss();
-      });
-    }
-  };
-
-  useEffect(() => {
-    if (typeof onOpen === 'function') {
-      onOpen();
-    }
-  }, []);
-
-  useLayoutEffect(() => {
-    const element = toastRef.current;
-    if (!persistent) {
-      if (element) {
-        element.addEventListener('animationend', () => {
-          timeoutId = setTimeout(() => {
-            moveOut(element);
-          }, dismissTimeout);
-        });
-        element.addEventListener('mouseenter', () => {
-          if (timeoutId) {
-            clearTimeout(timeoutId);
-            element.addEventListener('mouseleave', () => {
-              moveOut(element);
-            });
-          }
-        });
-      }
-    } else {
-      element?.querySelector('button')?.focus();
-    }
-  }, []);
-
-  let className = `toast-notification toast-notification--${type}`;
-  if (persistent) {
-    className = `${className} toast-notification--persistent`;
-  }
-  return (
-    <div ref={toastRef} className={className}>
-      <div className="toast-notification__content">
-        {
-          header && (
-            <h2 className="toast-notification__header">
-              {header}
-            </h2>
-          )
-        }
-        <p dangerouslySetInnerHTML={{ __html: message }} />
-      </div>
-      {
-        persistent && (
-          <button
-            type="button"
-            className="button"
-            onClick={() => {
-              if (toastRef.current) {
-                moveOut(toastRef.current);
-              }
-            }}
-          >
-            {buttonText}
-          </button>
-        )
-      }
-    </div>
-  );
-};
-
-AUToastComponent.defaultProps = {
-  buttonText: 'OK',
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  dismiss: () => { },
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  onOpen: () => { },
-};
-
-AUToastComponent.displayName = 'AUToastComponent';
-export default AUToastComponent;
+/* eslint-env browser */
+import React, {
+  useEffect, useLayoutEffect, useRef, FC,
+} from 'react';
+
+const dismissTimeout = 5000;
+let timeoutId: NodeJS.Timeout | null = null;
+
+const AUToastComponent: FC<AUToastComponentProps> = ({
+  message: pMessage,
+  buttonText,
+  dismiss,
+  onOpen,
+}: AUToastComponentProps) => {
+  const { type, message, header } = pMessage;
+  const toastRef = useRef<HTMLDivElement>(null);
+  const persistent = type !== 'confirm';
+
+  const moveOut = (element: HTMLElement): void => {
+    const moveOutClass = 'toast-notification--move-out';
+    element.classList.add(moveOutClass);
+    const moveOutElement = document.querySelector(`.${moveOutClass}`);
+    if (moveOutElement && typeof dismiss === 'function') {
+      moveOutElement.addEventListener('animationend', () => {
+        dismiss();
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (typeof onOpen === 'function') {
+      onOpen();
+    }
+  }, []);
+
+  useLayoutEffect(() => {
+    const element = toastRef.current;
+    if (!persistent) {
+      if (element) {
+        element.addEventListener('animationend', () => {
+          timeoutId = setTimeout(() => {
+            moveOut(element);
+          }, dismissTimeout);
+        });
+        element.addEventListener('mouseenter', () => {
+          if (timeoutId) {
+            clearTimeout(timeoutId);
+            element.addEventListener('mouseleave', () => {
+              moveOut(element);
+            });
+          }
+        });
+      }
+    } else {
+      element?.querySelector('button')?.focus();
+    }
+  }, []);
+
+  let className = `toast-notification toast-notification--${type}`;
+  if (persistent) {
+    className = `${className} toast-notification--persistent`;
+  }
+  return (
+    <div ref={toastRef} className={className}>
+      <div className="toast-notification__content">
+        {
+          header && (
+            <h2 className="toast-notification__header">
+              {header}
+            </h2>
+          )
+        }
+        <p dangerouslySetInnerHTML={{ __html: message }} />
+      </div>
+      {
+        persistent && (
+          <button
+            type="button"
+            className="button"
+            onClick={() => {
+              if (toastRef.current) {
+                moveOut(toastRef.current);
+              }
+            }}
+          >
+            {buttonText}
+          </button>
+        )
+      }
+    </div>
+  );
+};
+
+AUToastComponent.defaultProps = {
+  buttonText: 'OK',
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  dismiss: () => { },
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onOpen: () => { },
+};
+
+AUToastComponent.displayName = 'AUToastComponent';
+export default AUToastComponent;

package/src/components/AUToolbarComponent.tsx

@@ -1,45 +1,52 @@
-/* eslint-disable react/no-array-index-key */
-/* eslint-env browser */
-import React, { useEffect, FC } from 'react';
-import { setToolbars, setToolbarToggle } from '@aarhus-university/au-designsystem-delphinus/source/js/components/toolbar';
-
-let windowInnerWidth = 0;
-
-const AUToolbarComponent: FC<AUToolbarComponentProps> = ({
-  lang,
-  elements,
-}: AUToolbarComponentProps) => {
-  useEffect(() => {
-    setToolbars();
-    setToolbarToggle();
-    windowInnerWidth = window.innerWidth;
-    window.addEventListener('resize', () => {
-      if (windowInnerWidth > 0 && window.innerWidth !== windowInnerWidth) {
-        windowInnerWidth = window.innerWidth;
-        setToolbars();
-      }
-    });
-  }, []);
-
-  const renderElements = elements.map((e, i) => <React.Fragment key={i}>{e}</React.Fragment>);
-  const label = lang === 'da' ? 'Muligheder' : 'Options';
-
-  return (
-    <div className="toolbar">
-      <div className="toolbar__items">
-        {renderElements}
-      </div>
-      <button
-        type="button"
-        className="toolbar__toggle"
-        title={label}
-        aria-haspopup="true"
-      >
-        {label}
-      </button>
-    </div>
-  );
-};
-
-AUToolbarComponent.displayName = 'AUToolbarComponent';
-export default AUToolbarComponent;
+/* eslint-disable react/no-array-index-key */
+/* eslint-env browser */
+import React, { useEffect, FC } from 'react';
+import { setToolbars, setToolbarToggle } from '@aarhus-university/au-designsystem-delphinus/source/js/components/toolbar';
+
+let windowInnerWidth = 0;
+
+const AUToolbarComponent: FC<AUToolbarComponentProps> = ({
+  lang,
+  elements,
+}: AUToolbarComponentProps) => {
+  useEffect(() => {
+    setToolbars();
+    const cleanUp: CleanUpPair[] = setToolbarToggle();
+    windowInnerWidth = window.innerWidth;
+    window.addEventListener('resize', () => {
+      if (windowInnerWidth > 0 && window.innerWidth !== windowInnerWidth) {
+        windowInnerWidth = window.innerWidth;
+        setToolbars();
+      }
+    });
+
+    // Runs on unmounting
+    return () => {
+      cleanUp.forEach((pair: CleanUpPair) => {
+        pair.element.removeEventListener('click', pair.clickEvent);
+      });
+    };
+  }, []);
+
+  const renderElements = elements.map((e, i) => <React.Fragment key={i}>{e}</React.Fragment>);
+  const label = lang === 'da' ? 'Muligheder' : 'Options';
+
+  return (
+    <div className="toolbar">
+      <div className="toolbar__items">
+        {renderElements}
+      </div>
+      <button
+        type="button"
+        className="toolbar__toggle"
+        title={label}
+        aria-haspopup="true"
+      >
+        {label}
+      </button>
+    </div>
+  );
+};
+
+AUToolbarComponent.displayName = 'AUToolbarComponent';
+export default AUToolbarComponent;

package/src/components/profile/AUProfileActions.js

@@ -1,128 +1,128 @@
-/* eslint-disable import/prefer-default-export */
-export const GET_BASIC_USER = 'GET_BASIC_USER';
-export const SAVING_USER = 'SAVING_USER';
-export const PATCH_NAME = 'PATCH_NAME';
-export const PATCH_MAIL = 'PATCH_MAIL';
-export const PATCH_MOBILE = 'PATCH_MOBILE';
-export const PATCH_LANGUAGE = 'PATCH_LANGUAGE';
-export const PATCH_NEXTOFKIN = 'PATCH_NEXTOFKIN';
-export const DISMISS_MESSAGES = 'DISMISS_MESSAGES';
-export const SET_SAVED = 'SET_SAVED';
-export const GET_WORKMAIL_DOMAIN = 'GET_WORKMAIL_DOMAIN';
-
-export const getActionCreators = () => {
-  const actionCreators = {
-    getBasicUser: (callback) => async (dispatch) => { // Tror simpelthen ikke det her er i brug...
-      callback((ok, status, json) => {
-        const result = {};
-        result[ok ? 'user' : 'error'] = json;
-        result.status = status;
-        dispatch({
-          type: GET_BASIC_USER,
-          result,
-        });
-      });
-    },
-    getWorkMailDomain: () => async (dispatch) => {
-      const url = '/v1/person/getworkmaildomain';
-      const response = await fetch(url);
-      const json = await response.json();
-      const result = {};
-      result[response.ok ? 'user' : 'error'] = response.ok ? {
-        workMailDomain: json
-      } : json;
-      result.status = response.status;
-      dispatch({
-        type: GET_WORKMAIL_DOMAIN,
-        result,
-      });
-    },
-    clear: () => (dispatch) => {
-      dispatch({
-        type: SET_SAVED,
-      });
-    },
-    dismissMessages: () => (dispatch) => {
-      dispatch({
-        type: DISMISS_MESSAGES,
-      });
-    },
-    patchName: (data, callback) => async (dispatch) => {
-      dispatch({
-        type: SAVING_USER,
-      });
-
-      callback(data, (ok, status, json) => {
-        const result = {};
-        result[ok ? 'user' : 'error'] = json;
-        result.status = status;
-        dispatch({
-          type: PATCH_NAME,
-          result,
-        });
-      });
-    },
-    patchMail: (data, callback) => async (dispatch) => {
-      dispatch({
-        type: SAVING_USER,
-      });
-
-      callback(data, (ok, status, json) => {
-        const result = {};
-        result[ok ? 'user' : 'error'] = json;
-        result.status = status;
-        dispatch({
-          type: PATCH_MAIL,
-          result,
-        });
-      });
-    },
-    patchMobile: (data, callback) => async (dispatch) => {
-      dispatch({
-        type: SAVING_USER,
-      });
-
-      callback(data, (ok, status, json) => {
-        const result = {};
-        result[ok ? 'user' : 'error'] = json;
-        result.status = status;
-        dispatch({
-          type: PATCH_MOBILE,
-          result,
-        });
-      });
-    },
-    patchLanguage: (data, callback) => async (dispatch) => {
-      dispatch({
-        type: SAVING_USER,
-      });
-
-      callback(data, (ok, status, json) => {
-        const result = {};
-        result[ok ? 'user' : 'error'] = json;
-        result.status = status;
-        dispatch({
-          type: PATCH_LANGUAGE,
-          result,
-        });
-      });
-    },
-    patchNextOfKin: (data, callback) => async (dispatch) => {
-      dispatch({
-        type: SAVING_USER,
-      });
-
-      callback(data, (ok, status, json) => {
-        const result = {};
-        result[ok ? 'user' : 'error'] = json;
-        result.status = status;
-        dispatch({
-          type: PATCH_NEXTOFKIN,
-          result,
-        });
-      });
-    },
-  };
-
-  return actionCreators;
-};
+/* eslint-disable import/prefer-default-export */
+export const GET_BASIC_USER = 'GET_BASIC_USER';
+export const SAVING_USER = 'SAVING_USER';
+export const PATCH_NAME = 'PATCH_NAME';
+export const PATCH_MAIL = 'PATCH_MAIL';
+export const PATCH_MOBILE = 'PATCH_MOBILE';
+export const PATCH_LANGUAGE = 'PATCH_LANGUAGE';
+export const PATCH_NEXTOFKIN = 'PATCH_NEXTOFKIN';
+export const DISMISS_MESSAGES = 'DISMISS_MESSAGES';
+export const SET_SAVED = 'SET_SAVED';
+export const GET_WORKMAIL_DOMAIN = 'GET_WORKMAIL_DOMAIN';
+
+export const getActionCreators = () => {
+  const actionCreators = {
+    getBasicUser: (callback) => async (dispatch) => { // Tror simpelthen ikke det her er i brug...
+      callback((ok, status, json) => {
+        const result = {};
+        result[ok ? 'user' : 'error'] = json;
+        result.status = status;
+        dispatch({
+          type: GET_BASIC_USER,
+          result,
+        });
+      });
+    },
+    getWorkMailDomain: () => async (dispatch) => {
+      const url = '/v1/person/getworkmaildomain';
+      const response = await fetch(url);
+      const json = await response.json();
+      const result = {};
+      result[response.ok ? 'user' : 'error'] = response.ok ? {
+        workMailDomain: json
+      } : json;
+      result.status = response.status;
+      dispatch({
+        type: GET_WORKMAIL_DOMAIN,
+        result,
+      });
+    },
+    clear: () => (dispatch) => {
+      dispatch({
+        type: SET_SAVED,
+      });
+    },
+    dismissMessages: () => (dispatch) => {
+      dispatch({
+        type: DISMISS_MESSAGES,
+      });
+    },
+    patchName: (data, callback) => async (dispatch) => {
+      dispatch({
+        type: SAVING_USER,
+      });
+
+      callback(data, (ok, status, json) => {
+        const result = {};
+        result[ok ? 'user' : 'error'] = json;
+        result.status = status;
+        dispatch({
+          type: PATCH_NAME,
+          result,
+        });
+      });
+    },
+    patchMail: (data, callback) => async (dispatch) => {
+      dispatch({
+        type: SAVING_USER,
+      });
+
+      callback(data, (ok, status, json) => {
+        const result = {};
+        result[ok ? 'user' : 'error'] = json;
+        result.status = status;
+        dispatch({
+          type: PATCH_MAIL,
+          result,
+        });
+      });
+    },
+    patchMobile: (data, callback) => async (dispatch) => {
+      dispatch({
+        type: SAVING_USER,
+      });
+
+      callback(data, (ok, status, json) => {
+        const result = {};
+        result[ok ? 'user' : 'error'] = json;
+        result.status = status;
+        dispatch({
+          type: PATCH_MOBILE,
+          result,
+        });
+      });
+    },
+    patchLanguage: (data, callback) => async (dispatch) => {
+      dispatch({
+        type: SAVING_USER,
+      });
+
+      callback(data, (ok, status, json) => {
+        const result = {};
+        result[ok ? 'user' : 'error'] = json;
+        result.status = status;
+        dispatch({
+          type: PATCH_LANGUAGE,
+          result,
+        });
+      });
+    },
+    patchNextOfKin: (data, callback) => async (dispatch) => {
+      dispatch({
+        type: SAVING_USER,
+      });
+
+      callback(data, (ok, status, json) => {
+        const result = {};
+        result[ok ? 'user' : 'error'] = json;
+        result.status = status;
+        dispatch({
+          type: PATCH_NEXTOFKIN,
+          result,
+        });
+      });
+    },
+  };
+
+  return actionCreators;
+};