37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { sanitizeMobileInput } from '../../lib/utils';
|
|
|
|
type Props = React.InputHTMLAttributes<HTMLInputElement> & {
|
|
hasError?: boolean;
|
|
};
|
|
|
|
/**
|
|
* فیلد شماره موبایل ایران: ارقام فارسی/عربی را به انگلیسی تبدیل میکند، فقط رقم میپذیرد و حداکثر ۱۱ رقم.
|
|
* سازگار با react-hook-form `register` (event-based onChange) و حالت controlled.
|
|
* قبل از فراخوانی onChange، مقدار DOM پاکسازی میشود تا value در state هم تمیز ذخیره شود.
|
|
*/
|
|
export default React.forwardRef<HTMLInputElement, Props>(function MobileInput(
|
|
{ hasError, className, placeholder, style, onChange, ...rest },
|
|
ref,
|
|
) {
|
|
const handle = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
e.target.value = sanitizeMobileInput(e.target.value);
|
|
onChange?.(e);
|
|
};
|
|
|
|
return (
|
|
<input
|
|
{...rest}
|
|
ref={ref}
|
|
type="tel"
|
|
inputMode="numeric"
|
|
dir="ltr"
|
|
maxLength={11}
|
|
placeholder={placeholder ?? '09xxxxxxxxx'}
|
|
className={className ?? 'cp-input'}
|
|
style={hasError ? { borderColor: 'var(--danger)', ...(style || {}) } : style}
|
|
onChange={handle}
|
|
/>
|
|
);
|
|
});
|