@aarhus-university/au-lib-react-components 9.11.11 → 9.11.15

package/package.json

@@ -1,7 +1,7 @@
 {
   "sideEffects": false,
   "name": "@aarhus-university/au-lib-react-components",
-  "version": "9.11.11",
+  "version": "9.11.15",
   "description": "Library for shared React components for various applications on au.dk",
   "main": "build/cjs/index.js",
   "scripts": {

package/src/components/delphinus/AUModalComponent.js

@@ -71,6 +71,7 @@ AUModalComponent.defaultProps = {
   onClose: null,
   closeButton: true,
   lang: 'da',
+  sender: null,
   className: 'modal-view',
 };
 
@@ -81,7 +82,7 @@ AUModalComponent.propTypes = {
   onClose: PropTypes.func,
   closeButton: PropTypes.bool,
   lang: PropTypes.string,
-  sender: PropTypes.element.isRequired,
+  sender: PropTypes.element,
   className: PropTypes.string,
 };
 

package/src/components/delphinus/AUSpinnerComponent.js

@@ -1,58 +1,90 @@
 /* eslint-env browser */
-import React, { useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { isElementInViewport } from '../../lib/helpers';
 
-const AUSpinnerComponent = ({
-  domID,
-  visible,
-  className,
-  children,
-  loaded,
-  loadingCondition,
-  onLoad,
-  height,
-  init,
-}) => {
-  const lazyLoad = () => {
-    const element = document.getElementById(domID);
-    if (!loaded && loadingCondition && (visible || isElementInViewport(element))) {
-      onLoad();
-    }
-  };
-  useEffect(() => {
+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', () => {
-      lazyLoad();
+      this.lazyLoad();
     });
-  }, []);
+  }
 
-  useEffect(() => {
-    lazyLoad();
-  });
+  componentDidUpdate() {
+    this.lazyLoad();
+  }
 
-  if (!loaded) {
-    if (init === 'table') {
-      return (
-        <div id={domID} className={`processing-state processing-state--init-table ${className}`} style={{ minHeight: height }} />
-      );
+  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();
+      });
     }
-    if (init === 'box') {
+  }
+
+  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 processing-state--init-box ${className}`} style={{ minHeight: height }} />
+        <div id={domID} className={`processing-state ${className}`} style={{ minHeight: height }} />
       );
     }
-    return (
-      <div id={domID} className={`processing-state ${className}`} style={{ minHeight: height }} />
-    );
-  }
 
-  return children;
-};
+    return children || content;
+  }
+}
 
 AUSpinnerComponent.defaultProps = {
   domID: 'au-spinner-component',
   visible: false,
   className: '',
+  content: null,
   children: null,
   onLoad: () => { },
   height: 'auto',
@@ -60,9 +92,16 @@ AUSpinnerComponent.defaultProps = {
 };
 
 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,