@aarhus-university/au-lib-react-components 11.3.2 → 11.4.0

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

@@ -1,152 +1,152 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-class AUCollapsibleComponent extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      collapsed: props.collapsed,
-    };
-  }
-
-  componentDidMount() {
-    const { attributes } = this.props;
-    attributes.forEach((a) => {
-      if (a.selector) {
-        const el = this.node.querySelector(a.selector);
-        if (el) {
-          el.setAttribute(a.attr, a.value);
-        }
-      } else {
-        this.node.setAttribute(a.attr, a.value);
-      }
-    });
-  }
-
-  render() {
-    const {
-      header,
-      level,
-      content,
-      classNames,
-      onClick,
-      children,
-      dataID,
-      headerElement,
-    } = this.props;
-    const { collapsed } = this.state;
-    let className = 'csc-frame au_collapsible';
-    if (collapsed) {
-      className += ' au_collapsed';
-    }
-
-    if (classNames) {
-      className += ` ${classNames}`;
-    }
-
-    return (
-      <div data-id={dataID} ref={(node) => { this.node = node; }} className={className}>
-        {(() => {
-          if (level > -1) {
-            return (
-              <div
-                className="csc-header"
-                onClick={() => {
-                  this.setState((prevState) => ({
-                    collapsed: !prevState.collapsed,
-                  }), () => {
-                    const { collapsed: newCollapsed } = this.state;
-                    onClick(newCollapsed, this.node);
-                  });
-                }}
-                onKeyUp={() => {
-
-                }}
-                role="button"
-                tabIndex={0}
-              >
-                {(() => {
-                  switch (level) {
-                    case 0 && headerElement != null:
-                      return headerElement;
-                    case 1:
-                      return (
-                        <h1>
-                          {header}
-                        </h1>
-                      );
-                    case 2:
-                      return (
-                        <h2>
-                          {header}
-                        </h2>
-                      );
-                    case 3:
-                      return (
-                        <h3>
-                          {header}
-                        </h3>
-                      );
-                    case 4:
-                      return (
-                        <h4>
-                          {header}
-                        </h4>
-                      );
-                    case 5:
-                      return (
-                        <h5>
-                          {header}
-                        </h5>
-                      );
-                    default:
-                      return (
-                        <h6>
-                          {header}
-                        </h6>
-                      );
-                  }
-                })()}
-              </div>
-            );
-          }
-          return null;
-        })()}
-        {children || content}
-      </div>
-    );
-  }
-}
-
-AUCollapsibleComponent.defaultProps = {
-  dataID: null,
-  children: null,
-  content: null,
-  header: '',
-  headerElement: null,
-  level: 1,
-  classNames: '',
-  onClick: () => { },
-  attributes: [],
-};
-
-AUCollapsibleComponent.propTypes = {
-  dataID: PropTypes.string,
-  children: PropTypes.element,
-  collapsed: PropTypes.bool.isRequired,
-  header: PropTypes.string,
-  headerElement: PropTypes.element,
-  level: PropTypes.number,
-  content: PropTypes.element,
-  classNames: PropTypes.string,
-  onClick: PropTypes.func,
-  attributes: PropTypes.arrayOf(PropTypes.shape({
-    attr: PropTypes.string,
-    value: PropTypes.string,
-    selector: PropTypes.string,
-  })),
-};
-AUCollapsibleComponent.displayName = 'AUCollapsibleComponent';
-export default AUCollapsibleComponent;
+/* eslint-disable @typescript-eslint/no-empty-function */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class AUCollapsibleComponent extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      collapsed: props.collapsed,
+    };
+  }
+
+  componentDidMount() {
+    const { attributes } = this.props;
+    attributes.forEach((a) => {
+      if (a.selector) {
+        const el = this.node.querySelector(a.selector);
+        if (el) {
+          el.setAttribute(a.attr, a.value);
+        }
+      } else {
+        this.node.setAttribute(a.attr, a.value);
+      }
+    });
+  }
+
+  render() {
+    const {
+      header,
+      level,
+      content,
+      classNames,
+      onClick,
+      children,
+      dataID,
+      headerElement,
+    } = this.props;
+    const { collapsed } = this.state;
+    let className = 'csc-frame au_collapsible';
+    if (collapsed) {
+      className += ' au_collapsed';
+    }
+
+    if (classNames) {
+      className += ` ${classNames}`;
+    }
+
+    return (
+      <div data-id={dataID} ref={(node) => { this.node = node; }} className={className}>
+        {(() => {
+          if (level > -1) {
+            return (
+              <div
+                className="csc-header"
+                onClick={() => {
+                  this.setState((prevState) => ({
+                    collapsed: !prevState.collapsed,
+                  }), () => {
+                    const { collapsed: newCollapsed } = this.state;
+                    onClick(newCollapsed, this.node);
+                  });
+                }}
+                onKeyUp={() => {
+
+                }}
+                role="button"
+                tabIndex={0}
+              >
+                {(() => {
+                  switch (level) {
+                    case 0 && headerElement != null:
+                      return headerElement;
+                    case 1:
+                      return (
+                        <h1>
+                          {header}
+                        </h1>
+                      );
+                    case 2:
+                      return (
+                        <h2>
+                          {header}
+                        </h2>
+                      );
+                    case 3:
+                      return (
+                        <h3>
+                          {header}
+                        </h3>
+                      );
+                    case 4:
+                      return (
+                        <h4>
+                          {header}
+                        </h4>
+                      );
+                    case 5:
+                      return (
+                        <h5>
+                          {header}
+                        </h5>
+                      );
+                    default:
+                      return (
+                        <h6>
+                          {header}
+                        </h6>
+                      );
+                  }
+                })()}
+              </div>
+            );
+          }
+          return null;
+        })()}
+        {children || content}
+      </div>
+    );
+  }
+}
+
+AUCollapsibleComponent.defaultProps = {
+  dataID: null,
+  children: null,
+  content: null,
+  header: '',
+  headerElement: null,
+  level: 1,
+  classNames: '',
+  onClick: () => { },
+  attributes: [],
+};
+
+AUCollapsibleComponent.propTypes = {
+  dataID: PropTypes.string,
+  children: PropTypes.element,
+  collapsed: PropTypes.bool.isRequired,
+  header: PropTypes.string,
+  headerElement: PropTypes.element,
+  level: PropTypes.number,
+  content: PropTypes.element,
+  classNames: PropTypes.string,
+  onClick: PropTypes.func,
+  attributes: PropTypes.arrayOf(PropTypes.shape({
+    attr: PropTypes.string,
+    value: PropTypes.string,
+    selector: PropTypes.string,
+  })),
+};
+AUCollapsibleComponent.displayName = 'AUCollapsibleComponent';
+export default AUCollapsibleComponent;

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;