Fixes #7220: Remove primary banner icon when only one value present (#7275)

## Changes
- Added a check to make sure that we only indicate an entry is primary
if there is more than one value.

- The banner icon now only displays when there are either **2 or more
emails, phone numbers, or domains.**

## Emails

![image](https://github.com/user-attachments/assets/54832aaf-a319-4b70-87bf-3621e05f1637)


![image](https://github.com/user-attachments/assets/44bb8909-9f34-426d-8942-2bb7974e9113)

## Phones

![image](https://github.com/user-attachments/assets/85ca4c36-c148-4d86-89d6-1c02a960f2f4)


![image](https://github.com/user-attachments/assets/f11b5c2e-4376-4bf6-8560-e4c956f2c2e5)

## Domains

![image](https://github.com/user-attachments/assets/ce324714-6bd7-45ac-9a2f-8a2671d080a0)


![image](https://github.com/user-attachments/assets/153883a3-782f-424b-abc4-d882ec969bc2)

## Notes
This is my first time contributing so I am open to any feedback.

Co-authored-by: Keerat Kohli <kkeerat012@gmail.com>
This commit is contained in:
Keerat Kohli 2024-10-03 11:17:45 -04:00 committed by GitHub
parent 8350e7d808
commit 4c250dd811
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 9 additions and 3 deletions

View File

@ -29,6 +29,8 @@ export const EmailsFieldInput = ({ onCancel }: EmailsFieldInputProps) => {
}); });
}; };
const isPrimaryEmail = (index: number) => index === 0 && emails?.length > 1;
return ( return (
<MultiItemFieldInput <MultiItemFieldInput
items={emails} items={emails}
@ -46,7 +48,7 @@ export const EmailsFieldInput = ({ onCancel }: EmailsFieldInputProps) => {
<EmailsFieldMenuItem <EmailsFieldMenuItem
key={index} key={index}
dropdownId={`${hotkeyScope}-emails-${index}`} dropdownId={`${hotkeyScope}-emails-${index}`}
isPrimary={index === 0} isPrimary={isPrimaryEmail(index)}
email={email} email={email}
onEdit={handleEdit} onEdit={handleEdit}
onSetAsPrimary={handleSetPrimary} onSetAsPrimary={handleSetPrimary}

View File

@ -42,6 +42,8 @@ export const LinksFieldInput = ({ onCancel }: LinksFieldInputProps) => {
}); });
}; };
const isPrimaryLink = (index: number) => index === 0 && links?.length > 1;
return ( return (
<MultiItemFieldInput <MultiItemFieldInput
items={links} items={links}
@ -61,7 +63,7 @@ export const LinksFieldInput = ({ onCancel }: LinksFieldInputProps) => {
<LinksFieldMenuItem <LinksFieldMenuItem
key={index} key={index}
dropdownId={`${hotkeyScope}-links-${index}`} dropdownId={`${hotkeyScope}-links-${index}`}
isPrimary={index === 0} isPrimary={isPrimaryLink(index)}
label={link.label} label={link.label}
onEdit={handleEdit} onEdit={handleEdit}
onSetAsPrimary={handleSetPrimary} onSetAsPrimary={handleSetPrimary}

View File

@ -78,6 +78,8 @@ export const PhonesFieldInput = ({ onCancel }: PhonesFieldInputProps) => {
}); });
}; };
const isPrimaryPhone = (index: number) => index === 0 && phones?.length > 1;
return ( return (
<MultiItemFieldInput <MultiItemFieldInput
items={phones} items={phones}
@ -108,7 +110,7 @@ export const PhonesFieldInput = ({ onCancel }: PhonesFieldInputProps) => {
<PhonesFieldMenuItem <PhonesFieldMenuItem
key={index} key={index}
dropdownId={`${hotkeyScope}-phones-${index}`} dropdownId={`${hotkeyScope}-phones-${index}`}
isPrimary={index === 0} isPrimary={isPrimaryPhone(index)}
phone={phone} phone={phone}
onEdit={handleEdit} onEdit={handleEdit}
onSetAsPrimary={handleSetPrimary} onSetAsPrimary={handleSetPrimary}