-
Notifications
You must be signed in to change notification settings - Fork 2.5k
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
Clicking a phone number should copy its value #9069
base: main
Are you sure you want to change the base?
Conversation
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.
PR Summary
This PR adds clipboard copy functionality when clicking phone numbers, replacing the default phone app navigation behavior with a success notification upon copying.
- Added click handler in
packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx
to copy phone numbers to clipboard - Click handler only works in focused view, needs to be added to unfocused state for consistency
- Missing error handling notification when clipboard copy fails
- Inconsistent handling of undefined phone numbers could cause runtime errors
- Should consider preserving phone app navigation as secondary action (e.g. ctrl+click)
💡 (5/5) You can turn off certain types of comments like style here!
1 file(s) reviewed, 3 comment(s)
Edit PR Review Bot Settings | Greptile
packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx
Outdated
Show resolved
Hide resolved
packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx
Outdated
Show resolved
Hide resolved
packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx
Outdated
Show resolved
Hide resolved
@@ -30,6 +38,29 @@ const StyledContainer = styled.div` | |||
`; | |||
|
|||
export const PhonesDisplay = ({ value, isFocused }: PhonesDisplayProps) => { | |||
const { enqueueSnackBar } = useSnackBar(); |
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.
let's not call the snackar in such a low component. Instead we should be able to pass call back to the PhoneDisplay component: onPhoneClick and implement the copy behavior (and snackbar) in PhonesFieldMenuItem
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.
okay ill update the copy behaviour
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.
@charlesBochet Hi charles im not quite sure about implementing the snackbar in phonesFieldMenuItem as i saw the action that if we click on the dropdown then the component is summoned but our main purpose is to copy when its clicked on the chip so im quite not sure why do i implement it there
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.
because the PhoneDisplay is too low level (UI) and should not take dependency on the snackbar.
Instead it could expose a prop: onPhoneNumberClick that would allow the parent to decide what to do with this click event (here copy to the copyboard + display snackbar toast)
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.
hi @charlesBochet i have edited by passing a prop to phoneDisplay and i have added the functionality to its parent . Can you review it now?
event.preventDefault(); // Prevent default link behavior | ||
|
||
try { | ||
if(phoneNumber !== undefined){ |
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.
is isDefined helper + linter does not seem to be effective (npx nx run twenty-front:lint:ci)
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.
Thanks for the PR @Lucifer4255, I have left comments
37b8bf4
to
0ff225c
Compare
All.-.People.-.Google.Chrome.2024-12-13.23-31-08.mp4
I have added the functionality of copying the phone number to clipboard according to the issue #8905 . If anything needed to change just comment in my PR