@aarhus-university/au-lib-react-components 9.11.9 → 9.11.13

package/src/components/databox/DataBoxComponent.js

@@ -1,297 +1,297 @@
-/* eslint-env browser */
-/* eslint react/no-danger: 0 */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { parse as qsParse } from 'query-string';
-import DataBoxButtonComponent from './DataBoxButtonComponent';
-import DataBoxGroupingComponent from './DataBoxGroupingComponent';
-import DataBoxSearchResultComponent from './DataBoxSearchResultComponent';
-import DataBoxAlphabetComponent from './DataBoxAlphabetComponent';
-import AUSpinnerComponent from '../AUSpinnerComponent';
-import { sortAlphaObj } from '../../lib/helpers';
-
-class DataBoxComponent extends React.Component {
-  constructor(props) {
-    super(props);
-
-    const qs = qsParse(window.location.search);
-
-    const conf = props.box.config;
-    const { stacked } = conf;
-    const active = conf.rememberState && sessionStorage.getItem(`box-header-${props.box.id}`) ? parseInt(sessionStorage.getItem(`box-header-${props.box.id}`), 10) : props.box.config.trigger;
-    this.state = {
-      active,
-      rawData: null,
-      items: [],
-      groupings: [],
-      stacked,
-      searchValue: typeof qs.initval === 'undefined' ? '' : decodeURIComponent(qs.initval),
-    };
-
-    this.setActive = this.setActive.bind(this);
-    this.setSearchValue = this.setSearchValue.bind(this);
-    this.getSuggestions = this.getSuggestions.bind(this);
-  }
-
-  componentDidMount() {
-    const { parse, box } = this.props;
-    const { searchValue } = this.state;
-    parse(box.data.source, (data) => {
-      const { items, groupings, rawData } = data;
-      this.setState({
-        items,
-        groupings: groupings || [],
-        rawData,
-      });
-      // this.setSearch(items);
-    });
-
-    if (searchValue !== '') {
-      this.setSearchValue(searchValue);
-    }
-  }
-
-  componentDidUpdate() {
-    const { box } = this.props;
-    const { rawData, items, groupings } = this.state;
-    const d = box.data;
-    if (typeof d.callback === 'function') {
-      d.callback(rawData || {
-        items,
-        groupings,
-      });
-    }
-  }
-
-  setActive(active) {
-    const { box } = this.props;
-    this.setState({ active });
-    if (box.config.rememberState) {
-      sessionStorage.setItem(`box-header-${box.id}`, active);
-    }
-  }
-
-  setSearchValue(searchValue) {
-    const { box } = this.props;
-    if (!box.search.autocomplete) {
-      this.setState({ searchValue, active: searchValue === '' ? 0 : box.search.index });
-    }
-  }
-
-  getSuggestions(value, collection, callback) {
-    const { items } = this.state;
-    const inputValue = value.trim().toLowerCase();
-    const inputLength = inputValue.length;
-    callback(inputLength < 2 ? []
-      : items.filter((x) => x.name.toLowerCase().indexOf(inputValue) > -1)
-        .sort(sortAlphaObj));
-  }
-
-  render() {
-    const { box } = this.props;
-    const {
-      active,
-      items,
-      searchValue,
-      groupings,
-      stacked,
-    } = this.state;
-    const conf = box.config;
-    const bg = box.background;
-
-    const renderContent = (
-      <div className="content">
-        {(() => {
-          const searchIndex = box.search.index;
-          const alphaIndex = box.config.alphabet;
-          const initLetter = box.config.rememberState && sessionStorage.getItem(`box-alphabet-${box.id}`)
-            ? sessionStorage.getItem(`box-alphabet-${box.id}`) : box.config.initLetter;
-          if (active === alphaIndex) {
-            return (
-              <DataBoxAlphabetComponent
-                boxID={box.id}
-                rememberState={box.config.rememberState}
-                initLetter={initLetter}
-                color={box.background.color}
-                linkColor={box.background.linkColor}
-                items={items}
-              />
-            );
-          }
-
-          if (searchValue !== '' && !box.search.autocomplete) {
-            return (
-              <DataBoxSearchResultComponent
-                items={items}
-                searchValue={searchValue}
-              />
-            );
-          }
-
-          let searchSubtract = 0;
-          if (searchIndex > 0) {
-            searchSubtract = searchIndex > active ? 0 : 1;
-          }
-
-          let alphaSubtract = 0;
-          if (alphaIndex > 0) {
-            alphaSubtract = alphaIndex > active ? 0 : 1;
-          }
-
-          const grouping = groupings[active - searchSubtract - alphaSubtract - 1];
-          if (grouping) {
-            return (
-              <DataBoxGroupingComponent
-                boxID={box.id}
-                rememberState={box.config.rememberState}
-                stacked={stacked}
-                grouping={grouping}
-                expand={box.config.expand}
-              />
-            );
-          }
-          // For callback purposes
-          return <div className={`box-${box.id}-empty`} />;
-        })()}
-      </div>
-    );
-
-    const renderButtons = conf.buttons.map((b, i) => {
-      const key = i;
-      if (stacked) {
-        return (
-          <div key={key}>
-            <DataBoxButtonComponent
-              box={box}
-              button={b}
-              index={i}
-              active={i + 1 === active}
-              setActive={this.setActive}
-              setSearchValue={this.setSearchValue}
-              getSuggestions={this.getSuggestions}
-            />
-            {(() => {
-              if (active > 0 && i + 1 === active) {
-                return renderContent;
-              }
-              return null;
-            })()}
-          </div>
-        );
-      }
-
-      return (
-        <DataBoxButtonComponent
-          key={key}
-          box={box}
-          button={b}
-          index={i}
-          active={i + 1 === active}
-          searchValue={searchValue}
-          setActive={this.setActive}
-          setSearchValue={this.setSearchValue}
-          getSuggestions={this.getSuggestions}
-        />
-      );
-    });
-
-    let classNames = `au_databox collapse buttons-${conf.buttons.length}`;
-
-    if (conf.firstline) {
-      classNames += ' first-line-full';
-    }
-
-    if (stacked) {
-      classNames += ' stacked';
-    }
-
-    const style = {
-      backgroundColor: bg.color,
-    };
-
-    if (bg.src !== '') {
-      style.backgroundImage = `url('${bg.src}')`;
-    }
-
-    if (bg.height > 0) {
-      style.height = bg.height;
-    }
-
-    const innerContent = (
-      <div className={classNames}>
-        <div className="button-wrapper" style={style}>
-          {(() => {
-            if (bg.text !== '') {
-              return <div className="au_focus" dangerouslySetInnerHTML={{ __html: bg.text }} />;
-            }
-            return null;
-          })()}
-          <div>
-            {renderButtons}
-          </div>
-        </div>
-        {(() => {
-          if (active > 0 && !stacked) {
-            return renderContent;
-          }
-          return null;
-        })()}
-      </div>
-    );
-
-    return (
-      <AUSpinnerComponent
-        domID={`spinner-${box.config.container}`}
-        loadingCondition={items.length === 0}
-        loaded={items.length > 0}
-        onLoad={() => {
-          box.loaded = true;
-        }}
-      >
-        {innerContent}
-      </AUSpinnerComponent>
-    );
-  }
-}
-
-DataBoxComponent.defaultProps = {
-
-};
-
-DataBoxComponent.propTypes = {
-  box: PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    data: PropTypes.shape({
-      source: PropTypes.string.isRequired,
-      mode: PropTypes.string.isRequired,
-      callback: PropTypes.func.isRequired,
-    }),
-    config: PropTypes.shape({
-      expand: PropTypes.bool.isRequired,
-      initLetter: PropTypes.string.isRequired,
-      alphabet: PropTypes.number.isRequired,
-      rememberState: PropTypes.bool.isRequired,
-      trigger: PropTypes.number.isRequired,
-      stacked: PropTypes.bool.isRequired,
-      buttons: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-      firstline: PropTypes.bool.isRequired,
-      container: PropTypes.string.isRequired,
-    }).isRequired,
-    background: PropTypes.shape({
-      color: PropTypes.string.isRequired,
-      linkColor: PropTypes.string.isRequired,
-      src: PropTypes.string.isRequired,
-      height: PropTypes.string.isRequired,
-      text: PropTypes.string.isRequired,
-    }).isRequired,
-    search: PropTypes.shape({
-      autocomplete: PropTypes.bool.isRequired,
-      index: PropTypes.number.isRequired,
-    }).isRequired,
-    loaded: PropTypes.bool.isRequired,
-  }).isRequired,
-  parse: PropTypes.func.isRequired,
-};
-
-DataBoxComponent.displayName = 'DataBoxComponent';
-export default DataBoxComponent;
+/* eslint-env browser */
+/* eslint react/no-danger: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { parse as qsParse } from 'query-string';
+import DataBoxButtonComponent from './DataBoxButtonComponent';
+import DataBoxGroupingComponent from './DataBoxGroupingComponent';
+import DataBoxSearchResultComponent from './DataBoxSearchResultComponent';
+import DataBoxAlphabetComponent from './DataBoxAlphabetComponent';
+import AUSpinnerComponent from '../AUSpinnerComponent';
+import { sortAlphaObj } from '../../lib/helpers';
+
+class DataBoxComponent extends React.Component {
+  constructor(props) {
+    super(props);
+
+    const qs = qsParse(window.location.search);
+
+    const conf = props.box.config;
+    const { stacked } = conf;
+    const active = conf.rememberState && sessionStorage.getItem(`box-header-${props.box.id}`) ? parseInt(sessionStorage.getItem(`box-header-${props.box.id}`), 10) : props.box.config.trigger;
+    this.state = {
+      active,
+      rawData: null,
+      items: [],
+      groupings: [],
+      stacked,
+      searchValue: typeof qs.initval === 'undefined' ? '' : decodeURIComponent(qs.initval),
+    };
+
+    this.setActive = this.setActive.bind(this);
+    this.setSearchValue = this.setSearchValue.bind(this);
+    this.getSuggestions = this.getSuggestions.bind(this);
+  }
+
+  componentDidMount() {
+    const { parse, box } = this.props;
+    const { searchValue } = this.state;
+    parse(box.data.source, (data) => {
+      const { items, groupings, rawData } = data;
+      this.setState({
+        items,
+        groupings: groupings || [],
+        rawData,
+      });
+      // this.setSearch(items);
+    });
+
+    if (searchValue !== '') {
+      this.setSearchValue(searchValue);
+    }
+  }
+
+  componentDidUpdate() {
+    const { box } = this.props;
+    const { rawData, items, groupings } = this.state;
+    const d = box.data;
+    if (typeof d.callback === 'function') {
+      d.callback(rawData || {
+        items,
+        groupings,
+      });
+    }
+  }
+
+  setActive(active) {
+    const { box } = this.props;
+    this.setState({ active });
+    if (box.config.rememberState) {
+      sessionStorage.setItem(`box-header-${box.id}`, active);
+    }
+  }
+
+  setSearchValue(searchValue) {
+    const { box } = this.props;
+    if (!box.search.autocomplete) {
+      this.setState({ searchValue, active: searchValue === '' ? 0 : box.search.index });
+    }
+  }
+
+  getSuggestions(value, collection, callback) {
+    const { items } = this.state;
+    const inputValue = value.trim().toLowerCase();
+    const inputLength = inputValue.length;
+    callback(inputLength < 2 ? []
+      : items.filter((x) => x.name.toLowerCase().indexOf(inputValue) > -1)
+        .sort(sortAlphaObj));
+  }
+
+  render() {
+    const { box } = this.props;
+    const {
+      active,
+      items,
+      searchValue,
+      groupings,
+      stacked,
+    } = this.state;
+    const conf = box.config;
+    const bg = box.background;
+
+    const renderContent = (
+      <div className="content">
+        {(() => {
+          const searchIndex = box.search.index;
+          const alphaIndex = box.config.alphabet;
+          const initLetter = box.config.rememberState && sessionStorage.getItem(`box-alphabet-${box.id}`)
+            ? sessionStorage.getItem(`box-alphabet-${box.id}`) : box.config.initLetter;
+          if (active === alphaIndex) {
+            return (
+              <DataBoxAlphabetComponent
+                boxID={box.id}
+                rememberState={box.config.rememberState}
+                initLetter={initLetter}
+                color={box.background.color}
+                linkColor={box.background.linkColor}
+                items={items}
+              />
+            );
+          }
+
+          if (searchValue !== '' && !box.search.autocomplete) {
+            return (
+              <DataBoxSearchResultComponent
+                items={items}
+                searchValue={searchValue}
+              />
+            );
+          }
+
+          let searchSubtract = 0;
+          if (searchIndex > 0) {
+            searchSubtract = searchIndex > active ? 0 : 1;
+          }
+
+          let alphaSubtract = 0;
+          if (alphaIndex > 0) {
+            alphaSubtract = alphaIndex > active ? 0 : 1;
+          }
+
+          const grouping = groupings[active - searchSubtract - alphaSubtract - 1];
+          if (grouping) {
+            return (
+              <DataBoxGroupingComponent
+                boxID={box.id}
+                rememberState={box.config.rememberState}
+                stacked={stacked}
+                grouping={grouping}
+                expand={box.config.expand}
+              />
+            );
+          }
+          // For callback purposes
+          return <div className={`box-${box.id}-empty`} />;
+        })()}
+      </div>
+    );
+
+    const renderButtons = conf.buttons.map((b, i) => {
+      const key = i;
+      if (stacked) {
+        return (
+          <div key={key}>
+            <DataBoxButtonComponent
+              box={box}
+              button={b}
+              index={i}
+              active={i + 1 === active}
+              setActive={this.setActive}
+              setSearchValue={this.setSearchValue}
+              getSuggestions={this.getSuggestions}
+            />
+            {(() => {
+              if (active > 0 && i + 1 === active) {
+                return renderContent;
+              }
+              return null;
+            })()}
+          </div>
+        );
+      }
+
+      return (
+        <DataBoxButtonComponent
+          key={key}
+          box={box}
+          button={b}
+          index={i}
+          active={i + 1 === active}
+          searchValue={searchValue}
+          setActive={this.setActive}
+          setSearchValue={this.setSearchValue}
+          getSuggestions={this.getSuggestions}
+        />
+      );
+    });
+
+    let classNames = `au_databox collapse buttons-${conf.buttons.length}`;
+
+    if (conf.firstline) {
+      classNames += ' first-line-full';
+    }
+
+    if (stacked) {
+      classNames += ' stacked';
+    }
+
+    const style = {
+      backgroundColor: bg.color,
+    };
+
+    if (bg.src !== '') {
+      style.backgroundImage = `url('${bg.src}')`;
+    }
+
+    if (bg.height > 0) {
+      style.height = bg.height;
+    }
+
+    const innerContent = (
+      <div className={classNames}>
+        <div className="button-wrapper" style={style}>
+          {(() => {
+            if (bg.text !== '') {
+              return <div className="au_focus" dangerouslySetInnerHTML={{ __html: bg.text }} />;
+            }
+            return null;
+          })()}
+          <div>
+            {renderButtons}
+          </div>
+        </div>
+        {(() => {
+          if (active > 0 && !stacked) {
+            return renderContent;
+          }
+          return null;
+        })()}
+      </div>
+    );
+
+    return (
+      <AUSpinnerComponent
+        domID={`spinner-${box.config.container}`}
+        loadingCondition={items.length === 0}
+        loaded={items.length > 0}
+        onLoad={() => {
+          box.loaded = true;
+        }}
+      >
+        {innerContent}
+      </AUSpinnerComponent>
+    );
+  }
+}
+
+DataBoxComponent.defaultProps = {
+
+};
+
+DataBoxComponent.propTypes = {
+  box: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    data: PropTypes.shape({
+      source: PropTypes.string.isRequired,
+      mode: PropTypes.string.isRequired,
+      callback: PropTypes.func.isRequired,
+    }),
+    config: PropTypes.shape({
+      expand: PropTypes.bool.isRequired,
+      initLetter: PropTypes.string.isRequired,
+      alphabet: PropTypes.number.isRequired,
+      rememberState: PropTypes.bool.isRequired,
+      trigger: PropTypes.number.isRequired,
+      stacked: PropTypes.bool.isRequired,
+      buttons: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+      firstline: PropTypes.bool.isRequired,
+      container: PropTypes.string.isRequired,
+    }).isRequired,
+    background: PropTypes.shape({
+      color: PropTypes.string.isRequired,
+      linkColor: PropTypes.string.isRequired,
+      src: PropTypes.string.isRequired,
+      height: PropTypes.string.isRequired,
+      text: PropTypes.string.isRequired,
+    }).isRequired,
+    search: PropTypes.shape({
+      autocomplete: PropTypes.bool.isRequired,
+      index: PropTypes.number.isRequired,
+    }).isRequired,
+    loaded: PropTypes.bool.isRequired,
+  }).isRequired,
+  parse: PropTypes.func.isRequired,
+};
+
+DataBoxComponent.displayName = 'DataBoxComponent';
+export default DataBoxComponent;