@aarhus-university/au-lib-react-components 12.6.1 → 12.6.3

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/lib/all.js

@@ -1,3 +1,3 @@
-import '../../styles/app.scss';
-import './au-databox';
-import './au-alphabox';
+import '../../styles/app.scss';
+import './au-databox';
+import './au-alphabox';

package/src/layout-2016/lib/au-alphabox.js

@@ -1,99 +1,99 @@
-/* eslint no-prototype-builtins: 0 */
-/* eslint no-restricted-syntax: 0 */
-/* eslint no-unused-vars: 0 */
-/* eslint-env browser */
-import React from 'react';
-import ReactDOM from 'react-dom';
-import AlphaBoxComponent from '../components/alphabox/AlphaBoxComponent';
-
-const defaultOptions = {
-  config: {
-    title: '',
-    url: '',
-    description: '',
-    container: '.au_alphabox',
-    links: [
-      { title: 'Link 1', url: 'http://www.au.dk' },
-      { title: 'Link 2', url: 'http://www.au.dk' },
-    ],
-  },
-  search: {
-    minLength: 1,
-    placeHolder: '',
-  },
-  background: {
-    color: '#003e5c',
-    linkColor: '#379fcb',
-  },
-  data: {
-    mode: 'json',
-    itemsOnly: false,
-  },
-};
-
-class AUAlphabox {
-  constructor(boxes) {
-    this.boxes = boxes;
-  }
-
-  static mergeOptions(_box) {
-    const box = _box;
-    if (!box.hasOwnProperty('config')) {
-      box.config = {};
-    }
-
-    for (const conf in defaultOptions.config) {
-      if (!box.config.hasOwnProperty(conf)) {
-        box.config[conf] = defaultOptions.config[conf];
-      }
-    }
-
-    if (!box.hasOwnProperty('background')) {
-      box.background = {};
-    }
-
-    for (const bg in defaultOptions.background) {
-      if (!box.background.hasOwnProperty(bg)) {
-        box.background[bg] = defaultOptions.background[bg];
-      }
-    }
-
-    if (!box.hasOwnProperty('search')) {
-      box.search = {};
-    }
-
-    for (const sch in defaultOptions.search) {
-      if (!box.search.hasOwnProperty(sch)) {
-        box.search[sch] = defaultOptions.search[sch];
-      }
-    }
-
-    if (!box.hasOwnProperty('data')) {
-      box.data = {};
-    }
-
-    for (const data in defaultOptions.data) {
-      if (!box.data.hasOwnProperty(data)) {
-        box.data[data] = defaultOptions.data[data];
-      }
-    }
-  }
-
-  init() {
-    for (let i = 0; i < this.boxes.length; i += 1) {
-      const box = this.boxes[i];
-      if (!box.loaded) {
-        box.id = i;
-        AUAlphabox.mergeOptions(box);
-        const mountNode = document.querySelector(box.config.container);
-        const visible = mountNode && getComputedStyle(mountNode).visibility !== 'hidden';
-        if (visible) {
-          ReactDOM.render(<AlphaBoxComponent box={box} />, mountNode);
-          box.loaded = true;
-        }
-      }
-    }
-  }
-}
-
-window.AUAlphabox = AUAlphabox;
+/* eslint no-prototype-builtins: 0 */
+/* eslint no-restricted-syntax: 0 */
+/* eslint no-unused-vars: 0 */
+/* eslint-env browser */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import AlphaBoxComponent from '../components/alphabox/AlphaBoxComponent';
+
+const defaultOptions = {
+  config: {
+    title: '',
+    url: '',
+    description: '',
+    container: '.au_alphabox',
+    links: [
+      { title: 'Link 1', url: 'http://www.au.dk' },
+      { title: 'Link 2', url: 'http://www.au.dk' },
+    ],
+  },
+  search: {
+    minLength: 1,
+    placeHolder: '',
+  },
+  background: {
+    color: '#003e5c',
+    linkColor: '#379fcb',
+  },
+  data: {
+    mode: 'json',
+    itemsOnly: false,
+  },
+};
+
+class AUAlphabox {
+  constructor(boxes) {
+    this.boxes = boxes;
+  }
+
+  static mergeOptions(_box) {
+    const box = _box;
+    if (!box.hasOwnProperty('config')) {
+      box.config = {};
+    }
+
+    for (const conf in defaultOptions.config) {
+      if (!box.config.hasOwnProperty(conf)) {
+        box.config[conf] = defaultOptions.config[conf];
+      }
+    }
+
+    if (!box.hasOwnProperty('background')) {
+      box.background = {};
+    }
+
+    for (const bg in defaultOptions.background) {
+      if (!box.background.hasOwnProperty(bg)) {
+        box.background[bg] = defaultOptions.background[bg];
+      }
+    }
+
+    if (!box.hasOwnProperty('search')) {
+      box.search = {};
+    }
+
+    for (const sch in defaultOptions.search) {
+      if (!box.search.hasOwnProperty(sch)) {
+        box.search[sch] = defaultOptions.search[sch];
+      }
+    }
+
+    if (!box.hasOwnProperty('data')) {
+      box.data = {};
+    }
+
+    for (const data in defaultOptions.data) {
+      if (!box.data.hasOwnProperty(data)) {
+        box.data[data] = defaultOptions.data[data];
+      }
+    }
+  }
+
+  init() {
+    for (let i = 0; i < this.boxes.length; i += 1) {
+      const box = this.boxes[i];
+      if (!box.loaded) {
+        box.id = i;
+        AUAlphabox.mergeOptions(box);
+        const mountNode = document.querySelector(box.config.container);
+        const visible = mountNode && getComputedStyle(mountNode).visibility !== 'hidden';
+        if (visible) {
+          ReactDOM.render(<AlphaBoxComponent box={box} />, mountNode);
+          box.loaded = true;
+        }
+      }
+    }
+  }
+}
+
+window.AUAlphabox = AUAlphabox;