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

package/src/components/AUTruncatorComponent.tsx

@@ -1,141 +1,141 @@
-import React, {
-  FC, useEffect, useRef, useState,
-} from 'react';
-import { overflowsY, focusableSelector } from '@aarhus-university/au-designsystem-delphinus/source/js/components/helpers';
-import { truncate } from '@aarhus-university/au-designsystem-delphinus/source/js/components/truncator';
-
-const getMaxLinesStyle = (maxLines: number): React.CSSProperties => ({ '--max-lines': maxLines } as React.CSSProperties);
-
-type Props = {
-  maxLines: number;
-  header?: string;
-  headerLevel?: number;
-  children: string | JSX.Element | JSX.Element[];
-  classNames?: string;
-  buttonChild: JSX.Element;
-};
-
-let lastWidth = window.innerWidth;
-let resizeTimeout;
-let onResize;
-let onFocus;
-
-const AUTruncatorComponent: FC<Props> = ({
-  maxLines,
-  header = undefined,
-  headerLevel = 2,
-  children,
-  classNames = 'truncator',
-  buttonChild,
-}) => {
-  const expandRef = useRef<HTMLButtonElement>(null);
-  const contentRef = useRef<HTMLDivElement>(null);
-  const [expanded, setExpanded] = useState<boolean>(false);
-  useEffect(() => {
-    window.removeEventListener('resize', onResize);
-    if (expanded) {
-      (expandRef.current as HTMLElement).removeAttribute('hidden');
-      expandRef.current?.parentElement?.classList.add('truncator--no-truncation');
-    }
-    truncate(expandRef.current as HTMLElement, contentRef.current as HTMLElement);
-
-    onResize = () => {
-      clearTimeout(resizeTimeout);
-
-      resizeTimeout = setTimeout(() => {
-        if (window.innerWidth !== lastWidth) {
-          expandRef.current?.setAttribute('hidden', 'hidden');
-          expandRef.current?.parentElement?.classList.remove('truncator--no-truncation');
-          lastWidth = window.innerWidth;
-          setExpanded(false);
-        }
-      }, 200);
-    };
-
-    window.addEventListener('resize', onResize);
-
-    const focusElements = contentRef.current?.querySelectorAll(focusableSelector);
-
-    onFocus = (event: Event) => {
-      if (overflowsY(event.target as HTMLElement)) {
-        setExpanded(true);
-      }
-    };
-
-    if (focusElements) {
-      focusElements.forEach((f) => {
-        f.removeEventListener('focus', onFocus);
-        f.addEventListener('focus', onFocus);
-      });
-    }
-
-    return () => {
-      if (focusElements) {
-        focusElements.forEach((f) => {
-          f.removeEventListener('focus', onFocus);
-        });
-      }
-      window.removeEventListener('resize', onResize);
-    };
-  }, [expanded]);
-
-  return (
-    <div className={`${classNames}${expanded ? ' truncator--no-truncation' : ''}`} style={getMaxLinesStyle(maxLines)}>
-      {
-        header && (
-          <>
-            {
-              headerLevel === 1 && (
-                <h1 className="truncator__header">{header}</h1>
-              )
-            }
-            {
-              headerLevel === 2 && (
-                <h2 className="truncator__header">{header}</h2>
-              )
-            }
-            {
-              headerLevel === 3 && (
-                <h3 className="truncator__header">{header}</h3>
-              )
-            }
-            {
-              headerLevel === 4 && (
-                <h4 className="truncator__header">{header}</h4>
-              )
-            }
-            {
-              headerLevel === 5 && (
-                <h5 className="truncator__header">{header}</h5>
-              )
-            }
-            {
-              headerLevel === 6 && (
-                <h6 className="truncator__header">{header}</h6>
-              )
-            }
-          </>
-        )
-      }
-      <button
-        ref={expandRef}
-        type="button"
-        className="truncator__expand"
-        hidden
-        aria-expanded={expanded}
-        onClick={() => setExpanded(true)}
-      >
-        {buttonChild}
-      </button>
-      <div
-        ref={contentRef}
-        className="truncator__content"
-      >
-        {children}
-      </div>
-    </div>
-  );
-};
-
-AUTruncatorComponent.displayName = 'AUTruncatorComponent';
-export default AUTruncatorComponent;
+import React, {
+  FC, useEffect, useRef, useState,
+} from 'react';
+import { overflowsY, focusableSelector } from '@aarhus-university/au-designsystem-delphinus/source/js/components/helpers';
+import { truncate } from '@aarhus-university/au-designsystem-delphinus/source/js/components/truncator';
+
+const getMaxLinesStyle = (maxLines: number): React.CSSProperties => ({ '--max-lines': maxLines } as React.CSSProperties);
+
+type Props = {
+  maxLines: number;
+  header?: string;
+  headerLevel?: number;
+  children: string | JSX.Element | JSX.Element[];
+  classNames?: string;
+  buttonChild: JSX.Element;
+};
+
+let lastWidth = window.innerWidth;
+let resizeTimeout;
+let onResize;
+let onFocus;
+
+const AUTruncatorComponent: FC<Props> = ({
+  maxLines,
+  header = undefined,
+  headerLevel = 2,
+  children,
+  classNames = 'truncator',
+  buttonChild,
+}) => {
+  const expandRef = useRef<HTMLButtonElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [expanded, setExpanded] = useState<boolean>(false);
+  useEffect(() => {
+    window.removeEventListener('resize', onResize);
+    if (expanded) {
+      (expandRef.current as HTMLElement).removeAttribute('hidden');
+      expandRef.current?.parentElement?.classList.add('truncator--no-truncation');
+    }
+    truncate(expandRef.current as HTMLElement, contentRef.current as HTMLElement);
+
+    onResize = () => {
+      clearTimeout(resizeTimeout);
+
+      resizeTimeout = setTimeout(() => {
+        if (window.innerWidth !== lastWidth) {
+          expandRef.current?.setAttribute('hidden', 'hidden');
+          expandRef.current?.parentElement?.classList.remove('truncator--no-truncation');
+          lastWidth = window.innerWidth;
+          setExpanded(false);
+        }
+      }, 200);
+    };
+
+    window.addEventListener('resize', onResize);
+
+    const focusElements = contentRef.current?.querySelectorAll(focusableSelector);
+
+    onFocus = (event: Event) => {
+      if (overflowsY(event.target as HTMLElement)) {
+        setExpanded(true);
+      }
+    };
+
+    if (focusElements) {
+      focusElements.forEach((f) => {
+        f.removeEventListener('focus', onFocus);
+        f.addEventListener('focus', onFocus);
+      });
+    }
+
+    return () => {
+      if (focusElements) {
+        focusElements.forEach((f) => {
+          f.removeEventListener('focus', onFocus);
+        });
+      }
+      window.removeEventListener('resize', onResize);
+    };
+  }, [expanded]);
+
+  return (
+    <div className={`${classNames}${expanded ? ' truncator--no-truncation' : ''}`} style={getMaxLinesStyle(maxLines)}>
+      {
+        header && (
+          <>
+            {
+              headerLevel === 1 && (
+                <h1 className="truncator__header">{header}</h1>
+              )
+            }
+            {
+              headerLevel === 2 && (
+                <h2 className="truncator__header">{header}</h2>
+              )
+            }
+            {
+              headerLevel === 3 && (
+                <h3 className="truncator__header">{header}</h3>
+              )
+            }
+            {
+              headerLevel === 4 && (
+                <h4 className="truncator__header">{header}</h4>
+              )
+            }
+            {
+              headerLevel === 5 && (
+                <h5 className="truncator__header">{header}</h5>
+              )
+            }
+            {
+              headerLevel === 6 && (
+                <h6 className="truncator__header">{header}</h6>
+              )
+            }
+          </>
+        )
+      }
+      <button
+        ref={expandRef}
+        type="button"
+        className="truncator__expand"
+        hidden
+        aria-expanded={expanded}
+        onClick={() => setExpanded(true)}
+      >
+        {buttonChild}
+      </button>
+      <div
+        ref={contentRef}
+        className="truncator__content"
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+AUTruncatorComponent.displayName = 'AUTruncatorComponent';
+export default AUTruncatorComponent;

package/src/components/wrapping/AUEmbedComponent.js

@@ -1,47 +1,47 @@
-/* eslint-env browser */
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import AUSpinnerComponent from '../delphinus/AUSpinnerComponent';
-import getSourceForFrame from '../../lib/wrapping';
-
-const AUEmbedComponent = ({
-  api,
-  path,
-  referrer,
-}) => {
-  const [source, setSource] = useState(null);
-  const [frameLoaded, setFrameLoaded] = useState(false);
-
-  return (
-    <AUSpinnerComponent
-      loaded={frameLoaded}
-      loadingCondition={!frameLoaded}
-      onLoad={() => {
-        getSourceForFrame(api, path, referrer, (frameSrc) => {
-          setSource(frameSrc.url);
-          setFrameLoaded(true);
-        });
-      }}
-    >
-      <iframe
-        id="AUEmbedIframe"
-        title="AUEmbed"
-        src={source}
-        onLoad={() => {
-          if (window.iFrameResize) {
-            window.iFrameResize({ heightCalculationMethods: 'taggedElement', log: false }, '#AUEmbedIframe');
-          }
-        }}
-      />
-    </AUSpinnerComponent>
-  );
-};
-
-AUEmbedComponent.propTypes = {
-  path: PropTypes.string.isRequired,
-  api: PropTypes.string.isRequired,
-  referrer: PropTypes.string.isRequired,
-};
-
-AUEmbedComponent.displayName = 'AUEmbedComponent';
-export default AUEmbedComponent;
+/* eslint-env browser */
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import AUSpinnerComponent from '../delphinus/AUSpinnerComponent';
+import getSourceForFrame from '../../lib/wrapping';
+
+const AUEmbedComponent = ({
+  api,
+  path,
+  referrer,
+}) => {
+  const [source, setSource] = useState(null);
+  const [frameLoaded, setFrameLoaded] = useState(false);
+
+  return (
+    <AUSpinnerComponent
+      loaded={frameLoaded}
+      loadingCondition={!frameLoaded}
+      onLoad={() => {
+        getSourceForFrame(api, path, referrer, (frameSrc) => {
+          setSource(frameSrc.url);
+          setFrameLoaded(true);
+        });
+      }}
+    >
+      <iframe
+        id="AUEmbedIframe"
+        title="AUEmbed"
+        src={source}
+        onLoad={() => {
+          if (window.iFrameResize) {
+            window.iFrameResize({ heightCalculationMethods: 'taggedElement', log: false }, '#AUEmbedIframe');
+          }
+        }}
+      />
+    </AUSpinnerComponent>
+  );
+};
+
+AUEmbedComponent.propTypes = {
+  path: PropTypes.string.isRequired,
+  api: PropTypes.string.isRequired,
+  referrer: PropTypes.string.isRequired,
+};
+
+AUEmbedComponent.displayName = 'AUEmbedComponent';
+export default AUEmbedComponent;

package/src/layout-2016/components/alphabox/AlphaBoxComponent.js

@@ -1,142 +1,142 @@
-/* eslint-env browser */
-import React from 'react';
-import PropTypes from 'prop-types';
-import AlphaBoxContentComponent from './AlphaBoxContentComponent';
-import AUAutoSuggestComponent from '../../../components/AUAutoSuggestComponent';
-import DataBoxSuggestionComponent from '../databox/DataBoxSuggestionComponent';
-
-class AlphaBoxComponent extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      items: [],
-    };
-
-    this.getSuggestions = this.getSuggestions.bind(this);
-  }
-
-  componentDidMount() {
-    const { box } = this.props;
-    const { data } = box;
-    if (data.mode === 'json' && data.source !== '') {
-      if (data.itemsOnly) {
-        data.source += '?itemsOnly=true';
-      }
-      fetch(data.source).then((promise) => promise.json()).then((pData) => {
-        this.setState({ items: pData.items });
-      });
-    }
-  }
-
-  getSuggestions(value, _, callback) {
-    const { items } = this.state;
-    const inputValue = value.trim().toLowerCase();
-    const inputLength = inputValue.length;
-    callback(inputLength < 2 ? []
-      : items.filter(
-        (x) => x.name.toLowerCase().indexOf(inputValue) > -1
-          || x.name.replace(/-/ig, ' ').toLowerCase().indexOf(inputValue) > -1
-          || x.name.replace(/ /ig, '-').toLowerCase().indexOf(inputValue) > -1,
-      )
-        .sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase(), 'da', { ignorePunctuation: true })));
-  }
-
-  render() {
-    const { box } = this.props;
-    const { items } = this.state;
-    const { config } = box;
-    const renderLinks = config.links.map((l) => (
-      <li key={l.title}>
-        <a
-          href={l.url}
-          onClick={() => {
-            if (typeof l.onClick === 'function') {
-              l.onClick();
-            }
-          }}
-          style={{ backgroundColor: box.background.linkColor }}
-        >
-          {l.title}
-        </a>
-      </li>
-    ));
-
-    return (
-      <div className="au_alphabox" style={{ backgroundColor: box.background.color }}>
-        <div>
-          <h2>
-            <a href={config.url}>{config.title}</a>
-          </h2>
-          <AlphaBoxContentComponent
-            items={items}
-            linkColor={box.background.linkColor}
-            noResultsText={config.noResultsAlphabet}
-            noResultsUri={config.noResultsUri}
-          />
-          <AUAutoSuggestComponent
-            placeholder={box.search.placeHolder}
-            setResults={(_items) => {
-              if (_items.length >= 1 && _items[0].url) {
-                window.location.href = _items[0].url;
-              }
-            }}
-            collection={[]}
-            getSuggestions={this.getSuggestions}
-            getSuggestionValue={(suggestion) => suggestion.name}
-            renderSuggestion={(suggestion) => <DataBoxSuggestionComponent item={suggestion} />}
-            noResultsText={config.noResultsSearch}
-          />
-          {
-            config.description !== '' && (
-              <h3>{config.description}</h3>
-            )
-          }
-          {
-            config.links.length > 0 && (
-              <ul className="quicklinks resetlist">
-                {renderLinks}
-              </ul>
-            )
-          }
-        </div>
-      </div>
-    );
-  }
-}
-
-AlphaBoxComponent.propTypes = {
-  box: PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    data: PropTypes.shape({
-      itemsOnly: PropTypes.bool.isRequired,
-      mode: PropTypes.string.isRequired,
-      source: PropTypes.string.isRequired,
-    }),
-    config: PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      url: PropTypes.string.isRequired,
-      description: PropTypes.string.isRequired,
-      container: PropTypes.string.isRequired,
-      links: PropTypes.arrayOf(PropTypes.shape({
-        title: PropTypes.string.isRequired,
-        url: PropTypes.string.isRequired,
-      })).isRequired,
-      title: PropTypes.string.isRequired,
-      noResultsAlphabet: PropTypes.string.isRequired,
-      noResultsSearch: PropTypes.string.isRequired,
-      noResultsUri: PropTypes.string.isRequired,
-    }).isRequired,
-    background: PropTypes.shape({
-      color: PropTypes.string.isRequired,
-      linkColor: PropTypes.string.isRequired,
-    }).isRequired,
-    search: PropTypes.shape({
-      placeHolder: PropTypes.string.isRequired,
-      minLength: PropTypes.number.isRequired,
-    }).isRequired,
-  }).isRequired,
-};
-
-AlphaBoxComponent.displayName = 'AlphaBoxComponent';
-export default AlphaBoxComponent;
+/* eslint-env browser */
+import React from 'react';
+import PropTypes from 'prop-types';
+import AlphaBoxContentComponent from './AlphaBoxContentComponent';
+import AUAutoSuggestComponent from '../../../components/AUAutoSuggestComponent';
+import DataBoxSuggestionComponent from '../databox/DataBoxSuggestionComponent';
+
+class AlphaBoxComponent extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      items: [],
+    };
+
+    this.getSuggestions = this.getSuggestions.bind(this);
+  }
+
+  componentDidMount() {
+    const { box } = this.props;
+    const { data } = box;
+    if (data.mode === 'json' && data.source !== '') {
+      if (data.itemsOnly) {
+        data.source += '?itemsOnly=true';
+      }
+      fetch(data.source).then((promise) => promise.json()).then((pData) => {
+        this.setState({ items: pData.items });
+      });
+    }
+  }
+
+  getSuggestions(value, _, callback) {
+    const { items } = this.state;
+    const inputValue = value.trim().toLowerCase();
+    const inputLength = inputValue.length;
+    callback(inputLength < 2 ? []
+      : items.filter(
+        (x) => x.name.toLowerCase().indexOf(inputValue) > -1
+          || x.name.replace(/-/ig, ' ').toLowerCase().indexOf(inputValue) > -1
+          || x.name.replace(/ /ig, '-').toLowerCase().indexOf(inputValue) > -1,
+      )
+        .sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase(), 'da', { ignorePunctuation: true })));
+  }
+
+  render() {
+    const { box } = this.props;
+    const { items } = this.state;
+    const { config } = box;
+    const renderLinks = config.links.map((l) => (
+      <li key={l.title}>
+        <a
+          href={l.url}
+          onClick={() => {
+            if (typeof l.onClick === 'function') {
+              l.onClick();
+            }
+          }}
+          style={{ backgroundColor: box.background.linkColor }}
+        >
+          {l.title}
+        </a>
+      </li>
+    ));
+
+    return (
+      <div className="au_alphabox" style={{ backgroundColor: box.background.color }}>
+        <div>
+          <h2>
+            <a href={config.url}>{config.title}</a>
+          </h2>
+          <AlphaBoxContentComponent
+            items={items}
+            linkColor={box.background.linkColor}
+            noResultsText={config.noResultsAlphabet}
+            noResultsUri={config.noResultsUri}
+          />
+          <AUAutoSuggestComponent
+            placeholder={box.search.placeHolder}
+            setResults={(_items) => {
+              if (_items.length >= 1 && _items[0].url) {
+                window.location.href = _items[0].url;
+              }
+            }}
+            collection={[]}
+            getSuggestions={this.getSuggestions}
+            getSuggestionValue={(suggestion) => suggestion.name}
+            renderSuggestion={(suggestion) => <DataBoxSuggestionComponent item={suggestion} />}
+            noResultsText={config.noResultsSearch}
+          />
+          {
+            config.description !== '' && (
+              <h3>{config.description}</h3>
+            )
+          }
+          {
+            config.links.length > 0 && (
+              <ul className="quicklinks resetlist">
+                {renderLinks}
+              </ul>
+            )
+          }
+        </div>
+      </div>
+    );
+  }
+}
+
+AlphaBoxComponent.propTypes = {
+  box: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    data: PropTypes.shape({
+      itemsOnly: PropTypes.bool.isRequired,
+      mode: PropTypes.string.isRequired,
+      source: PropTypes.string.isRequired,
+    }),
+    config: PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      url: PropTypes.string.isRequired,
+      description: PropTypes.string.isRequired,
+      container: PropTypes.string.isRequired,
+      links: PropTypes.arrayOf(PropTypes.shape({
+        title: PropTypes.string.isRequired,
+        url: PropTypes.string.isRequired,
+      })).isRequired,
+      title: PropTypes.string.isRequired,
+      noResultsAlphabet: PropTypes.string.isRequired,
+      noResultsSearch: PropTypes.string.isRequired,
+      noResultsUri: PropTypes.string.isRequired,
+    }).isRequired,
+    background: PropTypes.shape({
+      color: PropTypes.string.isRequired,
+      linkColor: PropTypes.string.isRequired,
+    }).isRequired,
+    search: PropTypes.shape({
+      placeHolder: PropTypes.string.isRequired,
+      minLength: PropTypes.number.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
+
+AlphaBoxComponent.displayName = 'AlphaBoxComponent';
+export default AlphaBoxComponent;