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

package/src/components/AutoSuggestComponent.js

@@ -1,132 +1,157 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Autosuggest from 'react-autosuggest';
-import debounce from 'lodash.debounce';
-
-class AutoSuggestComponent extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: '',
-      suggestions: [],
-    };
-
-    this.onChange = this.onChange.bind(this);
-    this.onSuggestionsFetchRequested = debounce(this.onSuggestionsFetchRequested.bind(this), 400);
-    this.onSuggestionsClearRequested = this.onSuggestionsClearRequested.bind(this);
-    this.onSuggestionSelected = this.onSuggestionSelected.bind(this);
-  }
-
-  onChange(event, { newValue }) {
-    const { setQuery } = this.props;
-    this.setState({
-      value: newValue,
-    }, () => {
-      setQuery(newValue);
-    });
-  }
-
-  onSuggestionsFetchRequested({ value }) {
-    const { getSuggestions, collection } = this.props;
-    getSuggestions(value, collection, (suggestions) => {
-      this.setState({
-        suggestions,
-      });
-    });
-  }
-
-  onSuggestionsClearRequested() {
-    this.setState({
-      suggestions: [],
-    });
-  }
-
-  onSuggestionSelected(event, { suggestion }) {
-    const { setResults, clearInput } = this.props;
-    setResults([suggestion]);
-    if (clearInput) {
-      this.setState({
-        value: '',
-      });
-    }
-  }
-
-  render() {
-    const { value, suggestions } = this.state;
-    const {
-      placeholder,
-      getSuggestionValue,
-      renderSuggestion,
-      id,
-      theme,
-      type,
-      initialValue,
-      disabled,
-    } = this.props;
-    const inputProps = {
-      placeholder,
-      value: initialValue || value,
-      id,
-      type,
-      disabled,
-      'aria-label': placeholder,
-      onChange: this.onChange,
-    };
-
-    return (
-      <Autosuggest
-        suggestions={suggestions}
-        onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
-        onSuggestionsClearRequested={this.onSuggestionsClearRequested}
-        onSuggestionSelected={this.onSuggestionSelected}
-        getSuggestionValue={getSuggestionValue}
-        renderSuggestion={renderSuggestion}
-        inputProps={inputProps}
-        theme={theme}
-      />
-    );
-  }
-}
-
-AutoSuggestComponent.displayName = 'AutoSuggestComponent';
-
-AutoSuggestComponent.defaultProps = {
-  id: 'autosuggest1',
-  theme: {
-    container: 'react-autosuggest__container',
-    containerOpen: 'react-autosuggest__container--open',
-    input: 'react-autosuggest__input',
-    inputOpen: 'react-autosuggest__input--open',
-    inputFocused: 'react-autosuggest__input--focused',
-    suggestionsContainer: 'react-autosuggest__suggestions-container',
-    suggestionsContainerOpen: 'react-autosuggest__suggestions-container--open',
-    suggestionsList: 'react-autosuggest__suggestions-list',
-    suggestion: 'react-autosuggest__suggestion',
-    suggestionFirst: 'react-autosuggest__suggestion--first',
-    suggestionHighlighted: 'react-autosuggest__suggestion--highlighted',
-    sectionContainer: 'react-autosuggest__section-container',
-    sectionContainerFirst: 'react-autosuggest__section-container--first',
-    sectionTitle: 'react-autosuggest__section-title',
-  },
-  clearInput: false,
-  type: 'text',
-  initialValue: '',
-  disabled: false,
-};
-
-AutoSuggestComponent.propTypes = {
-  setQuery: PropTypes.func.isRequired,
-  getSuggestions: PropTypes.func.isRequired,
-  getSuggestionValue: PropTypes.func.isRequired,
-  renderSuggestion: PropTypes.func.isRequired,
-  setResults: PropTypes.func.isRequired,
-  collection: PropTypes.arrayOf(PropTypes.any).isRequired,
-  placeholder: PropTypes.string.isRequired,
-  id: PropTypes.string,
-  theme: PropTypes.shape({}),
-  clearInput: PropTypes.bool,
-  type: PropTypes.string,
-  initialValue: PropTypes.string,
-  disabled: PropTypes.bool,
-};
-export default AutoSuggestComponent;
+import React from 'react';
+import PropTypes from 'prop-types';
+import Autosuggest from 'react-autosuggest';
+import debounce from 'lodash.debounce';
+
+class AutoSuggestComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: '',
+      suggestions: [],
+      noSuggestions: false,
+    };
+
+    this.onChange = this.onChange.bind(this);
+    this.onEnter = this.onEnter.bind(this);
+    this.onSuggestionsFetchRequested = debounce(this.onSuggestionsFetchRequested.bind(this), 400);
+    this.onSuggestionsClearRequested = this.onSuggestionsClearRequested.bind(this);
+    this.onSuggestionSelected = this.onSuggestionSelected.bind(this);
+  }
+
+  onChange(_, { newValue }) {
+    const { setQuery } = this.props;
+    this.setState({
+      value: newValue,
+    }, () => {
+      setQuery(newValue);
+    });
+  }
+
+  onEnter(event) {
+    const { suggestions } = this.state;
+    const { setResults } = this.props;
+    if (event.key === 'Enter') {
+      setResults(suggestions);
+    }
+  }
+
+  onSuggestionsFetchRequested({ value }) {
+    const { getSuggestions, collection } = this.props;
+    getSuggestions(value, collection, (suggestions) => {
+      this.setState({
+        suggestions,
+        noSuggestions: suggestions.length === 0 && value.trim() !== '' && value.trim().length > 1,
+      });
+    });
+  }
+
+  onSuggestionsClearRequested() {
+    this.setState({
+      suggestions: [],
+    });
+  }
+
+  onSuggestionSelected(event, { suggestion }) {
+    const { setResults, clearInput } = this.props;
+    setResults([suggestion]);
+    if (clearInput) {
+      this.setState({
+        value: '',
+      });
+    }
+  }
+
+  render() {
+    const { value, suggestions, noSuggestions } = this.state;
+    const {
+      placeholder,
+      getSuggestionValue,
+      renderSuggestion,
+      id,
+      theme,
+      type,
+      initialValue,
+      disabled,
+      noResultsText,
+    } = this.props;
+    const inputProps = {
+      placeholder,
+      value: initialValue || value,
+      id,
+      type,
+      disabled,
+      'aria-label': placeholder,
+      onChange: this.onChange,
+      onKeyDown: this.onEnter,
+    };
+
+    return (
+      <>
+        <Autosuggest
+          suggestions={suggestions}
+          onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
+          onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+          onSuggestionSelected={this.onSuggestionSelected}
+          getSuggestionValue={getSuggestionValue}
+          renderSuggestion={renderSuggestion}
+          inputProps={inputProps}
+          theme={theme}
+        />
+        {
+          (noSuggestions && noResultsText) && (
+            <p className="no-results">
+              <em>{noResultsText}</em>
+            </p>
+          )
+        }
+      </>
+    );
+  }
+}
+
+AutoSuggestComponent.displayName = 'AutoSuggestComponent';
+
+AutoSuggestComponent.defaultProps = {
+  id: 'autosuggest1',
+  theme: {
+    container: 'react-autosuggest__container',
+    containerOpen: 'react-autosuggest__container--open',
+    input: 'react-autosuggest__input',
+    inputOpen: 'react-autosuggest__input--open',
+    inputFocused: 'react-autosuggest__input--focused',
+    suggestionsContainer: 'react-autosuggest__suggestions-container',
+    suggestionsContainerOpen: 'react-autosuggest__suggestions-container--open',
+    suggestionsList: 'react-autosuggest__suggestions-list',
+    suggestion: 'react-autosuggest__suggestion',
+    suggestionFirst: 'react-autosuggest__suggestion--first',
+    suggestionHighlighted: 'react-autosuggest__suggestion--highlighted',
+    sectionContainer: 'react-autosuggest__section-container',
+    sectionContainerFirst: 'react-autosuggest__section-container--first',
+    sectionTitle: 'react-autosuggest__section-title',
+  },
+  clearInput: false,
+  type: 'text',
+  initialValue: '',
+  disabled: false,
+  setQuery: () => { },
+  noResultsText: '',
+};
+
+AutoSuggestComponent.propTypes = {
+  setQuery: PropTypes.func,
+  getSuggestions: PropTypes.func.isRequired,
+  getSuggestionValue: PropTypes.func.isRequired,
+  renderSuggestion: PropTypes.func.isRequired,
+  setResults: PropTypes.func.isRequired,
+  collection: PropTypes.arrayOf(PropTypes.any).isRequired,
+  placeholder: PropTypes.string.isRequired,
+  id: PropTypes.string,
+  theme: PropTypes.shape({}),
+  clearInput: PropTypes.bool,
+  type: PropTypes.string,
+  initialValue: PropTypes.string,
+  disabled: PropTypes.bool,
+  noResultsText: PropTypes.string,
+};
+export default AutoSuggestComponent;

