packages/plugins/i18n/admin/src/components/LocalePicker.tsx - develop - githubmirror/strapi

packages/plugins/i18n/admin/src/components/LocalePicker.tsx
100 строк3 KB
Arthur Moreau
fix: handle i18n conflict and local rights
03 авг 2026, 11:27
03 авг 2026, 11:276519f4d
import * as React from 'react';

import { useQueryParams } from '@strapi/admin/strapi-admin';
import { SingleSelect, SingleSelectOption } from '@strapi/design-system';
import { useIntl } from 'react-intl';

import { useI18n } from '../hooks/useI18n';
import { useGetLocalesQuery } from '../services/locales';
import { getTranslation } from '../utils/getTranslation';

import type { I18nBaseQuery } from '../types';

interface Query extends I18nBaseQuery {
  page?: number;
}

const LocalePicker = () => {
  const { formatMessage } = useIntl();
  const [{ query }, setQuery] = useQueryParams<Query>();

  const { hasI18n, canRead, canCreate } = useI18n();
  const { data: locales = [] } = useGetLocalesQuery(undefined, {
    skip: !hasI18n,
  });

  const handleChange = React.useCallback(
    (code: string, replace = false) => {
      setQuery(
        {
          page: 1,
          plugins: { ...query.plugins, i18n: { locale: code } },
        },
        'push',
        replace
      );
    },
    [query.plugins, setQuery]
  );

  React.useEffect(() => {
    if (!Array.isArray(locales) || !hasI18n) {
      return;
    }
    /**
     * Handle the case where the current locale query param doesn't exist
     * in the list of available locales, so we redirect to the default locale
     * when the user can read it, or the first locale they can read: the list
     * cannot be displayed for the other locales.
     */
    const currentDesiredLocale = query.plugins?.i18n?.locale;
    const doesLocaleExist = locales.find((loc) => loc.code === currentDesiredLocale);
    const readableLocales = locales.filter((locale) => canRead.includes(locale.code));
    const targetLocale = readableLocales.find((locale) => locale.isDefault) ?? readableLocales[0];
    if (!doesLocaleExist && targetLocale?.code) {
      handleChange(targetLocale.code, true);
    }
  }, [hasI18n, handleChange, locales, query.plugins?.i18n?.locale, canRead]);

  const sortedLocaleOptions = React.useMemo(() => {
    const displayedLocales = Array.isArray(locales)
      ? locales.filter((locale) => {
          /**
           * If you can create or read we allow you to see the locale exists
           * this is because in the ListView, you may be able to create a new entry
           * in a locale you can't read.
           */
          return canCreate.includes(locale.code) || canRead.includes(locale.code);
        })
      : [];

    return displayedLocales
      .sort((a, b) => a.name.localeCompare(b.name))
      .map((locale) => (
        <SingleSelectOption key={locale.id} value={locale.code}>
          {locale.name}
        </SingleSelectOption>
      ));
  }, [locales, canCreate, canRead]);

  if (!hasI18n || !Array.isArray(locales) || locales.length === 0) {
    return null;
  }

  return (
    <SingleSelect
      size="S"
      aria-label={formatMessage({
        id: getTranslation('actions.select-locale'),
        defaultMessage: 'Select locale',
      })}
      value={query.plugins?.i18n?.locale || locales.find((locale) => locale.isDefault)?.code}
      // @ts-expect-error – This can be removed in V2 of the DS.
      onChange={handleChange}
    >
      {sortedLocaleOptions}
    </SingleSelect>
  );
};

export { LocalePicker };