@aarhus-university/au-lib-react-components 9.11.19 → 9.12.0

package/src/components/alphabox/AlphaBoxContentComponent.js

@@ -1,125 +1,136 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { sortAlphaObj } from '../../lib/helpers';
-
-class AlphaBoxContentComponent extends React.Component {
-  constructor(props) {
-    super(props);
-    this.letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'æ', 'ø', 'å'];
-    this.state = {
-      letterIndex: -1,
-    };
-  }
-
-  render() {
-    const { letterIndex } = this.state;
-    const { items, linkColor } = this.props;
-
-    const renderLetters = this.letters.map((l, i) => {
-      const available = items.filter(
-        (x) => x.name.toLowerCase().indexOf(l) === 0,
-      ).length > 0;
-
-      let classNames = '';
-      if (available) {
-        classNames += 'available';
-      }
-
-      if (i === letterIndex) {
-        classNames += ' active';
-      }
-
-      let style = {};
-      if (available) {
-        if (letterIndex === i) {
-          style = { backgroundColor: '#fff', color: linkColor };
-        } else {
-          style = { backgroundColor: linkColor };
-        }
-      }
-
-      return (
-        <li
-          key={l}
-          className={classNames}
-        >
-          <button
-            type="button"
-            style={style}
-            onClick={() => {
-              if (available) {
-                this.setState({
-                  letterIndex: i,
-                });
-              }
-            }}
-          >
-            {l}
-          </button>
-        </li>
-      );
-    });
-
-    let filtered = [];
-    if (letterIndex > -1) {
-      filtered = items.filter(
-        (x) => x.name.toLowerCase().indexOf(this.letters[letterIndex]) === 0,
-      );
-    }
-
-    const renderItems = filtered.sort(sortAlphaObj).map((item, i) => {
-      const key = i;
-      const renderChildren = item.children.map(
-        (c) => <li key={c.name}><a href={c.url}>{c.name}</a></li>,
-      );
-
-      if (item.children.length > 0) {
-        return (
-          <li key={key}>
-            <a href={item.url}>{item.name}</a>
-            <ul>
-              {renderChildren}
-            </ul>
-          </li>
-        );
-      }
-
-      return (
-        <li key={key}>
-          <a href={item.url}>{item.name}</a>
-        </li>
-      );
-    });
-
-    return (
-      <div className="au_alphabox_content">
-        <ul className="letters">
-          {renderLetters}
-        </ul>
-        {(() => {
-          if (letterIndex > -1) {
-            return (
-              <div>
-                <ul className="items">
-                  {renderItems}
-                </ul>
-              </div>
-            );
-          }
-          return null;
-        })()}
-      </div>
-    );
-  }
-}
-
-AlphaBoxContentComponent.propTypes = {
-  linkColor: PropTypes.string.isRequired,
-  items: PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    url: PropTypes.string.isRequired,
-  })).isRequired,
-};
-
-AlphaBoxContentComponent.displayName = 'AlphaBoxContentComponent';
-export default AlphaBoxContentComponent;
+import React from 'react';
+import PropTypes from 'prop-types';
+import { sortAlphaObj } from '../../lib/helpers';
+
+class AlphaBoxContentComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'æ', 'ø', 'å'];
+    this.state = {
+      letterIndex: -1,
+    };
+  }
+
+  render() {
+    const { letterIndex } = this.state;
+    const {
+      items, linkColor, noResultsText, noResultsUri,
+    } = this.props;
+
+    const renderLetters = this.letters.map((l, i) => {
+      const available = items.filter(
+        (x) => x.name.toLowerCase().indexOf(l) === 0,
+      ).length > 0;
+
+      let classNames = '';
+      if (available) {
+        classNames += 'available';
+      }
+
+      if (i === letterIndex) {
+        classNames += ' active';
+      }
+
+      let style = {};
+      if (available) {
+        if (letterIndex === i) {
+          style = { backgroundColor: '#fff', color: linkColor };
+        } else {
+          style = { backgroundColor: linkColor };
+        }
+      }
+
+      return (
+        <li
+          key={l}
+          className={classNames}
+        >
+          <button
+            type="button"
+            style={style}
+            onClick={() => {
+              if (available) {
+                this.setState({
+                  letterIndex: i,
+                });
+              }
+            }}
+          >
+            {l}
+          </button>
+        </li>
+      );
+    });
+
+    let filtered = [];
+    if (letterIndex > -1) {
+      filtered = items.filter(
+        (x) => x.name.toLowerCase().indexOf(this.letters[letterIndex]) === 0,
+      );
+    }
+
+    const renderItems = filtered.sort(sortAlphaObj).map((item, i) => {
+      const key = i;
+      const renderChildren = item.children.map(
+        (c) => <li key={c.name}><a href={c.url}>{c.name}</a></li>,
+      );
+
+      if (item.children.length > 0) {
+        return (
+          <li key={key}>
+            <a href={item.url}>{item.name}</a>
+            <ul>
+              {renderChildren}
+            </ul>
+          </li>
+        );
+      }
+
+      return (
+        <li key={key}>
+          <a href={item.url}>{item.name}</a>
+        </li>
+      );
+    });
+
+    return (
+      <div className="au_alphabox_content">
+        <ul className="letters">
+          {renderLetters}
+        </ul>
+        {
+          letterIndex > -1 && (
+            <div>
+              <ul className="items">
+                {renderItems}
+                {
+                  (noResultsText && noResultsUri) && (
+                    <li className="no-results"><a href={noResultsUri}>{noResultsText}</a></li>
+                  )
+                }
+              </ul>
+            </div>
+          )
+        }
+      </div>
+    );
+  }
+}
+
+AlphaBoxContentComponent.defaultProps = {
+  noResultsText: '',
+  noResultsUri: '',
+};
+
+AlphaBoxContentComponent.propTypes = {
+  linkColor: PropTypes.string.isRequired,
+  items: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired,
+  })).isRequired,
+  noResultsText: PropTypes.string,
+  noResultsUri: PropTypes.string,
+};
+
+AlphaBoxContentComponent.displayName = 'AlphaBoxContentComponent';
+export default AlphaBoxContentComponent;

