@aarhus-university/au-lib-react-components 9.11.17 → 9.12.0

package/src/components/delphinus/AUTabbedContentComponent.js

@@ -1,150 +1,150 @@
-/* eslint-env browser */
-/* eslint-disable max-len */
-import React, { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import {
-  BrowserRouter as Router,
-  Switch,
-  Route,
-  NavLink,
-  useLocation,
-} from 'react-router-dom';
-import { setTabbedContent, isBelowViewportLimit, destroyTabs } from '@aarhus-university/au-designsystem-delphinus/source/js/components/tabs';
-
-const Routes = ({ onRouteChange, content }) => {
-  const location = useLocation();
-  useEffect(() => {
-    onRouteChange(location);
-  }, [location]);
-
-  return (
-    <Switch>
-      {content}
-    </Switch>
-  );
-};
-
-Routes.displayName = 'Routes';
-Routes.propTypes = {
-  onRouteChange: PropTypes.func.isRequired,
-  content: PropTypes.element.isRequired,
-};
-
-let windowInnerWidth = 0;
-let tabbedObject = null;
-
-const AUTabbedContentComponent = ({
-  tabKey,
-  tabs,
-  tabContent,
-  children,
-  focus,
-  initial,
-  lang,
-  callback,
-  withRouter,
-  classNames,
-}) => {
-  const tabsElement = useRef();
-
-  const setTabs = () => {
-    if (isBelowViewportLimit(tabbedObject.domElement.classList)) {
-      if (!tabbedObject.rendered) {
-        setTabbedContent(tabKey, tabbedObject.domElement, initial, focus, callback);
-        tabbedObject.rendered = true;
-      }
-    } else if (tabbedObject.rendered) {
-      destroyTabs(tabbedObject.domElement);
-      tabbedObject.rendered = false;
-    }
-  };
-
-  useEffect(() => {
-    if (!withRouter) {
-      tabbedObject = {
-        domElement: tabsElement.current,
-        rendered: false,
-      };
-      setTabs();
-      windowInnerWidth = window.innerWidth;
-      window.addEventListener('resize', () => {
-        if (windowInnerWidth > 0 && window.innerWidth !== windowInnerWidth) {
-          windowInnerWidth = window.innerWidth;
-          setTabs();
-        }
-      });
-    }
-  }, []);
-
-  if (withRouter) {
-    const renderRouteTabs = tabs.map((tab) => (
-      <NavLink
-        key={tab.href}
-        to={tab.href}
-        className="nav__item"
-        activeClassName="nav__item--active"
-        dangerouslySetInnerHTML={{ __html: tab.text }}
-      />
-    ));
-    const renderContent = tabContent.map((content, index) => <Route key={tabs[index].href} exact path={tabs[index].href}>{content}</Route>);
-
-    return (
-      <Router>
-        <div ref={tabsElement} className={classNames}>
-          <div className="nav nav--has-active-item">
-            <div className="nav__items">
-              {renderRouteTabs}
-            </div>
-          </div>
-          <Routes content={renderContent} onRouteChange={() => callback()} />
-        </div>
-      </Router>
-    );
-  }
-
-  // eslint-disable-next-line jsx-a11y/control-has-associated-label
-  const renderTabs = tabs.map((tab) => <a key={tab.href} href={tab.href} className="nav__item" data-gtm={tab.dataGtm} dangerouslySetInnerHTML={{ __html: tab.text }} />);
-
-  return (
-    <div ref={tabsElement} className={classNames}>
-      <div className="nav nav--has-active-item">
-        <div className="nav__items">
-          {renderTabs}
-        </div>
-        <button type="button" className="nav__toggle">{lang === 'da' ? 'Mere' : 'More'}</button>
-      </div>
-      {children}
-    </div>
-  );
-};
-
-AUTabbedContentComponent.defaultProps = {
-  tabKey: 0,
-  children: null,
-  tabContent: null,
-  focus: true,
-  initial: 0,
-  lang: 'da',
-  callback: () => { },
-  withRouter: false,
-  classNames: 'tabbed-content',
-};
-
-AUTabbedContentComponent.propTypes = {
-  tabKey: PropTypes.number,
-  tabs: PropTypes.arrayOf(PropTypes.shape({
-    text: PropTypes.string.isRequired,
-    href: PropTypes.string.isRequired,
-  })).isRequired,
-  tabContent: PropTypes.arrayOf(PropTypes.element),
-  children: PropTypes.element,
-  focus: PropTypes.bool,
-  initial: PropTypes.number,
-  lang: PropTypes.string,
-  callback: PropTypes.func,
-  withRouter: PropTypes.bool,
-  classNames: PropTypes.string,
-};
-
-AUTabbedContentComponent.displayName = 'AUTabbedContentComponent';
-export default AUTabbedContentComponent;
+/* eslint-env browser */
+/* eslint-disable max-len */
+import React, { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  NavLink,
+  useLocation,
+} from 'react-router-dom';
+import { setTabbedContent, isBelowViewportLimit, destroyTabs } from '@aarhus-university/au-designsystem-delphinus/source/js/components/tabs';
+
+const Routes = ({ onRouteChange, content }) => {
+  const location = useLocation();
+  useEffect(() => {
+    onRouteChange(location);
+  }, [location]);
+
+  return (
+    <Switch>
+      {content}
+    </Switch>
+  );
+};
+
+Routes.displayName = 'Routes';
+Routes.propTypes = {
+  onRouteChange: PropTypes.func.isRequired,
+  content: PropTypes.element.isRequired,
+};
+
+let windowInnerWidth = 0;
+let tabbedObject = null;
+
+const AUTabbedContentComponent = ({
+  tabKey,
+  tabs,
+  tabContent,
+  children,
+  focus,
+  initial,
+  lang,
+  callback,
+  withRouter,
+  classNames,
+}) => {
+  const tabsElement = useRef();
+
+  const setTabs = () => {
+    if (isBelowViewportLimit(tabbedObject.domElement.classList)) {
+      if (!tabbedObject.rendered) {
+        setTabbedContent(tabKey, tabbedObject.domElement, initial, focus, callback);
+        tabbedObject.rendered = true;
+      }
+    } else if (tabbedObject.rendered) {
+      destroyTabs(tabbedObject.domElement);
+      tabbedObject.rendered = false;
+    }
+  };
+
+  useEffect(() => {
+    if (!withRouter) {
+      tabbedObject = {
+        domElement: tabsElement.current,
+        rendered: false,
+      };
+      setTabs();
+      windowInnerWidth = window.innerWidth;
+      window.addEventListener('resize', () => {
+        if (windowInnerWidth > 0 && window.innerWidth !== windowInnerWidth) {
+          windowInnerWidth = window.innerWidth;
+          setTabs();
+        }
+      });
+    }
+  }, []);
+
+  if (withRouter) {
+    const renderRouteTabs = tabs.map((tab) => (
+      <NavLink
+        key={tab.href}
+        to={tab.href}
+        className="nav__item"
+        activeClassName="nav__item--active"
+        dangerouslySetInnerHTML={{ __html: tab.text }}
+      />
+    ));
+    const renderContent = tabContent.map((content, index) => <Route key={tabs[index].href} exact path={tabs[index].href}>{content}</Route>);
+
+    return (
+      <Router>
+        <div ref={tabsElement} className={classNames}>
+          <div className="nav nav--has-active-item">
+            <div className="nav__items">
+              {renderRouteTabs}
+            </div>
+          </div>
+          <Routes content={renderContent} onRouteChange={() => callback()} />
+        </div>
+      </Router>
+    );
+  }
+
+  // eslint-disable-next-line jsx-a11y/control-has-associated-label
+  const renderTabs = tabs.map((tab) => <a key={tab.href} href={tab.href} className="nav__item" data-gtm={tab.dataGtm} dangerouslySetInnerHTML={{ __html: tab.text }} />);
+
+  return (
+    <div ref={tabsElement} className={classNames}>
+      <div className="nav nav--has-active-item">
+        <div className="nav__items">
+          {renderTabs}
+        </div>
+        <button type="button" className="nav__toggle">{lang === 'da' ? 'Mere' : 'More'}</button>
+      </div>
+      {children}
+    </div>
+  );
+};
+
+AUTabbedContentComponent.defaultProps = {
+  tabKey: 0,
+  children: null,
+  tabContent: null,
+  focus: true,
+  initial: 0,
+  lang: 'da',
+  callback: () => { },
+  withRouter: false,
+  classNames: 'tabbed-content',
+};
+
+AUTabbedContentComponent.propTypes = {
+  tabKey: PropTypes.number,
+  tabs: PropTypes.arrayOf(PropTypes.shape({
+    text: PropTypes.string.isRequired,
+    href: PropTypes.string.isRequired,
+  })).isRequired,
+  tabContent: PropTypes.arrayOf(PropTypes.element),
+  children: PropTypes.element,
+  focus: PropTypes.bool,
+  initial: PropTypes.number,
+  lang: PropTypes.string,
+  callback: PropTypes.func,
+  withRouter: PropTypes.bool,
+  classNames: PropTypes.string,
+};
+
+AUTabbedContentComponent.displayName = 'AUTabbedContentComponent';
+export default AUTabbedContentComponent;

package/src/components/delphinus/AUTableComponent.js

@@ -1,28 +1,28 @@
-import React, { useLayoutEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { setResponsiveTable } from '@aarhus-university/au-designsystem-delphinus/source/js/components/table';
-
-
-const AUTableComponent = ({ children, className }) => {
-  const tableRef = useRef(null);
-  useLayoutEffect(() => {
-    const element = tableRef.current;
-    if (element) {
-      setResponsiveTable(element);
-    }
-  }, []);
-
-  return (
-    <table ref={tableRef} className={className}>
-      {children}
-    </table>
-  );
-};
-
-AUTableComponent.propTypes = {
-  className: PropTypes.string.isRequired,
-  children: PropTypes.element.isRequired,
-};
-
-AUTableComponent.displayName = 'AUTableComponent';
-export default AUTableComponent;
+import React, { useLayoutEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { setResponsiveTable } from '@aarhus-university/au-designsystem-delphinus/source/js/components/table';
+
+
+const AUTableComponent = ({ children, className }) => {
+  const tableRef = useRef(null);
+  useLayoutEffect(() => {
+    const element = tableRef.current;
+    if (element) {
+      setResponsiveTable(element);
+    }
+  }, []);
+
+  return (
+    <table ref={tableRef} className={className}>
+      {children}
+    </table>
+  );
+};
+
+AUTableComponent.propTypes = {
+  className: PropTypes.string.isRequired,
+  children: PropTypes.element.isRequired,
+};
+
+AUTableComponent.displayName = 'AUTableComponent';
+export default AUTableComponent;

package/src/components/delphinus/AUToastComponent.js

@@ -1,91 +1,91 @@
-/* eslint-env browser */
-import React, { useEffect, useLayoutEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-
-const dismissTimeout = 5000;
-let timeoutId = null;
-const AUToastComponent = ({ message: pMessage, dismiss, onOpen }) => {
-  const { type, message } = pMessage;
-  const toastRef = useRef(null);
-  const persistent = type !== 'confirm';
-
-  const moveOut = (element) => {
-    const moveOutClass = 'toast-notification--move-out';
-    element.classList.add(moveOutClass);
-    const moveOutElement = document.querySelector(`.${moveOutClass}`);
-    if (moveOutElement) {
-      moveOutElement.addEventListener('animationend', () => {
-        dismiss();
-      });
-    }
-  };
-
-  useEffect(() => {
-    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 = `theme--normal toast-notification toast-notification--${type}`;
-  if (persistent) {
-    className = `${className} toast-notification--persistent`;
-  }
-  return (
-    <div ref={toastRef} className={className}>
-      <div className="toast-notification__content">
-        <p dangerouslySetInnerHTML={{ __html: message }} />
-      </div>
-      {
-        persistent && (
-          <button
-            type="button"
-            className="button"
-            onClick={() => {
-              moveOut(toastRef.current);
-            }}
-          >
-            OK
-          </button>
-        )
-      }
-    </div>
-  );
-};
-
-AUToastComponent.defaultProps = {
-  dismiss: () => {},
-  onOpen: () => {},
-};
-
-AUToastComponent.propTypes = {
-  message: PropTypes.shape({
-    type: PropTypes.string.isRequired,
-    message: PropTypes.string.isRequired,
-  }).isRequired,
-  dismiss: PropTypes.func,
-  onOpen: PropTypes.func,
-};
-
-AUToastComponent.displayName = 'AUToastComponent';
-export default AUToastComponent;
+/* eslint-env browser */
+import React, { useEffect, useLayoutEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+
+const dismissTimeout = 5000;
+let timeoutId = null;
+const AUToastComponent = ({ message: pMessage, dismiss, onOpen }) => {
+  const { type, message } = pMessage;
+  const toastRef = useRef(null);
+  const persistent = type !== 'confirm';
+
+  const moveOut = (element) => {
+    const moveOutClass = 'toast-notification--move-out';
+    element.classList.add(moveOutClass);
+    const moveOutElement = document.querySelector(`.${moveOutClass}`);
+    if (moveOutElement) {
+      moveOutElement.addEventListener('animationend', () => {
+        dismiss();
+      });
+    }
+  };
+
+  useEffect(() => {
+    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 = `theme--normal toast-notification toast-notification--${type}`;
+  if (persistent) {
+    className = `${className} toast-notification--persistent`;
+  }
+  return (
+    <div ref={toastRef} className={className}>
+      <div className="toast-notification__content">
+        <p dangerouslySetInnerHTML={{ __html: message }} />
+      </div>
+      {
+        persistent && (
+          <button
+            type="button"
+            className="button"
+            onClick={() => {
+              moveOut(toastRef.current);
+            }}
+          >
+            OK
+          </button>
+        )
+      }
+    </div>
+  );
+};
+
+AUToastComponent.defaultProps = {
+  dismiss: () => {},
+  onOpen: () => {},
+};
+
+AUToastComponent.propTypes = {
+  message: PropTypes.shape({
+    type: PropTypes.string.isRequired,
+    message: PropTypes.string.isRequired,
+  }).isRequired,
+  dismiss: PropTypes.func,
+  onOpen: PropTypes.func,
+};
+
+AUToastComponent.displayName = 'AUToastComponent';
+export default AUToastComponent;

package/src/components/delphinus/AUToolbarComponent.js

@@ -1,48 +1,48 @@
-/* eslint-disable react/no-array-index-key */
-/* eslint-env browser */
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { setToolbars, setToolbarToggle } from '@aarhus-university/au-designsystem-delphinus/source/js/components/toolbar';
-
-let windowInnerWidth = 0;
-const AUToolbarComponent = ({ lang, elements }) => {
-  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';
-
-AUToolbarComponent.propTypes = {
-  lang: PropTypes.string.isRequired,
-  elements: PropTypes.arrayOf(PropTypes.element).isRequired,
-};
-
-export default AUToolbarComponent;
+/* eslint-disable react/no-array-index-key */
+/* eslint-env browser */
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { setToolbars, setToolbarToggle } from '@aarhus-university/au-designsystem-delphinus/source/js/components/toolbar';
+
+let windowInnerWidth = 0;
+const AUToolbarComponent = ({ lang, elements }) => {
+  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';
+
+AUToolbarComponent.propTypes = {
+  lang: PropTypes.string.isRequired,
+  elements: PropTypes.arrayOf(PropTypes.element).isRequired,
+};
+
+export default AUToolbarComponent;