@aarhus-university/au-lib-react-components 9.11.2 → 9.11.6

package/src/components/AUFilterCheckboxComponent.js

@@ -1,122 +1,122 @@
-/* eslint jsx-a11y/label-has-associated-control: 0 */
-/* eslint jsx-a11y/label-has-for: 0 */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-class AUFilterCheckboxComponent extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      filter: props.value,
-    };
-  }
-
-  componentDidMount() {
-    this.input.focus();
-  }
-
-  render() {
-    const { filter } = this.state;
-    const {
-      items,
-      onFilterSelect,
-      onFilterType,
-      lang,
-    } = this.props;
-    const renderFiltered = items.map((_f, i) => {
-      const f = _f;
-      const key = i;
-      const liClassName = f.visible ? 'visible' : null;
-      const labelClassName = f.selected ? 'selected' : null;
-      return (
-        <li key={key} className={liClassName}>
-          <label className={labelClassName}>
-            <input
-              type="checkbox"
-              value={f.value}
-              checked={f.selected}
-              onChange={(e) => {
-                f.selected = e.target.checked;
-                if (typeof onFilterSelect === 'function') {
-                  onFilterSelect(items.filter(x => x.selected));
-                }
-              }}
-            />
-            {f.name}
-          </label>
-        </li>
-      );
-    });
-
-    const allSelected = items.filter(x => x.selected).length === 0;
-
-    return (
-      <div className="au-filter-checkbox">
-        <input
-          ref={(node) => { this.input = node; }}
-          type="text"
-          value={filter}
-          onChange={(e) => {
-            const { value } = e.target;
-            items.forEach((_f) => {
-              const f = _f;
-              f.visible = (`${f.name}`).toLowerCase().indexOf(value.toLowerCase().trim()) > -1;
-            });
-            this.setState({
-              filter: value,
-            }, () => {
-              if (typeof onFilterType === 'function') {
-                onFilterType(value);
-              }
-            });
-          }}
-        />
-        <ul className="resetlist">
-          <li className={filter === '' ? 'visible' : null}>
-            <label className={allSelected ? 'selected' : null}>
-              <input
-                type="checkbox"
-                value=""
-                checked={allSelected}
-                onChange={(e) => {
-                  if (e.target.checked) {
-                    items.forEach((_f) => {
-                      const f = _f;
-                      f.selected = false;
-                    });
-                    if (typeof onFilterSelect === 'function') {
-                      onFilterSelect(items.filter(x => x.selected));
-                    }
-                  }
-                }}
-              />
-              {lang === 'da' ? 'Vælg alle' : 'Select all'}
-            </label>
-          </li>
-          {renderFiltered}
-        </ul>
-      </div>
-    );
-  }
-}
-
-AUFilterCheckboxComponent.defaultProps = {
-  onFilterSelect: null,
-  onFilterType: null,
-  lang: 'da',
-  value: '',
-};
-
-AUFilterCheckboxComponent.propTypes = {
-  items: PropTypes.arrayOf(PropTypes.shape({
-
-  })).isRequired,
-  onFilterSelect: PropTypes.func,
-  onFilterType: PropTypes.func,
-  lang: PropTypes.string,
-  value: PropTypes.string,
-};
-
-AUFilterCheckboxComponent.displayName = 'AUFilterCheckboxComponent';
-export default AUFilterCheckboxComponent;
+/* eslint jsx-a11y/label-has-associated-control: 0 */
+/* eslint jsx-a11y/label-has-for: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class AUFilterCheckboxComponent extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      filter: props.value,
+    };
+  }
+
+  componentDidMount() {
+    this.input.focus();
+  }
+
+  render() {
+    const { filter } = this.state;
+    const {
+      items,
+      onFilterSelect,
+      onFilterType,
+      lang,
+    } = this.props;
+    const renderFiltered = items.map((_f, i) => {
+      const f = _f;
+      const key = i;
+      const liClassName = f.visible ? 'visible' : null;
+      const labelClassName = f.selected ? 'selected' : null;
+      return (
+        <li key={key} className={liClassName}>
+          <label className={labelClassName}>
+            <input
+              type="checkbox"
+              value={f.value}
+              checked={f.selected}
+              onChange={(e) => {
+                f.selected = e.target.checked;
+                if (typeof onFilterSelect === 'function') {
+                  onFilterSelect(items.filter(x => x.selected));
+                }
+              }}
+            />
+            {f.name}
+          </label>
+        </li>
+      );
+    });
+
+    const allSelected = items.filter(x => x.selected).length === 0;
+
+    return (
+      <div className="au-filter-checkbox">
+        <input
+          ref={(node) => { this.input = node; }}
+          type="text"
+          value={filter}
+          onChange={(e) => {
+            const { value } = e.target;
+            items.forEach((_f) => {
+              const f = _f;
+              f.visible = (`${f.name}`).toLowerCase().indexOf(value.toLowerCase().trim()) > -1;
+            });
+            this.setState({
+              filter: value,
+            }, () => {
+              if (typeof onFilterType === 'function') {
+                onFilterType(value);
+              }
+            });
+          }}
+        />
+        <ul className="resetlist">
+          <li className={filter === '' ? 'visible' : null}>
+            <label className={allSelected ? 'selected' : null}>
+              <input
+                type="checkbox"
+                value=""
+                checked={allSelected}
+                onChange={(e) => {
+                  if (e.target.checked) {
+                    items.forEach((_f) => {
+                      const f = _f;
+                      f.selected = false;
+                    });
+                    if (typeof onFilterSelect === 'function') {
+                      onFilterSelect(items.filter(x => x.selected));
+                    }
+                  }
+                }}
+              />
+              {lang === 'da' ? 'Vælg alle' : 'Select all'}
+            </label>
+          </li>
+          {renderFiltered}
+        </ul>
+      </div>
+    );
+  }
+}
+
+AUFilterCheckboxComponent.defaultProps = {
+  onFilterSelect: null,
+  onFilterType: null,
+  lang: 'da',
+  value: '',
+};
+
+AUFilterCheckboxComponent.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.shape({
+
+  })).isRequired,
+  onFilterSelect: PropTypes.func,
+  onFilterType: PropTypes.func,
+  lang: PropTypes.string,
+  value: PropTypes.string,
+};
+
+AUFilterCheckboxComponent.displayName = 'AUFilterCheckboxComponent';
+export default AUFilterCheckboxComponent;

package/src/components/AUFocusComponent.js

@@ -1,55 +1,55 @@
-/* eslint-env browser */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-/**
- * AU Focus Komponent
- *
- * Eksempel:
- * ```jsx
- *  <AUFocusComponent
-            key="focus"
-            header={<h1>Fokusfelt</h1>}
-            text={<p>Noget tekst</p>}
-            links={<ul><li style={{ backgroundColor: 'rgba(0, 61, 133, .75)' }}><a href="http://www.au.dk">Link</a></li></ul>}
-            style={{
-              backgroundImage: 'url(http://ps.au.dk/uploads/tx_templavoila/BSS_Foto_outdoor-51_fokusfelt_72ppi_04.jpg)',
-              height: '270px',
-            }}
-          />
- * ```
- */
-
-const AUFocusComponent = (props) => {
-  const {
-    style,
-    header,
-    text,
-    links,
-  } = props;
-  return (
-    <div className="au_focus" style={style}>
-      <div className="au_focus_content">
-        {header}
-        {text}
-        {links}
-      </div>
-    </div>
-  );
-};
-
-AUFocusComponent.defaultProps = {
-  text: null,
-  header: null,
-  links: null,
-};
-
-AUFocusComponent.propTypes = {
-  header: PropTypes.element,
-  text: PropTypes.element,
-  style: PropTypes.shape({}).isRequired,
-  links: PropTypes.element,
-};
-
-AUFocusComponent.displayName = 'AUFocusComponent';
-export default AUFocusComponent;
+/* eslint-env browser */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * AU Focus Komponent
+ *
+ * Eksempel:
+ * ```jsx
+ *  <AUFocusComponent
+            key="focus"
+            header={<h1>Fokusfelt</h1>}
+            text={<p>Noget tekst</p>}
+            links={<ul><li style={{ backgroundColor: 'rgba(0, 61, 133, .75)' }}><a href="http://www.au.dk">Link</a></li></ul>}
+            style={{
+              backgroundImage: 'url(http://ps.au.dk/uploads/tx_templavoila/BSS_Foto_outdoor-51_fokusfelt_72ppi_04.jpg)',
+              height: '270px',
+            }}
+          />
+ * ```
+ */
+
+const AUFocusComponent = (props) => {
+  const {
+    style,
+    header,
+    text,
+    links,
+  } = props;
+  return (
+    <div className="au_focus" style={style}>
+      <div className="au_focus_content">
+        {header}
+        {text}
+        {links}
+      </div>
+    </div>
+  );
+};
+
+AUFocusComponent.defaultProps = {
+  text: null,
+  header: null,
+  links: null,
+};
+
+AUFocusComponent.propTypes = {
+  header: PropTypes.element,
+  text: PropTypes.element,
+  style: PropTypes.shape({}).isRequired,
+  links: PropTypes.element,
+};
+
+AUFocusComponent.displayName = 'AUFocusComponent';
+export default AUFocusComponent;

