@aarhus-university/au-lib-react-components 9.11.18 → 9.12.1

package/src/components/AUAlertComponent.js

@@ -1,158 +1,158 @@
-/* eslint-env browser */
-import React from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-
-/**
- * AU Alert Komponent
- * Bliver brugt til elementer der kræver bekræftelse eller advarsel
- *
- * Eksempel:
- * ```jsx
- * <AUAlertComponent
- *         alert={this.state.alert}
- *         message="Er du sikker?"
- *         onConfirm={() => {
- *           this.setState({
- *             alert: false,
- *           });
- *         }}
- *         onCancel={() => {
- *           this.setState({
- *             alert: false,
- *           });
- *         }}
- *       >
- *         <button
- *           className="button"
- *           onClick={() => {
- *             this.setState({
- *               alert: true,
- *             });
- *           }}
- *         >
- *           Alert!
- *         </button>
- *       </AUAlertComponent>
- * ```
- */
-
-const AUAlertComponent = (props) => {
-  const {
-    message,
-    classNames,
-    content,
-    children,
-    alert,
-    onConfirm,
-    onCancel,
-    labels,
-  } = props;
-
-  const className = `au-alert ${classNames}`;
-
-  if (alert) {
-    return [
-      ReactDOM.createPortal(
-        <div className="au-alert-overlay" />,
-        document.querySelector('body'),
-      ),
-      ReactDOM.createPortal(
-        <div key="0" className={className}>
-          {(() => {
-            if (content != null) {
-              return content;
-            }
-            return <div dangerouslySetInnerHTML={{ __html: message }} />;
-          })()}
-          {(() => {
-            if (typeof onConfirm === 'function') {
-              return (
-                <button
-                  type="button"
-                  className="button confirm"
-                  onClick={() => {
-                    onConfirm();
-                  }}
-                >
-                  {labels[0]}
-                </button>
-              );
-            }
-            return null;
-          })()}
-          {(() => {
-            if (typeof onCancel === 'function') {
-              return (
-                <button
-                  type="button"
-                  className="button cancel"
-                  onClick={() => {
-                    onCancel();
-                  }}
-                >
-                  {labels[1]}
-                </button>
-              );
-            }
-            return null;
-          })()}
-        </div>, document.querySelector('body'),
-      ),
-      children,
-    ];
-  }
-
-  if (!children && !content) {
-    return <div />;
-  }
-
-  return children || content;
-};
-
-AUAlertComponent.defaultProps = {
-  children: null,
-  content: null,
-  classNames: '',
-  onConfirm: null,
-  onCancel: null,
-  labels: [
-    'OK',
-    'Annullér',
-  ],
-};
-
-AUAlertComponent.propTypes = {
-  /**
-  * Beskeden der vises i popup
-  */
-  message: PropTypes.string.isRequired,
-  /**
-   * True når beskeden skal vises
-   */
-  alert: PropTypes.bool.isRequired,
-  /**
-  * Det element der trigger beskeden
-  */
-  children: PropTypes.arrayOf(PropTypes.element),
-  /**
-  * Det samme som children
-  */
-  content: PropTypes.element,
-  /**
-   * Hvis der skal tilføjes ekstra klasser til alert-komponentet
-   */
-  classNames: PropTypes.string,
-  /**
-   * Kaldes ved confirm
-   */
-  onConfirm: PropTypes.func,
-  /**
-   * Kaldes ved cancel
-   */
-  onCancel: PropTypes.func,
-  labels: PropTypes.arrayOf(PropTypes.string.isRequired),
-};
-
-AUAlertComponent.displayName = 'AUAlertComponent';
-export default AUAlertComponent;
+/* eslint-env browser */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+
+/**
+ * AU Alert Komponent
+ * Bliver brugt til elementer der kræver bekræftelse eller advarsel
+ *
+ * Eksempel:
+ * ```jsx
+ * <AUAlertComponent
+ *         alert={this.state.alert}
+ *         message="Er du sikker?"
+ *         onConfirm={() => {
+ *           this.setState({
+ *             alert: false,
+ *           });
+ *         }}
+ *         onCancel={() => {
+ *           this.setState({
+ *             alert: false,
+ *           });
+ *         }}
+ *       >
+ *         <button
+ *           className="button"
+ *           onClick={() => {
+ *             this.setState({
+ *               alert: true,
+ *             });
+ *           }}
+ *         >
+ *           Alert!
+ *         </button>
+ *       </AUAlertComponent>
+ * ```
+ */
+
+const AUAlertComponent = (props) => {
+  const {
+    message,
+    classNames,
+    content,
+    children,
+    alert,
+    onConfirm,
+    onCancel,
+    labels,
+  } = props;
+
+  const className = `au-alert ${classNames}`;
+
+  if (alert) {
+    return [
+      ReactDOM.createPortal(
+        <div className="au-alert-overlay" />,
+        document.querySelector('body'),
+      ),
+      ReactDOM.createPortal(
+        <div key="0" className={className}>
+          {(() => {
+            if (content != null) {
+              return content;
+            }
+            return <div dangerouslySetInnerHTML={{ __html: message }} />;
+          })()}
+          {(() => {
+            if (typeof onConfirm === 'function') {
+              return (
+                <button
+                  type="button"
+                  className="button confirm"
+                  onClick={() => {
+                    onConfirm();
+                  }}
+                >
+                  {labels[0]}
+                </button>
+              );
+            }
+            return null;
+          })()}
+          {(() => {
+            if (typeof onCancel === 'function') {
+              return (
+                <button
+                  type="button"
+                  className="button cancel"
+                  onClick={() => {
+                    onCancel();
+                  }}
+                >
+                  {labels[1]}
+                </button>
+              );
+            }
+            return null;
+          })()}
+        </div>, document.querySelector('body'),
+      ),
+      children,
+    ];
+  }
+
+  if (!children && !content) {
+    return <div />;
+  }
+
+  return children || content;
+};
+
+AUAlertComponent.defaultProps = {
+  children: null,
+  content: null,
+  classNames: '',
+  onConfirm: null,
+  onCancel: null,
+  labels: [
+    'OK',
+    'Annullér',
+  ],
+};
+
+AUAlertComponent.propTypes = {
+  /**
+  * Beskeden der vises i popup
+  */
+  message: PropTypes.string.isRequired,
+  /**
+   * True når beskeden skal vises
+   */
+  alert: PropTypes.bool.isRequired,
+  /**
+  * Det element der trigger beskeden
+  */
+  children: PropTypes.arrayOf(PropTypes.element),
+  /**
+  * Det samme som children
+  */
+  content: PropTypes.element,
+  /**
+   * Hvis der skal tilføjes ekstra klasser til alert-komponentet
+   */
+  classNames: PropTypes.string,
+  /**
+   * Kaldes ved confirm
+   */
+  onConfirm: PropTypes.func,
+  /**
+   * Kaldes ved cancel
+   */
+  onCancel: PropTypes.func,
+  labels: PropTypes.arrayOf(PropTypes.string.isRequired),
+};
+
+AUAlertComponent.displayName = 'AUAlertComponent';
+export default AUAlertComponent;

