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

package/src/components/AUEditorComponent.tsx

@@ -1,117 +1,126 @@
-/* eslint-disable camelcase */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { FC, useState, useRef } from 'react';
-import { Editor } from '@tinymce/tinymce-react';
-import AUTinyMCEBuilder from '../lib/tinymce';
-import { replace } from '../lib/helpers';
-
-type Translation = IGenericTranslation['generics']['forms'];
-type CounterType = 'recommended' | 'allowed';
-type Props = {
-  lang: string;
-  id: string;
-  initialValue: string;
-  textareaName: string;
-  showCounter?: boolean;
-  counterType?: CounterType;
-  maxChars?: number;
-  translations: Translation;
-  onEditorChange: (value: string) => void;
-};
-
-const onKeyUp = (
-  editor: any,
-  parent: HTMLDivElement,
-  maxChars: number,
-  counterType: string,
-  setOverflow: React.Dispatch<React.SetStateAction<number>>,
-): void => {
-  const container = editor.getContainer();
-  const numChars = editor.plugins.wordcount.body.getCharacterCount();
-  let isActive = false;
-  if (numChars >= maxChars) {
-    isActive = true;
-    parent.setAttribute(`data-${counterType}-length`, maxChars.toString());
-  }
-
-  if (isActive) {
-    container.classList.add('info-active');
-  } else {
-    container.classList.remove('info-active');
-    parent.removeAttribute(`data-${counterType}-length`);
-  }
-
-  const overflow = numChars - maxChars;
-  if (overflow > 0) {
-    parent.classList.add('form__field__character-count--overflow');
-  } else {
-    parent.classList.remove('form__field__character-count--overflow');
-  }
-  setOverflow(overflow);
-};
-
-const AUEditorComponent: FC<Props> = ({
-  lang,
-  id,
-  initialValue,
-  textareaName,
-  showCounter = false,
-  counterType = 'recommended',
-  maxChars = 0,
-  translations,
-  onEditorChange,
-}) => {
-  const [overflow, setOverflow] = useState(0);
-  const parentRef = useRef<HTMLDivElement>(null);
-  const tiny = new AUTinyMCEBuilder(
-    lang,
-    showCounter as boolean,
-    (editor: any) => onKeyUp(
-      editor,
-      parentRef.current as HTMLDivElement,
-      maxChars as number,
-      counterType as string,
-      setOverflow,
-    ),
-  );
-
-  const { character_count } = translations;
-
-  return (
-    <div
-      ref={parentRef}
-      className="form__field__character-count"
-    >
-      <Editor
-        tinymceScriptSrc={tiny.tinyScriptSrc}
-        initialValue={initialValue}
-        id={id}
-        // value={tinyDanish}
-        textareaName={textareaName}
-        init={tiny.tinyGeneralConfig()}
-        onEditorChange={onEditorChange}
-      />
-      {
-        (typeof showCounter !== 'undefined'
-          && typeof counterType !== 'undefined'
-          && typeof maxChars !== 'undefined') && (
-          <div
-            className="form__field__character-count__info"
-            aria-live="polite"
-          >
-            <span className="form__field__character-count__info__overflow-message">
-              {`${replace(character_count.overflow.message[counterType], ['maxchars'], [maxChars.toString()])}`}
-            </span>
-            {' '}
-            <span className="form__field__character-count__info__overflow-count">
-              {`${replace(character_count.overflow.count[counterType][overflow === 1 ? 'one' : 'other'], ['overflow'], [overflow.toString()])}`}
-            </span>
-          </div>
-        )
-      }
-    </div>
-  );
-};
-
-AUEditorComponent.displayName = 'AUEditorComponent';
-export default AUEditorComponent;
+/* eslint-disable camelcase */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { FC, useState, useRef, useMemo } from 'react';
+import { Editor } from '@tinymce/tinymce-react';
+import AUTinyMCEBuilder from '../lib/tinymce';
+import { replace } from '../lib/helpers';
+
+type Translation = IGenericTranslation['generics']['forms'];
+type CounterType = 'recommended' | 'allowed';
+type Props = {
+  lang: string;
+  id: string;
+  initialValue: string;
+  textareaName: string;
+  showCounter?: boolean;
+  counterType?: CounterType;
+  maxChars?: number;
+  translations: Translation;
+  onEditorChange: (value: string) => void;
+  disabled?: boolean;
+};
+
+const onKeyUp = (
+  editor: any,
+  parent: HTMLDivElement,
+  maxChars: number,
+  counterType: string,
+  setOverflow: React.Dispatch<React.SetStateAction<number>>,
+): void => {
+  const container = editor.getContainer();
+  const numChars = editor.plugins.wordcount.body.getCharacterCount();
+  let isActive = false;
+  if (numChars >= maxChars) {
+    isActive = true;
+    parent.setAttribute(`data-${counterType}-length`, maxChars.toString());
+  }
+
+  if (isActive) {
+    container.classList.add('info-active');
+  } else {
+    container.classList.remove('info-active');
+    parent.removeAttribute(`data-${counterType}-length`);
+  }
+
+  const overflow = numChars - maxChars;
+  if (overflow > 0) {
+    parent.classList.add('form__field__character-count--overflow');
+  } else {
+    parent.classList.remove('form__field__character-count--overflow');
+  }
+  setOverflow(overflow);
+};
+
+const AUEditorComponent: FC<Props> = ({
+  lang,
+  id,
+  initialValue,
+  textareaName,
+  showCounter = false,
+  counterType = 'recommended',
+  maxChars = 0,
+  translations,
+  onEditorChange,
+  disabled = false,
+}) => {
+  const [overflow, setOverflow] = useState(0);
+  const parentRef = useRef<HTMLDivElement>(null);
+  // Capture initialValue on first render only.
+  // Passing a changing initialValue to TinyMCE's <Editor>
+  // causes it to call setContent() on every update,
+  // which resets the cursor to position 0.
+  const stableInitialValue = useRef(initialValue);
+  const tiny = useMemo(() => new AUTinyMCEBuilder(
+    lang,
+    showCounter as boolean,
+    (editor: any) => onKeyUp(
+      editor,
+      parentRef.current as HTMLDivElement,
+      maxChars as number,
+      counterType as string,
+      setOverflow,
+    ),
+  ), [lang, showCounter, maxChars, counterType]);
+  const tinyConfig = useMemo(() => tiny.tinyGeneralConfig(), [tiny]);
+
+  const { character_count } = translations;
+
+  return (
+    <div
+      ref={parentRef}
+      className="form__field__character-count"
+    >
+      <Editor
+        tinymceScriptSrc={tiny.tinyScriptSrc}
+        initialValue={stableInitialValue.current}
+        id={id}
+        // value={tinyDanish}
+        disabled={disabled}
+        textareaName={textareaName}
+        init={tinyConfig}
+        onEditorChange={onEditorChange}
+      />
+      {
+        (typeof showCounter !== 'undefined'
+          && typeof counterType !== 'undefined'
+          && typeof maxChars !== 'undefined') && (
+          <div
+            className="form__field__character-count__info"
+            aria-live="polite"
+          >
+            <span className="form__field__character-count__info__overflow-message">
+              {`${replace(character_count.overflow.message[counterType], ['maxchars'], [maxChars.toString()])}`}
+            </span>
+            {' '}
+            <span className="form__field__character-count__info__overflow-count">
+              {`${replace(character_count.overflow.count[counterType][overflow === 1 ? 'one' : 'other'], ['overflow'], [overflow.toString()])}`}
+            </span>
+          </div>
+        )
+      }
+    </div>
+  );
+};
+
+AUEditorComponent.displayName = 'AUEditorComponent';
+export default AUEditorComponent;

