-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: add links to Links field #5223
Changes from all commits
77794a1
812b7c5
119c477
7bd4496
c3b53f0
8b07898
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,99 +1,143 @@ | ||
import { useMemo, useRef, useState } from 'react'; | ||
import styled from '@emotion/styled'; | ||
import { Key } from 'ts-key-enum'; | ||
import { IconPlus } from 'twenty-ui'; | ||
|
||
import { useLinksField } from '@/object-record/record-field/meta-types/hooks/useLinksField'; | ||
import { FieldInputOverlay } from '@/ui/field/input/components/FieldInputOverlay'; | ||
import { TextInput } from '@/ui/field/input/components/TextInput'; | ||
import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent'; | ||
import { LinkDisplay } from '@/ui/field/display/components/LinkDisplay'; | ||
import { LightIconButton } from '@/ui/input/button/components/LightIconButton'; | ||
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; | ||
import { DropdownMenuInput } from '@/ui/layout/dropdown/components/DropdownMenuInput'; | ||
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; | ||
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; | ||
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; | ||
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; | ||
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; | ||
import { isDefined } from '~/utils/isDefined'; | ||
|
||
import { FieldInputEvent } from './DateTimeFieldInput'; | ||
const StyledDropdownMenu = styled(DropdownMenu)` | ||
left: -1px; | ||
position: absolute; | ||
top: -1px; | ||
`; | ||
|
||
export type LinksFieldInputProps = { | ||
onClickOutside?: FieldInputEvent; | ||
onEnter?: FieldInputEvent; | ||
onEscape?: FieldInputEvent; | ||
onTab?: FieldInputEvent; | ||
onShiftTab?: FieldInputEvent; | ||
onCancel?: () => void; | ||
onSubmit?: FieldInputEvent; | ||
}; | ||
|
||
export const LinksFieldInput = ({ | ||
onEnter, | ||
onEscape, | ||
onClickOutside, | ||
onTab, | ||
onShiftTab, | ||
onCancel, | ||
onSubmit, | ||
}: LinksFieldInputProps) => { | ||
const { draftValue, setDraftValue, hotkeyScope, persistLinksField } = | ||
useLinksField(); | ||
const { persistLinksField, hotkeyScope, fieldValue } = useLinksField(); | ||
|
||
const handleEnter = (url: string) => { | ||
onEnter?.(() => | ||
persistLinksField({ | ||
primaryLinkUrl: url, | ||
primaryLinkLabel: '', | ||
secondaryLinks: [], | ||
}), | ||
); | ||
}; | ||
const containerRef = useRef<HTMLDivElement>(null); | ||
|
||
const handleEscape = (url: string) => { | ||
onEscape?.(() => | ||
persistLinksField({ | ||
primaryLinkUrl: url, | ||
primaryLinkLabel: '', | ||
secondaryLinks: [], | ||
}), | ||
); | ||
}; | ||
const links = useMemo( | ||
() => | ||
[ | ||
fieldValue.primaryLinkUrl | ||
? { | ||
url: fieldValue.primaryLinkUrl, | ||
label: fieldValue.primaryLinkLabel, | ||
} | ||
: null, | ||
...(fieldValue.secondaryLinks ?? []), | ||
].filter(isDefined), | ||
[ | ||
fieldValue.primaryLinkLabel, | ||
fieldValue.primaryLinkUrl, | ||
fieldValue.secondaryLinks, | ||
], | ||
); | ||
|
||
const handleClickOutside = (event: MouseEvent | TouchEvent, url: string) => { | ||
onClickOutside?.(() => | ||
persistLinksField({ | ||
primaryLinkUrl: url, | ||
primaryLinkLabel: '', | ||
secondaryLinks: [], | ||
}), | ||
); | ||
}; | ||
useListenClickOutside({ | ||
refs: [containerRef], | ||
callback: (event) => { | ||
event.stopImmediatePropagation(); | ||
|
||
const handleTab = (url: string) => { | ||
onTab?.(() => | ||
persistLinksField({ | ||
primaryLinkUrl: url, | ||
primaryLinkLabel: '', | ||
secondaryLinks: [], | ||
}), | ||
); | ||
}; | ||
const isTargetInput = | ||
event.target instanceof HTMLInputElement && | ||
event.target.tagName === 'INPUT'; | ||
|
||
if (!isTargetInput) { | ||
onCancel?.(); | ||
} | ||
}, | ||
}); | ||
|
||
const [isInputDisplayed, setIsInputDisplayed] = useState(false); | ||
const [inputValue, setInputValue] = useState(''); | ||
|
||
useScopedHotkeys(Key.Escape, onCancel ?? (() => {}), hotkeyScope); | ||
|
||
const handleShiftTab = (url: string) => { | ||
onShiftTab?.(() => | ||
const handleSubmit = () => { | ||
if (!inputValue) return; | ||
|
||
setIsInputDisplayed(false); | ||
setInputValue(''); | ||
|
||
if (!links.length) { | ||
onSubmit?.(() => | ||
persistLinksField({ | ||
primaryLinkUrl: inputValue, | ||
primaryLinkLabel: '', | ||
secondaryLinks: [], | ||
}), | ||
); | ||
|
||
return; | ||
} | ||
|
||
onSubmit?.(() => | ||
persistLinksField({ | ||
primaryLinkUrl: url, | ||
primaryLinkLabel: '', | ||
secondaryLinks: [], | ||
...fieldValue, | ||
secondaryLinks: [ | ||
...(fieldValue.secondaryLinks ?? []), | ||
{ label: '', url: inputValue }, | ||
], | ||
}), | ||
); | ||
}; | ||
|
||
const handleChange = (url: string) => { | ||
setDraftValue({ | ||
primaryLinkUrl: url, | ||
primaryLinkLabel: '', | ||
secondaryLinks: [], | ||
}); | ||
}; | ||
|
||
return ( | ||
<FieldInputOverlay> | ||
<TextInput | ||
value={draftValue?.primaryLinkUrl ?? ''} | ||
autoFocus | ||
placeholder="Links" | ||
hotkeyScope={hotkeyScope} | ||
onClickOutside={handleClickOutside} | ||
onEnter={handleEnter} | ||
onEscape={handleEscape} | ||
onTab={handleTab} | ||
onShiftTab={handleShiftTab} | ||
onChange={handleChange} | ||
/> | ||
</FieldInputOverlay> | ||
<StyledDropdownMenu ref={containerRef} width={200}> | ||
{!!links.length && ( | ||
<> | ||
<DropdownMenuItemsContainer> | ||
{links.map(({ label, url }, index) => ( | ||
<MenuItem | ||
key={index} | ||
text={<LinkDisplay value={{ label, url }} />} | ||
/> | ||
))} | ||
</DropdownMenuItemsContainer> | ||
<DropdownMenuSeparator /> | ||
</> | ||
)} | ||
{isInputDisplayed ? ( | ||
<DropdownMenuInput | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why are we breaking the explicit pattern that was here previously and that makes all our input consistent ? It makes it hard to understand why we're passing inline callbacks instead of explicit handlers. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. What is the pattern that should be followed? I followed There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I checked with Charles, the UX decision is to not use onCancel even if click outside or escape. So here we want to have every event using this onSubmit. Thus draft value is useless here, but we should keep the onSubmit FieldInputEvent like the other Fields to be consistent. |
||
autoFocus | ||
placeholder="URL" | ||
value={inputValue} | ||
hotkeyScope={hotkeyScope} | ||
onChange={(event) => setInputValue(event.target.value)} | ||
onEnter={handleSubmit} | ||
rightComponent={ | ||
<LightIconButton Icon={IconPlus} onClick={handleSubmit} /> | ||
} | ||
/> | ||
) : ( | ||
<DropdownMenuItemsContainer> | ||
<MenuItem | ||
onClick={() => setIsInputDisplayed(true)} | ||
LeftIcon={IconPlus} | ||
text="Add link" | ||
/> | ||
</DropdownMenuItemsContainer> | ||
)} | ||
</StyledDropdownMenu> | ||
); | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Shouldn't we lift the events here, at least onSubmit, and modify draft values in the dropdown while it's open ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I updated the component and now it uses
onSubmit
. About draft values, how should we use it? Links are persisted on submit so I am not sure if the draft value is needed?