package/src/components/context/AUUserContextComponent.js

@@ -1,91 +1,91 @@
-/* eslint-env browser */
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import AUSpinnerComponent from '../delphinus/AUSpinnerComponent';
-
-const AUUserContextComponent = ({
-  auid,
-  contextKey,
-  spinner,
-  children,
-  handleContext,
-  handleError,
-  loginComponent,
-  emptyComponent,
-  clearCache,
-  loggedIn,
-  enrichContext,
-}) => {
-  const { auAuth } = window;
-  const [hasContext, setHasContext] = useState(false);
-  const setContext = () => {
-    if ((loggedIn || auAuth.getUser() != null) && !hasContext) {
-      auAuth.setUserContext(auid, contextKey, clearCache, (userContext) => {
-        setHasContext(true);
-        handleContext(userContext);
-        console.log(`Context for key ${contextKey} has been received and sent to handler`);
-      }, (status, json) => {
-        setHasContext(true); // Her skal vi måske have en special fejltilstand?
-        handleError(status, json);
-      }, true, loggedIn, enrichContext);
-    }
-  };
-  useEffect(() => {
-    if (!spinner) {
-      setContext();
-    }
-  });
-
-  // Hvis vi vil vise en loginskærm, fx på mitstudie
-  if (loginComponent != null && auAuth.getUser() == null && !loggedIn) {
-    return loginComponent;
-  }
-
-  // Hvis spinner er slået til, viser vi content deri
-  if (spinner) {
-    return (
-      <AUSpinnerComponent
-        onLoad={setContext}
-        loadingCondition={!hasContext}
-        loaded={hasContext}
-      >
-        {children}
-      </AUSpinnerComponent>
-    );
-  }
-
-  // Hvis vi ikke er indlæst har vi mulighed for at vise en tom tilstand
-  if (!hasContext) {
-    return emptyComponent;
-  }
-
-  return children;
-};
-
-AUUserContextComponent.defaultProps = {
-  auid: 0,
-  spinner: true,
-  loginComponent: null,
-  emptyComponent: null,
-  clearCache: false,
-  loggedIn: false,
-  handleError: (status, json) => console.error(status, json),
-  enrichContext: async (json) => json,
-};
-
-AUUserContextComponent.propTypes = {
-  auid: PropTypes.number,
-  contextKey: PropTypes.string,
-  spinner: PropTypes.bool,
-  children: PropTypes.element.isRequired,
-  handleContext: PropTypes.func.isRequired,
-  handleError: PropTypes.func.isRequired,
-  loginComponent: PropTypes.element,
-  emptyComponent: PropTypes.element,
-  clearCache: PropTypes.bool,
-  loggedIn: PropTypes.bool,
-  enrichContext: PropTypes.func.isRequired,
-};
-
-AUUserContextComponent.displayName = 'AUUserContextComponent';
-export default AUUserContextComponent;
+/* eslint-env browser */
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import AUSpinnerComponent from '../delphinus/AUSpinnerComponent';
+
+const AUUserContextComponent = ({
+  auid,
+  contextKey,
+  spinner,
+  children,
+  handleContext,
+  handleError,
+  loginComponent,
+  emptyComponent,
+  clearCache,
+  loggedIn,
+  enrichContext,
+}) => {
+  const { auAuth } = window;
+  const [hasContext, setHasContext] = useState(false);
+  const setContext = () => {
+    if ((loggedIn || auAuth.getUser() != null) && !hasContext) {
+      auAuth.setUserContext(auid, contextKey, clearCache, (userContext) => {
+        setHasContext(true);
+        handleContext(userContext);
+        console.log(`Context for key ${contextKey} has been received and sent to handler`);
+      }, (status, json) => {
+        setHasContext(true); // Her skal vi måske have en special fejltilstand?
+        handleError(status, json);
+      }, true, loggedIn, enrichContext);
+    }
+  };
+  useEffect(() => {
+    if (!spinner) {
+      setContext();
+    }
+  });
+
+  // Hvis vi vil vise en loginskærm, fx på mitstudie
+  if (loginComponent != null && auAuth.getUser() == null && !loggedIn) {
+    return loginComponent;
+  }
+
+  // Hvis spinner er slået til, viser vi content deri
+  if (spinner) {
+    return (
+      <AUSpinnerComponent
+        onLoad={setContext}
+        loadingCondition={!hasContext}
+        loaded={hasContext}
+      >
+        {children}
+      </AUSpinnerComponent>
+    );
+  }
+
+  // Hvis vi ikke er indlæst har vi mulighed for at vise en tom tilstand
+  if (!hasContext) {
+    return emptyComponent;
+  }
+
+  return children;
+};
+
+AUUserContextComponent.defaultProps = {
+  auid: 0,
+  spinner: true,
+  loginComponent: null,
+  emptyComponent: null,
+  clearCache: false,
+  loggedIn: false,
+  handleError: (status, json) => console.error(status, json),
+  enrichContext: async (json) => json,
+};
+
+AUUserContextComponent.propTypes = {
+  auid: PropTypes.number,
+  contextKey: PropTypes.string,
+  spinner: PropTypes.bool,
+  children: PropTypes.element.isRequired,
+  handleContext: PropTypes.func.isRequired,
+  handleError: PropTypes.func.isRequired,
+  loginComponent: PropTypes.element,
+  emptyComponent: PropTypes.element,
+  clearCache: PropTypes.bool,
+  loggedIn: PropTypes.bool,
+  enrichContext: PropTypes.func.isRequired,
+};
+
+AUUserContextComponent.displayName = 'AUUserContextComponent';
+export default AUUserContextComponent;

