@aarhus-university/au-lib-react-components 9.11.18 → 9.12.1

package/src/components/databox/DataBoxButtonComponent.js

@@ -1,153 +1,153 @@
-/* eslint-env browser */
-import React from 'react';
-import PropTypes from 'prop-types';
-import AutoSuggestComponent from '../AutoSuggestComponent';
-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 }} />
-            <AutoSuggestComponent
-              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({}).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-env browser */
+import React from 'react';
+import PropTypes from 'prop-types';
+import AutoSuggestComponent from '../AutoSuggestComponent';
+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 }} />
+            <AutoSuggestComponent
+              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({}).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;