feat(admin): force Latin digits in numeric fields globally
- 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>
This commit is contained in:
@@ -1,21 +1,37 @@
|
||||
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, className, style, ...rest },
|
||||
{ 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}
|
||||
/>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { describe, it, expect, vi } from 'vitest';
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
import Input from '@/components/ui/Input';
|
||||
import Field from '@/components/ui/Field';
|
||||
|
||||
@@ -16,6 +16,31 @@ describe('Input', () => {
|
||||
const el = screen.getByPlaceholderText('کدملی') as HTMLInputElement;
|
||||
expect(el.style.borderColor).toBe('var(--danger)');
|
||||
});
|
||||
|
||||
it('با numeric کیبورد عددی و جهت LTR میگیرد', () => {
|
||||
render(<Input placeholder="مبلغ" numeric />);
|
||||
const el = screen.getByPlaceholderText('مبلغ') as HTMLInputElement;
|
||||
expect(el.inputMode).toBe('numeric');
|
||||
expect(el.getAttribute('dir')).toBe('ltr');
|
||||
expect(el.getAttribute('lang')).toBe('en');
|
||||
});
|
||||
|
||||
it('با numeric ارقام فارسی را قبل از onChange به لاتین تبدیل میکند', () => {
|
||||
const onChange = vi.fn();
|
||||
render(<Input placeholder="مبلغ" numeric onChange={onChange} />);
|
||||
const el = screen.getByPlaceholderText('مبلغ') as HTMLInputElement;
|
||||
fireEvent.change(el, { target: { value: '۱۲۳۴' } });
|
||||
expect(onChange).toHaveBeenCalledTimes(1);
|
||||
expect(onChange.mock.calls[0][0].target.value).toBe('1234');
|
||||
});
|
||||
|
||||
it('بدون numeric ورودی را دستنخورده میگذارد', () => {
|
||||
const onChange = vi.fn();
|
||||
render(<Input placeholder="نام" onChange={onChange} />);
|
||||
const el = screen.getByPlaceholderText('نام') as HTMLInputElement;
|
||||
fireEvent.change(el, { target: { value: 'علی۱۲' } });
|
||||
expect(onChange.mock.calls[0][0].target.value).toBe('علی۱۲');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Field', () => {
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { toEnglishDigits } from '../../lib/utils';
|
||||
|
||||
interface PriceInputProps {
|
||||
value: number | '';
|
||||
@@ -10,17 +11,6 @@ interface PriceInputProps {
|
||||
min?: number;
|
||||
}
|
||||
|
||||
const PERSIAN_TO_LATIN: Record<string, string> = {
|
||||
'۰': '0', '۱': '1', '۲': '2', '۳': '3', '۴': '4',
|
||||
'۵': '5', '۶': '6', '۷': '7', '۸': '8', '۹': '9',
|
||||
'٠': '0', '١': '1', '٢': '2', '٣': '3', '٤': '4',
|
||||
'٥': '5', '٦': '6', '٧': '7', '٨': '8', '٩': '9',
|
||||
};
|
||||
|
||||
function toLatinDigits(str: string): string {
|
||||
return str.replace(/[۰-۹٠-٩]/g, (ch) => PERSIAN_TO_LATIN[ch] ?? ch);
|
||||
}
|
||||
|
||||
function formatDisplay(num: number): string {
|
||||
if (num === 0) return '';
|
||||
return new Intl.NumberFormat('fa-IR').format(num);
|
||||
@@ -42,7 +32,7 @@ export default function PriceInput({
|
||||
}, [value]);
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const raw = toLatinDigits(e.target.value).replace(/[^0-9]/g, '');
|
||||
const raw = toEnglishDigits(e.target.value).replace(/[^0-9]/g, '');
|
||||
const num = raw === '' ? 0 : Math.max(min, parseInt(raw, 10));
|
||||
onChange(num);
|
||||
setDisplay(num > 0 ? formatDisplay(num) : '');
|
||||
|
||||
Reference in New Issue
Block a user