package/src/components/AUErrorComponent.tsx

@@ -1,73 +1,73 @@
-import { SerializedError } from '@reduxjs/toolkit';
-import { FetchBaseQueryError } from '@reduxjs/toolkit/dist/query';
-import React, { FC } from 'react';
-import AUNotificationComponent from './AUNotificationComponent';
-
-type Props = {
-  error?: AU.IError;
-  withStatus?: boolean;
-  fetchError?: FetchBaseQueryError,
-  serializedError?: SerializedError,
-  type?: 'warning' | 'attention' | 'confirm' | 'information';
-};
-
-const AUErrorComponent: FC<Props> = ({
-  error: auError = undefined,
-  fetchError = undefined,
-  serializedError = undefined,
-  withStatus = false,
-  type = 'warning',
-}) => {
-  if (auError) {
-    const { status, header, message } = auError;
-    return (
-      <AUNotificationComponent
-        type={type}
-        header={`${withStatus ? `${status}: ` : ''}${header}`}
-        content={[
-          <p dangerouslySetInnerHTML={{ __html: message }} />,
-        ]}
-      />
-    );
-  }
-  if (fetchError && 'error' in fetchError) {
-    const { status, error } = fetchError;
-    return (
-      <AUNotificationComponent
-        type={type}
-        header={withStatus ? status : undefined}
-        content={[
-          <p dangerouslySetInnerHTML={{ __html: error }} />,
-        ]}
-      />
-    );
-  }
-  if (fetchError && 'data' in fetchError) {
-    const { status, data } = fetchError;
-    return (
-      <AUNotificationComponent
-        type={type}
-        header={withStatus ? `${status}` : undefined}
-        content={[
-          <p dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }} />,
-        ]}
-      />
-    );
-  }
-  if (serializedError && 'message' in serializedError) {
-    const { code, message } = serializedError;
-    return (
-      <AUNotificationComponent
-        type={type}
-        header={withStatus ? code : undefined}
-        content={[
-          <p dangerouslySetInnerHTML={{ __html: message || '' }} />,
-        ]}
-      />
-    );
-  }
-  return null;
-};
-
-AUErrorComponent.displayName = 'AUErrorComponent';
-export default AUErrorComponent;
+import { SerializedError } from '@reduxjs/toolkit';
+import { FetchBaseQueryError } from '@reduxjs/toolkit/dist/query';
+import React, { FC } from 'react';
+import AUNotificationComponent from './AUNotificationComponent';
+
+type Props = {
+  error?: AU.IError;
+  withStatus?: boolean;
+  fetchError?: FetchBaseQueryError,
+  serializedError?: SerializedError,
+  type?: 'warning' | 'attention' | 'confirm' | 'information';
+};
+
+const AUErrorComponent: FC<Props> = ({
+  error: auError = undefined,
+  fetchError = undefined,
+  serializedError = undefined,
+  withStatus = false,
+  type = 'warning',
+}) => {
+  if (auError) {
+    const { status, header, message } = auError;
+    return (
+      <AUNotificationComponent
+        type={type}
+        header={`${withStatus ? `${status}: ` : ''}${header}`}
+        content={[
+          <p dangerouslySetInnerHTML={{ __html: message }} />,
+        ]}
+      />
+    );
+  }
+  if (fetchError && 'error' in fetchError) {
+    const { status, error } = fetchError;
+    return (
+      <AUNotificationComponent
+        type={type}
+        header={withStatus ? status : undefined}
+        content={[
+          <p dangerouslySetInnerHTML={{ __html: error }} />,
+        ]}
+      />
+    );
+  }
+  if (fetchError && 'data' in fetchError) {
+    const { status, data } = fetchError;
+    return (
+      <AUNotificationComponent
+        type={type}
+        header={withStatus ? `${status}` : undefined}
+        content={[
+          <p dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }} />,
+        ]}
+      />
+    );
+  }
+  if (serializedError && 'message' in serializedError) {
+    const { code, message } = serializedError;
+    return (
+      <AUNotificationComponent
+        type={type}
+        header={withStatus ? code : undefined}
+        content={[
+          <p dangerouslySetInnerHTML={{ __html: message || '' }} />,
+        ]}
+      />
+    );
+  }
+  return null;
+};
+
+AUErrorComponent.displayName = 'AUErrorComponent';
+export default AUErrorComponent;

