refactor: translations

2025-08-05 15:29:04 +00:00 · 2022-11-10 13:53:56 +00:00 · 2022-11-10 13:53:56 +00:00 · 9bd5a9d2bc
commit 9bd5a9d2bc
parent 67a489dcc2
3 changed files with 131 additions and 76 deletions
--- a/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js
+++ b/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js
@ -2,7 +2,6 @@ import React, { useRef, useState, useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { FixedSizeList as List } from 'react-window';
-import { useIntl } from 'react-intl';

 import { ReactSelect } from '@strapi/helper-plugin';
 import { Status } from '@strapi/design-system/Status';
@ -24,7 +23,6 @@ import { RelationList } from './components/RelationList';
 import { Option } from './components/Option';
 import { RELATION_GUTTER, RELATION_ITEM_HEIGHT } from './constants';

-import { getTrad } from '../../utils';
 import { usePrev } from '../../hooks';

 const LinkEllipsis = styled(Link)`
@ -58,6 +56,7 @@ const RelationInput = ({
  description,
  disabled,
  error,
+  iconButtonAriaLabel,
  id,
  name,
  numberOfRelationsToDisplay,
@ -65,7 +64,12 @@ const RelationInput = ({
  labelAction,
  labelLoadMore,
  labelDisconnectRelation,
+  listAriaDescription,
+  liveText,
  loadingMessage,
+  onCancel,
+  onDropItem,
+  onGrabItem,
  noRelationsMessage,
  onRelationConnect,
  onRelationLoadMore,
@ -82,13 +86,10 @@ const RelationInput = ({
 }) => {
  const [value, setValue] = useState(null);
  const [overflow, setOverflow] = useState('');
-  const [liveText, setLiveText] = useState('');

  const listRef = useRef();
  const outerListRef = useRef();

-  const { formatMessage } = useIntl();
-
  const { data } = searchResults;

  const relations = paginatedRelations.data;
@ -232,58 +233,9 @@ const RelationInput = ({
  const handleUpdatePositionOfRelation = (newIndex, currentIndex) => {
    if (onRelationReorder && newIndex >= 0 && newIndex < relations.length) {
      onRelationReorder(currentIndex, newIndex);
-
-      const item = relations[currentIndex];
-      setLiveText(`${item.mainField ?? item.id}. New position in list: ${getItemPos(newIndex)}`);
    }
  };

-  /**
-   *
-   * @param {number} index
-   * @returns {string}
-   */
-  const getItemPos = (index) => `${index + 1} of ${relations.length}`;
-
-  /**
-   *
-   * @param {number} index
-   * @returns {void}
-   */
-  const handleGrabItem = (index) => {
-    const item = relations[index];
-
-    setLiveText(
-      `${item.mainField ?? item.id}, grabbed. Current position in list: ${getItemPos(
-        index
-      )}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`
-    );
-  };
-
-  /**
-   *
-   * @param {number} index
-   * @returns {void}
-   */
-  const handleDropItem = (index) => {
-    const item = relations[index];
-
-    setLiveText(
-      `${item.mainField ?? item.id}, dropped. Final position in list: ${getItemPos(index)}`
-    );
-  };
-
-  /**
-   *
-   * @param {number} index
-   * @returns {void}
-   */
-  const handleCancel = (index) => {
-    const item = relations[index];
-
-    setLiveText(`${item.mainField ?? item.id}, dropped. Re-order cancelled.`);
-  };
-
  const previewRelationsLength = usePrev(relations.length);
  /**
   * @type {React.MutableRefObject<'onChange' | 'loadMore'>}
@ -371,12 +323,7 @@ const RelationInput = ({
        }
      >
        <RelationList overflow={overflow}>
-          <VisuallyHidden id={`${name}-item-instructions`}>
-            {formatMessage({
-              id: getTrad('components.RelationInput.instructions'),
-              defaultMessage: `Press spacebar to grab and re-order`,
-            })}
-          </VisuallyHidden>
+          <VisuallyHidden id={`${name}-item-instructions`}>{listAriaDescription}</VisuallyHidden>
          <VisuallyHidden aria-live="assertive">{liveText}</VisuallyHidden>
          <List
            height={dynamicListHeight}
@ -387,13 +334,10 @@ const RelationInput = ({
            itemData={{
              ariaDescribedBy: `${name}-item-instructions`,
              disabled,
-              handleCancel,
-              handleDropItem,
-              handleGrabItem,
-              iconButtonAriaLabel: formatMessage({
-                id: getTrad('components.RelationInput.icon-button-aria-label'),
-                defaultMessage: 'Drag',
-              }),
+              handleCancel: onCancel,
+              handleDropItem: onDropItem,
+              handleGrabItem: onGrabItem,
+              iconButtonAriaLabel,
              labelDisconnectRelation,
              onRelationDisconnect,
              publicationStateTranslations,
@ -451,8 +395,14 @@ RelationInput.defaultProps = {
  description: undefined,
  disabled: false,
  error: undefined,
+  iconButtonAriaLabel: 'Drag',
  labelAction: null,
  labelLoadMore: null,
+  listAriaDescription: 'Press spacebar to grab and re-order',
+  liveText: undefined,
+  onCancel: undefined,
+  onDropItem: undefined,
+  onGrabItem: undefined,
  required: false,
  relations: { data: [] },
  searchResults: { data: [] },
@ -462,15 +412,21 @@ RelationInput.propTypes = {
  error: PropTypes.string,
  description: PropTypes.string,
  disabled: PropTypes.bool,
+  iconButtonAriaLabel: PropTypes.string,
  id: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
  labelAction: PropTypes.element,
  labelLoadMore: PropTypes.string,
  labelDisconnectRelation: PropTypes.string.isRequired,
+  listAriaDescription: PropTypes.string,
+  liveText: PropTypes.string,
  loadingMessage: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  noRelationsMessage: PropTypes.string.isRequired,
  numberOfRelationsToDisplay: PropTypes.number.isRequired,
+  onCancel: PropTypes.func,
+  onDropItem: PropTypes.func,
+  onGrabItem: PropTypes.func,
  onRelationConnect: PropTypes.func.isRequired,
  onRelationDisconnect: PropTypes.func.isRequired,
  onRelationLoadMore: PropTypes.func.isRequired,
--- a/packages/core/admin/admin/src/content-manager/components/RelationInputDataManager/RelationInputDataManager.js
+++ b/packages/core/admin/admin/src/content-manager/components/RelationInputDataManager/RelationInputDataManager.js
@ -1,6 +1,6 @@
 /* eslint-disable no-nested-ternary */
 import PropTypes from 'prop-types';
-import React, { memo, useMemo } from 'react';
+import React, { memo, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
 import get from 'lodash/get';
 import pick from 'lodash/pick';
@ -36,6 +36,8 @@ export const RelationInputDataManager = ({
  size,
  targetModel,
 }) => {
+  const [liveText, setLiveText] = useState('');
+
  const { formatMessage } = useIntl();
  const {
    slug,
@ -137,6 +139,12 @@ export const RelationInputDataManager = ({
  const handleSearchMore = () => {
    search.fetchNextPage();
  };
+  /**
+   *
+   * @param {number} index
+   * @returns {string}
+   */
+  const getItemPos = (index) => `${index + 1} of ${relationsFromModifiedData.length}`;

  /**
   *
@ -144,6 +152,20 @@ export const RelationInputDataManager = ({
   * @param {number} oldIndex
   */
  const handleRelationReorder = (oldIndex, newIndex) => {
+    const item = relations[oldIndex];
+    setLiveText(
+      formatMessage(
+        {
+          id: getTrad('components.RelationInputDataManager.reorder'),
+          defaultMessage: '{item}, moved. New position in list: {position}.',
+        },
+        {
+          item: item.mainField ?? item.id,
+          position: getItemPos(newIndex),
+        }
+      )
+    );
+
    relationReorder({
      name,
      newIndex,
@ -151,6 +173,71 @@ export const RelationInputDataManager = ({
    });
  };

+  /**
+   *
+   * @param {number} index
+   * @returns {void}
+   */
+  const handleGrabItem = (index) => {
+    const item = relations[index];
+
+    setLiveText(
+      formatMessage(
+        {
+          id: getTrad('components.RelationInputDataManager.grab-item'),
+          defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`,
+        },
+        {
+          item: item.mainField ?? item.id,
+          position: getItemPos(index),
+        }
+      )
+    );
+  };
+
+  /**
+   *
+   * @param {number} index
+   * @returns {void}
+   */
+  const handleDropItem = (index) => {
+    const item = relations[index];
+
+    setLiveText(
+      formatMessage(
+        {
+          id: getTrad('components.RelationInputDataManager.drop-item'),
+          defaultMessage: `{item}, dropped. Final position in list: {position}.`,
+        },
+        {
+          item: item.mainField ?? item.id,
+          position: getItemPos(index),
+        }
+      )
+    );
+  };
+
+  /**
+   *
+   * @param {number} index
+   * @returns {void}
+   */
+  const handleCancel = (index) => {
+    const item = relations[index];
+
+    setLiveText(
+      formatMessage(
+        {
+          id: getTrad('components.RelationInputDataManager.cancel-item'),
+          defaultMessage: '{item}, dropped. Re-order cancelled.',
+        },
+        {
+          item: item.mainField ?? item.id,
+        }
+      )
+    );
+  };
+
  if (
    (!isFieldAllowed && isCreatingEntry) ||
    (!isCreatingEntry && !isFieldAllowed && !isFieldReadable)
@ -185,25 +272,30 @@ export const RelationInputDataManager = ({
      error={error}
      description={description}
      disabled={isDisabled}
+      iconButtonAriaLabel={formatMessage({
+        id: getTrad('components.RelationInput.icon-button-aria-label'),
+        defaultMessage: 'Drag',
+      })}
      id={name}
      label={`${formatMessage({
        id: intlLabel.id,
        defaultMessage: intlLabel.defaultMessage,
      })} ${totalRelations > 0 ? `(${totalRelations})` : ''}`}
      labelAction={labelAction}
-      labelLoadMore={
-        !isCreatingEntry
-          ? formatMessage({
-              id: getTrad('relation.loadMore'),
-              defaultMessage: 'Load More',
-            })
-          : null
-      }
+      labelLoadMore={formatMessage({
+        id: getTrad('relation.loadMore'),
+        defaultMessage: 'Load More',
+      })}
      labelDisconnectRelation={formatMessage({
        id: getTrad('relation.disconnect'),
        defaultMessage: 'Remove',
      })}
+      listAriaDescription={formatMessage({
+        id: getTrad('components.RelationInput.instructions'),
+        defaultMessage: `Press spacebar to grab and re-order`,
+      })}
      listHeight={320}
+      liveText={liveText}
      loadingMessage={formatMessage({
        id: getTrad('relation.isLoading'),
        defaultMessage: 'Relations are loading',
@ -214,6 +306,9 @@ export const RelationInputDataManager = ({
        defaultMessage: 'No relations available',
      })}
      numberOfRelationsToDisplay={RELATIONS_TO_DISPLAY}
+      onDropItem={handleDropItem}
+      onGrabItem={handleGrabItem}
+      onCancel={handleCancel}
      onRelationConnect={handleRelationConnect}
      onRelationDisconnect={handleRelationDisconnect}
      onRelationLoadMore={handleRelationLoadMore}
--- a/packages/core/admin/admin/src/translations/en.json
+++ b/packages/core/admin/admin/src/translations/en.json
@ -568,6 +568,10 @@
  "content-manager.components.NotAllowedInput.text": "No permissions to see this field",
  "content-manager.components.RelationInput.instructions": "Press spacebar to grab and re-order",
  "content-manager.components.RelationInput.icon-button-aria-label": "Drag",
+  "content-manager.components.RelationInputDataManager.reorder": "{item}, moved. New position in list: {position}.",
+  "content-manager.components.RelationInputDataManager.grab-item": "{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.",
+  "content-manager.components.RelationInputDataManager.drop-item": "{item}, dropped. Final position in list: {position}.",
+  "content-manager.components.RelationInputDataManager.cancel-item": "{item}, dropped. Re-order cancelled.",
  "content-manager.components.RepeatableComponent.error-message": "The component(s) contain error(s)",
  "content-manager.components.Search.placeholder": "Search for an entry...",
  "content-manager.components.Select.draft-info-title": "State: Draft",