@aarhus-university/au-lib-react-components 11.1.0 → 11.1.1

package/src/layout-2016/components/common/AUSpinnerComponent.js

@@ -1,103 +1,103 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-/* 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 {
-      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-disable @typescript-eslint/no-empty-function */
+/* 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 {
+      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;

package/src/layout-2016/components/databox/DataBoxAlphabetComponent.js

@@ -1,144 +1,144 @@
-/* eslint-env browser */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { sortAlphaObj } from '../../../lib/helpers';
-
-class DataBoxAlphabetComponent extends React.Component {
-  constructor(props) {
-    super(props);
-    this.letters = ['...', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'æ', 'ø', 'å'];
-    this.state = {
-      letterIndex: this.letters.indexOf(props.initLetter.toLowerCase()),
-    };
-  }
-
-  render() {
-    const { letterIndex } = this.state;
-    const { linkColor, rememberState, boxID } = this.props;
-    const renderLetters = this.letters.map((l, i) => {
-      const { items } = this.props;
-      const available = i === 0
-      || items.filter((x) => x.name.toLowerCase().indexOf(l) === 0).length > 0;
-
-      let classNames = '';
-      if (available) {
-        classNames += 'available';
-      }
-
-      if (i === letterIndex) {
-        classNames += ' active';
-      }
-
-      let style = {};
-      if (available) {
-        if (letterIndex === i) {
-          style = { backgroundColor: '#fff', color: linkColor };
-        } else {
-          style = { backgroundColor: linkColor };
-        }
-      }
-
-      return (
-        <li
-          key={l}
-          className={classNames}
-        >
-          <button
-            type="button"
-            style={style}
-            onClick={() => {
-              if (available) {
-                this.setState({
-                  letterIndex: i,
-                });
-                if (rememberState) {
-                  sessionStorage.setItem(`box-alphabet-${boxID}`, this.letters[i]);
-                }
-              }
-            }}
-          >
-            {l}
-          </button>
-        </li>
-      );
-    });
-
-    let { items } = this.props;
-    if (letterIndex !== 0) {
-      items = items.filter((x) => x.name.toLowerCase().indexOf(this.letters[letterIndex]) === 0);
-    }
-
-    const renderItems = items.sort(sortAlphaObj).map((item) => {
-      const renderChildren = item.children.map((c) => (
-        <li key={c.id}>
-          <a href={c.url}>
-            {c.name}
-          </a>
-        </li>
-      ));
-
-      if (item.children.length > 0) {
-        return (
-          <li key={item.id}>
-            {(() => {
-              if (!item.url) {
-                return (
-                  <span>
-                    {item.name}
-                  </span>
-                );
-              }
-
-              return (
-                <a href={item.url}>
-                  {item.name}
-                </a>
-              );
-            })()}
-            <ul>
-              {renderChildren}
-            </ul>
-          </li>
-        );
-      }
-
-      if (!item.parent) {
-        return (
-          <li key={item.id}>
-            <a href={item.url}>
-              {item.name}
-            </a>
-          </li>
-        );
-      }
-
-      return null;
-    });
-
-    return (
-      <div>
-        <ul className="letters">
-          {renderLetters}
-        </ul>
-        <ul>
-          {renderItems}
-        </ul>
-      </div>
-    );
-  }
-}
-
-DataBoxAlphabetComponent.defaultProps = {
-
-};
-
-DataBoxAlphabetComponent.propTypes = {
-  initLetter: PropTypes.string.isRequired,
-  items: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-  linkColor: PropTypes.string.isRequired,
-  rememberState: PropTypes.bool.isRequired,
-  boxID: PropTypes.number.isRequired,
-};
-
-DataBoxAlphabetComponent.displayName = 'DataBoxAlphabetComponent';
-export default DataBoxAlphabetComponent;
+/* eslint-env browser */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { sortAlphaObj } from '../../../lib/helpers';
+
+class DataBoxAlphabetComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.letters = ['...', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'æ', 'ø', 'å'];
+    this.state = {
+      letterIndex: this.letters.indexOf(props.initLetter.toLowerCase()),
+    };
+  }
+
+  render() {
+    const { letterIndex } = this.state;
+    const { linkColor, rememberState, boxID } = this.props;
+    const renderLetters = this.letters.map((l, i) => {
+      const { items } = this.props;
+      const available = i === 0
+      || items.filter((x) => x.name.toLowerCase().indexOf(l) === 0).length > 0;
+
+      let classNames = '';
+      if (available) {
+        classNames += 'available';
+      }
+
+      if (i === letterIndex) {
+        classNames += ' active';
+      }
+
+      let style = {};
+      if (available) {
+        if (letterIndex === i) {
+          style = { backgroundColor: '#fff', color: linkColor };
+        } else {
+          style = { backgroundColor: linkColor };
+        }
+      }
+
+      return (
+        <li
+          key={l}
+          className={classNames}
+        >
+          <button
+            type="button"
+            style={style}
+            onClick={() => {
+              if (available) {
+                this.setState({
+                  letterIndex: i,
+                });
+                if (rememberState) {
+                  sessionStorage.setItem(`box-alphabet-${boxID}`, this.letters[i]);
+                }
+              }
+            }}
+          >
+            {l}
+          </button>
+        </li>
+      );
+    });
+
+    let { items } = this.props;
+    if (letterIndex !== 0) {
+      items = items.filter((x) => x.name.toLowerCase().indexOf(this.letters[letterIndex]) === 0);
+    }
+
+    const renderItems = items.sort(sortAlphaObj).map((item) => {
+      const renderChildren = item.children.map((c) => (
+        <li key={c.id}>
+          <a href={c.url}>
+            {c.name}
+          </a>
+        </li>
+      ));
+
+      if (item.children.length > 0) {
+        return (
+          <li key={item.id}>
+            {(() => {
+              if (!item.url) {
+                return (
+                  <span>
+                    {item.name}
+                  </span>
+                );
+              }
+
+              return (
+                <a href={item.url}>
+                  {item.name}
+                </a>
+              );
+            })()}
+            <ul>
+              {renderChildren}
+            </ul>
+          </li>
+        );
+      }
+
+      if (!item.parent) {
+        return (
+          <li key={item.id}>
+            <a href={item.url}>
+              {item.name}
+            </a>
+          </li>
+        );
+      }
+
+      return null;
+    });
+
+    return (
+      <div>
+        <ul className="letters">
+          {renderLetters}
+        </ul>
+        <ul>
+          {renderItems}
+        </ul>
+      </div>
+    );
+  }
+}
+
+DataBoxAlphabetComponent.defaultProps = {
+
+};
+
+DataBoxAlphabetComponent.propTypes = {
+  initLetter: PropTypes.string.isRequired,
+  items: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  linkColor: PropTypes.string.isRequired,
+  rememberState: PropTypes.bool.isRequired,
+  boxID: PropTypes.number.isRequired,
+};
+
+DataBoxAlphabetComponent.displayName = 'DataBoxAlphabetComponent';
+export default DataBoxAlphabetComponent;