package/src/components/AUModalComponent.js

@@ -1,94 +1,94 @@
-/* eslint-env browser */
-/* eslint jsx-a11y/click-events-have-key-events: 0 */
-/* eslint jsx-a11y/no-noninteractive-element-interactions: 0 */
-/* eslint jsx-a11y/no-static-element-interactions: 0 */
-import React from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-
-const AUModalComponent = (props) => {
-  const {
-    classNames,
-    content,
-    children,
-    show,
-    onClose,
-    closeButton,
-    outsideClick,
-  } = props;
-
-  const className = `au-modal ${classNames}`;
-
-  if (show) {
-    return [
-      ReactDOM.createPortal(
-        <div
-          className="au-modal-overlay"
-          onClick={() => {
-            if (typeof onClose === 'function' && outsideClick) {
-              onClose();
-            }
-          }}
-        />,
-        document.querySelector('body'),
-      ),
-      <div key={0} className={className}>
-        {
-          closeButton && (
-            <button
-              type="button"
-              className="button close"
-              onClick={() => {
-                if (typeof onClose === 'function') {
-                  onClose();
-                }
-              }}
-            >
-              c
-            </button>
-          )
-        }
-        {children || content}
-      </div>,
-    ];
-  }
-
-  return <div />;
-};
-
-AUModalComponent.defaultProps = {
-  children: null,
-  content: null,
-  classNames: '',
-  onClose: null,
-  closeButton: true,
-  outsideClick: true,
-};
-
-AUModalComponent.propTypes = {
-  /**
-   * True når modalen skal vises
-   */
-  show: PropTypes.bool.isRequired,
-  /**
-  * Det element der trigger beskeden
-  */
-  children: PropTypes.element,
-  /**
-  * Det samme som children
-  */
-  content: PropTypes.element,
-  /**
-   * Hvis der skal tilføjes ekstra klasser til alert-komponentet
-   */
-  classNames: PropTypes.string,
-  /**
-   * Kaldes ved luk
-   */
-  onClose: PropTypes.func,
-  closeButton: PropTypes.bool,
-  outsideClick: PropTypes.bool,
-};
-
-AUModalComponent.displayName = 'AUModalComponent';
-export default AUModalComponent;
+/* eslint-env browser */
+/* eslint jsx-a11y/click-events-have-key-events: 0 */
+/* eslint jsx-a11y/no-noninteractive-element-interactions: 0 */
+/* eslint jsx-a11y/no-static-element-interactions: 0 */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+
+const AUModalComponent = (props) => {
+  const {
+    classNames,
+    content,
+    children,
+    show,
+    onClose,
+    closeButton,
+    outsideClick,
+  } = props;
+
+  const className = `au-modal ${classNames}`;
+
+  if (show) {
+    return [
+      ReactDOM.createPortal(
+        <div
+          className="au-modal-overlay"
+          onClick={() => {
+            if (typeof onClose === 'function' && outsideClick) {
+              onClose();
+            }
+          }}
+        />,
+        document.querySelector('body'),
+      ),
+      <div key={0} className={className}>
+        {
+          closeButton && (
+            <button
+              type="button"
+              className="button close"
+              onClick={() => {
+                if (typeof onClose === 'function') {
+                  onClose();
+                }
+              }}
+            >
+              c
+            </button>
+          )
+        }
+        {children || content}
+      </div>,
+    ];
+  }
+
+  return <div />;
+};
+
+AUModalComponent.defaultProps = {
+  children: null,
+  content: null,
+  classNames: '',
+  onClose: null,
+  closeButton: true,
+  outsideClick: true,
+};
+
+AUModalComponent.propTypes = {
+  /**
+   * True når modalen skal vises
+   */
+  show: PropTypes.bool.isRequired,
+  /**
+  * Det element der trigger beskeden
+  */
+  children: PropTypes.element,
+  /**
+  * Det samme som children
+  */
+  content: PropTypes.element,
+  /**
+   * Hvis der skal tilføjes ekstra klasser til alert-komponentet
+   */
+  classNames: PropTypes.string,
+  /**
+   * Kaldes ved luk
+   */
+  onClose: PropTypes.func,
+  closeButton: PropTypes.bool,
+  outsideClick: PropTypes.bool,
+};
+
+AUModalComponent.displayName = 'AUModalComponent';
+export default AUModalComponent;