@aarhus-university/au-lib-react-components 9.11.8 → 9.11.12

package/src/components/delphinus/AUModalComponent.js

@@ -1,88 +1,89 @@
-/* eslint-env browser */
-/* eslint jsx-a11y/click-events-have-key-events: 0 */
-/* eslint jsx-a11y/no-noninteractive-element-interactions: 0 */
-/* eslint jsx-a11y/no-static-element-interactions: 0 */
-import React, { useLayoutEffect } from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import { hideModal } from '@aarhus-university/au-designsystem-delphinus/source/js/components/modal-view';
-
-const AUModalComponent = (props) => {
-  const {
-    domId,
-    content,
-    children,
-    onClose,
-    closeButton,
-    lang,
-    sender,
-    className,
-  } = props;
-
-  useLayoutEffect(() => {
-    const modalView = document.getElementById(domId);
-    if (modalView) {
-      const header = modalView.querySelector('.modal-view__header');
-      if (header && !header.getAttribute('id')) {
-        header.setAttribute('id', `${domId}-header`);
-        modalView.setAttribute('aria-labelledby', `${domId}-header`);
-      }
-    }
-  });
-
-  return [
-    ReactDOM.createPortal(
-      <div
-        key={0}
-        id={domId}
-        className={className}
-      >
-        <div className="modal-view__wrapper theme--normal">
-          {
-            closeButton && (
-              <button
-                type="button"
-                className="modal-view__close button button--icon button--icon--hide-label"
-                data-icon=""
-                data-gtm="au-btn-modal-close"
-                onClick={() => {
-                  if (typeof onClose === 'function') {
-                    onClose();
-                  }
-                  hideModal(domId, sender);
-                }}
-              >
-                {lang === 'da' ? 'Luk' : 'Close'}
-              </button>
-            )
-          }
-          {children || content}
-        </div>
-      </div>,
-      document.querySelector('body'),
-    ),
-  ];
-};
-
-AUModalComponent.defaultProps = {
-  children: null,
-  content: null,
-  onClose: null,
-  closeButton: true,
-  lang: 'da',
-  className: 'modal-view',
-};
-
-AUModalComponent.propTypes = {
-  domId: PropTypes.string.isRequired,
-  children: PropTypes.element,
-  content: PropTypes.element,
-  onClose: PropTypes.func,
-  closeButton: PropTypes.bool,
-  lang: PropTypes.string,
-  sender: PropTypes.element.isRequired,
-  className: PropTypes.string,
-};
-
-AUModalComponent.displayName = 'AUModalComponent';
-export default AUModalComponent;
+/* eslint-env browser */
+/* eslint jsx-a11y/click-events-have-key-events: 0 */
+/* eslint jsx-a11y/no-noninteractive-element-interactions: 0 */
+/* eslint jsx-a11y/no-static-element-interactions: 0 */
+import React, { useLayoutEffect } from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import { hideModal } from '@aarhus-university/au-designsystem-delphinus/source/js/components/modal-view';
+
+const AUModalComponent = (props) => {
+  const {
+    domId,
+    content,
+    children,
+    onClose,
+    closeButton,
+    lang,
+    sender,
+    className,
+  } = props;
+
+  useLayoutEffect(() => {
+    const modalView = document.getElementById(domId);
+    if (modalView) {
+      const header = modalView.querySelector('.modal-view__header');
+      if (header && !header.getAttribute('id')) {
+        header.setAttribute('id', `${domId}-header`);
+        modalView.setAttribute('aria-labelledby', `${domId}-header`);
+      }
+    }
+  });
+
+  return [
+    ReactDOM.createPortal(
+      <div
+        key={0}
+        id={domId}
+        className={className}
+      >
+        <div className="modal-view__wrapper theme--normal">
+          {
+            closeButton && (
+              <button
+                type="button"
+                className="modal-view__close button button--icon button--icon--hide-label"
+                data-icon=""
+                data-gtm="au-btn-modal-close"
+                onClick={() => {
+                  if (typeof onClose === 'function') {
+                    onClose();
+                  }
+                  hideModal(domId, sender);
+                }}
+                title={lang === 'da' ? 'Luk' : 'Close'}
+              >
+                {lang === 'da' ? 'Luk' : 'Close'}
+              </button>
+            )
+          }
+          {children || content}
+        </div>
+      </div>,
+      document.querySelector('body'),
+    ),
+  ];
+};
+
+AUModalComponent.defaultProps = {
+  children: null,
+  content: null,
+  onClose: null,
+  closeButton: true,
+  lang: 'da',
+  className: 'modal-view',
+};
+
+AUModalComponent.propTypes = {
+  domId: PropTypes.string.isRequired,
+  children: PropTypes.element,
+  content: PropTypes.element,
+  onClose: PropTypes.func,
+  closeButton: PropTypes.bool,
+  lang: PropTypes.string,
+  sender: PropTypes.element.isRequired,
+  className: PropTypes.string,
+};
+
+AUModalComponent.displayName = 'AUModalComponent';
+export default AUModalComponent;

package/src/components/delphinus/AUSpinnerComponent.js