package/src/components/context/ImpersonateComponent.js

@@ -1,54 +1,54 @@
-/* eslint-disable jsx-a11y/label-has-associated-control */
-/* eslint-disable jsx-a11y/label-has-for */
-/* eslint-env browser */
-import React, { useState } from 'react';
-
-const ImpersonateComponent = ({ impersonating, children }) => {
-  const [auId, setAuid] = useState(window.API_AUID || '');
-
-  let form = null;
-  if (impersonating && !window.location.href.includes('showForm=false')) {
-    form = (
-      <div key="impersonate" className="page__content__block">
-        <form method="get" action="" id="impersonate-form">
-          <h1 className="pagetitle">
-            Test af frontend-applikation
-          </h1>
-          <div className="form__field">
-            <label htmlFor="impersonate-auId" />
-            <input
-              type="text"
-              className="test"
-              id="impersonate-auId"
-              name="auId"
-              value={auId}
-              onChange={(e) => {
-                setAuid(e.target.value);
-              }}
-              placeholder="Indtast auId eller studienummer for den studerende, du vil udgive dig for"
-            />
-          </div>
-          <div className="form__field form__field--horizontal">
-            <label htmlFor="presentation-mode">
-              {'Præsentationsvisning'}
-            </label>
-            <input type="checkbox" name="showForm" value="false" />
-          </div>
-          <div className="form__field">
-            <input type="submit" className="button" value="Test" />
-          </div>
-        </form>
-      </div>
-    );
-  }
-
-  const content = impersonating && !window.API_AUID ? null : children;
-
-  return [
-    form,
-    content,
-  ];
-};
-
-ImpersonateComponent.displayName = 'ImpersonateComponent';
-export default ImpersonateComponent;
+/* eslint-disable jsx-a11y/label-has-associated-control */
+/* eslint-disable jsx-a11y/label-has-for */
+/* eslint-env browser */
+import React, { useState } from 'react';
+
+const ImpersonateComponent = ({ impersonating, children }) => {
+  const [auId, setAuid] = useState(window.API_AUID || '');
+
+  let form = null;
+  if (impersonating && !window.location.href.includes('showForm=false')) {
+    form = (
+      <div key="impersonate" className="page__content__block">
+        <form method="get" action="" id="impersonate-form">
+          <h1 className="pagetitle">
+            Test af frontend-applikation
+          </h1>
+          <div className="form__field">
+            <label htmlFor="impersonate-auId" />
+            <input
+              type="text"
+              className="test"
+              id="impersonate-auId"
+              name="auId"
+              value={auId}
+              onChange={(e) => {
+                setAuid(e.target.value);
+              }}
+              placeholder="Indtast auId eller studienummer for den studerende, du vil udgive dig for"
+            />
+          </div>
+          <div className="form__field form__field--horizontal">
+            <label htmlFor="presentation-mode">
+              {'Præsentationsvisning'}
+            </label>
+            <input type="checkbox" name="showForm" value="false" />
+          </div>
+          <div className="form__field">
+            <input type="submit" className="button" value="Test" />
+          </div>
+        </form>
+      </div>
+    );
+  }
+
+  const content = impersonating && !window.API_AUID ? null : children;
+
+  return [
+    form,
+    content,
+  ];
+};
+
+ImpersonateComponent.displayName = 'ImpersonateComponent';
+export default ImpersonateComponent;