hamedandClaude Opus 4.8
e1fb63eb0f
New reusable DigitInput normalizes Persian/Arabic digits to English on input, strips non-digits, enforces maxDigits, and is always LTR + numeric keyboard. Use it for the phone and national-code fields on the appointment create page (phone previously kept raw Persian digits; national code lost Persian digits to the \D strip). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { toEnglishDigits } from '../../lib/utils';
|
|
|
|
interface DigitInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type'> {
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
/** حداکثر تعداد رقم (مثلاً ۱۱ برای موبایل، ۱۰ برای کد ملی). */
|
|
maxDigits?: number;
|
|
}
|
|
|
|
/**
|
|
* ورودیِ فقط-عددی که ارقام فارسی/عربی را همان لحظه به انگلیسی تبدیل میکند و هر
|
|
* کاراکتر غیررقمی را حذف میکند؛ همیشه LTR و کیبورد عددی. مناسب شماره تماس و کد ملی.
|
|
*/
|
|
export default function DigitInput({ value, onChange, maxDigits, ...rest }: DigitInputProps) {
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
let digits = toEnglishDigits(e.target.value).replace(/\D/g, '');
|
|
if (maxDigits) digits = digits.slice(0, maxDigits);
|
|
onChange(digits);
|
|
};
|
|
|
|
return (
|
|
<input
|
|
{...rest}
|
|
value={value}
|
|
onChange={handleChange}
|
|
dir="ltr"
|
|
inputMode="numeric"
|
|
maxLength={maxDigits}
|
|
/>
|
|
);
|
|
}
|