package/src/components/AUAmountComponent.js

@@ -1,84 +1,84 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-class AUAmountComponent extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      amount: props.amount,
-      countTo: 0,
-      newAmountReceived: false,
-      counting: false,
-      ticks: 0,
-    };
-
-    this.count = this.count.bind(this);
-  }
-
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (!prevState.newAmountReceived && nextProps.amount !== prevState.amount) {
-      return {
-        countTo: nextProps.amount,
-        newAmountReceived: true,
-        ticks: Math.abs(nextProps.amount - prevState.amount),
-      };
-    }
-
-    return null;
-  }
-
-  componentDidUpdate() {
-    const {
-      amount,
-      counting,
-      newAmountReceived,
-    } = this.state;
-    if (newAmountReceived && !counting) {
-      this.count(amount);
-    }
-  }
-
-  count(stateAmount) {
-    const { countTo, ticks } = this.state;
-    if (countTo !== stateAmount) {
-      let newAmount = 0;
-      if (stateAmount < countTo) {
-        newAmount = stateAmount + 1;
-      } else {
-        newAmount = stateAmount - 1;
-      }
-      this.setState({
-        amount: newAmount,
-        counting: true,
-      }, () => {
-        setTimeout(() => {
-          this.count(newAmount);
-        }, 100 / ticks);
-      });
-    } else {
-      this.setState({
-        newAmountReceived: false,
-        counting: false,
-      });
-    }
-  }
-
-  render() {
-    const { amount } = this.state;
-    return (
-      <span>
-        <strong>
-          {`${amount} `}
-        </strong>
-      </span>
-    );
-  }
-}
-
-AUAmountComponent.propTypes = {
-  amount: PropTypes.number.isRequired,
-};
-
-AUAmountComponent.displayName = 'AUAmountComponent';
-export default AUAmountComponent;
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class AUAmountComponent extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      amount: props.amount,
+      countTo: 0,
+      newAmountReceived: false,
+      counting: false,
+      ticks: 0,
+    };
+
+    this.count = this.count.bind(this);
+  }
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (!prevState.newAmountReceived && nextProps.amount !== prevState.amount) {
+      return {
+        countTo: nextProps.amount,
+        newAmountReceived: true,
+        ticks: Math.abs(nextProps.amount - prevState.amount),
+      };
+    }
+
+    return null;
+  }
+
+  componentDidUpdate() {
+    const {
+      amount,
+      counting,
+      newAmountReceived,
+    } = this.state;
+    if (newAmountReceived && !counting) {
+      this.count(amount);
+    }
+  }
+
+  count(stateAmount) {
+    const { countTo, ticks } = this.state;
+    if (countTo !== stateAmount) {
+      let newAmount = 0;
+      if (stateAmount < countTo) {
+        newAmount = stateAmount + 1;
+      } else {
+        newAmount = stateAmount - 1;
+      }
+      this.setState({
+        amount: newAmount,
+        counting: true,
+      }, () => {
+        setTimeout(() => {
+          this.count(newAmount);
+        }, 100 / ticks);
+      });
+    } else {
+      this.setState({
+        newAmountReceived: false,
+        counting: false,
+      });
+    }
+  }
+
+  render() {
+    const { amount } = this.state;
+    return (
+      <span>
+        <strong>
+          {`${amount} `}
+        </strong>
+      </span>
+    );
+  }
+}
+
+AUAmountComponent.propTypes = {
+  amount: PropTypes.number.isRequired,
+};
+
+AUAmountComponent.displayName = 'AUAmountComponent';
+export default AUAmountComponent;

