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

package/src/components/AUSpinnerComponent.tsx

@@ -1,91 +1,91 @@
-/* eslint-disable react/static-property-placement */
-/* eslint-env browser */
-import React from 'react';
-import { isElementInViewport } from '../lib/helpers';
-
-type AUSpinnerComponentState = {
-  loading: boolean,
-}
-
-class AUSpinnerComponent extends React.Component<AUSpinnerComponentProps, AUSpinnerComponentState> {
-  static displayName = 'AUSpinnerComponent';
-
-  static defaultProps = {
-    domID: 'au-spinner-component',
-    visible: false,
-    className: '',
-    height: 'auto',
-    init: '',
-  };
-
-  constructor(props: AUSpinnerComponentProps) {
-    super(props);
-
-    this.state = {
-      loading: true,
-    };
-
-    this.lazyLoad = this.lazyLoad.bind(this);
-  }
-
-  componentDidMount() {
-    this.lazyLoad();
-    window.addEventListener('scroll', () => {
-      this.lazyLoad();
-    });
-  }
-
-  componentDidUpdate() {
-    this.lazyLoad();
-  }
-
-  lazyLoad() {
-    const {
-      loadingCondition,
-      loaded,
-      visible,
-      domID,
-      onLoad,
-    } = this.props;
-    const { loading } = this.state;
-
-    const element = document.getElementById(domID || '');
-    if (element
-      && !loaded
-      && loading
-      && loadingCondition
-      && (visible || isElementInViewport(element))) {
-      this.setState({
-        loading: false,
-      }, () => {
-        onLoad();
-      });
-    }
-  }
-
-  render() {
-    const {
-      loaded, domID, children, init, className, height,
-    } = this.props;
-
-    if (!loaded) {
-      if (init === 'table') {
-        return (
-          <div id={domID} className={`processing-state processing-state--init-table ${className}`} style={{ minHeight: height }} />
-        );
-      }
-      if (init === 'box') {
-        return (
-          <div id={domID} className={`processing-state processing-state--init-box ${className}`} style={{ minHeight: height }} />
-        );
-      }
-      return (
-        <div id={domID} className={`processing-state ${className}`} style={{ minHeight: height }} />
-      );
-    }
-
-    return children;
-  }
-}
-
-export default AUSpinnerComponent;
+/* eslint-disable react/static-property-placement */
+/* eslint-env browser */
+import React from 'react';
+import { isElementInViewport } from '../lib/helpers';
+
+type AUSpinnerComponentState = {
+  loading: boolean,
+}
+
+class AUSpinnerComponent extends React.Component<AUSpinnerComponentProps, AUSpinnerComponentState> {
+  static displayName = 'AUSpinnerComponent';
+
+  static defaultProps = {
+    domID: 'au-spinner-component',
+    visible: false,
+    className: '',
+    height: 'auto',
+    init: '',
+  };
+
+  constructor(props: AUSpinnerComponentProps) {
+    super(props);
+
+    this.state = {
+      loading: true,
+    };
+
+    this.lazyLoad = this.lazyLoad.bind(this);
+  }
+
+  componentDidMount() {
+    this.lazyLoad();
+    window.addEventListener('scroll', () => {
+      this.lazyLoad();
+    });
+  }
+
+  componentDidUpdate() {
+    this.lazyLoad();
+  }
+
+  lazyLoad() {
+    const {
+      loadingCondition,
+      loaded,
+      visible,
+      domID,
+      onLoad,
+    } = this.props;
+    const { loading } = this.state;
+
+    const element = document.getElementById(domID || '');
+    if (element
+      && !loaded
+      && loading
+      && loadingCondition
+      && (visible || isElementInViewport(element))) {
+      this.setState({
+        loading: false,
+      }, () => {
+        onLoad();
+      });
+    }
+  }
+
+  render() {
+    const {
+      loaded, domID, children, init, className, height,
+    } = this.props;
+
+    if (!loaded) {
+      if (init === 'table') {
+        return (
+          <div id={domID} className={`processing-state processing-state--init-table ${className}`} style={{ minHeight: height }} />
+        );
+      }
+      if (init === 'box') {
+        return (
+          <div id={domID} className={`processing-state processing-state--init-box ${className}`} style={{ minHeight: height }} />
+        );
+      }
+      return (
+        <div id={domID} className={`processing-state ${className}`} style={{ minHeight: height }} />
+      );
+    }
+
+    return children;
+  }
+}
+
+export default AUSpinnerComponent;

