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

2026-06-04 21:36:12 +00:00 · 2025-08-31 12:26:04 +02:00
parent 482e8c1357
commit 9481a0132d
47 changed files with 324 additions and 130 deletions
--- a/Front-End/src/components/Form/RadioList.js
+++ b/Front-End/src/components/Form/RadioList.js
@ -0,0 +1,57 @@
+import React from 'react';
+
+const RadioList = ({
+  items,
+  formData,
+  handleChange,
+  fieldName,
+  icon: Icon,
+  className,
+  sectionLabel,
+  required,
+  disabled = false,
+}) => {
+  return (
+    <div className={`mb-4 ${className}`}>
+      {sectionLabel && (
+        <h3 className="text-lg font-semibold text-gray-800 mb-2">
+          {sectionLabel}
+          {required && <span className="text-red-500 ml-1">*</span>}
+        </h3>
+      )}
+      <div className="grid grid-cols-1 gap-4">
+        {items.map((item) => (
+          <div
+            key={item.id}
+            className={`flex items-center ${
+              disabled ? 'opacity-50 cursor-not-allowed' : ''
+            }`}
+          >
+            <input
+              key={`${item.id}-${Math.random()}`}
+              type="radio"
+              id={`${fieldName}-${item.id}`}
+              name={fieldName}
+              value={item.id}
+              checked={parseInt(formData[fieldName], 10) === item.id}
+              onChange={handleChange}
+              className="form-radio h-4 w-4 text-emerald-600 focus:ring-emerald-500 hover:ring-emerald-400 checked:bg-emerald-600 cursor-pointer"
+              style={{ outline: 'none', boxShadow: 'none' }}
+              disabled={disabled}
+            />
+            <label
+              htmlFor={`${fieldName}-${item.id}`}
+              className={`ml-2 block text-sm text-gray-900 flex items-center ${
+                disabled ? 'cursor-not-allowed' : 'cursor-pointer'
+              }`}
+            >
+              {item.label}
+            </label>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default RadioList;