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

Clicking a phone number should copy its value (#9069)

Browse Source 
https://github.com/user-attachments/assets/7ce595fa-be90-4ec7-81e5-075dafee6422

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

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Suhotra Dey
2024-12-30 15:41:03 +05:30
committed by GitHub
parent c52a4924b9
commit 578ba97dad
4 changed files with 62 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx
View File

@ -1,5 +1,5 @@
import styled from '@emotion/styled';
import { useMemo } from 'react';
import React, { useMemo } from 'react';
import { RoundedLink, THEME_COMMON } from 'twenty-ui';
import { FieldPhonesValue } from '@/object-record/record-field/types/FieldMetadata';
@ -13,6 +13,10 @@ import { logError } from '~/utils/logError';
type PhonesDisplayProps = {
value?: FieldPhonesValue;
isFocused?: boolean;
onPhoneNumberClick?: (
phoneNumber: string,
event: React.MouseEvent<HTMLElement>,
) => void;
};
const themeSpacing = THEME_COMMON.spacingMultiplicator;
@ -30,7 +34,11 @@ const StyledContainer = styled.div`
width: 100%;
`;
export const PhonesDisplay = ({ value, isFocused }: PhonesDisplayProps) => {
export const PhonesDisplay = ({
value,
isFocused,
onPhoneNumberClick,
}: PhonesDisplayProps) => {
const phones = useMemo(
() =>
[
@ -67,6 +75,13 @@ export const PhonesDisplay = ({ value, isFocused }: PhonesDisplayProps) => {
}
};
const handleClick = (
number: string,
event: React.MouseEvent<HTMLElement>,
) => {
onPhoneNumberClick?.(number, event);
};
return isFocused ? (
<ExpandableList isChipCountDisplayed>
{phones.map(({ number, callingCode }, index) => {
@ -80,6 +95,7 @@ export const PhonesDisplay = ({ value, isFocused }: PhonesDisplayProps) => {
label={
parsedPhone ? parsedPhone.formatInternational() : invalidPhone
}
onClick={(event) => handleClick(callingCode + number, event)}
/>
);
})}
@ -97,6 +113,7 @@ export const PhonesDisplay = ({ value, isFocused }: PhonesDisplayProps) => {
label={
parsedPhone ? parsedPhone.formatInternational() : invalidPhone
}
onClick={(event) => handleClick(callingCode + number, event)}
/>
);
})}