feat: creation d'un FormRenderer.js pour creer un formulaire dynamique [NEWTS-17]

Front-End/src/components/Form/InputPhone.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { PhoneInput } from 'react-international-phone';
+import 'react-international-phone/style.css';
+
+export default function InputPhone({
+  name,
+  label,
+  value,
+  onChange,
+  errorMsg,
+  className,
+  required,
+  enable = true, // Par défaut, le champ est activé
+}) {
+  const handlePhoneChange = (phone) => {
+    if (enable && onChange) {
+      if (phone && phone.target) {
+        const { name, value } = phone.target;
+        onChange({ target: { name: name, value: value } });
+      } else if (phone) {
+        onChange({ target: { name: name, value: phone } });
+      }
+    }
+  };
+
+  return (
+    <div className={`${className}`}>
+      <label htmlFor={name} className="block text-sm font-medium text-gray-700">
+        {label}
+        {required && <span className="text-red-500 ml-1">*</span>}
+      </label>
+
+      <PhoneInput
+        defaultCountry="fr"
+        value={value}
+        onChange={handlePhoneChange}
+        inputProps={{
+          name: name,
+          required: required,
+          disabled: !enable, // Désactiver l'input si enable est false
+        }}
+        className={`!w-full mt-1 !h-[38px] ${
+          !enable ? 'bg-gray-100 cursor-not-allowed' : ''
+        }`}
+        containerClassName={`!w-full !h-[36px] !flex !items-center !rounded-md ${
+          !enable ? 'bg-gray-100 cursor-not-allowed' : ''
+        }`}
+        inputClassName={`flex-1 px-3 py-2 block w-full sm:text-sm border-none focus:ring-0 outline-none !rounded-r-md items-center !border !border-gray-200 rounded-md ${
+          errorMsg ? 'border-red-500' : ''
+        } ${!enable ? 'bg-gray-100 cursor-not-allowed' : 'hover:border-gray-400 focus-within:border-gray-500'}`}
+        buttonClassName={`!h-[38px] !flex !items-center !justify-center !rounded-l-md !border border-gray-200 !border-r-0 ${
+          !enable ? 'cursor-not-allowed' : ''
+        }`}
+      />
+
+      {errorMsg && <p className="mt-2 text-sm text-red-600">{errorMsg}</p>}
+    </div>
+  );
+}