@@ -1,114 +1,77 @@
-/* eslint-env browser */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { isElementInViewport } from '../../lib/helpers';
-
-class AUSpinnerComponent extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      loading: true,
-      visible: props.visible,
-    };
-
-    this.lazyLoad = this.lazyLoad.bind(this);
-  }
-
-  componentDidMount() {
-    this.lazyLoad();
-    window.addEventListener('scroll', () => {
-      this.lazyLoad();
-    });
-  }
-
-  componentDidUpdate() {
-    this.lazyLoad();
-  }
-
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (nextProps.visible !== prevState.visible) {
-      return {
-        visible: nextProps.visible,
-      };
-    }
-
-    return null;
-  }
-
-  lazyLoad() {
-    const {
-      loadingCondition,
-      loaded,
-      domID,
-      onLoad,
-    } = this.props;
-    const { loading, visible } = this.state;
-
-    const element = document.getElementById(domID);
-    if (!loaded && loading && loadingCondition && (visible || isElementInViewport(element))) {
-      this.setState({
-        loading: false,
-      }, () => {
-        onLoad();
-      });
-    }
-  }
-
-  render() {
-    const {
-      className, content, loaded, domID, children, height, init,
-    } = 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 || content;
-  }
-}
-
-AUSpinnerComponent.defaultProps = {
-  domID: 'au-spinner-component',
-  visible: false,
-  className: '',
-  content: null,
-  children: null,
-  onLoad: () => { },
-  height: 'auto',
-  init: '',
-};
-
-AUSpinnerComponent.propTypes = {
-  /**
-   * Relevant ved mere end en spinner per side
-   */
-  domID: PropTypes.string,
-  /**
-   * Om den er synlig på skærmen ved indlæsning
-   */
-  visible: PropTypes.bool,
-  className: PropTypes.string,
-  content: PropTypes.element,
-  children: PropTypes.element,
-  loaded: PropTypes.bool.isRequired,
-  loadingCondition: PropTypes.bool.isRequired,
-  onLoad: PropTypes.func,
-  height: PropTypes.string,
-  init: PropTypes.string,
-};
-
-AUSpinnerComponent.displayName = 'AUSpinnerComponent';
-export default AUSpinnerComponent;
+/* eslint-env browser */
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { isElementInViewport } from '../../lib/helpers';
+
+const AUSpinnerComponent = ({
+  domID,
+  visible,
+  className,
+  children,
+  loaded,
+  loadingCondition,
+  onLoad,
+  height,
+  init,
+}) => {
+  const [loading, setLoading] = useState(true);
+  const lazyLoad = () => {
+    const element = document.getElementById(domID);
+    if (loading && !loaded && loadingCondition && (visible || isElementInViewport(element))) {
+      onLoad();
+      setLoading(false);
+    }
+  };
+  useEffect(() => {
+    window.addEventListener('scroll', () => {
+      lazyLoad();
+    });
+  }, []);
+
+  useEffect(() => {
+    lazyLoad();
+  });
+
+  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;
+};
+
+AUSpinnerComponent.defaultProps = {
+  domID: 'au-spinner-component',
+  visible: false,
+  className: '',
+  children: null,
+  onLoad: () => { },
+  height: 'auto',
+  init: '',
+};
+
+AUSpinnerComponent.propTypes = {
+  domID: PropTypes.string,
+  visible: PropTypes.bool,
+  className: PropTypes.string,
+  children: PropTypes.element,
+  loaded: PropTypes.bool.isRequired,
+  loadingCondition: PropTypes.bool.isRequired,
+  onLoad: PropTypes.func,
+  height: PropTypes.string,
+  init: PropTypes.string,
+};
+
+AUSpinnerComponent.displayName = 'AUSpinnerComponent';
+export default AUSpinnerComponent;

package/src/components/delphinus/AUSubNavComponent.js

@@ -1,53 +1,53 @@
-/* eslint-env browser */
-import React, { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { setSubNavToggle } from '@aarhus-university/au-designsystem-delphinus/source/js/components/nav';
-
-const AUSubNavComponent = ({
-  children,
-  className,
-  dataIcon,
-  text,
-  ariaLabel,
-  id,
-}) => {
-  const buttonRef = useRef();
-  useEffect(() => {
-    const subNavBtns = document.querySelectorAll('.sub-nav > button.nav__item');
-    setSubNavToggle(subNavBtns, buttonRef.current);
-  }, []);
-
-  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.defaultProps = {
-  ariaLabel: null,
-  id: null,
-};
-
-AUSubNavComponent.propTypes = {
-  children: PropTypes.element.isRequired,
-  className: PropTypes.string.isRequired,
-  dataIcon: PropTypes.string.isRequired,
-  text: PropTypes.string.isRequired,
-  ariaLabel: PropTypes.string,
-  id: PropTypes.string,
-};
-
-AUSubNavComponent.displayName = 'AUSubNavComponent';
-export default AUSubNavComponent;
+/* eslint-env browser */
+import React, { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { setSubNavToggle } from '@aarhus-university/au-designsystem-delphinus/source/js/components/nav';
+
+const AUSubNavComponent = ({
+  children,
+  className,
+  dataIcon,
+  text,
+  ariaLabel,
+  id,
+}) => {
+  const buttonRef = useRef();
+  useEffect(() => {
+    const subNavBtns = document.querySelectorAll('.sub-nav > button.nav__item');
+    setSubNavToggle(subNavBtns, buttonRef.current);
+  }, []);
+
+  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.defaultProps = {
+  ariaLabel: null,
+  id: null,
+};
+
+AUSubNavComponent.propTypes = {
+  children: PropTypes.element.isRequired,
+  className: PropTypes.string.isRequired,
+  dataIcon: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired,
+  ariaLabel: PropTypes.string,
+  id: PropTypes.string,
+};
+
+AUSubNavComponent.displayName = 'AUSubNavComponent';
+export default AUSubNavComponent;