@aarhus-university/au-lib-react-components 11.3.2 → 11.4.0

package/src/components/AUAutoSuggestComponent.js

@@ -1,158 +1,158 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-import React from 'react';
-import PropTypes from 'prop-types';
-import Autosuggest from 'react-autosuggest';
-import debounce from 'lodash.debounce';
-
-class AUAutoSuggestComponent 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>
-          )
-        }
-      </>
-    );
-  }
-}
-
-AUAutoSuggestComponent.displayName = 'AUAutoSuggestComponent';
-
-AUAutoSuggestComponent.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: '',
-};
-
-AUAutoSuggestComponent.propTypes = {
-  setQuery: PropTypes.func,
-  getSuggestions: PropTypes.func.isRequired,
-  getSuggestionValue: PropTypes.func.isRequired,
-  renderSuggestion: PropTypes.func.isRequired,
-  setResults: PropTypes.func.isRequired,
-  collection: PropTypes.arrayOf(PropTypes.shape({})).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 AUAutoSuggestComponent;
+/* eslint-disable @typescript-eslint/no-empty-function */
+import React from 'react';
+import PropTypes from 'prop-types';
+import Autosuggest from 'react-autosuggest';
+import debounce from 'lodash.debounce';
+
+class AUAutoSuggestComponent 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>
+          )
+        }
+      </>
+    );
+  }
+}
+
+AUAutoSuggestComponent.displayName = 'AUAutoSuggestComponent';
+
+AUAutoSuggestComponent.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: '',
+};
+
+AUAutoSuggestComponent.propTypes = {
+  setQuery: PropTypes.func,
+  getSuggestions: PropTypes.func.isRequired,
+  getSuggestionValue: PropTypes.func.isRequired,
+  renderSuggestion: PropTypes.func.isRequired,
+  setResults: PropTypes.func.isRequired,
+  collection: PropTypes.arrayOf(PropTypes.shape({})).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 AUAutoSuggestComponent;

package/src/components/AUButtonComponent.tsx

@@ -1,84 +1,84 @@
-import React, {
-  FC, MouseEvent, RefObject,
-} from 'react';
-
-const AUButtonComponent: FC<AUButtonComponentProps> = ({
-  label,
-  disabled,
-  size,
-  type,
-  icon,
-  iconPosition,
-  hideLabel,
-  mode,
-  btnRef,
-  classNames,
-  ariaExpanded,
-  asSubmit,
-  onClick,
-}: AUButtonComponentProps) => {
-  const sizeClass = size === 'default' ? '' : `button--${size}`;
-  const typeClass = type === 'default' ? '' : `button--${type}`;
-  let iconClass = '';
-  if (icon) {
-    iconClass = `button--icon icon-${icon}`;
-    if (iconPosition) {
-      iconClass = `${iconClass} button--icon--${iconPosition}`;
-    }
-
-    if (hideLabel) {
-      iconClass = `${iconClass} button--icon--hide-label`;
-    }
-  }
-  let modeClass = '';
-  if (mode !== 'none') {
-    modeClass = `button--${mode}`;
-  }
-
-  return (
-    <button
-      ref={btnRef}
-      type={asSubmit ? 'submit' : 'button'}
-      disabled={disabled}
-      className={[
-        'button',
-        sizeClass,
-        typeClass,
-        iconClass,
-        modeClass,
-        disabled && mode !== 'processing' ? 'visually-disabled' : '',
-      ].concat(classNames || []).join(' ').replace(/\s+/g, ' ').trim()}
-      title={icon && hideLabel ? label : undefined}
-      aria-expanded={ariaExpanded}
-      onClick={(event: MouseEvent<HTMLButtonElement>) => {
-        if (typeof onClick !== 'undefined') {
-          onClick(event, btnRef);
-        }
-      }}
-    >
-      {label}
-    </button>
-  );
-};
-
-AUButtonComponent.defaultProps = {
-  disabled: false,
-  size: 'default',
-  type: 'default',
-  icon: '',
-  iconPosition: 'left',
-  hideLabel: false,
-  mode: 'none',
-  classNames: [],
-  ariaExpanded: false,
-  asSubmit: false,
-  // eslint-disable-next-line no-console
-  onClick: (
-    event: MouseEvent<HTMLButtonElement>,
-    ref: RefObject<HTMLButtonElement> | undefined,
-    // eslint-disable-next-line no-console
-  ) => console.log(event, ref),
-};
-
-AUButtonComponent.displayName = 'AUButtonComponent';
-export default AUButtonComponent;
+import React, {
+  FC, MouseEvent, RefObject,
+} from 'react';
+
+const AUButtonComponent: FC<AUButtonComponentProps> = ({
+  label,
+  disabled,
+  size,
+  type,
+  icon,
+  iconPosition,
+  hideLabel,
+  mode,
+  btnRef,
+  classNames,
+  ariaExpanded,
+  asSubmit,
+  onClick,
+}: AUButtonComponentProps) => {
+  const sizeClass = size === 'default' ? '' : `button--${size}`;
+  const typeClass = type === 'default' ? '' : `button--${type}`;
+  let iconClass = '';
+  if (icon) {
+    iconClass = `button--icon icon-${icon}`;
+    if (iconPosition) {
+      iconClass = `${iconClass} button--icon--${iconPosition}`;
+    }
+
+    if (hideLabel) {
+      iconClass = `${iconClass} button--icon--hide-label`;
+    }
+  }
+  let modeClass = '';
+  if (mode !== 'none') {
+    modeClass = `button--${mode}`;
+  }
+
+  return (
+    <button
+      ref={btnRef}
+      type={asSubmit ? 'submit' : 'button'}
+      disabled={disabled}
+      className={[
+        'button',
+        sizeClass,
+        typeClass,
+        iconClass,
+        modeClass,
+        disabled && mode !== 'processing' ? 'visually-disabled' : '',
+      ].concat(classNames || []).join(' ').replace(/\s+/g, ' ').trim()}
+      title={icon && hideLabel ? label : undefined}
+      aria-expanded={ariaExpanded}
+      onClick={(event: MouseEvent<HTMLButtonElement>) => {
+        if (typeof onClick !== 'undefined') {
+          onClick(event, btnRef);
+        }
+      }}
+    >
+      {label}
+    </button>
+  );
+};
+
+AUButtonComponent.defaultProps = {
+  disabled: false,
+  size: 'default',
+  type: 'default',
+  icon: '',
+  iconPosition: 'left',
+  hideLabel: false,
+  mode: 'none',
+  classNames: [],
+  ariaExpanded: false,
+  asSubmit: false,
+  // eslint-disable-next-line no-console
+  onClick: (
+    event: MouseEvent<HTMLButtonElement>,
+    ref: RefObject<HTMLButtonElement> | undefined,
+    // eslint-disable-next-line no-console
+  ) => console.log(event, ref),
+};
+
+AUButtonComponent.displayName = 'AUButtonComponent';
+export default AUButtonComponent;