AYS-480 | NumericInput Component Has Been Created and Used In Emergency Evacuation Application Form (#97)

Co-authored-by: Buğra Ercan <bugrasshgercan@gmail.com>

Author: agitrubard

package-lock.json

@@ -13,6 +13,7 @@ import PhoneInput from '@/components/ui/PhoneInput'
 import { Textarea } from '@/components/ui/textarea'
 import { UseFormReturn } from 'react-hook-form'
 import { CountryData } from 'react-phone-input-2'
+import { NumericInput } from '@/components/NumericInput'
 
 interface EvacuationFormSchema {
   firstName: string
@@ -95,20 +96,13 @@ const EvacuationForm: React.FC<EvacuationFormProps> = ({ form }) => {
                 >
                   Talep Edilen Koltuk Sayısı:
                 </Label>
-                <Input
-                  id="seatingCount"
+                <NumericInput
+                  id={field.name}
+                  value={field.value}
+                  onValueChange={field.onChange}
+                  onBlur={field.onBlur}
+                  maxLength={3}
                   placeholder="Talep Edilen Koltuk Sayısı"
-                  type="number"
-                  onWheel={(e: React.WheelEvent<HTMLInputElement>) =>
-                    e.currentTarget.blur()
-                  }
-                  {...field}
-                  onChange={(e) => {
-                    const value = e.target.valueAsNumber
-                    if (value <= 999 && value > -1) {
-                      field.onChange(value)
-                    }
-                  }}
                 />
               </div>
             </FormControl>

src/components/EmergencyForm/EvacuationForm.tsx

@@ -37,7 +37,7 @@ export default function ProxyEvacuationForm(): JSX.Element {
       applicantPhoneNumber: { countryCode: '90', lineNumber: '' },
       firstName: '',
       lastName: '',
-      seatingCount: 1,
+      seatingCount: 0,
       phoneNumber: { countryCode: '90', lineNumber: '' },
       sourceCity: '',
       sourceDistrict: '',

src/components/EmergencyForm/ProxyEvacuationForm.tsx

@@ -22,7 +22,7 @@ export default function SelfEvacuationForm(): JSX.Element {
     defaultValues: {
       firstName: '',
       lastName: '',
-      seatingCount: 1,
+      seatingCount: 0,
       phoneNumber: { countryCode: '90', lineNumber: '' },
       sourceCity: '',
       sourceDistrict: '',

src/components/EmergencyForm/SelfEvacuationForm.tsx

@@ -81,8 +81,7 @@ const formSchema = z.object({
     .max(250, { message: 'Maksimum 250 karakter uzunluğunda olabilir' }),
   seatingCount: z
     .number({ message: 'Koltuk sayısı belirtmelisin' })
-    .int({ message: 'Pozitif bir tam sayı olmalıdır' })
-    .positive({ message: 'Pozitif bir tam sayı olmalıdır' })
+    .positive({ message: 'Koltuk sayısı belirtmelisin' })
     .max(999, { message: 'Maksimum 3 haneli bir sayı olmalıdır' }),
   targetCity: requiredFieldValidation(),
   targetDistrict: requiredFieldValidation(),

src/components/EmergencyForm/schema/formSchema.ts

@@ -0,0 +1,51 @@
+import * as React from 'react'
+import { Input } from '@/components/ui/input'
+
+type BaseInputProps = React.ComponentPropsWithoutRef<typeof Input>
+
+export interface NumericInputProps
+  extends Omit<BaseInputProps, 'type' | 'value' | 'onChange'> {
+  maxLength?: number
+  value?: number | ''
+  onValueChange?: (value?: number) => void
+}
+
+export const NumericInput = React.forwardRef<
+  HTMLInputElement,
+  NumericInputProps
+>(function NumericInput(
+  { maxLength = 3, value = '', onValueChange, onKeyDown, onBlur, ...rest },
+  ref
+) {
+  const handleKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (e) => {
+    if (['e', 'E', '+', '-', '.', ','].includes(e.key)) {
+      e.preventDefault()
+      return
+    }
+    onKeyDown?.(e)
+  }
+
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    const digits = e.target.value.replace(/\D/g, '')
+    if (digits.length <= maxLength) {
+      const num = digits === '' ? undefined : parseInt(digits, 10)
+      onValueChange?.(num)
+    }
+  }
+
+  return (
+    <Input
+      {...rest}
+      ref={ref}
+      type="text"
+      inputMode="numeric"
+      pattern="[0-9]*"
+      value={value ?? ''}
+      onKeyDown={handleKeyDown}
+      onChange={handleChange}
+      onBlur={onBlur}
+    />
+  )
+})
+
+NumericInput.displayName = 'NumericInput'