feat: implement MobileInput component for standardized mobile number input and update related forms to use it

2026-06-19 15:28:40 +03:30
parent d910a30a7e
commit da57c554c1
11 changed files with 108 additions and 42 deletions
@@ -0,0 +1,36 @@
+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}
+    />
+  );
+});