@aarhus-university/au-lib-react-components 9.11.19 → 10.0.2

package/src/components/profile/AUProfileWidgetV2Component.js

@@ -1,116 +1,116 @@
-/* eslint-env browser */
-import React, { useEffect, useState, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { setCopyToClipboard } from '@aarhus-university/au-designsystem-delphinus/source/js/components/nav';
-
-const AUProfileWidgetComponent = React.memo(({
-  lang,
-  name,
-  auid,
-  studentNumber,
-  settings,
-  changeLanguageUrl,
-  logoutUri,
-  profileLabels,
-}) => {
-  const [ctcSet, setCtcSet] = useState(false);
-  const renderSettings = settings.map((s) => {
-    const btnRef = useRef();
-    if (s.type === 'anchor') {
-      return <a key={s.url} className="sub-nav__item" href={s.url}>{s.text}</a>;
-    }
-    return (
-      <button
-        key={s.text}
-        ref={btnRef}
-        type="button"
-        className={`sub-nav__item ${s.classNames}`}
-        onClick={() => s.onClick(btnRef.current)}
-        data-icon={s.icon}
-      >
-        {s.text}
-      </button>
-    );
-  });
-
-  useEffect(() => {
-    if (auid > 0 && !ctcSet) {
-      setCopyToClipboard(lang);
-      setCtcSet(true);
-    }
-  });
-
-  return (
-    <div className="sub-nav__content theme--normal" aria-labelledby="profile-menu-toggle">
-      <div className="sub-nav__user">
-        <h2 className="sub-nav__user-name">{name}</h2>
-        <button
-          type="button"
-          className="copy-to-clipboard"
-          title={profileLabels[lang].copyAuid}
-          aria-label={`${profileLabels[lang].auId}: AU${auid}`}
-        >
-          {`${profileLabels[lang].auId}: `}
-          <span className="copy-to-clipboard__this">{`AU${auid}`}</span>
-        </button>
-        {
-          studentNumber && (
-            <button
-              type="button"
-              className="copy-to-clipboard"
-              title={profileLabels[lang].copyStudentNumber}
-              aria-label={`${profileLabels[lang].studentNumber}: ${studentNumber}`}
-            >
-              {`${profileLabels[lang].studentNumber}: `}
-              <span className="copy-to-clipboard__this">{studentNumber}</span>
-            </button>
-          )
-        }
-      </div>
-      <hr />
-      {renderSettings}
-      <hr />
-      {
-        changeLanguageUrl && (
-          <>
-            <a className="sub-nav__item sub-nav__item--icon" href={changeLanguageUrl} data-icon="">{profileLabels[lang].changeLanguage}</a>
-            <hr />
-          </>
-        )
-      }
-      <a
-        className="sub-nav__item sub-nav__item--icon"
-        data-icon=""
-        href={logoutUri}
-      >
-        {profileLabels[lang].logout}
-      </a>
-    </div>
-  );
-});
-
-AUProfileWidgetComponent.defaultProps = {
-  studentNumber: null,
-  changeLanguageUrl: '',
-};
-
-AUProfileWidgetComponent.propTypes = {
-  lang: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  auid: PropTypes.number.isRequired,
-  studentNumber: PropTypes.string,
-  settings: PropTypes.arrayOf(PropTypes.shape({
-    type: PropTypes.string.isRequired,
-    url: PropTypes.string,
-    text: PropTypes.string.isRequired,
-    onClick: PropTypes.func,
-    classNames: PropTypes.string,
-    icon: PropTypes.string,
-  })).isRequired,
-  profileLabels: PropTypes.shape({}).isRequired,
-  changeLanguageUrl: PropTypes.string,
-  logoutUri: PropTypes.string.isRequired,
-};
-
-AUProfileWidgetComponent.displayName = 'AUProfileWidgetComponent';
-export default AUProfileWidgetComponent;
+/* eslint-env browser */
+import React, { useEffect, useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { setCopyToClipboard } from '@aarhus-university/au-designsystem-delphinus/source/js/components/nav';
+
+const AUProfileWidgetComponent = React.memo(({
+  lang,
+  name,
+  auid,
+  studentNumber,
+  settings,
+  changeLanguageUrl,
+  logoutUri,
+  profileLabels,
+}) => {
+  const [ctcSet, setCtcSet] = useState(false);
+  const renderSettings = settings.map((s) => {
+    const btnRef = useRef();
+    if (s.type === 'anchor') {
+      return <a key={s.url} className="sub-nav__item" href={s.url}>{s.text}</a>;
+    }
+    return (
+      <button
+        key={s.text}
+        ref={btnRef}
+        type="button"
+        className={`sub-nav__item ${s.classNames}`}
+        onClick={() => s.onClick(btnRef.current)}
+        data-icon={s.icon}
+      >
+        {s.text}
+      </button>
+    );
+  });
+
+  useEffect(() => {
+    if (auid > 0 && !ctcSet) {
+      setCopyToClipboard(lang);
+      setCtcSet(true);
+    }
+  });
+
+  return (
+    <div className="sub-nav__content theme--normal" aria-labelledby="profile-menu-toggle">
+      <div className="sub-nav__user">
+        <h2 className="sub-nav__user-name">{name}</h2>
+        <button
+          type="button"
+          className="copy-to-clipboard"
+          title={profileLabels[lang].copyAuid}
+          aria-label={`${profileLabels[lang].auId}: AU${auid}`}
+        >
+          {`${profileLabels[lang].auId}: `}
+          <span className="copy-to-clipboard__this">{`AU${auid}`}</span>
+        </button>
+        {
+          studentNumber && (
+            <button
+              type="button"
+              className="copy-to-clipboard"
+              title={profileLabels[lang].copyStudentNumber}
+              aria-label={`${profileLabels[lang].studentNumber}: ${studentNumber}`}
+            >
+              {`${profileLabels[lang].studentNumber}: `}
+              <span className="copy-to-clipboard__this">{studentNumber}</span>
+            </button>
+          )
+        }
+      </div>
+      <hr />
+      {renderSettings}
+      <hr />
+      {
+        changeLanguageUrl && (
+          <>
+            <a className="sub-nav__item sub-nav__item--icon" href={changeLanguageUrl} data-icon="">{profileLabels[lang].changeLanguage}</a>
+            <hr />
+          </>
+        )
+      }
+      <a
+        className="sub-nav__item sub-nav__item--icon"
+        data-icon=""
+        href={logoutUri}
+      >
+        {profileLabels[lang].logout}
+      </a>
+    </div>
+  );
+});
+
+AUProfileWidgetComponent.defaultProps = {
+  studentNumber: null,
+  changeLanguageUrl: '',
+};
+
+AUProfileWidgetComponent.propTypes = {
+  lang: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  auid: PropTypes.number.isRequired,
+  studentNumber: PropTypes.string,
+  settings: PropTypes.arrayOf(PropTypes.shape({
+    type: PropTypes.string.isRequired,
+    url: PropTypes.string,
+    text: PropTypes.string.isRequired,
+    onClick: PropTypes.func,
+    classNames: PropTypes.string,
+    icon: PropTypes.string,
+  })).isRequired,
+  profileLabels: PropTypes.shape({}).isRequired,
+  changeLanguageUrl: PropTypes.string,
+  logoutUri: PropTypes.string.isRequired,
+};
+
+AUProfileWidgetComponent.displayName = 'AUProfileWidgetComponent';
+export default AUProfileWidgetComponent;

package/src/components/profile/{AUProfileWidgetV3Component.js → AUProfileWidgetV3Component.tsx}

@@ -1,130 +1,122 @@
-/* eslint-env browser */
-import React, { useEffect, useState, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { setCopyToClipboard } from '@aarhus-university/au-designsystem-delphinus/source/js/components/nav';
-
-const AUProfileWidgetComponent = React.memo(({
-  lang,
-  name,
-  auid,
-  studentNumber,
-  settings,
-  changeLanguageUrl,
-  logoutUri,
-  profileLabels,
-}) => {
-  const [ctcSet, setCtcSet] = useState(false);
-  const renderSettings = settings.map((s) => {
-    const btnRef = useRef();
-    if (s.type === 'anchor') {
-      return (
-        <a
-          key={s.url}
-          className={`sub-nav__item ${s.classNames}`}
-          href={s.url}
-          data-icon={s.icon}
-          data-gtm={s.dataGtm}
-        >
-          {s.text}
-        </a>
-      );
-    }
-    return (
-      <button
-        key={s.text}
-        ref={btnRef}
-        type="button"
-        disabled={s.disabled}
-        className={`sub-nav__item ${s.classNames}`}
-        onClick={() => s.onClick(btnRef.current)}
-        data-icon={s.icon}
-        data-gtm={s.dataGtm}
-      >
-        {s.text}
-      </button>
-    );
-  });
-
-  useEffect(() => {
-    if (auid > 0 && !ctcSet) {
-      setCopyToClipboard(lang);
-      setCtcSet(true);
-    }
-  });
-
-  return (
-    <div className="sub-nav__content theme--normal" aria-labelledby="profile-menu-toggle">
-      <div className="sub-nav__user">
-        <h2 className="sub-nav__user-name">{name}</h2>
-        <button
-          type="button"
-          className="copy-to-clipboard"
-          title={profileLabels[lang].copyAuid}
-          aria-label={`${profileLabels[lang].auId}: AU${auid}`}
-          data-gtm="au-btn-header-copy-auid"
-        >
-          {`${profileLabels[lang].auId}: `}
-          <span className="copy-to-clipboard__this">{`AU${auid}`}</span>
-        </button>
-        {
-          studentNumber && (
-            <button
-              type="button"
-              className="copy-to-clipboard"
-              title={profileLabels[lang].copyStudentNumber}
-              aria-label={`${profileLabels[lang].studentNumber}: ${studentNumber}`}
-            >
-              {`${profileLabels[lang].studentNumber}: `}
-              <span className="copy-to-clipboard__this">{studentNumber}</span>
-            </button>
-          )
-        }
-      </div>
-      <hr />
-      {renderSettings}
-      <hr />
-      {
-        changeLanguageUrl && (
-          <>
-            <a className="sub-nav__item sub-nav__item--icon" href={changeLanguageUrl} data-icon="" data-gtm="au-btn-header-profile-changelanguage">{profileLabels[lang].changeLanguage}</a>
-            <hr />
-          </>
-        )
-      }
-      <a
-        className="sub-nav__item sub-nav__item--icon"
-        data-icon=""
-        data-gtm="au-a-header-signout"
-        href={logoutUri}
-      >
-        {profileLabels[lang].logout}
-      </a>
-    </div>
-  );
-});
-
-AUProfileWidgetComponent.defaultProps = {
-  studentNumber: null,
-  changeLanguageUrl: '',
-};
-
-AUProfileWidgetComponent.propTypes = {
-  lang: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  auid: PropTypes.number.isRequired,
-  studentNumber: PropTypes.string,
-  settings: PropTypes.arrayOf(PropTypes.shape({
-    type: PropTypes.string.isRequired,
-    url: PropTypes.string,
-    text: PropTypes.string.isRequired,
-    onClick: PropTypes.func,
-    classNames: PropTypes.string,
-    icon: PropTypes.string,
-  })).isRequired,
-  profileLabels: PropTypes.shape({}).isRequired,
-  changeLanguageUrl: PropTypes.string,
-  logoutUri: PropTypes.string.isRequired,
-};
-
-AUProfileWidgetComponent.displayName = 'AUProfileWidgetComponent';
-export default AUProfileWidgetComponent;
+/* eslint-env browser */
+import React, {
+  FC, useEffect, useState, useRef, memo,
+} from 'react';
+import { setCopyToClipboard } from '@aarhus-university/au-designsystem-delphinus/source/js/components/nav';
+
+const AUProfileWidgetComponent: FC<AUProfileWidgetComponentProps> = memo(({
+  lang,
+  name,
+  auId,
+  studentNumber,
+  settings,
+  changeLanguageUri,
+  logoutUri,
+  profileLabels,
+}: AUProfileWidgetComponentProps) => {
+  const [ctcSet, setCtcSet] = useState<boolean>(false);
+  const btnRefs = useRef<HTMLButtonElement[]>([]);
+  btnRefs.current = [];
+  const addToRefs = (el: HTMLButtonElement) => {
+    if (el && !btnRefs.current.includes(el)) {
+      btnRefs.current.push(el);
+    }
+  };
+  const renderSettings = settings.map((s, i) => {
+    if (s.type === 'anchor') {
+      return (
+        <a
+          key={s.url}
+          className={`sub-nav__item ${s.classNames}`}
+          href={s.url}
+          data-icon={s.icon}
+          data-gtm={s.dataGtm}
+        >
+          {s.text}
+        </a>
+      );
+    }
+    return (
+      <button
+        key={s.text}
+        ref={addToRefs}
+        type="button"
+        disabled={s.disabled}
+        className={`sub-nav__item ${s.classNames}`}
+        onClick={() => {
+          if (typeof s.onClick === 'function') {
+            s.onClick(btnRefs.current[i]);
+          }
+        }}
+        data-icon={s.icon}
+        data-gtm={s.dataGtm}
+      >
+        {s.text}
+      </button>
+    );
+  });
+
+  useEffect(() => {
+    if (auId > 0 && !ctcSet) {
+      setCopyToClipboard(lang);
+      setCtcSet(true);
+    }
+  });
+
+  return (
+    <div className="sub-nav__content theme--normal" aria-labelledby="profile-menu-toggle">
+      <div className="sub-nav__user">
+        <h2 className="sub-nav__user-name">{name}</h2>
+        <button
+          type="button"
+          className="copy-to-clipboard"
+          title={profileLabels[lang].copyAuid}
+          aria-label={`${profileLabels[lang].auId}: AU${auId}`}
+          data-gtm="au-btn-header-copy-auid"
+        >
+          {`${profileLabels[lang].auId}: `}
+          <span className="copy-to-clipboard__this">{`AU${auId}`}</span>
+        </button>
+        {
+          studentNumber && (
+            <button
+              type="button"
+              className="copy-to-clipboard"
+              title={profileLabels[lang].copyStudentNumber}
+              aria-label={`${profileLabels[lang].studentNumber}: ${studentNumber}`}
+            >
+              {`${profileLabels[lang].studentNumber}: `}
+              <span className="copy-to-clipboard__this">{studentNumber}</span>
+            </button>
+          )
+        }
+      </div>
+      <hr />
+      {renderSettings}
+      <hr />
+      {
+        changeLanguageUri && (
+          <>
+            <a className="sub-nav__item sub-nav__item--icon" href={changeLanguageUri} data-icon="" data-gtm="au-btn-header-profile-changelanguage">{profileLabels[lang].changeLanguage}</a>
+            <hr />
+          </>
+        )
+      }
+      <a
+        className="sub-nav__item sub-nav__item--icon"
+        data-icon=""
+        data-gtm="au-a-header-signout"
+        href={logoutUri}
+      >
+        {profileLabels[lang].logout}
+      </a>
+    </div>
+  );
+});
+
+AUProfileWidgetComponent.defaultProps = {
+  studentNumber: '',
+};
+
+AUProfileWidgetComponent.displayName = 'AUProfileWidgetComponent';
+export default AUProfileWidgetComponent;

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;