admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix array and links display (#8671)

Browse Source 
## Before

![image](https://github.com/user-attachments/assets/ebecb45b-d3c1-4c80-9d90-726e37d2d417)

![image](https://github.com/user-attachments/assets/33e85593-9459-4790-9ae6-a79265f33b5a)

## After

![image](https://github.com/user-attachments/assets/a5174069-bed3-4e02-ae98-550a418243c5)

![image](https://github.com/user-attachments/assets/f2d0dd16-225c-4788-bb90-d47875d8b5f3)
This commit is contained in:
martmull
2024-11-22 12:06:31 +01:00
committed by GitHub
parent aa8b0ff04a
commit 76be1df66a
7 changed files with 25 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ArrayFieldDisplay.tsx
View File

@ -1,34 +1,12 @@
import { THEME_COMMON } from 'twenty-ui';
import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus';
import { useArrayFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useArrayFieldDisplay';
import { ArrayDisplay } from '@/ui/field/display/components/ArrayDisplay';
import styled from '@emotion/styled';
const spacing1 = THEME_COMMON.spacing(1);
const StyledContainer = styled.div`
align-items: center;
display: flex;
flex-wrap: wrap;
gap: ${spacing1};
justify-content: flex-start;
max-width: 100%;
overflow: hidden;
`;
export const ArrayFieldDisplay = () => {
const { fieldValue } = useArrayFieldDisplay();
const { isFocused } = useFieldFocus();
if (!Array.isArray(fieldValue)) {
return <></>;
}
return (
<StyledContainer>
<ArrayDisplay value={fieldValue} isFocused={isFocused} />
</StyledContainer>
);
return <ArrayDisplay value={fieldValue} />;
};

5
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/LinksFieldDisplay.tsx
View File

@ -1,11 +1,8 @@
import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus';
import { useLinksFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useLinksFieldDisplay';
import { LinksDisplay } from '@/ui/field/display/components/LinksDisplay';
export const LinksFieldDisplay = () => {
const { fieldValue } = useLinksFieldDisplay();
const { isFocused } = useFieldFocus();
return <LinksDisplay value={fieldValue} isFocused={isFocused} />;
return <LinksDisplay value={fieldValue} />;
};

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/ArrayFieldMenuItem.tsx
View File

@ -20,7 +20,7 @@ export const ArrayFieldMenuItem = ({
value={value}
onEdit={onEdit}
onDelete={onDelete}
DisplayComponent={() => <ArrayDisplay value={[value]} isInputDisplay />}
DisplayComponent={() => <ArrayDisplay value={[value]} />}
hasPrimaryButton={false}
/>
);