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

package/src/layout-2016/components/alphabox/AlphaBoxContentComponent.js

@@ -1,136 +1,136 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { sortAlphaObj } from '../../../lib/helpers';
-
-class AlphaBoxContentComponent 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: -1,
-    };
-  }
-
-  render() {
-    const { letterIndex } = this.state;
-    const {
-      items, linkColor, noResultsText, noResultsUri,
-    } = this.props;
-
-    const renderLetters = this.letters.map((l, i) => {
-      const available = 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,
-                });
-              }
-            }}
-          >
-            {l}
-          </button>
-        </li>
-      );
-    });
-
-    let filtered = [];
-    if (letterIndex > -1) {
-      filtered = items.filter(
-        (x) => x.name.toLowerCase().indexOf(this.letters[letterIndex]) === 0,
-      );
-    }
-
-    const renderItems = filtered.sort(sortAlphaObj).map((item, i) => {
-      const key = i;
-      const renderChildren = item.children.map(
-        (c) => <li key={c.name}><a href={c.url}>{c.name}</a></li>,
-      );
-
-      if (item.children.length > 0) {
-        return (
-          <li key={key}>
-            <a href={item.url}>{item.name}</a>
-            <ul>
-              {renderChildren}
-            </ul>
-          </li>
-        );
-      }
-
-      return (
-        <li key={key}>
-          <a href={item.url}>{item.name}</a>
-        </li>
-      );
-    });
-
-    return (
-      <div className="au_alphabox_content">
-        <ul className="letters">
-          {renderLetters}
-        </ul>
-        {
-          letterIndex > -1 && (
-            <div>
-              <ul className="items">
-                {renderItems}
-                {
-                  (noResultsText && noResultsUri) && (
-                    <li className="no-results"><a href={noResultsUri}>{noResultsText}</a></li>
-                  )
-                }
-              </ul>
-            </div>
-          )
-        }
-      </div>
-    );
-  }
-}
-
-AlphaBoxContentComponent.defaultProps = {
-  noResultsText: '',
-  noResultsUri: '',
-};
-
-AlphaBoxContentComponent.propTypes = {
-  linkColor: PropTypes.string.isRequired,
-  items: PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    url: PropTypes.string.isRequired,
-  })).isRequired,
-  noResultsText: PropTypes.string,
-  noResultsUri: PropTypes.string,
-};
-
-AlphaBoxContentComponent.displayName = 'AlphaBoxContentComponent';
-export default AlphaBoxContentComponent;
+import React from 'react';
+import PropTypes from 'prop-types';
+import { sortAlphaObj } from '../../../lib/helpers';
+
+class AlphaBoxContentComponent 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: -1,
+    };
+  }
+
+  render() {
+    const { letterIndex } = this.state;
+    const {
+      items, linkColor, noResultsText, noResultsUri,
+    } = this.props;
+
+    const renderLetters = this.letters.map((l, i) => {
+      const available = 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,
+                });
+              }
+            }}
+          >
+            {l}
+          </button>
+        </li>
+      );
+    });
+
+    let filtered = [];
+    if (letterIndex > -1) {
+      filtered = items.filter(
+        (x) => x.name.toLowerCase().indexOf(this.letters[letterIndex]) === 0,
+      );
+    }
+
+    const renderItems = filtered.sort(sortAlphaObj).map((item, i) => {
+      const key = i;
+      const renderChildren = item.children.map(
+        (c) => <li key={c.name}><a href={c.url}>{c.name}</a></li>,
+      );
+
+      if (item.children.length > 0) {
+        return (
+          <li key={key}>
+            <a href={item.url}>{item.name}</a>
+            <ul>
+              {renderChildren}
+            </ul>
+          </li>
+        );
+      }
+
+      return (
+        <li key={key}>
+          <a href={item.url}>{item.name}</a>
+        </li>
+      );
+    });
+
+    return (
+      <div className="au_alphabox_content">
+        <ul className="letters">
+          {renderLetters}
+        </ul>
+        {
+          letterIndex > -1 && (
+            <div>
+              <ul className="items">
+                {renderItems}
+                {
+                  (noResultsText && noResultsUri) && (
+                    <li className="no-results"><a href={noResultsUri}>{noResultsText}</a></li>
+                  )
+                }
+              </ul>
+            </div>
+          )
+        }
+      </div>
+    );
+  }
+}
+
+AlphaBoxContentComponent.defaultProps = {
+  noResultsText: '',
+  noResultsUri: '',
+};
+
+AlphaBoxContentComponent.propTypes = {
+  linkColor: PropTypes.string.isRequired,
+  items: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired,
+  })).isRequired,
+  noResultsText: PropTypes.string,
+  noResultsUri: PropTypes.string,
+};
+
+AlphaBoxContentComponent.displayName = 'AlphaBoxContentComponent';
+export default AlphaBoxContentComponent;

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;