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

fix: Links field fixes (#5565)

Browse Source 
Related issue: #3607
This commit is contained in:
Thaïs
2024-05-24 17:59:08 +02:00
committed by GitHub
parent fa3443c05b
commit 736c79afde
9 changed files with 84 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/modules/object-record/record-field/components/FieldInput.tsx
View File

@ -136,7 +136,7 @@ export const FieldInput = ({
onShiftTab={onShiftTab}
/>
) : isFieldLinks(fieldDefinition) ? (
<LinksFieldInput onCancel={onCancel} onSubmit={onSubmit} />
<LinksFieldInput onCancel={onCancel} />
) : isFieldCurrency(fieldDefinition) ? (
<CurrencyFieldInput
onEnter={onEnter}

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

@ -5,7 +5,6 @@ import { IconCheck, IconPlus } from 'twenty-ui';
import { useLinksField } from '@/object-record/record-field/meta-types/hooks/useLinksField';
import { LinksFieldMenuItem } from '@/object-record/record-field/meta-types/input/components/LinksFieldMenuItem';
import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
import { DropdownMenuInput } from '@/ui/layout/dropdown/components/DropdownMenuInput';
@ -27,13 +26,9 @@ const StyledDropdownMenu = styled(DropdownMenu)`
export type LinksFieldInputProps = {
onCancel?: () => void;
onSubmit?: FieldInputEvent;
};
export const LinksFieldInput = ({
onCancel,
onSubmit,
}: LinksFieldInputProps) => {
export const LinksFieldInput = ({ onCancel }: LinksFieldInputProps) => {
const { persistLinksField, hotkeyScope, fieldValue } = useLinksField();
const containerRef = useRef<HTMLDivElement>(null);
@ -99,7 +94,6 @@ export const LinksFieldInput = ({
) {
setIsInputDisplayed(false);
setInputValue('');
onCancel?.();
return;
}
@ -109,14 +103,11 @@ export const LinksFieldInput = ({
: toSpliced(links, linkToEditIndex, 1, linkValue);
const [nextPrimaryLink, ...nextSecondaryLinks] = nextLinks;
onSubmit?.(() =>
persistLinksField({
primaryLinkUrl: nextPrimaryLink.url ?? '',
primaryLinkLabel: nextPrimaryLink.label ?? '',
secondaryLinks: nextSecondaryLinks,
}),
);
persistLinksField({
primaryLinkUrl: nextPrimaryLink.url ?? '',
primaryLinkLabel: nextPrimaryLink.label ?? '',
secondaryLinks: nextSecondaryLinks,
});
setIsInputDisplayed(false);
setInputValue('');
};
@ -125,26 +116,18 @@ export const LinksFieldInput = ({
const nextLinks = moveArrayItem(links, { fromIndex: index, toIndex: 0 });
const [nextPrimaryLink, ...nextSecondaryLinks] = nextLinks;
onSubmit?.(() =>
persistLinksField({
primaryLinkUrl: nextPrimaryLink.url ?? '',
primaryLinkLabel: nextPrimaryLink.label ?? '',
secondaryLinks: nextSecondaryLinks,
}),
);
persistLinksField({
primaryLinkUrl: nextPrimaryLink.url ?? '',
primaryLinkLabel: nextPrimaryLink.label ?? '',
secondaryLinks: nextSecondaryLinks,
});
};
const handleDeleteLink = (index: number) => {
onSubmit?.(() =>
persistLinksField({
...fieldValue,
secondaryLinks: toSpliced(
fieldValue.secondaryLinks ?? [],
index - 1,
1,
),
}),
);
persistLinksField({
...fieldValue,
secondaryLinks: toSpliced(fieldValue.secondaryLinks ?? [], index - 1, 1),
});
};
return (

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

@ -1,4 +1,4 @@
import { useEffect } from 'react';
import { useEffect, useState } from 'react';
import styled from '@emotion/styled';
import {
IconBookmark,
@ -40,8 +40,12 @@ export const LinksFieldMenuItem = ({
onDelete,
url,
}: LinksFieldMenuItemProps) => {
const [isHovered, setIsHovered] = useState(false);
const { isDropdownOpen, closeDropdown } = useDropdown(dropdownId);
const handleMouseEnter = () => setIsHovered(true);
const handleMouseLeave = () => setIsHovered(false);
// Make sure dropdown closes on unmount.
useEffect(() => {
if (isDropdownOpen) {
@ -51,13 +55,14 @@ export const LinksFieldMenuItem = ({
return (
<MenuItem
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
text={<LinkDisplay value={{ label, url }} />}
isIconDisplayedOnHoverOnly={!isPrimary && !isDropdownOpen}
iconButtons={[
{
Wrapper: isPrimary
? undefined
: ({ iconButton }) => (
Wrapper: isHovered
? ({ iconButton }) => (
<Dropdown
dropdownId={dropdownId}
dropdownHotkeyScope={{
@ -69,31 +74,37 @@ export const LinksFieldMenuItem = ({
clickableComponent={iconButton}
dropdownComponents={
<DropdownMenuItemsContainer>
<MenuItem
LeftIcon={IconBookmarkPlus}
text="Set as Primary"
onClick={onSetAsPrimary}
/>
{!isPrimary && (
<MenuItem
LeftIcon={IconBookmarkPlus}
text="Set as Primary"
onClick={onSetAsPrimary}
/>
)}
<MenuItem
LeftIcon={IconPencil}
text="Edit"
onClick={onEdit}
/>
<MenuItem
accent="danger"
LeftIcon={IconTrash}
text="Delete"
onClick={onDelete}
/>
{!isPrimary && (
<MenuItem
accent="danger"
LeftIcon={IconTrash}
text="Delete"
onClick={onDelete}
/>
)}
</DropdownMenuItemsContainer>
}
/>
),
Icon: isPrimary
? (StyledIconBookmark as IconComponent)
: IconDotsVertical,
)
: undefined,
Icon:
isPrimary && !isHovered
? (StyledIconBookmark as IconComponent)
: IconDotsVertical,
accent: 'tertiary',
onClick: isPrimary ? undefined : () => {},
onClick: isHovered ? () => {} : undefined,
},
]}
/>

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

@ -2,7 +2,6 @@ import { useRef, useState } from 'react';
import styled from '@emotion/styled';
import { useMultiSelectField } from '@/object-record/record-field/meta-types/hooks/useMultiSelectField';
import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent';
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
@ -18,7 +17,6 @@ const StyledRelationPickerContainer = styled.div`
`;
export type MultiSelectFieldInputProps = {
onSubmit?: FieldInputEvent;
onCancel?: () => void;
};