103 lines
2.5 KiB
TypeScript
103 lines
2.5 KiB
TypeScript
import { useEffect, useRef, useState } from 'react';
|
|
import ReactPhoneNumberInput from 'react-phone-number-input';
|
|
import styled from '@emotion/styled';
|
|
|
|
import { CountryPickerDropdownButton } from '@/ui/input/components/internal/phone/components/CountryPickerDropdownButton';
|
|
|
|
import { useRegisterInputEvents } from '../../../../object-record/field/meta-types/input/hooks/useRegisterInputEvents';
|
|
|
|
import 'react-phone-number-input/style.css';
|
|
|
|
const StyledContainer = styled.div`
|
|
align-items: center;
|
|
|
|
border: none;
|
|
border-radius: ${({ theme }) => theme.border.radius.sm};
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
`;
|
|
|
|
const StyledCustomPhoneInput = styled(ReactPhoneNumberInput)`
|
|
font-family: ${({ theme }) => theme.font.family};
|
|
height: 32px;
|
|
|
|
.PhoneInputInput {
|
|
background: ${({ theme }) => theme.background.transparent.secondary};
|
|
border: none;
|
|
color: ${({ theme }) => theme.font.color.primary};
|
|
|
|
&::placeholder,
|
|
&::-webkit-input-placeholder {
|
|
color: ${({ theme }) => theme.font.color.light};
|
|
font-family: ${({ theme }) => theme.font.family};
|
|
font-weight: ${({ theme }) => theme.font.weight.medium};
|
|
}
|
|
|
|
:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
& svg {
|
|
border-radius: ${({ theme }) => theme.border.radius.xs};
|
|
height: 12px;
|
|
}
|
|
`;
|
|
|
|
export type PhoneInputProps = {
|
|
placeholder?: string;
|
|
autoFocus?: boolean;
|
|
value: string;
|
|
onEnter: (newText: string) => void;
|
|
onEscape: (newText: string) => void;
|
|
onTab?: (newText: string) => void;
|
|
onShiftTab?: (newText: string) => void;
|
|
onClickOutside: (event: MouseEvent | TouchEvent, inputValue: string) => void;
|
|
hotkeyScope: string;
|
|
};
|
|
|
|
export const PhoneInput = ({
|
|
autoFocus,
|
|
value,
|
|
onEnter,
|
|
onEscape,
|
|
onTab,
|
|
onShiftTab,
|
|
onClickOutside,
|
|
hotkeyScope,
|
|
}: PhoneInputProps) => {
|
|
const [internalValue, setInternalValue] = useState<string | undefined>(value);
|
|
|
|
const wrapperRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
setInternalValue(value);
|
|
}, [value]);
|
|
|
|
useRegisterInputEvents({
|
|
inputRef: wrapperRef,
|
|
inputValue: internalValue ?? '',
|
|
onEnter,
|
|
onEscape,
|
|
onClickOutside,
|
|
onTab,
|
|
onShiftTab,
|
|
hotkeyScope,
|
|
});
|
|
|
|
return (
|
|
<StyledContainer ref={wrapperRef}>
|
|
<StyledCustomPhoneInput
|
|
autoFocus={autoFocus}
|
|
placeholder="Phone number"
|
|
value={value}
|
|
onChange={setInternalValue}
|
|
international={true}
|
|
withCountryCallingCode={true}
|
|
countrySelectComponent={CountryPickerDropdownButton}
|
|
/>
|
|
</StyledContainer>
|
|
);
|
|
};
|