package/src/components/AUMobilePrefixComponent.tsx

@@ -1,20 +1,20 @@
-import React, { FC } from 'react';
-
-type Props = {
-  countryCodes: AU.ICountryCode[];
-  important: boolean;
-};
-
-const AUMobilePrefixComponent: FC<Props> = ({
-  countryCodes,
-  important,
-}) => {
-  const renderCountryCodes = (codes:AU.ICountryCode[]) => codes.map((c) => <option key={c.da} value={`+${c.code}`}>{`${c.da} (+${c.code})`}</option>);
-  if (important) {
-    return <>{renderCountryCodes(countryCodes.filter((c) => c.important))}</>;
-  }
-  return <>{renderCountryCodes(countryCodes)}</>;
-};
-
-AUMobilePrefixComponent.displayName = 'AUMobilePrefixComponent';
-export default AUMobilePrefixComponent;
+import React, { FC } from 'react';
+
+type Props = {
+  countryCodes: AU.ICountryCode[];
+  important: boolean;
+};
+
+const AUMobilePrefixComponent: FC<Props> = ({
+  countryCodes,
+  important,
+}) => {
+  const renderCountryCodes = (codes:AU.ICountryCode[]) => codes.map((c) => <option key={c.da} value={`+${c.code}`}>{`${c.da} (+${c.code})`}</option>);
+  if (important) {
+    return <>{renderCountryCodes(countryCodes.filter((c) => c.important))}</>;
+  }
+  return <>{renderCountryCodes(countryCodes)}</>;
+};
+
+AUMobilePrefixComponent.displayName = 'AUMobilePrefixComponent';
+export default AUMobilePrefixComponent;

