Chip untitled modification (#11498)

Fixes https://github.com/twentyhq/core-team-issues/issues/663
This commit is contained in:
Guillim
2025-04-14 17:33:41 +02:00
committed by GitHub
parent d4deca45e8
commit 8a3f8ef324
7 changed files with 67 additions and 17 deletions

View File

@ -4,6 +4,7 @@ import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlin
import { useRecordValue } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
import { TitleInputHotkeyScope } from '@/ui/input/types/TitleInputHotkeyScope';
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
import { Theme, withTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useContext } from 'react';
import { OverflowingTextWithTooltip } from 'twenty-ui/display';
@ -26,10 +27,16 @@ const StyledDiv = styled.div`
}
`;
const StyledEmptyText = withTheme(styled.div<{ theme: Theme }>`
color: ${({ theme }) => theme.font.color.tertiary};
`);
export const RecordTitleCellSingleTextDisplayMode = () => {
const { recordId, fieldDefinition } = useContext(FieldContext);
const recordValue = useRecordValue(recordId);
const isEmpty =
recordValue?.[fieldDefinition.metadata.fieldName].trim() === '';
const { openInlineCell } = useInlineCell();
@ -46,12 +53,16 @@ export const RecordTitleCellSingleTextDisplayMode = () => {
openInlineCell();
}}
>
<OverflowingTextWithTooltip
text={
recordValue?.[fieldDefinition.metadata.fieldName] ||
fieldDefinition.label
}
/>
{isEmpty ? (
<StyledEmptyText>Untitled</StyledEmptyText>
) : (
<OverflowingTextWithTooltip
text={
recordValue?.[fieldDefinition.metadata.fieldName] ||
fieldDefinition.label
}
/>
)}
</StyledDiv>
);
};

View File

@ -1,6 +1,7 @@
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
import { useFullNameFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useFullNameFieldDisplay';
import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell';
import { Theme, withTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { isNonEmptyString } from '@sniptt/guards';
import { useContext } from 'react';
@ -25,6 +26,10 @@ const StyledDiv = styled.div`
}
`;
const StyledEmptyText = withTheme(styled.div<{ theme: Theme }>`
color: ${({ theme }) => theme.font.color.tertiary};
`);
export const RecordTitleFullNameFieldDisplay = () => {
const { fieldDefinition } = useContext(FieldContext);
@ -39,9 +44,13 @@ export const RecordTitleFullNameFieldDisplay = () => {
return (
<StyledDiv onClick={() => openInlineCell()}>
<OverflowingTextWithTooltip
text={isNonEmptyString(content) ? content : fieldDefinition.label}
/>
{!content ? (
<StyledEmptyText>Untitled</StyledEmptyText>
) : (
<OverflowingTextWithTooltip
text={isNonEmptyString(content) ? content : fieldDefinition.label}
/>
)}
</StyledDiv>
);
};