@aarhus-university/au-lib-react-components 9.11.8 → 9.11.12

package/src/components/delphinus/hooks.js

@@ -1,26 +1,28 @@
-import { useState, useEffect } from 'react';
-import { showModal, hideModal } from '@aarhus-university/au-designsystem-delphinus/source/js/components/modal-view';
-
-const useModal = (domId, initialState, showCondition = true, hideCondition = false) => {
-  const [modal, setModal] = useState({ modal: initialState, sender: null });
-
-  useEffect(() => {
-    if (modal.modal && modal.sender && showCondition) {
-      showModal(domId, modal.sender, () => {
-        setModal({ modal: false, sender: null });
-      });
-    }
-
-    if (modal.modal && modal.sender && hideCondition) {
-      hideModal(domId, modal.sender, () => {
-        setModal({ modal: false, sender: null });
-      });
-    }
-  });
-
-  return [modal, setModal];
-};
-
-export {
-  useModal,
-};
+/* eslint-disable import/prefer-default-export */
+import { useState, useEffect } from 'react';
+import { showModal, hideModal } from '@aarhus-university/au-designsystem-delphinus/source/js/components/modal-view';
+
+// eslint-disable-next-line max-len
+const useModal = (domId, initialState, showCondition = true, hideCondition = false, closeable = true) => {
+  const [modal, setModal] = useState({ modal: initialState, sender: null });
+
+  useEffect(() => {
+    if (modal.modal && modal.sender && showCondition) {
+      showModal(domId, modal.sender, () => {
+        setModal({ modal: false, sender: null });
+      }, closeable);
+    }
+
+    if (modal.modal && modal.sender && hideCondition) {
+      hideModal(domId, modal.sender, () => {
+        setModal({ modal: false, sender: null });
+      });
+    }
+  });
+
+  return [modal, setModal];
+};
+
+export {
+  useModal,
+};

package/src/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);
-  }
-
-  nextNode(child) {
-    this.setState({
-      node: child,
-    });
-  }
-
-  prevNode(node) {
-    this.setState({
-      node: node.parent,
-    });
-  }
-
-  handleSelectChange(event) {
-    const { node } = this.state;
-    const child = node.children.find((n) => n.name === event.target.value);
-    this.setState({
-      node: child,
-    });
-  }
-
-  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);
+  }
+
+  nextNode(child) {
+    this.setState({
+      node: child,
+    });
+  }
+
+  prevNode(node) {
+    this.setState({
+      node: node.parent,
+    });
+  }
+
+  handleSelectChange(event) {
+    const { node } = this.state;
+    const child = node.children.find((n) => n.name === event.target.value);
+    this.setState({
+      node: child,
+    });
+  }
+
+  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/components/flowbox/FlowBoxPhoneComponent.js

@@ -1,106 +1,106 @@
-/* eslint-env browser */
-import React from 'react';
-import PropTypes from 'prop-types';
-import axios from 'axios';
-import AUSpinnerComponent from '../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}`;
-    axios.get(iPureUrl).then((promise) => {
-      const persons = promise.data;
-      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 axios from 'axios';
+import AUSpinnerComponent from '../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}`;
+    axios.get(iPureUrl).then((promise) => {
+      const persons = promise.data;
+      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/components/form/AUMobilePrefixComponent.js

@@ -1,18 +1,18 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const AUMobilePrefixComponent = ({ countryCodes, important }) => {
-  const renderCountryCodes = codes => codes.map(c => <option key={c.da} value={`+${c.code}`}>{`${c.da} (+${c.code})`}</option>);
-  if (important) {
-    return renderCountryCodes(countryCodes.filter(c => c.important));
-  }
-  return renderCountryCodes(countryCodes);
-};
-
-AUMobilePrefixComponent.propTypes = {
-  countryCodes: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-  important: PropTypes.bool.isRequired,
-};
-
-AUMobilePrefixComponent.displayName = 'AUMobilePrefixComponent';
-export default AUMobilePrefixComponent;
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const AUMobilePrefixComponent = ({ countryCodes, important }) => {
+  const renderCountryCodes = codes => codes.map(c => <option key={c.da} value={`+${c.code}`}>{`${c.da} (+${c.code})`}</option>);
+  if (important) {
+    return renderCountryCodes(countryCodes.filter(c => c.important));
+  }
+  return renderCountryCodes(countryCodes);
+};
+
+AUMobilePrefixComponent.propTypes = {
+  countryCodes: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  important: PropTypes.bool.isRequired,
+};
+
+AUMobilePrefixComponent.displayName = 'AUMobilePrefixComponent';
+export default AUMobilePrefixComponent;

package/src/components/form/AUReceiptComponent.js

@@ -1,40 +1,40 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const AUReceiptComponent = ({
-  receiptText,
-  helpText,
-  showGoTo,
-  buttons,
-}) => {
-  const renderButtons = buttons.map((btn) => <a key={btn.gotoLink} href={btn.gotoLink} className="button">{btn.gotoText}</a>);
-  return (
-    <div className="receipt">
-      <div className="receipt__icon" data-icon="" />
-      <h1 className="receipt__header" dangerouslySetInnerHTML={{ __html: receiptText }} />
-      {helpText}
-      {
-        showGoTo && (
-          <div className="receipt__post-action">
-            {renderButtons}
-          </div>
-        )
-      }
-    </div>
-  );
-};
-
-AUReceiptComponent.defaultProps = {
-  showGoTo: true,
-  helpText: null,
-  buttons: [],
-};
-
-AUReceiptComponent.propTypes = {
-  receiptText: PropTypes.string.isRequired,
-  helpText: PropTypes.element,
-  showGoTo: PropTypes.bool,
-  buttons: PropTypes.arrayOf(PropTypes.shape({})),
-};
-AUReceiptComponent.displayName = 'AUReceiptComponent';
-export default AUReceiptComponent;
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const AUReceiptComponent = ({
+  receiptText,
+  helpText,
+  showGoTo,
+  buttons,
+}) => {
+  const renderButtons = buttons.map((btn) => <a key={btn.gotoLink} href={btn.gotoLink} className="button">{btn.gotoText}</a>);
+  return (
+    <div className="receipt">
+      <div className="receipt__icon" data-icon="" />
+      <h1 className="receipt__header" dangerouslySetInnerHTML={{ __html: receiptText }} />
+      {helpText}
+      {
+        showGoTo && (
+          <div className="receipt__post-action">
+            {renderButtons}
+          </div>
+        )
+      }
+    </div>
+  );
+};
+
+AUReceiptComponent.defaultProps = {
+  showGoTo: true,
+  helpText: null,
+  buttons: [],
+};
+
+AUReceiptComponent.propTypes = {
+  receiptText: PropTypes.string.isRequired,
+  helpText: PropTypes.element,
+  showGoTo: PropTypes.bool,
+  buttons: PropTypes.arrayOf(PropTypes.shape({})),
+};
+AUReceiptComponent.displayName = 'AUReceiptComponent';
+export default AUReceiptComponent;