@rsuci/shared-form-components 1.0.4 → 1.0.5
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.
|
@@ -1 +1 @@
|
|
|
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,
|
|
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"}
|
|
@@ -17,9 +17,14 @@ export const SearchableSelect = ({ options, value, onChange, placeholder = 'Sél
|
|
|
17
17
|
setSearchTerm('');
|
|
18
18
|
}
|
|
19
19
|
};
|
|
20
|
-
|
|
20
|
+
if (isOpen) {
|
|
21
|
+
// Utiliser un délai pour éviter le conflit avec le clic sur une option
|
|
22
|
+
setTimeout(() => {
|
|
23
|
+
document.addEventListener('mousedown', handleClickOutside);
|
|
24
|
+
}, 0);
|
|
25
|
+
}
|
|
21
26
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
|
22
|
-
}, []);
|
|
27
|
+
}, [isOpen]);
|
|
23
28
|
// Focus sur le champ de recherche quand le dropdown s'ouvre
|
|
24
29
|
useEffect(() => {
|
|
25
30
|
if (isOpen && searchInputRef.current) {
|
|
@@ -34,7 +39,9 @@ export const SearchableSelect = ({ options, value, onChange, placeholder = 'Sél
|
|
|
34
39
|
(option.code && option.code.toLowerCase().includes(searchLower)));
|
|
35
40
|
});
|
|
36
41
|
// Gérer la sélection d'une option
|
|
37
|
-
const handleSelect = (option) => {
|
|
42
|
+
const handleSelect = (option, event) => {
|
|
43
|
+
event.preventDefault();
|
|
44
|
+
event.stopPropagation();
|
|
38
45
|
onChange(option);
|
|
39
46
|
setIsOpen(false);
|
|
40
47
|
setSearchTerm('');
|
|
@@ -65,7 +72,7 @@ export const SearchableSelect = ({ options, value, onChange, placeholder = 'Sél
|
|
|
65
72
|
? 'bg-gray-100 cursor-not-allowed text-gray-500'
|
|
66
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 max-h-80 overflow-hidden", 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 max-h-60", 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) => {
|
|
67
74
|
const isSelected = value?.id === option.id;
|
|
68
|
-
return (_jsx("li", { children: _jsx("button", { type: "button",
|
|
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));
|
|
69
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" }))] }));
|
|
70
77
|
};
|
|
71
78
|
export default SearchableSelect;
|
|
@@ -30,11 +30,11 @@ export declare function resolveParentValue(variable: any, reponses: Record<strin
|
|
|
30
30
|
* Détermine l'endpoint API selon le type de variable et l'ID du parent
|
|
31
31
|
* @param variableType - Type de la variable (DISTRICT, REGION, DEPARTEMENT, etc.)
|
|
32
32
|
* @param parentId - ID du parent (optionnel)
|
|
33
|
-
* @param defaultCountryCode - Code pays par défaut pour DISTRICT (
|
|
33
|
+
* @param defaultCountryCode - Code pays par défaut pour DISTRICT (non utilisé, gardé pour compatibilité)
|
|
34
34
|
* @returns Endpoint API ou null si invalide
|
|
35
35
|
*
|
|
36
36
|
* @example
|
|
37
|
-
* getApiEndpoint('DISTRICT') // Returns: '/api/v1/Districts/
|
|
37
|
+
* getApiEndpoint('DISTRICT') // Returns: '/api/v1/Districts/select'
|
|
38
38
|
* getApiEndpoint('REGION', 1) // Returns: '/api/v1/Regions/1/select'
|
|
39
39
|
* getApiEndpoint('REGION') // Returns: null (parent requis mais absent)
|
|
40
40
|
*/
|
|
@@ -64,11 +64,11 @@ export function resolveParentValue(variable, reponses) {
|
|
|
64
64
|
* Détermine l'endpoint API selon le type de variable et l'ID du parent
|
|
65
65
|
* @param variableType - Type de la variable (DISTRICT, REGION, DEPARTEMENT, etc.)
|
|
66
66
|
* @param parentId - ID du parent (optionnel)
|
|
67
|
-
* @param defaultCountryCode - Code pays par défaut pour DISTRICT (
|
|
67
|
+
* @param defaultCountryCode - Code pays par défaut pour DISTRICT (non utilisé, gardé pour compatibilité)
|
|
68
68
|
* @returns Endpoint API ou null si invalide
|
|
69
69
|
*
|
|
70
70
|
* @example
|
|
71
|
-
* getApiEndpoint('DISTRICT') // Returns: '/api/v1/Districts/
|
|
71
|
+
* getApiEndpoint('DISTRICT') // Returns: '/api/v1/Districts/select'
|
|
72
72
|
* getApiEndpoint('REGION', 1) // Returns: '/api/v1/Regions/1/select'
|
|
73
73
|
* getApiEndpoint('REGION') // Returns: null (parent requis mais absent)
|
|
74
74
|
*/
|
|
@@ -76,8 +76,8 @@ export function getApiEndpoint(variableType, parentId, defaultCountryCode = 'CIV
|
|
|
76
76
|
const type = variableType?.toUpperCase();
|
|
77
77
|
switch (type) {
|
|
78
78
|
case 'DISTRICT':
|
|
79
|
-
// Pour DISTRICT,
|
|
80
|
-
return `/api/v1/Districts
|
|
79
|
+
// Pour DISTRICT, pas besoin de code pays dans l'URL
|
|
80
|
+
return `/api/v1/Districts/select`;
|
|
81
81
|
case 'REGION':
|
|
82
82
|
return parentId ? `/api/v1/Regions/${parentId}/select` : null;
|
|
83
83
|
case 'DEPARTEMENT':
|
package/package.json
CHANGED