Merge pull request #9922 from strapi/cm/lv-fixtooltip

Fix tooltip i18n
This commit is contained in:
cyril lopez 2021-03-31 18:02:32 +02:00 committed by GitHub
commit 00e138ebd3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Padded, Text } from '@buffetjs/core';
import { Tooltip } from '@buffetjs/styles'; import { Tooltip } from '@buffetjs/styles';
import get from 'lodash/get'; import get from 'lodash/get';
@ -16,7 +17,7 @@ const LocaleListCell = ({ locales, localizations, locale: currentLocaleCode, id
const defaultLocale = locales.find(locale => locale.isDefault); const defaultLocale = locales.find(locale => locale.isDefault);
const hasDefaultLocale = localizationNames.includes(defaultLocale.code); const hasDefaultLocale = localizationNames.includes(defaultLocale.code);
let localesNames; let localesArray = [];
if (hasDefaultLocale) { if (hasDefaultLocale) {
const ctLocalesWithoutDefault = localizationNames.filter( const ctLocalesWithoutDefault = localizationNames.filter(
@ -33,22 +34,31 @@ const LocaleListCell = ({ locales, localizations, locale: currentLocaleCode, id
...ctLocalesNamesWithoutDefault, ...ctLocalesNamesWithoutDefault,
]; ];
localesNames = ctLocalesNamesWithDefault.join(', '); localesArray = ctLocalesNamesWithDefault;
} else { } else {
const ctLocales = localizationNames.map(locale => mapToLocaleName(locales, locale)); const ctLocales = localizationNames.map(locale => mapToLocaleName(locales, locale));
ctLocales.sort(); ctLocales.sort();
localesNames = ctLocales.join(', '); localesArray = ctLocales;
} }
const elId = `entry-${id}__locale`; const elId = `entry-${id}__locale`;
const localesNames = localesArray.join(', ');
return ( return (
<div> <div>
<span data-for={elId} data-tip={localesNames}> <span data-for={elId} data-tip={localesNames}>
{localesNames} {localesNames}
</span> </span>
<Tooltip id={elId} place="top" delay={0} /> <Tooltip id={elId} place="bottom" delay={0}>
{localesArray.map(name => (
<Padded key={name} top bottom size="xs">
<Text ellipsis color="white">
{name}
</Text>
</Padded>
))}
</Tooltip>
</div> </div>
); );
}; };