acasini/n3wt-school
1
0
Fork 0
mirror of https://git.v0id.ovh/n3wt-innov/n3wt-school.git synced 2026-01-29 16:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Création de nouveaux composants / update formulaire de

Browse Source 
création de classe (#2)
This commit is contained in:
N3WT DE COMPET
2024-12-14 15:28:07 +01:00
parent cf144310a1
commit 7acae479da
43 changed files with 2374 additions and 441 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
Front-End/src/components/CheckBoxList.js
View File

@ -1,43 +1,70 @@
const CheckBoxList = ({ items, formData, handleChange, fieldName, label, icon: Icon, className, itemLabelFunc = (item) => item.name }) => {
const handleCheckboxChange = (e) => {
handleChange(e);
};
return (
<div className={`mb-4 ${className}`}>
<label className="block text-sm font-medium text-gray-700 flex items-center">
{Icon && <Icon className="w-5 h-5 mr-2" />}
{label}
</label>
<div className="mt-2 grid grid-cols-1 gap-4">
{items.map(item => (
<div key={item.id} className="flex items-center">
import React from 'react';
const CheckBoxList = ({
items,
formData,
handleChange,
fieldName,
label,
icon: Icon,
className,
itemLabelFunc = (item) => item.name,
labelAttenuated = () => false,
horizontal = false // Ajouter l'option horizontal
}) => {
const handleCheckboxChange = (e) => {
handleChange(e);
};
return (
<div className={`mb-4 ${className}`}>
<label className="block text-sm font-medium text-gray-700 flex items-center">
{Icon && <Icon className="w-5 h-5 mr-2" />}
{label}
</label>
<div className={`mt-2 grid ${horizontal ? 'grid-cols-6 gap-2' : 'grid-cols-1 gap-4'}`}>
{items.map(item => {
const isChecked = formData[fieldName].includes(parseInt(item.id));
const isAttenuated = labelAttenuated(item) && !isChecked;
return (
<div key={item.id} className={`flex ${horizontal ? 'flex-col items-center' : 'flex-row items-center'}`}>
{horizontal && (
<label
htmlFor={`${fieldName}-${item.id}`}
className={`block text-sm text-center mb-1 ${
isAttenuated ? 'text-gray-200' : 'font-bold text-emerald-600'
}`}
>
{itemLabelFunc(item)}
</label>
)}
<input
key={`${item.id}-${Math.random()}`}
type="checkbox"
id={`${fieldName}-${item.id}`}
name={fieldName}
value={item.id}
checked={formData[fieldName].includes(item.id)}
checked={isChecked}
onChange={handleCheckboxChange}
className="form-checkbox h-4 w-4 rounded-md text-emerald-600 hover:ring-emerald-400 checked:bg-emerald-600 hover:border-emerald-500 hover:bg-emerald-500 cursor-pointer"
style={{ borderRadius: '6px', outline: 'none', boxShadow: 'none' }} // Remove focus styles
className={`form-checkbox h-4 w-4 rounded-mg text-emerald-600 hover:ring-emerald-400 checked:bg-emerald-600 hover:border-emerald-500 hover:bg-emerald-500 cursor-pointer ${horizontal ? 'mt-1' : 'mr-2'}`}
style={{ borderRadius: '6px', outline: 'none', boxShadow: 'none' }}
/>
<label htmlFor={`${fieldName}-${item.id}`} className="ml-2 block text-sm text-gray-900 flex items-center">
{itemLabelFunc(item)}
{item.codeCouleur && (
<div
className="w-4 h-4 rounded-full ml-2 hover:bg-opacity-70 transition duration-200 ease-in-out"
style={{ backgroundColor: item.codeCouleur }}
title={item.codeCouleur}
></div>
)}
</label>
{!horizontal && (
<label
htmlFor={`${fieldName}-${item.id}`}
className={`block text-sm ${
isAttenuated ? 'text-gray-200' : 'font-bold text-emerald-600'
}`}
>
{itemLabelFunc(item)}
</label>
)}
</div>
))}
</div>
);
})}
</div>
);
};
export default CheckBoxList;
</div>
);
};
export default CheckBoxList;