8208a3e976
This PR was created by \[GitStart\](<https://gitstart.com/>) to address the requirements from this ticket: \[TWNTY-6447\](<https://clients.gitstart.com/twenty/5449/tickets/TWNTY-6447>). This ticket was imported from: <https://github.com/twentyhq/twenty/issues/6447> ### Description \- We added a new field type ### Refs #6447 ### Demo <https://jam.dev/c/2b4d7853-ea89-4e9d-a561-6edcb4fdb34b> Fixes #6447 --------- Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com> Co-authored-by: Charles Bochet <charles@twenty.com>
63 lines
1.6 KiB
TypeScript
63 lines
1.6 KiB
TypeScript
import {
|
|
BORDER_COMMON,
|
|
OverflowingTextWithTooltip,
|
|
THEME_COMMON,
|
|
} from 'twenty-ui';
|
|
|
|
import { FieldArrayValue } from '@/object-record/record-field/types/FieldMetadata';
|
|
import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
|
|
import styled from '@emotion/styled';
|
|
|
|
type ArrayDisplayProps = {
|
|
value: FieldArrayValue;
|
|
isFocused?: boolean;
|
|
isInputDisplay?: boolean;
|
|
};
|
|
|
|
const themeSpacing = THEME_COMMON.spacingMultiplicator;
|
|
|
|
const StyledContainer = styled.div`
|
|
align-items: center;
|
|
display: flex;
|
|
gap: ${themeSpacing * 1}px;
|
|
justify-content: flex-start;
|
|
|
|
max-width: 100%;
|
|
|
|
overflow: hidden;
|
|
|
|
width: 100%;
|
|
`;
|
|
|
|
const StyledTag = styled.div<{ isInputDisplay?: boolean }>`
|
|
background-color: ${({ theme, isInputDisplay }) =>
|
|
isInputDisplay ? 'transparent' : theme.background.tertiary};
|
|
padding: ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(2)};
|
|
border-radius: ${BORDER_COMMON.radius.sm};
|
|
font-weight: ${({ theme }) => theme.font.weight.regular};
|
|
`;
|
|
|
|
export const ArrayDisplay = ({
|
|
value,
|
|
isFocused,
|
|
isInputDisplay = false,
|
|
}: ArrayDisplayProps) => {
|
|
return isFocused ? (
|
|
<ExpandableList isChipCountDisplayed>
|
|
{value?.map((item, index) => (
|
|
<StyledTag key={index}>
|
|
<OverflowingTextWithTooltip text={item} />
|
|
</StyledTag>
|
|
))}
|
|
</ExpandableList>
|
|
) : (
|
|
<StyledContainer>
|
|
{value?.map((item, index) => (
|
|
<StyledTag key={index} isInputDisplay={isInputDisplay}>
|
|
<OverflowingTextWithTooltip text={item} />
|
|
</StyledTag>
|
|
))}
|
|
</StyledContainer>
|
|
);
|
|
};
|