hamedandClaude Fable 5
15f1c8d1eb
- Add a numeric prop to the base Input component that sets inputMode, dir=ltr, lang=en and normalizes Persian/Arabic digits to Latin via the shared toEnglishDigits on every change. - Dedupe digit conversion: PriceInput now uses toEnglishDigits instead of its local map; AppointmentsPage mobile handler uses sanitizeMobileInput. - Fix raw national-code / mobile inputs in NewAppointmentModal and NewAppointmentDrawer that stripped Persian digits without converting. - Cover the numeric Input behaviour with unit tests. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { toEnglishDigits } from '../../lib/utils';
|
|
|
|
type Props = React.InputHTMLAttributes<HTMLInputElement> & {
|
|
hasError?: boolean;
|
|
/** فیلد فقطعددی: کیبورد عددی، جهت LTR، و تبدیل زندهٔ ارقام فارسی/عربی به لاتین. */
|
|
numeric?: boolean;
|
|
};
|
|
|
|
/**
|
|
* Input متنی پایهٔ design system: کلاس `cp-input`، حالت خطا (قاب قرمز)،
|
|
* و forwardRef برای سازگاری با react-hook-form `register`.
|
|
* با `numeric`، ورودی به لاتین نرمال میشود تا از ثبت ارقام فارسی جلوگیری شود.
|
|
*/
|
|
export default React.forwardRef<HTMLInputElement, Props>(function Input(
|
|
{ hasError, numeric, className, style, onChange, inputMode, dir, lang, ...rest },
|
|
ref,
|
|
) {
|
|
const handleChange = numeric
|
|
? (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const latin = toEnglishDigits(e.target.value);
|
|
if (latin !== e.target.value) e.target.value = latin;
|
|
onChange?.(e);
|
|
}
|
|
: onChange;
|
|
|
|
return (
|
|
<input
|
|
{...rest}
|
|
ref={ref}
|
|
onChange={handleChange}
|
|
inputMode={numeric ? 'numeric' : inputMode}
|
|
dir={numeric ? 'ltr' : dir}
|
|
lang={numeric ? 'en' : lang}
|
|
className={className ?? 'cp-input'}
|
|
style={hasError ? { borderColor: 'var(--danger)', ...(style || {}) } : style}
|
|
/>
|
|
);
|
|
});
|