package/src/components/AUSubNavComponent.tsx

@@ -1,38 +1,38 @@
-/* eslint-env browser */
-import React, { useEffect, useRef, FC } from 'react';
-import { setSubNavToggle } from '@aarhus-university/au-designsystem-delphinus/source/js/components/nav';
-
-const AUSubNavComponent: FC<AUSubNavComponentProps> = ({
-  children,
-  className,
-  dataIcon,
-  text,
-  ariaLabel,
-  id,
-}: AUSubNavComponentProps) => {
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  useEffect(() => {
-    const subNavBtns = document.querySelectorAll('.sub-nav > button.nav__item');
-    setSubNavToggle(subNavBtns, buttonRef.current as Element);
-  }, []);
-
-  return (
-    <div className="sub-nav">
-      <button
-        ref={buttonRef}
-        id={id}
-        type="button"
-        className={className}
-        data-icon={dataIcon}
-        aria-label={ariaLabel}
-        aria-expanded={false}
-      >
-        {text}
-      </button>
-      {children}
-    </div>
-  );
-};
-
-AUSubNavComponent.displayName = 'AUSubNavComponent';
-export default AUSubNavComponent;
+/* eslint-env browser */
+import React, { useEffect, useRef, FC } from 'react';
+import { setSubNavToggle } from '@aarhus-university/au-designsystem-delphinus/source/js/components/nav';
+
+const AUSubNavComponent: FC<AUSubNavComponentProps> = ({
+  children,
+  className,
+  dataIcon,
+  text,
+  ariaLabel,
+  id,
+}: AUSubNavComponentProps) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  useEffect(() => {
+    const subNavBtns = document.querySelectorAll('.sub-nav > button.nav__item');
+    setSubNavToggle(subNavBtns, buttonRef.current as Element);
+  }, []);
+
+  return (
+    <div className="sub-nav">
+      <button
+        ref={buttonRef}
+        id={id}
+        type="button"
+        className={className}
+        data-icon={dataIcon}
+        aria-label={ariaLabel}
+        aria-expanded={false}
+      >
+        {text}
+      </button>
+      {children}
+    </div>
+  );
+};
+
+AUSubNavComponent.displayName = 'AUSubNavComponent';
+export default AUSubNavComponent;

package/src/components/AUSubmitButtonContainerComponent.tsx

@@ -1,31 +1,31 @@
-import React, { FC } from 'react';
-import { profileLabels } from '../lib/i18n';
-
-const AUSubmitButtonContainerComponent: FC<AUSubmitButtonContainerComponentProps> = ({
-  lang,
-  disabled,
-  onSubmit,
-  onCancel,
-}: AUSubmitButtonContainerComponentProps) => (
-  <div className="submit button-container">
-    <button
-      type="submit"
-      className={`button${disabled ? ' button--processing' : ''}`}
-      disabled={disabled}
-      onClick={onSubmit}
-    >
-      {profileLabels[lang].save}
-    </button>
-    <button
-      type="button"
-      className="button button--text"
-      disabled={disabled}
-      onClick={onCancel}
-    >
-      {profileLabels[lang].cancel}
-    </button>
-  </div>
-);
-
-AUSubmitButtonContainerComponent.displayName = 'AUSubmitButtonContainerComponent';
-export default AUSubmitButtonContainerComponent;
+import React, { FC } from 'react';
+import { profileLabels } from '../lib/i18n';
+
+const AUSubmitButtonContainerComponent: FC<AUSubmitButtonContainerComponentProps> = ({
+  lang,
+  disabled,
+  onSubmit,
+  onCancel,
+}: AUSubmitButtonContainerComponentProps) => (
+  <div className="submit button-container">
+    <button
+      type="submit"
+      className={`button${disabled ? ' button--processing' : ''}`}
+      disabled={disabled}
+      onClick={onSubmit}
+    >
+      {profileLabels[lang].save}
+    </button>
+    <button
+      type="button"
+      className="button button--text"
+      disabled={disabled}
+      onClick={onCancel}
+    >
+      {profileLabels[lang].cancel}
+    </button>
+  </div>
+);
+
+AUSubmitButtonContainerComponent.displayName = 'AUSubmitButtonContainerComponent';
+export default AUSubmitButtonContainerComponent;

package/src/components/AUTabbedContentComponent.tsx

