@rsuci/shared-form-components 1.0.61 → 1.0.62
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -278,7 +278,7 @@ const FormRendererInner = () => {
|
|
|
278
278
|
if (!formulaire || !formulaire.groupes || formulaire.groupes.length === 0) {
|
|
279
279
|
return (_jsx("div", { className: "min-h-screen bg-gray-50 flex items-center justify-center", children: _jsxs("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 p-8 text-center max-w-md", children: [_jsx("div", { className: "text-red-500 mb-4", children: _jsx("svg", { className: "w-12 h-12 mx-auto", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L4.268 18.5c-.77.833.192 2.5 1.732 2.5z" }) }) }), _jsx("h3", { className: "text-lg font-medium text-gray-900 mb-2", children: "Formulaire non configur\u00E9" }), _jsx("p", { className: "text-gray-600 mb-4", children: "Ce formulaire ne contient aucun groupe de variables." }), _jsx("button", { onClick: callbacks.onCancel, className: "inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700", children: "Retour" })] }) }));
|
|
280
280
|
}
|
|
281
|
-
return (_jsxs("div", { className: "min-h-screen bg-gray-50", children: [_jsxs("div", { className: "max-w-4xl mx-auto px-4 py-6", children: [_jsxs("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-6", children: [_jsx("h1", { className: "text-xl font-semibold text-gray-900 mb-4", children: formulaire.designation }), _jsx(FormProgress, { showPercentage: true })] }), _jsxs("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200
|
|
281
|
+
return (_jsxs("div", { className: "min-h-screen bg-gray-50", children: [_jsxs("div", { className: "max-w-4xl mx-auto px-4 py-6", children: [_jsxs("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-6", children: [_jsx("h1", { className: "text-xl font-semibold text-gray-900 mb-4", children: formulaire.designation }), _jsx(FormProgress, { showPercentage: true })] }), _jsxs("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 mb-6", children: [_jsx("div", { className: "bg-green-600 px-6 py-4", children: _jsx("h2", { className: "text-xl font-bold text-white uppercase tracking-wide", children: currentGroup?.designation }) }), _jsxs("div", { className: "p-6", children: [currentGroup?.estMultiple && currentGroup.instances && (_jsx("div", { className: "mb-6", children: _jsx(GroupeInstanceTabs, { groupe: currentGroup, currentInstanceIndex: navigation.navigationState.instanceIndex, responses: responses, onInstanceChange: handleInstanceChange, onInstanceAdded: handleInstanceAdded, onInstanceRemoved: handleInstanceRemoved, disabled: effectiveDisabled }) })), _jsx("div", { className: "space-y-6", children: visibleVariables.map(variable => {
|
|
282
282
|
const responseKey = currentGroup?.estMultiple && currentInstance?.numeroInstance
|
|
283
283
|
? `${variable.code}_${currentInstance.numeroInstance}`
|
|
284
284
|
: variable.code;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchableSelect.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/SearchableSelect.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"SearchableSelect.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/SearchableSelect.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,UAAU,qBAAqB;IAC7B,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC5B,QAAQ,EAAE,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,MAAM,CAAC;CACtD;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAuM5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -3,26 +3,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
* Composant de sélection avec recherche intégrée
|
|
4
4
|
* Inspiré du design de production avec champ de filtre
|
|
5
5
|
*/
|
|
6
|
-
import { useState, useRef, useEffect
|
|
7
|
-
import { createPortal } from 'react-dom';
|
|
6
|
+
import { useState, useRef, useEffect } from 'react';
|
|
8
7
|
export const SearchableSelect = ({ options, value, onChange, placeholder = 'Sélectionner...', searchPlaceholder = 'Rechercher...', disabled = false, required = false, loading = false, error, className = '', noOptionsMessage = 'Aucune option disponible', formatOptionLabel }) => {
|
|
9
8
|
const [isOpen, setIsOpen] = useState(false);
|
|
10
9
|
const [searchTerm, setSearchTerm] = useState('');
|
|
11
|
-
const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 });
|
|
12
10
|
const dropdownRef = useRef(null);
|
|
13
|
-
const buttonRef = useRef(null);
|
|
14
11
|
const searchInputRef = useRef(null);
|
|
15
|
-
// Calculer la position du dropdown par rapport au bouton
|
|
16
|
-
const updateDropdownPosition = useCallback(() => {
|
|
17
|
-
if (buttonRef.current) {
|
|
18
|
-
const rect = buttonRef.current.getBoundingClientRect();
|
|
19
|
-
setDropdownPosition({
|
|
20
|
-
top: rect.bottom + window.scrollY,
|
|
21
|
-
left: rect.left + window.scrollX,
|
|
22
|
-
width: rect.width
|
|
23
|
-
});
|
|
24
|
-
}
|
|
25
|
-
}, []);
|
|
26
12
|
// Fermer le dropdown quand on clique à l'extérieur
|
|
27
13
|
useEffect(() => {
|
|
28
14
|
const handleClickOutside = (event) => {
|
|
@@ -45,18 +31,6 @@ export const SearchableSelect = ({ options, value, onChange, placeholder = 'Sél
|
|
|
45
31
|
searchInputRef.current.focus();
|
|
46
32
|
}
|
|
47
33
|
}, [isOpen]);
|
|
48
|
-
// Mettre à jour la position du dropdown à l'ouverture et lors du scroll/resize
|
|
49
|
-
useEffect(() => {
|
|
50
|
-
if (isOpen) {
|
|
51
|
-
updateDropdownPosition();
|
|
52
|
-
window.addEventListener('scroll', updateDropdownPosition, true);
|
|
53
|
-
window.addEventListener('resize', updateDropdownPosition);
|
|
54
|
-
}
|
|
55
|
-
return () => {
|
|
56
|
-
window.removeEventListener('scroll', updateDropdownPosition, true);
|
|
57
|
-
window.removeEventListener('resize', updateDropdownPosition);
|
|
58
|
-
};
|
|
59
|
-
}, [isOpen, updateDropdownPosition]);
|
|
60
34
|
// Filtrer les options selon le terme de recherche
|
|
61
35
|
const filteredOptions = options.filter(option => {
|
|
62
36
|
const label = formatOptionLabel ? formatOptionLabel(option) : option.designation;
|
|
@@ -94,15 +68,11 @@ export const SearchableSelect = ({ options, value, onChange, placeholder = 'Sél
|
|
|
94
68
|
return placeholder;
|
|
95
69
|
return getOptionLabel(value);
|
|
96
70
|
};
|
|
97
|
-
return (_jsxs("div", { className: `relative w-full ${className}`, ref: dropdownRef, children: [_jsx("button", {
|
|
71
|
+
return (_jsxs("div", { className: `relative w-full ${className}`, ref: dropdownRef, children: [_jsx("button", { type: "button", onClick: toggleDropdown, disabled: disabled || loading, className: `w-full px-3 py-2 text-left border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors ${error ? 'border-red-300 bg-red-50' : 'border-gray-300'} ${disabled || loading
|
|
98
72
|
? 'bg-gray-100 cursor-not-allowed text-gray-500'
|
|
99
|
-
: 'bg-white text-gray-900 hover:border-gray-400'} ${isOpen ? 'ring-2 ring-blue-500 border-transparent' : ''}`, children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: value ? 'text-gray-900' : 'text-gray-500', children: loading ? 'Chargement...' : getSelectedLabel() }), _jsx("svg", { className: `w-5 h-5 text-gray-400 transition-transform ${isOpen ? 'transform rotate-180' : ''}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] }) }), isOpen && !disabled && !loading &&
|
|
100
|
-
top: dropdownPosition.top,
|
|
101
|
-
left: dropdownPosition.left,
|
|
102
|
-
width: dropdownPosition.width
|
|
103
|
-
}, children: [_jsx("div", { className: "p-2 border-b border-gray-200 bg-gray-50", children: _jsxs("div", { className: "relative", children: [_jsx("svg", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }), _jsx("input", { ref: searchInputRef, type: "text", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), placeholder: searchPlaceholder, className: "w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm" })] }) }), _jsx("div", { className: "overflow-y-auto", style: { maxHeight: '240px' }, children: filteredOptions.length === 0 ? (_jsx("div", { className: "px-4 py-3 text-sm text-gray-500 text-center", children: searchTerm ? `Aucun résultat pour "${searchTerm}"` : noOptionsMessage })) : (_jsx("ul", { className: "py-1", children: filteredOptions.map((option) => {
|
|
73
|
+
: 'bg-white text-gray-900 hover:border-gray-400'} ${isOpen ? 'ring-2 ring-blue-500 border-transparent' : ''}`, children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: value ? 'text-gray-900' : 'text-gray-500', children: loading ? 'Chargement...' : getSelectedLabel() }), _jsx("svg", { className: `w-5 h-5 text-gray-400 transition-transform ${isOpen ? 'transform rotate-180' : ''}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] }) }), isOpen && !disabled && !loading && (_jsxs("div", { className: "absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg", children: [_jsx("div", { className: "p-2 border-b border-gray-200 bg-gray-50", children: _jsxs("div", { className: "relative", children: [_jsx("svg", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }), _jsx("input", { ref: searchInputRef, type: "text", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), placeholder: searchPlaceholder, className: "w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm" })] }) }), _jsx("div", { className: "overflow-y-auto", style: { maxHeight: '240px' }, children: filteredOptions.length === 0 ? (_jsx("div", { className: "px-4 py-3 text-sm text-gray-500 text-center", children: searchTerm ? `Aucun résultat pour "${searchTerm}"` : noOptionsMessage })) : (_jsx("ul", { className: "py-1", children: filteredOptions.map((option) => {
|
|
104
74
|
const isSelected = value?.id === option.id;
|
|
105
75
|
return (_jsx("li", { children: _jsx("button", { type: "button", onMouseDown: (e) => handleSelect(option, e), className: `w-full px-4 py-2 text-left text-sm hover:bg-blue-50 transition-colors ${isSelected ? 'bg-blue-100 text-blue-900 font-medium' : 'text-gray-900'}`, children: getOptionLabel(option) }) }, option.id));
|
|
106
|
-
}) })) })] })
|
|
76
|
+
}) })) })] })), error && (_jsxs("p", { className: "mt-1 text-sm text-red-600 flex items-center", children: [_jsx("svg", { className: "w-4 h-4 mr-1", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }), error] })), required && !value && (_jsx("p", { className: "mt-1 text-xs text-gray-500", children: "Ce champ est obligatoire" }))] }));
|
|
107
77
|
};
|
|
108
78
|
export default SearchableSelect;
|
package/package.json
CHANGED