@aarhus-university/au-lib-react-components 10.6.0 → 10.9.0

package/src/layout-2016/components/flowbox/FlowBoxComponent.js

@@ -1,126 +1,126 @@
-/* eslint-env browser */
-/* eslint jsx-a11y/click-events-have-key-events: 0 */
-/* eslint jsx-a11y/no-noninteractive-element-interactions: 0 */
-/* eslint jsx-a11y/control-has-associated-label: 0 */
-import React from 'react';
-import PropTypes from 'prop-types';
-import FlowBoxPhoneComponent from './FlowBoxPhoneComponent';
-import { flowboxLabels as labels } from '../../../lib/i18n';
-
-class FlowBoxComponent extends React.Component {
-  constructor(props) {
-    super(props);
-    const { box } = props;
-    this.state = {
-      node: box.item,
-    };
-
-    this.prevNode = this.prevNode.bind(this);
-    this.nextNode = this.nextNode.bind(this);
-    this.handleSelectChange = this.handleSelectChange.bind(this);
-  }
-
-  handleSelectChange(event) {
-    const { node } = this.state;
-    const child = node.children.find((n) => n.name === event.target.value);
-    this.setState({
-      node: child,
-    });
-  }
-
-  nextNode(child) {
-    this.setState({
-      node: child,
-    });
-  }
-
-  prevNode(node) {
-    this.setState({
-      node: node.parent,
-    });
-  }
-
-  render() {
-    const { node } = this.state;
-    const { box, lang } = this.props;
-    const { children } = node;
-    return (
-      <div>
-        <h2 dangerouslySetInnerHTML={{ __html: `<span>${box.data.prepend} </span>${node.name}` }} />
-        {(() => {
-          if (box.config.render === 'select') {
-            if (children.filter((x) => x.children.length > 0).length > 0) {
-              return (
-                <select onChange={this.handleSelectChange}>
-                  <option value="">{`${labels[lang].select}...`}</option>
-                  {children.map((c) => <option key={c.name} value={c.name}>{c.name}</option>)}
-                </select>
-              );
-            }
-          }
-          return (
-            <ul>
-              {children.map(
-                (c) => (
-                  <li key={c.name}>
-                    {(() => {
-                      if (c.children.length > 0) {
-                        return (
-                          <button
-                            type="button"
-                            onClick={() => {
-                              this.nextNode(c);
-                            }}
-                            dangerouslySetInnerHTML={{ __html: c.name }}
-                          />
-                        );
-                      }
-                      if (c.name.indexOf(' ') === -1 && window.renderVCard) { // Det skal vi så lige huske at sætte på medarbejderkontaktboksene!
-                        return <FlowBoxPhoneComponent phone={c.name} lang={lang} />;
-                      }
-                      return <span dangerouslySetInnerHTML={{ __html: c.name }} />;
-                    })()}
-                  </li>
-                ),
-              )}
-            </ul>
-          );
-        })()}
-        {(() => {
-          if (node.parent != null) {
-            return (
-              <button
-                type="button"
-                className="button small"
-                onClick={() => {
-                  this.prevNode(node);
-                }}
-              >
-                {labels[lang].back}
-              </button>
-            );
-          }
-          return null;
-        })()}
-      </div>
-    );
-  }
-}
-
-FlowBoxComponent.propTypes = {
-  box: PropTypes.shape({
-    item: PropTypes.shape({
-      name: PropTypes.string.isRequired,
-    }).isRequired,
-    data: PropTypes.shape({
-      prepend: PropTypes.string.isRequired,
-    }).isRequired,
-    config: PropTypes.shape({
-      render: PropTypes.string.isRequired,
-    }).isRequired,
-  }).isRequired,
-  lang: PropTypes.string.isRequired,
-};
-
-FlowBoxComponent.displayName = 'FlowBoxComponent';
-export default FlowBoxComponent;
+/* eslint-env browser */
+/* eslint jsx-a11y/click-events-have-key-events: 0 */
+/* eslint jsx-a11y/no-noninteractive-element-interactions: 0 */
+/* eslint jsx-a11y/control-has-associated-label: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+import FlowBoxPhoneComponent from './FlowBoxPhoneComponent';
+import { flowboxLabels as labels } from '../../../lib/i18n';
+
+class FlowBoxComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    const { box } = props;
+    this.state = {
+      node: box.item,
+    };
+
+    this.prevNode = this.prevNode.bind(this);
+    this.nextNode = this.nextNode.bind(this);
+    this.handleSelectChange = this.handleSelectChange.bind(this);
+  }
+
+  handleSelectChange(event) {
+    const { node } = this.state;
+    const child = node.children.find((n) => n.name === event.target.value);
+    this.setState({
+      node: child,
+    });
+  }
+
+  nextNode(child) {
+    this.setState({
+      node: child,
+    });
+  }
+
+  prevNode(node) {
+    this.setState({
+      node: node.parent,
+    });
+  }
+
+  render() {
+    const { node } = this.state;
+    const { box, lang } = this.props;
+    const { children } = node;
+    return (
+      <div>
+        <h2 dangerouslySetInnerHTML={{ __html: `<span>${box.data.prepend} </span>${node.name}` }} />
+        {(() => {
+          if (box.config.render === 'select') {
+            if (children.filter((x) => x.children.length > 0).length > 0) {
+              return (
+                <select onChange={this.handleSelectChange}>
+                  <option value="">{`${labels[lang].select}...`}</option>
+                  {children.map((c) => <option key={c.name} value={c.name}>{c.name}</option>)}
+                </select>
+              );
+            }
+          }
+          return (
+            <ul>
+              {children.map(
+                (c) => (
+                  <li key={c.name}>
+                    {(() => {
+                      if (c.children.length > 0) {
+                        return (
+                          <button
+                            type="button"
+                            onClick={() => {
+                              this.nextNode(c);
+                            }}
+                            dangerouslySetInnerHTML={{ __html: c.name }}
+                          />
+                        );
+                      }
+                      if (c.name.indexOf(' ') === -1 && window.renderVCard) { // Det skal vi så lige huske at sætte på medarbejderkontaktboksene!
+                        return <FlowBoxPhoneComponent phone={c.name} lang={lang} />;
+                      }
+                      return <span dangerouslySetInnerHTML={{ __html: c.name }} />;
+                    })()}
+                  </li>
+                ),
+              )}
+            </ul>
+          );
+        })()}
+        {(() => {
+          if (node.parent != null) {
+            return (
+              <button
+                type="button"
+                className="button small"
+                onClick={() => {
+                  this.prevNode(node);
+                }}
+              >
+                {labels[lang].back}
+              </button>
+            );
+          }
+          return null;
+        })()}
+      </div>
+    );
+  }
+}
+
+FlowBoxComponent.propTypes = {
+  box: PropTypes.shape({
+    item: PropTypes.shape({
+      name: PropTypes.string.isRequired,
+    }).isRequired,
+    data: PropTypes.shape({
+      prepend: PropTypes.string.isRequired,
+    }).isRequired,
+    config: PropTypes.shape({
+      render: PropTypes.string.isRequired,
+    }).isRequired,
+  }).isRequired,
+  lang: PropTypes.string.isRequired,
+};
+
+FlowBoxComponent.displayName = 'FlowBoxComponent';
+export default FlowBoxComponent;

package/src/layout-2016/components/flowbox/FlowBoxPhoneComponent.js

@@ -1,104 +1,104 @@
-/* eslint-env browser */
-import React from 'react';
-import PropTypes from 'prop-types';
-import AUSpinnerComponent from '../common/AUSpinnerComponent';
-import { flowboxLabels as labels } from '../../../lib/i18n';
-
-class FlowBoxPhoneComponent extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      persons: [],
-    };
-  }
-
-  componentDidMount() {
-    const { phone } = this.props;
-    const iPureUrl = `https://ipure.nfit.au.dk/searchPeople.php?mode=json&q=${phone}`;
-    fetch(iPureUrl).then((promise) => promise.json()).then((persons) => {
-      this.setState({
-        persons,
-      }, () => {
-        if (typeof window.flowboxCallback !== 'undefined') {
-          window.flowboxCallback.forEach((callback) => {
-            if (callback.target === `p-${phone}`) {
-              callback.func(persons);
-            }
-          });
-        }
-      });
-    });
-  }
-
-  render() {
-    const { persons } = this.state;
-    const { lang, phone } = this.props;
-
-    const renderVCard = persons.map((person) => {
-      const { departments } = person;
-      const email = departments.length > 0 ? departments[0].email : '';
-      const renderDepartments = departments.map((department) => [
-        <span key={0} className="org">{department.name}</span>,
-        <br key={1} />,
-        <span key={2}>{`${labels[lang].building} ${department.address.building.id}, ${labels[lang].office} ${department.address.building.room}`}</span>,
-        <br key={3} />,
-        <span key={4} className="adr">
-          <span className="street-address">{department.address.street}</span>
-          <span>, </span>
-          <span className="postal-code">{department.address.zip}</span>
-          <span className="localityName">{department.address.city}</span>
-        </span>,
-        <br key={5} />,
-        <br key={6} />,
-        <span key={7}>T: </span>,
-        <span key={8} className="tel">{department.phone}</span>,
-        <br key={9} />,
-        <span key={10}>M: </span>,
-        <span key={11} className="tel">{department.mobile}</span>,
-        <br key={12} />,
-        <span key={13}>E: </span>,
-        <a key={14} className="email" href={`mailto:${department.email}`}>{department.email}</a>,
-        <br key={15} />,
-      ]);
-      return (
-        <div key={person.id} className="vcard">
-          <h2 className="fn">
-            <a className="url" href={`http://au.dk/${email}`}>{person.fullName}</a>
-          </h2>
-          <p>
-            {(() => {
-              if (person.photo) {
-                return (
-                  <a className="photo" href={`http://au.dk/${email}`}>
-                    <img style={{ width: '70px', float: 'right', marginLeft: '1em' }} src={person.photo} alt={person.fullName} title={person.fullName} />
-                  </a>
-                );
-              }
-              return null;
-            })()}
-            {renderDepartments}
-          </p>
-        </div>
-      );
-    });
-
-    return (
-      <AUSpinnerComponent
-        loadingCondition={persons.length === 0}
-        loaded={persons.length > 0}
-      >
-        <div id={`p-${phone}`}>
-          {renderVCard}
-        </div>
-      </AUSpinnerComponent>
-    );
-  }
-}
-
-FlowBoxPhoneComponent.propTypes = {
-  phone: PropTypes.string.isRequired,
-  lang: PropTypes.string.isRequired,
-};
-
-FlowBoxPhoneComponent.displayName = 'FlowBoxPhoneComponent';
-export default FlowBoxPhoneComponent;
+/* eslint-env browser */
+import React from 'react';
+import PropTypes from 'prop-types';
+import AUSpinnerComponent from '../common/AUSpinnerComponent';
+import { flowboxLabels as labels } from '../../../lib/i18n';
+
+class FlowBoxPhoneComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      persons: [],
+    };
+  }
+
+  componentDidMount() {
+    const { phone } = this.props;
+    const iPureUrl = `https://ipure.nfit.au.dk/searchPeople.php?mode=json&q=${phone}`;
+    fetch(iPureUrl).then((promise) => promise.json()).then((persons) => {
+      this.setState({
+        persons,
+      }, () => {
+        if (typeof window.flowboxCallback !== 'undefined') {
+          window.flowboxCallback.forEach((callback) => {
+            if (callback.target === `p-${phone}`) {
+              callback.func(persons);
+            }
+          });
+        }
+      });
+    });
+  }
+
+  render() {
+    const { persons } = this.state;
+    const { lang, phone } = this.props;
+
+    const renderVCard = persons.map((person) => {
+      const { departments } = person;
+      const email = departments.length > 0 ? departments[0].email : '';
+      const renderDepartments = departments.map((department) => [
+        <span key={0} className="org">{department.name}</span>,
+        <br key={1} />,
+        <span key={2}>{`${labels[lang].building} ${department.address.building.id}, ${labels[lang].office} ${department.address.building.room}`}</span>,
+        <br key={3} />,
+        <span key={4} className="adr">
+          <span className="street-address">{department.address.street}</span>
+          <span>, </span>
+          <span className="postal-code">{department.address.zip}</span>
+          <span className="localityName">{department.address.city}</span>
+        </span>,
+        <br key={5} />,
+        <br key={6} />,
+        <span key={7}>T: </span>,
+        <span key={8} className="tel">{department.phone}</span>,
+        <br key={9} />,
+        <span key={10}>M: </span>,
+        <span key={11} className="tel">{department.mobile}</span>,
+        <br key={12} />,
+        <span key={13}>E: </span>,
+        <a key={14} className="email" href={`mailto:${department.email}`}>{department.email}</a>,
+        <br key={15} />,
+      ]);
+      return (
+        <div key={person.id} className="vcard">
+          <h2 className="fn">
+            <a className="url" href={`http://au.dk/${email}`}>{person.fullName}</a>
+          </h2>
+          <p>
+            {(() => {
+              if (person.photo) {
+                return (
+                  <a className="photo" href={`http://au.dk/${email}`}>
+                    <img style={{ width: '70px', float: 'right', marginLeft: '1em' }} src={person.photo} alt={person.fullName} title={person.fullName} />
+                  </a>
+                );
+              }
+              return null;
+            })()}
+            {renderDepartments}
+          </p>
+        </div>
+      );
+    });
+
+    return (
+      <AUSpinnerComponent
+        loadingCondition={persons.length === 0}
+        loaded={persons.length > 0}
+      >
+        <div id={`p-${phone}`}>
+          {renderVCard}
+        </div>
+      </AUSpinnerComponent>
+    );
+  }
+}
+
+FlowBoxPhoneComponent.propTypes = {
+  phone: PropTypes.string.isRequired,
+  lang: PropTypes.string.isRequired,
+};
+
+FlowBoxPhoneComponent.displayName = 'FlowBoxPhoneComponent';
+export default FlowBoxPhoneComponent;

