4f7e1fb60e
* feat: Add type guards for ViewField email values and definitions, update ViewFieldTypes & peopleViewFields * feat: use ContactLink for EditablePhoneCell & create EditableEmailCell & EmailInputDisplay comp * fix: set second value for field * enhance: add edit btn for phone cell * feat: install dependencies intl-tel-input * feat: add phone cell input & connect intl-tel-input * fix: resolve rebase errors * fix: remove placeholder * feat(storybook): create stories for EmailInputDisplay, PhoneInputDisplay, and PhoneEditableField components --------- Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>
24 lines
650 B
TypeScript
24 lines
650 B
TypeScript
import { MouseEvent } from 'react';
|
|
import { isValidPhoneNumber, parsePhoneNumber } from 'libphonenumber-js';
|
|
|
|
import { ContactLink } from '@/ui/link/components/ContactLink';
|
|
|
|
type OwnProps = {
|
|
value: string | null;
|
|
};
|
|
|
|
export function PhoneInputDisplay({ value }: OwnProps) {
|
|
return value && isValidPhoneNumber(value) ? (
|
|
<ContactLink
|
|
href={parsePhoneNumber(value, 'FR')?.getURI()}
|
|
onClick={(event: MouseEvent<HTMLElement>) => {
|
|
event.stopPropagation();
|
|
}}
|
|
>
|
|
{parsePhoneNumber(value, 'FR')?.formatInternational() || value}
|
|
</ContactLink>
|
|
) : (
|
|
<ContactLink href="#">{value}</ContactLink>
|
|
);
|
|
}
|