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

package/src/layout-2016/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 '../common/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 '../common/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;

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

@@ -1,157 +1,157 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-/* eslint-env browser */
-import React from 'react';
-import PropTypes from 'prop-types';
-import AUAutoSuggestComponent from '../../../components/AUAutoSuggestComponent';
-import DataBoxSuggestionComponent from './DataBoxSuggestionComponent';
-
-class DataBoxButtonComponent extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.handleClick = this.handleClick.bind(this);
-    this.handleChange = this.handleChange.bind(this);
-  }
-
-  handleClick() {
-    const { setActive, active, index } = this.props;
-    setActive(active ? 0 : index + 1);
-  }
-
-  handleChange(e) {
-    const { value } = e.target;
-    const { setSearchValue } = this.props;
-    const newHistory = `${[window.location.protocol, '//', window.location.host, window.location.pathname].join('')}?initval=${value}`;
-    window.history.replaceState({
-      initVal: value,
-    }, document.title, newHistory);
-    setSearchValue(value);
-  }
-
-  render() {
-    const {
-      button: b,
-      index, box,
-      active,
-      getSuggestions,
-      searchValue,
-    } = this.props;
-    const i = index + 1;
-    const bg = box.background;
-
-    let classNames = `db-button button-${i}`;
-    const search = box.search.index === i;
-
-    if (bg.overlay) {
-      classNames += ' overlay';
-    }
-
-    if (search) {
-      classNames += ' db-search';
-    }
-
-    if (active && !search) {
-      classNames += ' active';
-    }
-
-    if (search) {
-      if (box.search.autocomplete) {
-        return (
-          <div className={classNames} key={i}>
-            <span dangerouslySetInnerHTML={{ __html: b.text }} />
-            <AUAutoSuggestComponent
-              placeholder={box.search.placeHolder}
-              setQuery={() => { }}
-              setResults={(items) => {
-                if (items.length === 1 && items[0].url) {
-                  window.location.href = items[0].url;
-                }
-              }}
-              collection={[]}
-              getSuggestions={getSuggestions}
-              getSuggestionValue={(suggestion) => suggestion.name}
-              renderSuggestion={(suggestion) => <DataBoxSuggestionComponent item={suggestion} />}
-            />
-          </div>
-        );
-      }
-      return (
-        <div className={classNames} key={i}>
-          <span>
-            {b.text}
-          </span>
-          <input type="text" value={searchValue} placeholder={box.search.placeHolder} onChange={this.handleChange} />
-        </div>
-      );
-    }
-
-    if (b.link !== '') {
-      return (
-        <div
-          key={i}
-          role="button"
-          tabIndex="0"
-          onClick={this.handleClick}
-          onKeyUp={() => { }}
-          className={classNames}
-        >
-          <span>
-            <a href={b.link}>
-              {b.text}
-            </a>
-          </span>
-        </div>
-      );
-    }
-
-    return (
-      <div
-        key={i}
-        role="button"
-        tabIndex="0"
-        onClick={this.handleClick}
-        onKeyUp={() => { }}
-        className={classNames}
-      >
-        <span>
-          {b.text}
-        </span>
-      </div>
-    );
-  }
-}
-
-DataBoxButtonComponent.defaultProps = {
-  searchValue: '',
-};
-
-DataBoxButtonComponent.propTypes = {
-  active: PropTypes.bool.isRequired,
-  index: PropTypes.number.isRequired,
-  searchValue: PropTypes.string,
-  setActive: PropTypes.func.isRequired,
-  setSearchValue: PropTypes.func.isRequired,
-  button: PropTypes.shape({
-    text: PropTypes.string.isRequired,
-    link: PropTypes.string.isRequired,
-  }).isRequired,
-  box: PropTypes.shape({
-    background: PropTypes.shape({
-      color: PropTypes.string.isRequired,
-      linkColor: PropTypes.string.isRequired,
-      src: PropTypes.string.isRequired,
-      height: PropTypes.number.isRequired,
-      text: PropTypes.string.isRequired,
-      overlay: PropTypes.bool.isRequired,
-    }).isRequired,
-    search: PropTypes.shape({
-      index: PropTypes.number.isRequired,
-      autocomplete: PropTypes.bool.isRequired,
-      placeHolder: PropTypes.string.isRequired,
-    }).isRequired,
-  }).isRequired,
-  getSuggestions: PropTypes.func.isRequired,
-};
-
-DataBoxButtonComponent.displayName = 'DataBoxButtonComponent';
-export default DataBoxButtonComponent;
+/* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-env browser */
+import React from 'react';
+import PropTypes from 'prop-types';
+import AUAutoSuggestComponent from '../../../components/AUAutoSuggestComponent';
+import DataBoxSuggestionComponent from './DataBoxSuggestionComponent';
+
+class DataBoxButtonComponent extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleClick = this.handleClick.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleClick() {
+    const { setActive, active, index } = this.props;
+    setActive(active ? 0 : index + 1);
+  }
+
+  handleChange(e) {
+    const { value } = e.target;
+    const { setSearchValue } = this.props;
+    const newHistory = `${[window.location.protocol, '//', window.location.host, window.location.pathname].join('')}?initval=${value}`;
+    window.history.replaceState({
+      initVal: value,
+    }, document.title, newHistory);
+    setSearchValue(value);
+  }
+
+  render() {
+    const {
+      button: b,
+      index, box,
+      active,
+      getSuggestions,
+      searchValue,
+    } = this.props;
+    const i = index + 1;
+    const bg = box.background;
+
+    let classNames = `db-button button-${i}`;
+    const search = box.search.index === i;
+
+    if (bg.overlay) {
+      classNames += ' overlay';
+    }
+
+    if (search) {
+      classNames += ' db-search';
+    }
+
+    if (active && !search) {
+      classNames += ' active';
+    }
+
+    if (search) {
+      if (box.search.autocomplete) {
+        return (
+          <div className={classNames} key={i}>
+            <span dangerouslySetInnerHTML={{ __html: b.text }} />
+            <AUAutoSuggestComponent
+              placeholder={box.search.placeHolder}
+              setQuery={() => { }}
+              setResults={(items) => {
+                if (items.length === 1 && items[0].url) {
+                  window.location.href = items[0].url;
+                }
+              }}
+              collection={[]}
+              getSuggestions={getSuggestions}
+              getSuggestionValue={(suggestion) => suggestion.name}
+              renderSuggestion={(suggestion) => <DataBoxSuggestionComponent item={suggestion} />}
+            />
+          </div>
+        );
+      }
+      return (
+        <div className={classNames} key={i}>
+          <span>
+            {b.text}
+          </span>
+          <input type="text" value={searchValue} placeholder={box.search.placeHolder} onChange={this.handleChange} />
+        </div>
+      );
+    }
+
+    if (b.link !== '') {
+      return (
+        <div
+          key={i}
+          role="button"
+          tabIndex="0"
+          onClick={this.handleClick}
+          onKeyUp={() => { }}
+          className={classNames}
+        >
+          <span>
+            <a href={b.link}>
+              {b.text}
+            </a>
+          </span>
+        </div>
+      );
+    }
+
+    return (
+      <div
+        key={i}
+        role="button"
+        tabIndex="0"
+        onClick={this.handleClick}
+        onKeyUp={() => { }}
+        className={classNames}
+      >
+        <span>
+          {b.text}
+        </span>
+      </div>
+    );
+  }
+}
+
+DataBoxButtonComponent.defaultProps = {
+  searchValue: '',
+};
+
+DataBoxButtonComponent.propTypes = {
+  active: PropTypes.bool.isRequired,
+  index: PropTypes.number.isRequired,
+  searchValue: PropTypes.string,
+  setActive: PropTypes.func.isRequired,
+  setSearchValue: PropTypes.func.isRequired,
+  button: PropTypes.shape({
+    text: PropTypes.string.isRequired,
+    link: PropTypes.string.isRequired,
+  }).isRequired,
+  box: PropTypes.shape({
+    background: PropTypes.shape({
+      color: PropTypes.string.isRequired,
+      linkColor: PropTypes.string.isRequired,
+      src: PropTypes.string.isRequired,
+      height: PropTypes.number.isRequired,
+      text: PropTypes.string.isRequired,
+      overlay: PropTypes.bool.isRequired,
+    }).isRequired,
+    search: PropTypes.shape({
+      index: PropTypes.number.isRequired,
+      autocomplete: PropTypes.bool.isRequired,
+      placeHolder: PropTypes.string.isRequired,
+    }).isRequired,
+  }).isRequired,
+  getSuggestions: PropTypes.func.isRequired,
+};
+
+DataBoxButtonComponent.displayName = 'DataBoxButtonComponent';
+export default DataBoxButtonComponent;