package/src/components/AUModalComponent.tsx

@@ -1,72 +1,72 @@
-/* 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, { FC } from 'react';
-import ReactDOM from 'react-dom';
-import AUButtonComponent from './AUButtonComponent';
-import { useModal } from '../lib/hooks';
-
-type Props = {
-  lang?: string;
-  domId: string;
-  className?: string;
-  children?: JSX.Element;
-  closeButton?: boolean;
-  closeButtonDisabled?: boolean;
-  sender: HTMLButtonElement | HTMLTableRowElement | null;
-  show: boolean;
-  onClose?: () => void;
-};
-
-const AUModalComponent: FC<Props> = ({
-  lang = 'da',
-  domId = 'modal-view1',
-  className = 'modal-view',
-  children,
-  closeButton = true,
-  closeButtonDisabled,
-  sender,
-  show,
-  onClose,
-}) => {
-  useModal(domId, sender, show, !closeButtonDisabled, onClose);
-
-  return (
-    ReactDOM.createPortal(
-      <div
-        id={domId}
-        className={className}
-      >
-        <div className="modal-view__wrapper theme--normal">
-          {
-            closeButton && (
-              <AUButtonComponent
-                label={lang === 'da' ? 'Luk' : 'Close'}
-                disabled={closeButtonDisabled}
-                icon="close"
-                hideLabel
-                classNames={['modal-view__close']}
-                onClick={() => {
-                  if (typeof onClose === 'function') {
-                    onClose();
-                  }
-                }}
-              />
-            )
-          }
-          <div className="modal-view__container">
-            <div className="modal-view__body">
-              {children}
-            </div>
-          </div>
-        </div>
-      </div>,
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      document.querySelector('body')!,
-    )
-  );
-};
-
-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, { FC } from 'react';
+import ReactDOM from 'react-dom';
+import AUButtonComponent from './AUButtonComponent';
+import { useModal } from '../lib/hooks';
+
+type Props = {
+  lang?: string;
+  domId: string;
+  className?: string;
+  children?: JSX.Element;
+  closeButton?: boolean;
+  closeButtonDisabled?: boolean;
+  sender: HTMLButtonElement | HTMLTableRowElement | null;
+  show: boolean;
+  onClose?: () => void;
+};
+
+const AUModalComponent: FC<Props> = ({
+  lang = 'da',
+  domId = 'modal-view1',
+  className = 'modal-view',
+  children,
+  closeButton = true,
+  closeButtonDisabled,
+  sender,
+  show,
+  onClose,
+}) => {
+  useModal(domId, sender, show, !closeButtonDisabled, onClose);
+
+  return (
+    ReactDOM.createPortal(
+      <div
+        id={domId}
+        className={className}
+      >
+        <div className="modal-view__wrapper theme--normal">
+          {
+            closeButton && (
+              <AUButtonComponent
+                label={lang === 'da' ? 'Luk' : 'Close'}
+                disabled={closeButtonDisabled}
+                icon="close"
+                hideLabel
+                classNames={['modal-view__close']}
+                onClick={() => {
+                  if (typeof onClose === 'function') {
+                    onClose();
+                  }
+                }}
+              />
+            )
+          }
+          <div className="modal-view__container">
+            <div className="modal-view__body">
+              {children}
+            </div>
+          </div>
+        </div>
+      </div>,
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      document.querySelector('body')!,
+    )
+  );
+};
+
+AUModalComponent.displayName = 'AUModalComponent';
+export default AUModalComponent;

package/src/components/AUNotificationComponent.tsx

@@ -1,44 +1,44 @@
-/* eslint-disable react/no-array-index-key */
-import React, { FC, Fragment } from 'react';
-
-type Props = {
-  header?: string | null;
-  content: JSX.Element[];
-  actions?: JSX.Element[];
-  type?: 'warning' | 'attention' | 'confirm' | 'information';
-  classNames?: string[];
-};
-
-const AUNotificationComponent: FC<Props> = ({
-  header = null,
-  content,
-  actions = [],
-  type = 'information',
-  classNames = [],
-}) => {
-  const typeClass = type === 'information' ? '' : `notification--${type}`;
-  return (
-    <div className={[
-      'notification',
-      typeClass,
-    ].concat(classNames || []).join(' ').replace(/\s+/g, ' ').trim()}
-    >
-      <div className="notification__content">
-        {
-          header && <h2 className="notification__header">{header}</h2>
-        }
-        {content.map((c, i) => <Fragment key={i}>{c}</Fragment>)}
-      </div>
-      {
-        (actions || []).length > 0 && (
-          <div className="notification__actions">
-            {(actions || []).map((a, i) => <Fragment key={i}>{a}</Fragment>)}
-          </div>
-        )
-      }
-    </div>
-  );
-};
-
-AUNotificationComponent.displayName = 'AUNotificationComponent';
-export default AUNotificationComponent;
+/* eslint-disable react/no-array-index-key */
+import React, { FC, Fragment } from 'react';
+
+type Props = {
+  header?: string | null;
+  content: JSX.Element[];
+  actions?: JSX.Element[];
+  type?: 'warning' | 'attention' | 'confirm' | 'information';
+  classNames?: string[];
+};
+
+const AUNotificationComponent: FC<Props> = ({
+  header = null,
+  content,
+  actions = [],
+  type = 'information',
+  classNames = [],
+}) => {
+  const typeClass = type === 'information' ? '' : `notification--${type}`;
+  return (
+    <div className={[
+      'notification',
+      typeClass,
+    ].concat(classNames || []).join(' ').replace(/\s+/g, ' ').trim()}
+    >
+      <div className="notification__content">
+        {
+          header && <h2 className="notification__header">{header}</h2>
+        }
+        {content.map((c, i) => <Fragment key={i}>{c}</Fragment>)}
+      </div>
+      {
+        (actions || []).length > 0 && (
+          <div className="notification__actions">
+            {(actions || []).map((a, i) => <Fragment key={i}>{a}</Fragment>)}
+          </div>
+        )
+      }
+    </div>
+  );
+};
+
+AUNotificationComponent.displayName = 'AUNotificationComponent';
+export default AUNotificationComponent;