@aarhus-university/au-lib-react-components 9.11.9 → 9.11.13

package/src/components/AUPaginationComponent.js

@@ -1,103 +1,103 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-class AUPaginationComponent extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.goTo = this.goTo.bind(this);
-  }
-
-  goTo(page) {
-    const { onPageChange } = this.props;
-    if (typeof onPageChange === 'function') {
-      onPageChange(page);
-    }
-  }
-
-  render() {
-    const { page, pages } = this.props;
-
-    const createBtn = (label, nextPage, disabled = false) => (
-      <button
-        type="button"
-        disabled={disabled}
-        onClick={() => {
-          this.goTo(nextPage);
-        }}
-      >
-        {label}
-      </button>
-    );
-
-    let hellipBefore = false;
-    let hellipAfter = false;
-    const renderPages = [...Array(pages).keys()].map((_p) => {
-      const p = _p + 1;
-      if (p === page) {
-        return (
-          <li key={p} className="current">
-            {createBtn(p, p)}
-          </li>
-        );
-      }
-      if (p === 1 || p === pages) {
-        return <li key={p}>{createBtn(p, p)}</li>;
-      }
-      if (!hellipBefore && p <= page - 2) {
-        hellipBefore = true;
-        return <li key={p}>{createBtn('...', p, true)}</li>;
-      }
-      if (!hellipAfter && p >= page + 2) {
-        hellipAfter = true;
-        return <li key={p}>{createBtn('...', p, true)}</li>;
-      }
-      if (p === page - 1 || p === page + 1) {
-        return <li key={p}>{createBtn(p, p)}</li>;
-      }
-      return null;
-    });
-
-    return (
-      <ul className="resetlist au-pagination">
-        <li>
-          <button
-            type="button"
-            disabled={page === 1}
-            onClick={() => {
-              this.goTo(page - 1);
-            }}
-          >
-            {'<'}
-          </button>
-        </li>
-        {renderPages}
-        <li>
-          <button
-            type="button"
-            disabled={page === pages}
-            onClick={() => {
-              this.goTo(page + 1);
-            }}
-          >
-            {'>'}
-          </button>
-        </li>
-      </ul>
-    );
-  }
-}
-
-AUPaginationComponent.defaultProps = {
-  page: 1,
-  onPageChange: null,
-};
-
-AUPaginationComponent.propTypes = {
-  page: PropTypes.number,
-  pages: PropTypes.number.isRequired,
-  onPageChange: PropTypes.func,
-};
-
-AUPaginationComponent.displayName = 'AUPaginationComponent';
-export default AUPaginationComponent;
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class AUPaginationComponent extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.goTo = this.goTo.bind(this);
+  }
+
+  goTo(page) {
+    const { onPageChange } = this.props;
+    if (typeof onPageChange === 'function') {
+      onPageChange(page);
+    }
+  }
+
+  render() {
+    const { page, pages } = this.props;
+
+    const createBtn = (label, nextPage, disabled = false) => (
+      <button
+        type="button"
+        disabled={disabled}
+        onClick={() => {
+          this.goTo(nextPage);
+        }}
+      >
+        {label}
+      </button>
+    );
+
+    let hellipBefore = false;
+    let hellipAfter = false;
+    const renderPages = [...Array(pages).keys()].map((_p) => {
+      const p = _p + 1;
+      if (p === page) {
+        return (
+          <li key={p} className="current">
+            {createBtn(p, p)}
+          </li>
+        );
+      }
+      if (p === 1 || p === pages) {
+        return <li key={p}>{createBtn(p, p)}</li>;
+      }
+      if (!hellipBefore && p <= page - 2) {
+        hellipBefore = true;
+        return <li key={p}>{createBtn('...', p, true)}</li>;
+      }
+      if (!hellipAfter && p >= page + 2) {
+        hellipAfter = true;
+        return <li key={p}>{createBtn('...', p, true)}</li>;
+      }
+      if (p === page - 1 || p === page + 1) {
+        return <li key={p}>{createBtn(p, p)}</li>;
+      }
+      return null;
+    });
+
+    return (
+      <ul className="resetlist au-pagination">
+        <li>
+          <button
+            type="button"
+            disabled={page === 1}
+            onClick={() => {
+              this.goTo(page - 1);
+            }}
+          >
+            {'<'}
+          </button>
+        </li>
+        {renderPages}
+        <li>
+          <button
+            type="button"
+            disabled={page === pages}
+            onClick={() => {
+              this.goTo(page + 1);
+            }}
+          >
+            {'>'}
+          </button>
+        </li>
+      </ul>
+    );
+  }
+}
+
+AUPaginationComponent.defaultProps = {
+  page: 1,
+  onPageChange: null,
+};
+
+AUPaginationComponent.propTypes = {
+  page: PropTypes.number,
+  pages: PropTypes.number.isRequired,
+  onPageChange: PropTypes.func,
+};
+
+AUPaginationComponent.displayName = 'AUPaginationComponent';
+export default AUPaginationComponent;

