Ellipsis on locale cell only

This commit is contained in:
mfrachet 2021-04-08 14:41:27 +02:00
parent 118d81bec8
commit 2f4d847d3b
2 changed files with 9 additions and 4 deletions

View File

@ -14,8 +14,6 @@ const Table = styled.table`
border: none;
padding: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
th,

View File

@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import { Padded, Text } from '@buffetjs/core';
import { Tooltip } from '@buffetjs/styles';
import get from 'lodash/get';
import styled from 'styled-components';
const mapToLocaleName = (locales, localeCode) =>
get(
@ -11,6 +12,12 @@ const mapToLocaleName = (locales, localeCode) =>
localeCode
);
const LocaleName = styled.div`
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
`;
const LocaleListCell = ({ locales, localizations, locale: currentLocaleCode, id }) => {
const allLocalizations = [{ locale: currentLocaleCode }, ...localizations];
const localizationNames = allLocalizations.map(locale => locale.locale);
@ -47,9 +54,9 @@ const LocaleListCell = ({ locales, localizations, locale: currentLocaleCode, id
return (
<div>
<span data-for={elId} data-tip={localesNames}>
<LocaleName data-for={elId} data-tip={localesNames}>
{localesNames}
</span>
</LocaleName>
<Tooltip id={elId} place="bottom" delay={0}>
{localesArray.map(name => (
<Padded key={name} top bottom size="xs">