@aarhus-university/au-lib-react-components 10.0.2 → 10.0.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "sideEffects": false,
   "name": "@aarhus-university/au-lib-react-components",
-  "version": "10.0.2",
+  "version": "10.0.3",
   "description": "Library for shared React components for various applications on au.dk",
   "scripts": {
     "build": "webpack --config ./webpack.config.js"

package/src/components/AUSpinnerComponent.tsx

@@ -1,67 +1,91 @@
-/* eslint-env browser */
-import React, { useState, useEffect, FC } from 'react';
-import { isElementInViewport } from '../lib/helpers';
-
-const AUSpinnerComponent: FC<AUSpinnerComponentProps> = ({
-  domID,
-  className,
-  children,
-  visible,
-  loaded,
-  loadingCondition,
-  height,
-  init,
-  onLoad,
-}: AUSpinnerComponentProps) => {
-  const [loading, setLoading] = useState<boolean>(true);
-  const lazyLoad = (): void => {
-    const element = document.getElementById(domID as string);
-    if (element
-      && !loaded
-      && loading
-      && loadingCondition
-      && (visible || isElementInViewport(element))) {
-      setLoading(false);
-      onLoad();
-    }
-  };
-
-  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: '',
-  height: 'auto',
-  init: '',
-};
-
-AUSpinnerComponent.displayName = 'AUSpinnerComponent';
-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;