@@ -1,145 +1,83 @@
-/* eslint-env browser */
-/* eslint-disable max-len */
-import React, { useEffect, useRef, FC } from 'react';
-import {
-  BrowserRouter as Router,
-  Routes,
-  Route,
-  NavLink,
-  useLocation,
-} from 'react-router-dom';
-import { setTabbedContent, isBelowViewportLimit, destroyTabs } from '@aarhus-university/au-designsystem-delphinus/source/js/components/tabs';
-
-const TabRoutes: FC<TabRoutesProps> = ({ onRouteChange, content }: TabRoutesProps) => {
-  const location = useLocation();
-  useEffect(() => {
-    onRouteChange(location);
-  }, [location]);
-
-  return (
-    <Routes>
-      {content}
-    </Routes>
-  );
-};
-
-TabRoutes.displayName = 'Routes';
-
-let windowInnerWidth = 0;
-let tabbedObject: ITabbedObject | null = null;
-
-const AUTabbedContentComponent: FC<AUTabbedContentComponentProps> = ({
-  tabKey,
-  tabs,
-  tabContent,
-  children,
-  focus,
-  initial,
-  lang,
-  callback,
-  withRouter,
-  classNames,
-}: AUTabbedContentComponentProps) => {
-  const tabsElement = useRef<HTMLDivElement>(null);
-
-  const setTabs = () => {
-    if (tabbedObject != null) {
-      if (isBelowViewportLimit(tabbedObject.domElement.classList)) {
-        if (!tabbedObject.rendered) {
-          setTabbedContent(tabKey as number, 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 as HTMLElement,
-        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={({ isActive }) => (isActive ? 'nav__item nav__item--active' : 'nav__item')}
-        dangerouslySetInnerHTML={{ __html: tab.text }}
-      />
-    ));
-    const renderContent = (tabContent || []).map((content, index: number) => (
-      <Route
-        key={tabs[index].href}
-        path={tabs[index].href}
-      >
-        {content?.content}
-      </Route>
-    ));
-
-    return (
-      <Router>
-        <div ref={tabsElement} className={classNames}>
-          <div className="nav nav--has-active-item">
-            <div className="nav__items">
-              {renderRouteTabs}
-            </div>
-          </div>
-          <TabRoutes
-            content={renderContent}
-            onRouteChange={() => {
-              if (typeof callback === 'function') {
-                callback();
-              }
-            }}
-          />
-        </div>
-      </Router>
-    );
-  }
-
-  // eslint-disable-next-line jsx-a11y/control-has-associated-label
-  const renderTabs = tabs.map((tab: ITabbedTab) => <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',
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  callback: () => { },
-  withRouter: false,
-  classNames: 'tabbed-content',
-};
-
-AUTabbedContentComponent.displayName = 'AUTabbedContentComponent';
-export default AUTabbedContentComponent;
+/* eslint-env browser */
+/* eslint-disable max-len */
+import React, { useEffect, useRef, FC } from 'react';
+import { setTabbedContent, isBelowViewportLimit, destroyTabs } from '@aarhus-university/au-designsystem-delphinus/source/js/components/tabs';
+
+let windowInnerWidth = 0;
+let tabbedObject: ITabbedObject | null = null;
+
+const AUTabbedContentComponent: FC<AUTabbedContentComponentProps> = ({
+  tabKey,
+  tabs,
+  children,
+  focus,
+  initial,
+  lang,
+  callback,
+  withRouter,
+  classNames,
+}: AUTabbedContentComponentProps) => {
+  const tabsElement = useRef<HTMLDivElement>(null);
+
+  const setTabs = () => {
+    if (tabbedObject != null) {
+      if (isBelowViewportLimit(tabbedObject.domElement.classList)) {
+        if (!tabbedObject.rendered) {
+          setTabbedContent(tabKey as number, 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 as HTMLElement,
+        rendered: false,
+      };
+      setTabs();
+      windowInnerWidth = window.innerWidth;
+      window.addEventListener('resize', () => {
+        if (windowInnerWidth > 0 && window.innerWidth !== windowInnerWidth) {
+          windowInnerWidth = window.innerWidth;
+          setTabs();
+        }
+      });
+    }
+  }, []);
+
+  // eslint-disable-next-line jsx-a11y/control-has-associated-label
+  const renderTabs = tabs.map((tab: ITabbedTab) => <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',
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  callback: () => { },
+  withRouter: false,
+  classNames: 'tabbed-content',
+};
+
+AUTabbedContentComponent.displayName = 'AUTabbedContentComponent';
+export default AUTabbedContentComponent;

package/src/components/AUTableComponent.tsx

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