package/src/layout-2016/components/profile/AUProfileAvatar2016Component.js

@@ -1,103 +1,103 @@
-/* eslint-env browser */
-import React from 'react';
-import PropTypes from 'prop-types';
-import AUProfileWidgetComponent from '../../../components/profile/AUProfileWidgetComponent';
-
-// TODO: Re-implement portal context i staff portal and mitstudie
-//  before upgrading this lib-component!
-const AUUserContextComponent = null;
-
-const AUProfileAvatar2016Component = ({
-  lang,
-  user,
-  settings,
-  toggled,
-  onToggle,
-  onLoad,
-  profileLabels,
-  logoutUri,
-}) => {
-  const {
-    chosenFirstNames,
-    chosenLastName,
-    auId,
-    studentNumber,
-  } = user;
-
-  const content = (
-    <div className={`sub-nav${toggled ? ' sub-nav--toggled' : ''}`}>
-      <button
-        id="profile-menu-toggle"
-        type="button"
-        aria-label={toggled ? `${profileLabels[lang].profileFor} ${chosenFirstNames} ${chosenLastName}` : profileLabels[lang].myProfile}
-        aria-expanded={toggled}
-        onClick={() => {
-          onToggle();
-        }}
-      >
-        {chosenFirstNames || profileLabels[lang].myProfile}
-      </button>
-      {
-        toggled && (
-          <AUProfileWidgetComponent
-            lang={lang}
-            name={`${chosenFirstNames} ${chosenLastName}`}
-            auid={auId}
-            studentNumber={studentNumber}
-            settings={settings}
-            profileLabels={profileLabels}
-            logoutUri={logoutUri}
-          />
-        )
-      }
-    </div>
-  );
-
-  if (auId === 0) {
-    return null;
-  }
-
-  return (
-    <AUUserContextComponent
-      auid={auId}
-      loggedIn
-      contextKey="staff-user"
-      handleContext={(userContext) => {
-        onLoad(userContext);
-      }}
-      handleError={(status, json) => {
-        // eslint-disable-next-line no-console
-        console.log(status, json);
-      }}
-      spinner={false}
-      emptyComponent={content}
-      clearCache={false}
-    >
-      {content}
-    </AUUserContextComponent>
-  );
-};
-
-AUProfileAvatar2016Component.propTypes = {
-  lang: PropTypes.string.isRequired,
-  user: PropTypes.shape({
-    chosenFirstNames: PropTypes.string.isRequired,
-    chosenLastName: PropTypes.string.isRequired,
-    preferredLanguage: PropTypes.string.isRequired,
-    auId: PropTypes.number.isRequired,
-    studentNumber: PropTypes.string.isRequired,
-  }).isRequired,
-  auAuth: PropTypes.shape({}).isRequired,
-  settings: PropTypes.arrayOf(PropTypes.shape({
-    url: PropTypes.string.isRequired,
-    text: PropTypes.string.isRequired,
-  })).isRequired,
-  toggled: PropTypes.bool.isRequired,
-  onToggle: PropTypes.func.isRequired,
-  onLoad: PropTypes.func.isRequired,
-  profileLabels: PropTypes.shape({}).isRequired,
-  logoutUri: PropTypes.string.isRequired,
-};
-
-AUProfileAvatar2016Component.displayName = 'AUProfileAvatar2016Component';
-export default AUProfileAvatar2016Component;
+/* eslint-env browser */
+import React from 'react';
+import PropTypes from 'prop-types';
+import AUProfileWidgetComponent from '../../../components/profile/AUProfileWidgetComponent';
+
+// TODO: Re-implement portal context i staff portal and mitstudie
+//  before upgrading this lib-component!
+const AUUserContextComponent = null;
+
+const AUProfileAvatar2016Component = ({
+  lang,
+  user,
+  settings,
+  toggled,
+  onToggle,
+  onLoad,
+  profileLabels,
+  logoutUri,
+}) => {
+  const {
+    chosenFirstNames,
+    chosenLastName,
+    auId,
+    studentNumber,
+  } = user;
+
+  const content = (
+    <div className={`sub-nav${toggled ? ' sub-nav--toggled' : ''}`}>
+      <button
+        id="profile-menu-toggle"
+        type="button"
+        aria-label={toggled ? `${profileLabels[lang].profileFor} ${chosenFirstNames} ${chosenLastName}` : profileLabels[lang].myProfile}
+        aria-expanded={toggled}
+        onClick={() => {
+          onToggle();
+        }}
+      >
+        {chosenFirstNames || profileLabels[lang].myProfile}
+      </button>
+      {
+        toggled && (
+          <AUProfileWidgetComponent
+            lang={lang}
+            name={`${chosenFirstNames} ${chosenLastName}`}
+            auid={auId}
+            studentNumber={studentNumber}
+            settings={settings}
+            profileLabels={profileLabels}
+            logoutUri={logoutUri}
+          />
+        )
+      }
+    </div>
+  );
+
+  if (auId === 0) {
+    return null;
+  }
+
+  return (
+    <AUUserContextComponent
+      auid={auId}
+      loggedIn
+      contextKey="staff-user"
+      handleContext={(userContext) => {
+        onLoad(userContext);
+      }}
+      handleError={(status, json) => {
+        // eslint-disable-next-line no-console
+        console.log(status, json);
+      }}
+      spinner={false}
+      emptyComponent={content}
+      clearCache={false}
+    >
+      {content}
+    </AUUserContextComponent>
+  );
+};
+
+AUProfileAvatar2016Component.propTypes = {
+  lang: PropTypes.string.isRequired,
+  user: PropTypes.shape({
+    chosenFirstNames: PropTypes.string.isRequired,
+    chosenLastName: PropTypes.string.isRequired,
+    preferredLanguage: PropTypes.string.isRequired,
+    auId: PropTypes.number.isRequired,
+    studentNumber: PropTypes.string.isRequired,
+  }).isRequired,
+  auAuth: PropTypes.shape({}).isRequired,
+  settings: PropTypes.arrayOf(PropTypes.shape({
+    url: PropTypes.string.isRequired,
+    text: PropTypes.string.isRequired,
+  })).isRequired,
+  toggled: PropTypes.bool.isRequired,
+  onToggle: PropTypes.func.isRequired,
+  onLoad: PropTypes.func.isRequired,
+  profileLabels: PropTypes.shape({}).isRequired,
+  logoutUri: PropTypes.string.isRequired,
+};
+
+AUProfileAvatar2016Component.displayName = 'AUProfileAvatar2016Component';
+export default AUProfileAvatar2016Component;