package/src/components/alphabox/AlphaBoxComponent.js

@@ -1,140 +1,145 @@
-/* eslint-env browser */
-import React from 'react';
-import PropTypes from 'prop-types';
-import axios from 'axios';
-import AlphaBoxContentComponent from './AlphaBoxContentComponent';
-import AutoSuggestComponent from '../AutoSuggestComponent';
-import DataBoxSuggestionComponent from '../databox/DataBoxSuggestionComponent';
-
-class AlphaBoxComponent extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      items: [],
-    };
-
-    this.getSuggestions = this.getSuggestions.bind(this);
-  }
-
-  componentDidMount() {
-    const { box } = this.props;
-    const { data } = box;
-    if (data.mode === 'json' && data.source !== '') {
-      if (data.itemsOnly) {
-        data.source += '?itemsOnly=true';
-      }
-      axios.get(data.source).then((promise) => {
-        const { data: pData } = promise;
-        this.setState({ items: pData.items });
-      });
-    }
-  }
-
-  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((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase(), 'da', { ignorePunctuation: true })));
-  }
-
-  render() {
-    const { box } = this.props;
-    const { items } = this.state;
-    const { config } = box;
-    const renderLinks = config.links.map((l) => (
-      <li key={l.title}>
-        <a
-          href={l.url}
-          onClick={() => {
-            if (typeof l.onClick === 'function') {
-              l.onClick();
-            }
-          }}
-          style={{ backgroundColor: box.background.linkColor }}
-        >
-          {l.title}
-        </a>
-      </li>
-    ));
-
-    return (
-      <div className="au_alphabox" style={{ backgroundColor: box.background.color }}>
-        <div>
-          <h2>
-            <a href={config.url}>{config.title}</a>
-          </h2>
-          {(() => {
-            if (config.description !== '') {
-              return <p>{config.description}</p>;
-            }
-            return null;
-          })()}
-          {(() => {
-            if (config.links.length > 0) {
-              return (
-                <ul className="quicklinks resetlist">
-                  {renderLinks}
-                </ul>
-              );
-            }
-            return null;
-          })()}
-          <AlphaBoxContentComponent
-            items={items}
-            linkColor={box.background.linkColor}
-          />
-          <AutoSuggestComponent
-            placeholder={box.search.placeHolder}
-            setQuery={() => { }}
-            setResults={(_items) => {
-              if (_items.length === 1 && _items[0].url) {
-                window.location.href = _items[0].url;
-              }
-            }}
-            collection={[]}
-            getSuggestions={this.getSuggestions}
-            getSuggestionValue={(suggestion) => suggestion.name}
-            renderSuggestion={(suggestion) => <DataBoxSuggestionComponent item={suggestion} />}
-          />
-        </div>
-      </div>
-    );
-  }
-}
-
-AlphaBoxComponent.propTypes = {
-  box: PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    data: PropTypes.shape({
-      itemsOnly: PropTypes.bool.isRequired,
-      mode: PropTypes.string.isRequired,
-      source: PropTypes.string.isRequired,
-    }),
-    config: PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      url: PropTypes.string.isRequired,
-      description: PropTypes.string.isRequired,
-      container: PropTypes.string.isRequired,
-      tracking: PropTypes.string.isRequired,
-      links: PropTypes.arrayOf(PropTypes.shape({
-        title: PropTypes.string.isRequired,
-        url: PropTypes.string.isRequired,
-      })).isRequired,
-      title: PropTypes.string.isRequired,
-    }).isRequired,
-    background: PropTypes.shape({
-      color: PropTypes.string.isRequired,
-      linkColor: PropTypes.string.isRequired,
-    }).isRequired,
-    search: PropTypes.shape({
-      placeHolder: PropTypes.string.isRequired,
-      minLength: PropTypes.number.isRequired,
-    }).isRequired,
-  }).isRequired,
-};
-
-AlphaBoxComponent.displayName = 'AlphaBoxComponent';
-export default AlphaBoxComponent;
+/* eslint-env browser */
+import React from 'react';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+import AlphaBoxContentComponent from './AlphaBoxContentComponent';
+import AutoSuggestComponent from '../AutoSuggestComponent';
+import DataBoxSuggestionComponent from '../databox/DataBoxSuggestionComponent';
+
+class AlphaBoxComponent extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      items: [],
+    };
+
+    this.getSuggestions = this.getSuggestions.bind(this);
+  }
+
+  componentDidMount() {
+    const { box } = this.props;
+    const { data } = box;
+    if (data.mode === 'json' && data.source !== '') {
+      if (data.itemsOnly) {
+        data.source += '?itemsOnly=true';
+      }
+      axios.get(data.source).then((promise) => {
+        const { data: pData } = promise;
+        this.setState({ items: pData.items });
+      });
+    }
+  }
+
+  getSuggestions(value, _, 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
+          || x.name.replace(/-/ig, ' ').toLowerCase().indexOf(inputValue) > -1
+          || x.name.replace(/ /ig, '-').toLowerCase().indexOf(inputValue) > -1,
+      )
+        .sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase(), 'da', { ignorePunctuation: true })));
+  }
+
+  render() {
+    const { box } = this.props;
+    const { items } = this.state;
+    const { config } = box;
+    const renderLinks = config.links.map((l) => (
+      <li key={l.title}>
+        <a
+          href={l.url}
+          onClick={() => {
+            if (typeof l.onClick === 'function') {
+              l.onClick();
+            }
+          }}
+          style={{ backgroundColor: box.background.linkColor }}
+        >
+          {l.title}
+        </a>
+      </li>
+    ));
+
+    return (
+      <div className="au_alphabox" style={{ backgroundColor: box.background.color }}>
+        <div>
+          <h2>
+            <a href={config.url}>{config.title}</a>
+          </h2>
+          <AlphaBoxContentComponent
+            items={items}
+            linkColor={box.background.linkColor}
+            noResultsText={config.noResultsAlphabet}
+            noResultsUri={config.noResultsUri}
+          />
+          <AutoSuggestComponent
+            placeholder={box.search.placeHolder}
+            setResults={(_items) => {
+              if (_items.length >= 1 && _items[0].url) {
+                window.location.href = _items[0].url;
+              }
+            }}
+            collection={[]}
+            getSuggestions={this.getSuggestions}
+            getSuggestionValue={(suggestion) => suggestion.name}
+            renderSuggestion={(suggestion) => <DataBoxSuggestionComponent item={suggestion} />}
+            noResultsText={config.noResultsSearch}
+          />
+          {
+            config.description !== '' && (
+              <h3>{config.description}</h3>
+            )
+          }
+          {
+            config.links.length > 0 && (
+              <ul className="quicklinks resetlist">
+                {renderLinks}
+              </ul>
+            )
+          }
+        </div>
+      </div>
+    );
+  }
+}
+
+AlphaBoxComponent.propTypes = {
+  box: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    data: PropTypes.shape({
+      itemsOnly: PropTypes.bool.isRequired,
+      mode: PropTypes.string.isRequired,
+      source: PropTypes.string.isRequired,
+    }),
+    config: PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      url: PropTypes.string.isRequired,
+      description: PropTypes.string.isRequired,
+      container: PropTypes.string.isRequired,
+      tracking: PropTypes.string.isRequired,
+      links: PropTypes.arrayOf(PropTypes.shape({
+        title: PropTypes.string.isRequired,
+        url: PropTypes.string.isRequired,
+      })).isRequired,
+      title: PropTypes.string.isRequired,
+      noResultsAlphabet: PropTypes.string.isRequired,
+      noResultsSearch: PropTypes.string.isRequired,
+      noResultsUri: PropTypes.string.isRequired,
+    }).isRequired,
+    background: PropTypes.shape({
+      color: PropTypes.string.isRequired,
+      linkColor: PropTypes.string.isRequired,
+    }).isRequired,
+    search: PropTypes.shape({
+      placeHolder: PropTypes.string.isRequired,
+      minLength: PropTypes.number.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
+
+AlphaBoxComponent.displayName = 'AlphaBoxComponent';
+export default AlphaBoxComponent;