@aarhus-university/au-lib-react-components 9.11.19 → 9.12.0

package/src/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;

package/src/components/databox/DataBoxAssociationComponent.js

@@ -1,122 +1,122 @@
-/* eslint-env browser */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { sortAlphaObj } from '../../lib/helpers';
-import AUCollapsibleComponent from '../AUCollapsibleComponent';
-
-class DataBoxAssociationComponent extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      open: props.open,
-    };
-
-    this.handleClick = this.handleClick.bind(this);
-  }
-
-  handleClick() {
-    const {
-      rememberState,
-      boxID,
-      grouping,
-      index,
-    } = this.props;
-    const { open } = this.state;
-    if (rememberState) {
-      if (open) {
-        sessionStorage.removeItem(`box-${boxID}-group-${grouping}-index-${index}`);
-      } else {
-        sessionStorage.setItem(`box-${boxID}-group-${grouping}-index-${index}`, true);
-      }
-    }
-    this.setState((prevState) => ({
-      open: !prevState.open,
-    }));
-  }
-
-  render() {
-    const { open } = this.state;
-    const { assoc } = this.props;
-    const { items } = assoc;
-    const renderItems = items.sort(sortAlphaObj).map((item) => {
-      if (item.children.length > 0) {
-        const renderChildren = item.children.sort(sortAlphaObj).map((c) => (
-          <li key={c.id}>
-            <a href={c.url}>
-              {c.name}
-            </a>
-          </li>
-        ));
-
-        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>
-        );
-      }
-
-      return (
-        <li key={item.id}>
-          <a href={item.url}>
-            {item.name}
-          </a>
-        </li>
-      );
-    });
-
-    const content = (
-      <ul>
-        {renderItems}
-      </ul>
-    );
-
-    return (
-      <AUCollapsibleComponent
-        key={open}
-        collapsed={!open}
-        level={3}
-        header={assoc.name}
-        content={content}
-        onClick={this.handleClick}
-      />
-    );
-  }
-}
-
-DataBoxAssociationComponent.defaultProps = {
-
-};
-
-DataBoxAssociationComponent.propTypes = {
-  boxID: PropTypes.number.isRequired,
-  grouping: PropTypes.number.isRequired,
-  assoc: PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    items: PropTypes.arrayOf(PropTypes.shape({
-
-    })).isRequired,
-  }).isRequired,
-  index: PropTypes.number.isRequired,
-  open: PropTypes.bool.isRequired,
-  rememberState: PropTypes.bool.isRequired,
-};
-
-DataBoxAssociationComponent.displayName = 'DataBoxAssociationComponent';
-export default DataBoxAssociationComponent;
+/* eslint-env browser */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { sortAlphaObj } from '../../lib/helpers';
+import AUCollapsibleComponent from '../AUCollapsibleComponent';
+
+class DataBoxAssociationComponent extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      open: props.open,
+    };
+
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick() {
+    const {
+      rememberState,
+      boxID,
+      grouping,
+      index,
+    } = this.props;
+    const { open } = this.state;
+    if (rememberState) {
+      if (open) {
+        sessionStorage.removeItem(`box-${boxID}-group-${grouping}-index-${index}`);
+      } else {
+        sessionStorage.setItem(`box-${boxID}-group-${grouping}-index-${index}`, true);
+      }
+    }
+    this.setState((prevState) => ({
+      open: !prevState.open,
+    }));
+  }
+
+  render() {
+    const { open } = this.state;
+    const { assoc } = this.props;
+    const { items } = assoc;
+    const renderItems = items.sort(sortAlphaObj).map((item) => {
+      if (item.children.length > 0) {
+        const renderChildren = item.children.sort(sortAlphaObj).map((c) => (
+          <li key={c.id}>
+            <a href={c.url}>
+              {c.name}
+            </a>
+          </li>
+        ));
+
+        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>
+        );
+      }
+
+      return (
+        <li key={item.id}>
+          <a href={item.url}>
+            {item.name}
+          </a>
+        </li>
+      );
+    });
+
+    const content = (
+      <ul>
+        {renderItems}
+      </ul>
+    );
+
+    return (
+      <AUCollapsibleComponent
+        key={open}
+        collapsed={!open}
+        level={3}
+        header={assoc.name}
+        content={content}
+        onClick={this.handleClick}
+      />
+    );
+  }
+}
+
+DataBoxAssociationComponent.defaultProps = {
+
+};
+
+DataBoxAssociationComponent.propTypes = {
+  boxID: PropTypes.number.isRequired,
+  grouping: PropTypes.number.isRequired,
+  assoc: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    items: PropTypes.arrayOf(PropTypes.shape({
+
+    })).isRequired,
+  }).isRequired,
+  index: PropTypes.number.isRequired,
+  open: PropTypes.bool.isRequired,
+  rememberState: PropTypes.bool.isRequired,
+};
+
+DataBoxAssociationComponent.displayName = 'DataBoxAssociationComponent';
+export default DataBoxAssociationComponent;