package/src/components/AUSpinnerComponent.js

@@ -1,125 +1,125 @@
-/* eslint-env browser */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { isElementInViewport } from '../lib/helpers';
-/**
- * AU Spinner Komponent
- * Bliver brugt til lazy-loading af elementer, der først skal indlæses når de er synlige.
- *
- * Eksempel:
- * ```jsx
- * <AUSpinnerComponent
-          domID={spinnerID}
-          visible={this.state.spinnerVisible}
-          columns="large-12 medium-12 small-12"
-          content={<h1>Hej</h1>}
-          loaded={this.state.spinnerLoaded}
-          loadingCondition
-          onLoad={() => {
-            setTimeout(() => {
-              this.setState({
-                spinnerLoaded: true,
-              });
-            }, 2000);
-          }}
-        />
- * ```
- */
-
-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 {
-      columns, content, loaded, domID, children,
-    } = this.props;
-
-    if (!loaded) {
-      return (
-        <div id={domID} className={`cell column ${columns}`}>
-          <p className="spinner" />
-        </div>
-      );
-    }
-
-    return children || content;
-  }
-}
-
-AUSpinnerComponent.defaultProps = {
-  domID: 'au-spinner-component',
-  visible: false,
-  columns: 'large-12 medium-12 small-12',
-  content: null,
-  children: null,
-  onLoad: () => {},
-};
-
-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,
-  columns: PropTypes.string,
-  content: PropTypes.element,
-  children: PropTypes.element,
-  loaded: PropTypes.bool.isRequired,
-  loadingCondition: PropTypes.bool.isRequired,
-  onLoad: PropTypes.func,
-};
-
-AUSpinnerComponent.displayName = 'AUSpinnerComponent';
-export default AUSpinnerComponent;
+/* eslint-env browser */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { isElementInViewport } from '../lib/helpers';
+/**
+ * AU Spinner Komponent
+ * Bliver brugt til lazy-loading af elementer, der først skal indlæses når de er synlige.
+ *
+ * Eksempel:
+ * ```jsx
+ * <AUSpinnerComponent
+          domID={spinnerID}
+          visible={this.state.spinnerVisible}
+          columns="large-12 medium-12 small-12"
+          content={<h1>Hej</h1>}
+          loaded={this.state.spinnerLoaded}
+          loadingCondition
+          onLoad={() => {
+            setTimeout(() => {
+              this.setState({
+                spinnerLoaded: true,
+              });
+            }, 2000);
+          }}
+        />
+ * ```
+ */
+
+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 {
+      columns, content, loaded, domID, children,
+    } = this.props;
+
+    if (!loaded) {
+      return (
+        <div id={domID} className={`cell column ${columns}`}>
+          <p className="spinner" />
+        </div>
+      );
+    }
+
+    return children || content;
+  }
+}
+
+AUSpinnerComponent.defaultProps = {
+  domID: 'au-spinner-component',
+  visible: false,
+  columns: 'large-12 medium-12 small-12',
+  content: null,
+  children: null,
+  onLoad: () => {},
+};
+
+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,
+  columns: PropTypes.string,
+  content: PropTypes.element,
+  children: PropTypes.element,
+  loaded: PropTypes.bool.isRequired,
+  loadingCondition: PropTypes.bool.isRequired,
+  onLoad: PropTypes.func,
+};
+
+AUSpinnerComponent.displayName = 'AUSpinnerComponent';
+export default AUSpinnerComponent;