package/src/components/AUBannerComponent.js

@@ -1,99 +1,99 @@
-/* eslint-env browser */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-/**
- * AU Banner Komponent
- *
- * Eksempel:
- * ```jsx
- *  <AUBannerComponent
-            url="http://ps.au.dk/uddannelser"
-            header="Bachelor- og kandidatuddannelser"
-            text="Læs mere om, hvilke uddannelser vi udbyder på Institut for Statskundskab"
-            image="http://ps.au.dk/uploads/tx_gridelements/Bacheloruddannelse_04.jpg"
-            classNames="hastext aubanner-2"
-          />
- * ```
- */
-
-
-const AUBannerComponent = (props) => {
-  const {
-    classNames,
-    url,
-    header,
-    text,
-    image,
-  } = props;
-  return (
-    <div className={`aubanner ${classNames}`}>
-      {(() => {
-        const target = url.indexOf(window.location.host) > -1 || url.indexOf('/') === 0 ? '_self' : '_blank';
-        const banner2 = classNames.indexOf('aubanner-2') > -1;
-
-        if (banner2) {
-          return (
-            <a target={target} href={url} rel="noreferrer noopener">
-              {(() => {
-                if (image) {
-                  return <img src={image} alt="" />;
-                }
-                return null;
-              })()}
-              <div className="aubanner-content">
-                <h2>
-                  {header}
-                </h2>
-                <p>
-                  {text}
-                </p>
-              </div>
-            </a>
-          );
-        }
-
-        return (
-          <a target={target} href={url} rel="noreferrer noopener">
-            <div className="aubanner-content">
-              <div className="aubanner-content-overlay">
-                <div className="aubanner-content-text" />
-              </div>
-            </div>
-            <img src={image} alt="" />
-            <div className="aubanner-content-header">
-              <div className="aubanner-content-header-pos">
-                <h2>
-                  {header}
-                </h2>
-                <p>
-                  {text}
-                </p>
-              </div>
-            </div>
-          </a>
-        );
-      })()}
-
-    </div>
-  );
-};
-
-AUBannerComponent.defaultProps = {
-  text: '',
-  header: '',
-  image: null,
-  url: '#',
-  classNames: '',
-};
-
-AUBannerComponent.propTypes = {
-  header: PropTypes.string,
-  text: PropTypes.string,
-  image: PropTypes.string,
-  url: PropTypes.string,
-  classNames: PropTypes.string,
-};
-
-AUBannerComponent.displayName = 'AUBannerComponent';
-export default AUBannerComponent;
+/* eslint-env browser */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * AU Banner Komponent
+ *
+ * Eksempel:
+ * ```jsx
+ *  <AUBannerComponent
+            url="http://ps.au.dk/uddannelser"
+            header="Bachelor- og kandidatuddannelser"
+            text="Læs mere om, hvilke uddannelser vi udbyder på Institut for Statskundskab"
+            image="http://ps.au.dk/uploads/tx_gridelements/Bacheloruddannelse_04.jpg"
+            classNames="hastext aubanner-2"
+          />
+ * ```
+ */
+
+
+const AUBannerComponent = (props) => {
+  const {
+    classNames,
+    url,
+    header,
+    text,
+    image,
+  } = props;
+  return (
+    <div className={`aubanner ${classNames}`}>
+      {(() => {
+        const target = url.indexOf(window.location.host) > -1 || url.indexOf('/') === 0 ? '_self' : '_blank';
+        const banner2 = classNames.indexOf('aubanner-2') > -1;
+
+        if (banner2) {
+          return (
+            <a target={target} href={url} rel="noreferrer noopener">
+              {(() => {
+                if (image) {
+                  return <img src={image} alt="" />;
+                }
+                return null;
+              })()}
+              <div className="aubanner-content">
+                <h2>
+                  {header}
+                </h2>
+                <p>
+                  {text}
+                </p>
+              </div>
+            </a>
+          );
+        }
+
+        return (
+          <a target={target} href={url} rel="noreferrer noopener">
+            <div className="aubanner-content">
+              <div className="aubanner-content-overlay">
+                <div className="aubanner-content-text" />
+              </div>
+            </div>
+            <img src={image} alt="" />
+            <div className="aubanner-content-header">
+              <div className="aubanner-content-header-pos">
+                <h2>
+                  {header}
+                </h2>
+                <p>
+                  {text}
+                </p>
+              </div>
+            </div>
+          </a>
+        );
+      })()}
+
+    </div>
+  );
+};
+
+AUBannerComponent.defaultProps = {
+  text: '',
+  header: '',
+  image: null,
+  url: '#',
+  classNames: '',
+};
+
+AUBannerComponent.propTypes = {
+  header: PropTypes.string,
+  text: PropTypes.string,
+  image: PropTypes.string,
+  url: PropTypes.string,
+  classNames: PropTypes.string,
+};
+
+AUBannerComponent.displayName = 'AUBannerComponent';
+export default AUBannerComponent;