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

package/package.json

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

package/src/components/delphinus/AUSpinnerComponent.js

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