From 0ff225ccca9b3818f76f87306fb39bffc8ff6e4e Mon Sep 17 00:00:00 2001 From: Lucifer4255 Date: Fri, 20 Dec 2024 12:57:01 +0000 Subject: [PATCH 1/3] updated the phonedisplay adding a prop --- .../display/components/PhonesFieldDisplay.tsx | 32 ++++++++++++++++++- .../display/components/PhonesDisplay.tsx | 13 ++++++-- 2 files changed, 41 insertions(+), 4 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/PhonesFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/PhonesFieldDisplay.tsx index 5a7925c3238d..e41706c0d8df 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/PhonesFieldDisplay.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/PhonesFieldDisplay.tsx @@ -1,11 +1,41 @@ import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus'; import { usePhonesFieldDisplay } from '@/object-record/record-field/meta-types/hooks/usePhonesFieldDisplay'; +import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar'; +import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; import { PhonesDisplay } from '@/ui/field/display/components/PhonesDisplay'; +import React from 'react'; +import { useIcons } from 'twenty-ui'; export const PhonesFieldDisplay = () => { const { fieldValue } = usePhonesFieldDisplay(); const { isFocused } = useFieldFocus(); - return ; + const {enqueueSnackBar} = useSnackBar(); + + const {getIcon} = useIcons(); + + const IconClipboard = getIcon('IconClipboard'); + + const handleClick = async(phoneNumber:string,event: React.MouseEvent) =>{ + event.preventDefault(); + try{ + await navigator.clipboard.writeText(phoneNumber); + enqueueSnackBar('Phone number copied to clipboard', { + variant: SnackBarVariant.Success, + icon: , + duration: 2000 + }); + }catch(err){ + enqueueSnackBar('Error copying to clipboard', { + variant: SnackBarVariant.Error, + icon: , + duration: 2000 + }); + } + + + } + + return ; }; diff --git a/packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx index de23dbc0878a..5b2312caa356 100644 --- a/packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx +++ b/packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx @@ -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'; @@ -12,6 +12,7 @@ import { logError } from '~/utils/logError'; type PhonesDisplayProps = { value?: FieldPhonesValue; isFocused?: boolean; + onPhoneNumberClick?: (phoneNumber: string,event : React.MouseEvent) => void; }; const themeSpacing = THEME_COMMON.spacingMultiplicator; @@ -29,7 +30,7 @@ const StyledContainer = styled.div` width: 100%; `; -export const PhonesDisplay = ({ value, isFocused }: PhonesDisplayProps) => { +export const PhonesDisplay = ({ value, isFocused, onPhoneNumberClick }: PhonesDisplayProps) => { const phones = useMemo( () => [ @@ -62,7 +63,11 @@ export const PhonesDisplay = ({ value, isFocused }: PhonesDisplayProps) => { return { invalidPhone: number }; } }; - + const handleClick = (number: string,event :React.MouseEvent) => { + if (onPhoneNumberClick) { + onPhoneNumberClick(number,event); + } + }; return isFocused ? ( {phones.map(({ number, callingCode }, index) => { @@ -76,6 +81,7 @@ export const PhonesDisplay = ({ value, isFocused }: PhonesDisplayProps) => { label={ parsedPhone ? parsedPhone.formatInternational() : invalidPhone } + onClick={(event) => handleClick(callingCode + number,event)} /> ); })} @@ -93,6 +99,7 @@ export const PhonesDisplay = ({ value, isFocused }: PhonesDisplayProps) => { label={ parsedPhone ? parsedPhone.formatInternational() : invalidPhone } + onClick={(event) => handleClick(callingCode + number,event)} /> ); })} From d08e61d7c687805e452ffff4d39abe6d6861fc57 Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Fri, 27 Dec 2024 12:38:45 +0100 Subject: [PATCH 2/3] minor fixes --- .../display/components/PhonesFieldDisplay.tsx | 63 +++++++++++-------- .../snack-bar-manager/components/SnackBar.tsx | 13 +--- .../display/components/PhonesDisplay.tsx | 26 +++++--- 3 files changed, 55 insertions(+), 47 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/PhonesFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/PhonesFieldDisplay.tsx index e41706c0d8df..babdf7df7268 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/PhonesFieldDisplay.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/PhonesFieldDisplay.tsx @@ -11,31 +11,40 @@ export const PhonesFieldDisplay = () => { const { isFocused } = useFieldFocus(); - const {enqueueSnackBar} = useSnackBar(); - - const {getIcon} = useIcons(); - - const IconClipboard = getIcon('IconClipboard'); - - const handleClick = async(phoneNumber:string,event: React.MouseEvent) =>{ - event.preventDefault(); - try{ - await navigator.clipboard.writeText(phoneNumber); - enqueueSnackBar('Phone number copied to clipboard', { - variant: SnackBarVariant.Success, - icon: , - duration: 2000 - }); - }catch(err){ - enqueueSnackBar('Error copying to clipboard', { - variant: SnackBarVariant.Error, - icon: , - duration: 2000 - }); - } - - - } - - return ; + const { enqueueSnackBar } = useSnackBar(); + + const { getIcon } = useIcons(); + + const IconCircleCheck = getIcon('IconCircleCheck'); + const IconExclamationCircle = getIcon('IconExclamationCircle'); + + const handleClick = async ( + phoneNumber: string, + event: React.MouseEvent, + ) => { + event.preventDefault(); + + try { + await navigator.clipboard.writeText(phoneNumber); + enqueueSnackBar('Phone number copied to clipboard', { + variant: SnackBarVariant.Success, + icon: , + duration: 2000, + }); + } catch (err) { + enqueueSnackBar('Error copying to clipboard', { + variant: SnackBarVariant.Error, + icon: , + duration: 2000, + }); + } + }; + + return ( + + ); }; diff --git a/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx b/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx index 74be88cd896e..3c0cb5177b5c 100644 --- a/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx +++ b/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx @@ -74,7 +74,6 @@ const StyledHeader = styled.div` font-weight: ${({ theme }) => theme.font.weight.medium}; gap: ${({ theme }) => theme.spacing(2)}; height: ${({ theme }) => theme.spacing(6)}; - margin-bottom: ${({ theme }) => theme.spacing(1)}; `; const StyledActions = styled.div` @@ -83,15 +82,6 @@ const StyledActions = styled.div` margin-left: auto; `; -const StyledDescription = styled.div` - color: ${({ theme }) => theme.font.color.tertiary}; - font-size: ${({ theme }) => theme.font.size.sm}; - padding-left: ${({ theme }) => theme.spacing(6)}; - overflow: hidden; - text-overflow: ellipsis; - width: 200px; -`; - const defaultTitleByVariant: Record = { [SnackBarVariant.Default]: 'Alert', [SnackBarVariant.Error]: 'Error', @@ -183,7 +173,7 @@ export const SnackBar = ({ /> {icon} - {title} + {message} {!!onCancel && } @@ -192,7 +182,6 @@ export const SnackBar = ({ )} - {message && {message}} ); }; diff --git a/packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx index 5b2312caa356..9afd76f6990a 100644 --- a/packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx +++ b/packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx @@ -12,7 +12,10 @@ import { logError } from '~/utils/logError'; type PhonesDisplayProps = { value?: FieldPhonesValue; isFocused?: boolean; - onPhoneNumberClick?: (phoneNumber: string,event : React.MouseEvent) => void; + onPhoneNumberClick?: ( + phoneNumber: string, + event: React.MouseEvent, + ) => void; }; const themeSpacing = THEME_COMMON.spacingMultiplicator; @@ -30,7 +33,11 @@ const StyledContainer = styled.div` width: 100%; `; -export const PhonesDisplay = ({ value, isFocused, onPhoneNumberClick }: PhonesDisplayProps) => { +export const PhonesDisplay = ({ + value, + isFocused, + onPhoneNumberClick, +}: PhonesDisplayProps) => { const phones = useMemo( () => [ @@ -63,11 +70,14 @@ export const PhonesDisplay = ({ value, isFocused, onPhoneNumberClick }: PhonesDi return { invalidPhone: number }; } }; - const handleClick = (number: string,event :React.MouseEvent) => { - if (onPhoneNumberClick) { - onPhoneNumberClick(number,event); - } + + const handleClick = ( + number: string, + event: React.MouseEvent, + ) => { + onPhoneNumberClick?.(number, event); }; + return isFocused ? ( {phones.map(({ number, callingCode }, index) => { @@ -81,7 +91,7 @@ export const PhonesDisplay = ({ value, isFocused, onPhoneNumberClick }: PhonesDi label={ parsedPhone ? parsedPhone.formatInternational() : invalidPhone } - onClick={(event) => handleClick(callingCode + number,event)} + onClick={(event) => handleClick(callingCode + number, event)} /> ); })} @@ -99,7 +109,7 @@ export const PhonesDisplay = ({ value, isFocused, onPhoneNumberClick }: PhonesDi label={ parsedPhone ? parsedPhone.formatInternational() : invalidPhone } - onClick={(event) => handleClick(callingCode + number,event)} + onClick={(event) => handleClick(callingCode + number, event)} /> ); })} From 551bebdfd491bd67072d9377be2abd1049714db9 Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Mon, 30 Dec 2024 10:51:48 +0100 Subject: [PATCH 3/3] Fix --- .../__stories__/perf/PhonesFieldDisplay.perf.stories.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/PhonesFieldDisplay.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/PhonesFieldDisplay.perf.stories.tsx index 94f37ee5cfb6..fce6cfaccd09 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/PhonesFieldDisplay.perf.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/PhonesFieldDisplay.perf.stories.tsx @@ -4,6 +4,7 @@ import { ComponentDecorator } from 'twenty-ui'; import { PhonesFieldDisplay } from '@/object-record/record-field/meta-types/display/components/PhonesFieldDisplay'; import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator'; import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator'; +import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator'; import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory'; const meta: Meta = { @@ -12,6 +13,7 @@ const meta: Meta = { MemoryRouterDecorator, getFieldDecorator('person', 'phones'), ComponentDecorator, + SnackBarDecorator, ], component: PhonesFieldDisplay, args: {},