mirror of
https://github.com/logto-io/logto.git
synced 2024-12-16 20:26:19 -05:00
Merge pull request #3113 from logto-io/simeng-ui-clean-up
refactor(ui): clean up legacy code
This commit is contained in:
simeng-li
GitHub
commit
43ecf01ce8
9 changed files with 0 additions and 642 deletions
|
|
@ -1,57 +0,0 @@
|
||||||
import { render, fireEvent } from '@testing-library/react';
|
|
||||||
|
|
||||||
import PasswordInput from './PasswordInput';
|
|
||||||
|
|
||||||
describe('Input Field UI Component', () => {
|
|
||||||
const text = 'foo';
|
|
||||||
const onChange = jest.fn();
|
|
||||||
|
|
||||||
test('render password input', () => {
|
|
||||||
const { container } = render(
|
|
||||||
<PasswordInput
|
|
||||||
name="foo"
|
|
||||||
value={text}
|
|
||||||
onChange={({ target }) => {
|
|
||||||
if (target instanceof HTMLInputElement) {
|
|
||||||
onChange(target.value);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
const inputEle = container.querySelector('input');
|
|
||||||
expect(inputEle?.value).toEqual(text);
|
|
||||||
expect(inputEle?.type).toEqual('password');
|
|
||||||
|
|
||||||
if (inputEle) {
|
|
||||||
fireEvent.change(inputEle, { target: { value: 'update' } });
|
|
||||||
expect(onChange).toBeCalledWith('update');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
test('render error message', () => {
|
|
||||||
const errorCode = 'password_required';
|
|
||||||
const { queryByText } = render(<PasswordInput error={errorCode} />);
|
|
||||||
expect(queryByText(errorCode)).not.toBeNull();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('click on toggle visibility button', () => {
|
|
||||||
const { container } = render(<PasswordInput name="foo" value={text} onChange={onChange} />);
|
|
||||||
|
|
||||||
const inputEle = container.querySelector('input');
|
|
||||||
|
|
||||||
if (!inputEle) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
fireEvent.focus(inputEle);
|
|
||||||
|
|
||||||
const visibilityButton = container.querySelector('svg');
|
|
||||||
expect(visibilityButton).not.toBeNull();
|
|
||||||
|
|
||||||
if (visibilityButton) {
|
|
||||||
fireEvent.mouseDown(visibilityButton);
|
|
||||||
expect(inputEle.type).toEqual('text');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,64 +0,0 @@
|
||||||
import classNames from 'classnames';
|
|
||||||
import type { HTMLProps } from 'react';
|
|
||||||
import { useState, useRef } from 'react';
|
|
||||||
|
|
||||||
import PasswordHideIcon from '@/assets/icons/password-hide-icon.svg';
|
|
||||||
import PasswordShowIcon from '@/assets/icons/password-show-icon.svg';
|
|
||||||
import type { ErrorType } from '@/components/ErrorMessage';
|
|
||||||
import ErrorMessage from '@/components/ErrorMessage';
|
|
||||||
|
|
||||||
import * as styles from './index.module.scss';
|
|
||||||
|
|
||||||
export type Props = Omit<HTMLProps<HTMLInputElement>, 'type'> & {
|
|
||||||
className?: string;
|
|
||||||
error?: ErrorType;
|
|
||||||
};
|
|
||||||
|
|
||||||
const PasswordInput = ({ className, value, error, onFocus, onBlur, ...rest }: Props) => {
|
|
||||||
// Toggle the password visibility
|
|
||||||
const [type, setType] = useState('password');
|
|
||||||
const [onInputFocus, setOnInputFocus] = useState(false);
|
|
||||||
const inputElement = useRef<HTMLInputElement>(null);
|
|
||||||
const Icon = type === 'password' ? PasswordHideIcon : PasswordShowIcon;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={className}>
|
|
||||||
<div className={classNames(styles.wrapper, error && styles.error)}>
|
|
||||||
<input
|
|
||||||
ref={inputElement}
|
|
||||||
type={type}
|
|
||||||
value={value}
|
|
||||||
onFocus={(event) => {
|
|
||||||
setOnInputFocus(true);
|
|
||||||
onFocus?.(event);
|
|
||||||
}}
|
|
||||||
onBlur={(event) => {
|
|
||||||
setOnInputFocus(false);
|
|
||||||
onBlur?.(event);
|
|
||||||
}}
|
|
||||||
{...rest}
|
|
||||||
/>
|
|
||||||
{value && onInputFocus && (
|
|
||||||
<Icon
|
|
||||||
className={styles.actionButton}
|
|
||||||
onMouseDown={(event) => {
|
|
||||||
event.preventDefault();
|
|
||||||
setType(type === 'password' ? 'text' : 'password');
|
|
||||||
|
|
||||||
if (inputElement.current) {
|
|
||||||
const { length } = inputElement.current.value;
|
|
||||||
// Force async render, move cursor to the end of the input
|
|
||||||
setTimeout(() => {
|
|
||||||
inputElement.current?.setSelectionRange(length, length);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{error && <ErrorMessage className={styles.errorMessage} error={error} />}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default PasswordInput;
|
|
||||||
|
|
@ -1,97 +0,0 @@
|
||||||
import { render, fireEvent } from '@testing-library/react';
|
|
||||||
|
|
||||||
import { getCountryList, getDefaultCountryCallingCode } from '@/utils/country-code';
|
|
||||||
|
|
||||||
import PhoneInput from './PhoneInput';
|
|
||||||
|
|
||||||
jest.mock('i18next', () => ({
|
|
||||||
language: 'en',
|
|
||||||
}));
|
|
||||||
|
|
||||||
describe('Phone Input Field UI Component', () => {
|
|
||||||
const onChange = jest.fn();
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
onChange.mockClear();
|
|
||||||
});
|
|
||||||
|
|
||||||
const defaultCountryCallingCode = getDefaultCountryCallingCode();
|
|
||||||
|
|
||||||
it('render empty PhoneInput', () => {
|
|
||||||
const { queryByText, container } = render(
|
|
||||||
<PhoneInput name="PhoneInput" nationalNumber="" onChange={onChange} />
|
|
||||||
);
|
|
||||||
expect(queryByText(`+${defaultCountryCallingCode}`)).toBeNull();
|
|
||||||
expect(container.querySelector('input')?.value).toBe('');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('render with country list', () => {
|
|
||||||
const { queryAllByText, container } = render(
|
|
||||||
<PhoneInput
|
|
||||||
name="PhoneInput"
|
|
||||||
nationalNumber=""
|
|
||||||
countryList={getCountryList()}
|
|
||||||
countryCallingCode={defaultCountryCallingCode}
|
|
||||||
onChange={onChange}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
const countryCode = queryAllByText(`+${defaultCountryCallingCode}`);
|
|
||||||
expect(countryCode).toHaveLength(2);
|
|
||||||
|
|
||||||
const selector = container.querySelector('select');
|
|
||||||
expect(selector).not.toBeNull();
|
|
||||||
|
|
||||||
if (selector) {
|
|
||||||
fireEvent.change(selector, { target: { value: '1' } });
|
|
||||||
expect(onChange).toBeCalledWith({ countryCallingCode: '1' });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
it('render input update', () => {
|
|
||||||
const { container } = render(
|
|
||||||
<PhoneInput name="PhoneInput" nationalNumber="911" onChange={onChange} />
|
|
||||||
);
|
|
||||||
|
|
||||||
const inputField = container.querySelector('input');
|
|
||||||
expect(inputField?.value).toBe('911');
|
|
||||||
|
|
||||||
if (inputField) {
|
|
||||||
fireEvent.change(inputField, { target: { value: '110' } });
|
|
||||||
expect(onChange).toBeCalledWith({ nationalNumber: '110' });
|
|
||||||
fireEvent.focus(inputField);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
it('render input error', () => {
|
|
||||||
const { queryByText } = render(
|
|
||||||
<PhoneInput
|
|
||||||
name="PhoneInput"
|
|
||||||
nationalNumber="110"
|
|
||||||
error="invalid_phone"
|
|
||||||
onChange={onChange}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
expect(queryByText('invalid_phone')).not.toBeNull();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('render input clear', () => {
|
|
||||||
const { container } = render(
|
|
||||||
<PhoneInput name="PhoneInput" nationalNumber="911" onChange={onChange} />
|
|
||||||
);
|
|
||||||
|
|
||||||
const inputField = container.querySelector('input');
|
|
||||||
|
|
||||||
if (inputField) {
|
|
||||||
fireEvent.focus(inputField);
|
|
||||||
}
|
|
||||||
|
|
||||||
const clearButton = container.querySelector('svg');
|
|
||||||
expect(clearButton).not.toBeNull();
|
|
||||||
|
|
||||||
if (clearButton) {
|
|
||||||
fireEvent.mouseDown(clearButton);
|
|
||||||
expect(onChange).toBeCalledWith({ nationalNumber: '' });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,112 +0,0 @@
|
||||||
import classNames from 'classnames';
|
|
||||||
import { useState, useMemo, useRef } from 'react';
|
|
||||||
|
|
||||||
import DownArrowIcon from '@/assets/icons/arrow-down.svg';
|
|
||||||
import ClearIcon from '@/assets/icons/clear-icon.svg';
|
|
||||||
import type { ErrorType } from '@/components/ErrorMessage';
|
|
||||||
import ErrorMessage from '@/components/ErrorMessage';
|
|
||||||
import type { CountryCallingCode, CountryMetaData } from '@/hooks/use-phone-number';
|
|
||||||
|
|
||||||
import * as styles from './index.module.scss';
|
|
||||||
import * as phoneInputStyles from './phoneInput.module.scss';
|
|
||||||
|
|
||||||
type Value = { countryCallingCode?: CountryCallingCode; nationalNumber?: string };
|
|
||||||
|
|
||||||
export type Props = {
|
|
||||||
name: string;
|
|
||||||
// eslint-disable-next-line react/boolean-prop-naming
|
|
||||||
autoFocus?: boolean;
|
|
||||||
className?: string;
|
|
||||||
placeholder?: string;
|
|
||||||
countryCallingCode?: CountryCallingCode;
|
|
||||||
nationalNumber: string;
|
|
||||||
countryList?: CountryMetaData[];
|
|
||||||
error?: ErrorType;
|
|
||||||
onChange: (value: Value) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
const PhoneInput = ({
|
|
||||||
name,
|
|
||||||
autoFocus,
|
|
||||||
className,
|
|
||||||
placeholder,
|
|
||||||
countryCallingCode,
|
|
||||||
nationalNumber,
|
|
||||||
countryList,
|
|
||||||
error,
|
|
||||||
onChange,
|
|
||||||
}: Props) => {
|
|
||||||
const [onFocus, setOnFocus] = useState(false);
|
|
||||||
const inputReference = useRef<HTMLInputElement>(null);
|
|
||||||
|
|
||||||
const countrySelector = useMemo(() => {
|
|
||||||
if (countryCallingCode === undefined || !countryList?.length) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={phoneInputStyles.countryCodeSelector}>
|
|
||||||
<span>{`+${countryCallingCode}`}</span>
|
|
||||||
<DownArrowIcon />
|
|
||||||
<select
|
|
||||||
autoComplete="tel-country-code"
|
|
||||||
onChange={({ target: { value } }) => {
|
|
||||||
onChange({ countryCallingCode: value });
|
|
||||||
|
|
||||||
// Auto Focus to the input
|
|
||||||
if (inputReference.current) {
|
|
||||||
inputReference.current.focus();
|
|
||||||
const { length } = inputReference.current.value;
|
|
||||||
inputReference.current.setSelectionRange(length, length);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{countryList.map(({ countryCallingCode, countryCode }) => (
|
|
||||||
<option key={countryCode} value={countryCallingCode}>
|
|
||||||
{`+${countryCallingCode}`}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}, [countryCallingCode, countryList, onChange]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={className}>
|
|
||||||
<div className={classNames(styles.wrapper, error && styles.error)}>
|
|
||||||
{countrySelector}
|
|
||||||
<input
|
|
||||||
ref={inputReference}
|
|
||||||
type="tel"
|
|
||||||
inputMode="tel"
|
|
||||||
autoComplete="tel-national"
|
|
||||||
autoFocus={autoFocus}
|
|
||||||
name={name}
|
|
||||||
placeholder={placeholder}
|
|
||||||
value={nationalNumber}
|
|
||||||
onFocus={() => {
|
|
||||||
setOnFocus(true);
|
|
||||||
}}
|
|
||||||
onBlur={() => {
|
|
||||||
setOnFocus(false);
|
|
||||||
}}
|
|
||||||
onChange={({ target: { value } }) => {
|
|
||||||
onChange({ nationalNumber: value.replace(/\D/g, '') });
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{nationalNumber && onFocus && (
|
|
||||||
<ClearIcon
|
|
||||||
className={styles.actionButton}
|
|
||||||
onMouseDown={(event) => {
|
|
||||||
event.preventDefault();
|
|
||||||
onChange({ nationalNumber: '' });
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{error && <ErrorMessage error={error} className={styles.errorMessage} />}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default PhoneInput;
|
|
||||||
|
|
@ -1,91 +0,0 @@
|
||||||
@use '@/scss/underscore' as _;
|
|
||||||
|
|
||||||
.wrapper {
|
|
||||||
position: relative;
|
|
||||||
@include _.flex-row;
|
|
||||||
border: _.border(var(--color-line-border));
|
|
||||||
border-radius: var(--radius);
|
|
||||||
// fix in safari input field line-height issue
|
|
||||||
height: 44px;
|
|
||||||
overflow: hidden;
|
|
||||||
transition-property: outline, border;
|
|
||||||
transition-timing-function: ease-in-out;
|
|
||||||
transition-duration: 0.2s;
|
|
||||||
|
|
||||||
.actionButton {
|
|
||||||
position: absolute;
|
|
||||||
right: _.unit(4);
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
display: none;
|
|
||||||
color: var(--color-type-secondary);
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
padding: 0 _.unit(4);
|
|
||||||
flex: 1;
|
|
||||||
background: none;
|
|
||||||
caret-color: var(--color-brand-default);
|
|
||||||
font: var(--font-body-1);
|
|
||||||
color: var(--color-type-primary);
|
|
||||||
align-self: stretch;
|
|
||||||
|
|
||||||
&:not(:first-child) {
|
|
||||||
padding-left: _.unit(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
&::placeholder {
|
|
||||||
color: var(--color-type-secondary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus-within {
|
|
||||||
border: _.border(var(--color-brand-default));
|
|
||||||
|
|
||||||
.actionButton {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
padding-right: calc(24px + _.unit(4));
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.error {
|
|
||||||
border: _.border(var(--color-danger-default));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.errorMessage {
|
|
||||||
margin-left: _.unit(0.5);
|
|
||||||
margin-top: _.unit(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(body.desktop) {
|
|
||||||
.wrapper {
|
|
||||||
border-radius: 6px;
|
|
||||||
outline: 3px solid transparent;
|
|
||||||
|
|
||||||
input {
|
|
||||||
font: var(--font-body-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.actionButton {
|
|
||||||
width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.error {
|
|
||||||
border: _.border(var(--color-danger-default));
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus-within {
|
|
||||||
border: _.border(var(--color-brand-default));
|
|
||||||
outline-color: var(--color-overlay-brand-focused);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,56 +0,0 @@
|
||||||
import { render, fireEvent } from '@testing-library/react';
|
|
||||||
|
|
||||||
import Input from '.';
|
|
||||||
|
|
||||||
describe('Input Field UI Component', () => {
|
|
||||||
const text = 'foo';
|
|
||||||
const onChange = jest.fn();
|
|
||||||
const onClear = jest.fn();
|
|
||||||
|
|
||||||
test('render plain text input with value', () => {
|
|
||||||
const { container } = render(
|
|
||||||
<Input
|
|
||||||
name="foo"
|
|
||||||
value={text}
|
|
||||||
onChange={({ target }) => {
|
|
||||||
if (target instanceof HTMLInputElement) {
|
|
||||||
onChange(target.value);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
const inputEle = container.querySelector('input');
|
|
||||||
expect(inputEle).not.toBeNull();
|
|
||||||
expect(inputEle?.value).toEqual(text);
|
|
||||||
|
|
||||||
if (inputEle) {
|
|
||||||
fireEvent.change(inputEle, { target: { value: 'update' } });
|
|
||||||
expect(onChange).toBeCalledWith('update');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
test('render error message', () => {
|
|
||||||
const errorCode = 'invalid_email';
|
|
||||||
const { queryByText } = render(<Input error={errorCode} />);
|
|
||||||
expect(queryByText(errorCode)).not.toBeNull();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('click on clear button', () => {
|
|
||||||
const { container } = render(
|
|
||||||
<Input name="foo" value={text} onChange={onChange} onClear={onClear} />
|
|
||||||
);
|
|
||||||
const inputField = container.querySelector('input');
|
|
||||||
|
|
||||||
if (inputField) {
|
|
||||||
fireEvent.focus(inputField);
|
|
||||||
}
|
|
||||||
|
|
||||||
const clearIcon = container.querySelector('svg');
|
|
||||||
expect(clearIcon).not.toBeNull();
|
|
||||||
|
|
||||||
if (clearIcon) {
|
|
||||||
fireEvent.mouseDown(clearIcon);
|
|
||||||
expect(onClear).toBeCalledWith();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
import classNames from 'classnames';
|
|
||||||
import type { HTMLProps } from 'react';
|
|
||||||
|
|
||||||
import ClearIcon from '@/assets/icons/clear-icon.svg';
|
|
||||||
import type { ErrorType } from '@/components/ErrorMessage';
|
|
||||||
import ErrorMessage from '@/components/ErrorMessage';
|
|
||||||
|
|
||||||
import * as styles from './index.module.scss';
|
|
||||||
|
|
||||||
export { default as PasswordInput } from './PasswordInput';
|
|
||||||
export { default as PhoneInput } from './PhoneInput';
|
|
||||||
|
|
||||||
export type Props = HTMLProps<HTMLInputElement> & {
|
|
||||||
className?: string;
|
|
||||||
error?: ErrorType;
|
|
||||||
onClear?: () => void;
|
|
||||||
isErrorStyling?: boolean;
|
|
||||||
};
|
|
||||||
|
|
||||||
const Input = ({
|
|
||||||
className,
|
|
||||||
type = 'text',
|
|
||||||
value,
|
|
||||||
error,
|
|
||||||
isErrorStyling = true,
|
|
||||||
onClear,
|
|
||||||
...rest
|
|
||||||
}: Props) => {
|
|
||||||
return (
|
|
||||||
<div className={className}>
|
|
||||||
<div className={classNames(styles.wrapper, error && isErrorStyling && styles.error)}>
|
|
||||||
<input type={type} value={value} {...rest} />
|
|
||||||
{value && onClear && (
|
|
||||||
<ClearIcon
|
|
||||||
className={styles.actionButton}
|
|
||||||
onMouseDown={(event) => {
|
|
||||||
event.preventDefault();
|
|
||||||
onClear();
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{error && <ErrorMessage error={error} className={styles.errorMessage} />}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Input;
|
|
||||||
|
|
@ -1,62 +0,0 @@
|
||||||
@use '@/scss/underscore' as _;
|
|
||||||
|
|
||||||
.countryCodeSelector {
|
|
||||||
color: var(--color-type-primary);
|
|
||||||
border: none;
|
|
||||||
background: none;
|
|
||||||
width: auto;
|
|
||||||
@include _.flex-row;
|
|
||||||
position: relative;
|
|
||||||
margin-right: _.unit(1);
|
|
||||||
margin-left: _.unit(4);
|
|
||||||
|
|
||||||
> select {
|
|
||||||
appearance: none;
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
background: none;
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
font-size: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(body.mobile) {
|
|
||||||
.countryCodeSelector {
|
|
||||||
font: var(--font-label-1);
|
|
||||||
|
|
||||||
> select option {
|
|
||||||
font: var(--font-label-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
> svg {
|
|
||||||
color: var(--color-type-secondary);
|
|
||||||
margin-left: _.unit(1);
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
+ input {
|
|
||||||
// hot fix unknown android bug of input width
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(body.desktop) {
|
|
||||||
.countryCodeSelector {
|
|
||||||
font: var(--font-body-2);
|
|
||||||
|
|
||||||
> select option {
|
|
||||||
font: var(--font-body-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
> svg {
|
|
||||||
color: var(--color-type-secondary);
|
|
||||||
margin-left: _.unit(2);
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,55 +0,0 @@
|
||||||
/**
|
|
||||||
* Provide PhoneNumber Format support
|
|
||||||
* Reference [libphonenumber-js](https://gitlab.com/catamphetamine/libphonenumber-js)
|
|
||||||
*/
|
|
||||||
|
|
||||||
import type { CountryCallingCode, CountryCode } from 'libphonenumber-js/mobile';
|
|
||||||
import { parsePhoneNumberWithError, ParseError } from 'libphonenumber-js/mobile';
|
|
||||||
import { useState } from 'react';
|
|
||||||
|
|
||||||
import {
|
|
||||||
getDefaultCountryCallingCode,
|
|
||||||
getCountryList,
|
|
||||||
parseE164Number,
|
|
||||||
} from '@/utils/country-code';
|
|
||||||
|
|
||||||
export type { CountryCallingCode } from 'libphonenumber-js/mobile';
|
|
||||||
|
|
||||||
export type CountryMetaData = {
|
|
||||||
countryCode: CountryCode;
|
|
||||||
countryCallingCode: CountryCallingCode;
|
|
||||||
};
|
|
||||||
|
|
||||||
type PhoneNumberData = {
|
|
||||||
countryCallingCode: string;
|
|
||||||
nationalNumber: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
const isValidPhoneNumber = (value: string): boolean => {
|
|
||||||
try {
|
|
||||||
const phoneNumber = parsePhoneNumberWithError(parseE164Number(value));
|
|
||||||
|
|
||||||
return phoneNumber.isValid();
|
|
||||||
} catch (error: unknown) {
|
|
||||||
if (error instanceof ParseError) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const usePhoneNumber = () => {
|
|
||||||
const [phoneNumber, setPhoneNumber] = useState<PhoneNumberData>({
|
|
||||||
countryCallingCode: getDefaultCountryCallingCode(),
|
|
||||||
nationalNumber: '',
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
countryList: getCountryList(),
|
|
||||||
phoneNumber,
|
|
||||||
setPhoneNumber,
|
|
||||||
isValidPhoneNumber,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export default usePhoneNumber;
|
|
||||||
Loading…
Reference in a new issue