arengibook 2.4.635 → 2.4.637

package/dist/index.js

@@ -36820,12 +36820,12 @@ var DropdownPresets = {
   }
 };
 
-var simulateNetworkDelay$1 = function simulateNetworkDelay() {
+var simulateNetworkDelay = function simulateNetworkDelay() {
   return new Promise(function (res) {
     return setTimeout(res, 400);
   });
 };
-var createFakeOptions$1 = function createFakeOptions(start, length) {
+var createFakeOptions = function createFakeOptions(start, length) {
   var options = [];
   for (var i = start; i < start + length; i++) {
     options.push({
@@ -36854,9 +36854,9 @@ var DropdownSelectMetaAsyncPresets = {
               search = _args.length > 0 && _args[0] !== undefined ? _args[0] : '';
               _ref = _args.length > 2 ? _args[2] : undefined, page = _ref.page;
               _context.n = 1;
-              return simulateNetworkDelay$1();
+              return simulateNetworkDelay();
             case 1:
-              allOptions = createFakeOptions$1(0, 100);
+              allOptions = createFakeOptions(0, 100);
               filtered = allOptions.filter(function (opt) {
                 return opt.label.toLowerCase().includes(search.toLowerCase());
               });
@@ -39088,6 +39088,7 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
     optionLabel = _ref$optionLabel === void 0 ? 'label' : _ref$optionLabel,
     _ref$optionValue = _ref.optionValue,
     optionValue = _ref$optionValue === void 0 ? 'value' : _ref$optionValue,
+    optionsUrl = _ref.optionsUrl,
     _ref$valueStyle = _ref.valueStyle,
     valueStyle = _ref$valueStyle === void 0 ? {} : _ref$valueStyle,
     _ref$filter = _ref.filter,
@@ -39117,40 +39118,154 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
     _useState4 = _slicedToArray$9(_useState3, 2),
     loadedOptions = _useState4[0],
     setLoadedOptions = _useState4[1];
-  var _useState5 = useState(''),
-    _useState6 = _slicedToArray$9(_useState5, 2),
-    inputValue = _useState6[0];
-    _useState6[1];
   var multiSelectRef = useRef(null);
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray$9(_useState7, 2),
-    loading = _useState8[0],
-    setLoading = _useState8[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray$9(_useState5, 2),
+    loading = _useState6[0],
+    setLoading = _useState6[1];
   var loadLazyTimeout = useRef();
   var currentPageRef = useRef(1);
   var isOptionsArray = Array.isArray(options);
+  var clickedFromList = useRef(false);
+  var fetchOptionsFromUrl = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+      var search,
+        _ref3,
+        _ref3$page,
+        page,
+        queryParams,
+        response,
+        data,
+        items,
+        filteredItems,
+        pageSize,
+        start,
+        paginatedItems,
+        mappedOptions,
+        _args = arguments,
+        _t;
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.n) {
+          case 0:
+            search = _args.length > 0 && _args[0] !== undefined ? _args[0] : '';
+            _ref3 = _args.length > 2 ? _args[2] : undefined, _ref3$page = _ref3.page, page = _ref3$page === void 0 ? 1 : _ref3$page;
+            _context.p = 1;
+            // Construction de l'URL avec les paramètres de pagination et de recherche
+            queryParams = new URLSearchParams();
+            if (search) queryParams.append('search', search);
+            queryParams.append('page', page);
+            queryParams.append('pageSize', 30);
+            _context.n = 2;
+            return fetch("".concat(optionsUrl, "?").concat(queryParams.toString()));
+          case 2:
+            response = _context.v;
+            if (response.ok) {
+              _context.n = 3;
+              break;
+            }
+            throw new Error("Erreur HTTP: ".concat(response.status));
+          case 3:
+            _context.n = 4;
+            return response.json();
+          case 4:
+            data = _context.v;
+            // Récupération des données paginées ou filtrées
+            // (adaptez cette partie si votre API retourne les données dans un champ spécifique, comme `data.results`)
+            items = Array.isArray(data) ? data : data.results || data.items || []; // Filtrage côté client si nécessaire
+            filteredItems = search ? items.filter(function (item) {
+              return String(item[optionLabel]).toLowerCase().includes(search.toLowerCase());
+            }) : items; // Pagination côté client
+            pageSize = 30;
+            start = (page - 1) * pageSize;
+            paginatedItems = filteredItems.slice(start, start + pageSize); // Mapping dynamique des champs
+            mappedOptions = paginatedItems.map(function (item) {
+              var option = _objectSpread2({}, item);
+              // Si optionLabel et optionValue sont différents des clés par défaut
+              option.label = item[optionLabel];
+              option.value = item[optionValue];
+              return option;
+            });
+            return _context.a(2, {
+              options: mappedOptions,
+              hasMore: start + pageSize < filteredItems.length,
+              additional: {
+                page: page + 1
+              }
+            });
+          case 5:
+            _context.p = 5;
+            _t = _context.v;
+            console.error("Erreur lors de la récupération des options :", _t);
+            return _context.a(2, {
+              options: [],
+              hasMore: false
+            });
+        }
+      }, _callee, null, [[1, 5]]);
+    }));
+    return function fetchOptionsFromUrl() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var numObjValue = Array.isArray(objValue) ? objValue.map(function (opt) {
+    return _objectSpread2(_objectSpread2({}, opt), {}, _defineProperty$b({}, optionValue, typeof opt[optionValue] === 'string' ? parseInt(opt[optionValue], 10) : opt[optionValue]));
+  }) : [];
+  var numValue = function numValue() {
+    if (value && Array.isArray(value) && value.length) {
+      return value;
+    } else if (objValue && Array.isArray(objValue) && objValue.length) {
+      return objValue.map(function (opt) {
+        return parseInt(opt.value);
+      });
+    } else {
+      return [];
+    }
+  };
   useEffect(function () {
-    setSelectedOptions(objValue ? _toConsumableArray$7(objValue.map(function (opt) {
-      return opt[optionValue];
-    })) : value !== null && value !== void 0 ? value : []);
-    console.log(objValue ? _toConsumableArray$7(objValue.map(function (opt) {
+    var _numValue;
+    setSelectedOptions(numObjValue && Array.isArray(numObjValue) && numObjValue.length ? numObjValue.map(function (opt) {
       return opt[optionValue];
-    })) : value !== null && value !== void 0 ? value : []);
+    }) : (_numValue = numValue()) !== null && _numValue !== void 0 ? _numValue : []);
     var loadInitialOptions = /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
-        var result, _result$options, exists;
-        return _regenerator().w(function (_context) {
-          while (1) switch (_context.n) {
+      var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+        var _result;
+        var result, _result2, exists;
+        return _regenerator().w(function (_context2) {
+          while (1) switch (_context2.n) {
             case 0:
-              _context.n = 1;
+              if (!(typeof options === 'function')) {
+                _context2.n = 2;
+                break;
+              }
+              _context2.n = 1;
               return options('', [], {
                 page: 1
               });
             case 1:
-              result = _context.v;
-              setLoadedOptions((result === null || result === void 0 ? void 0 : result.options) || []);
+              result = _context2.v;
+              _context2.n = 5;
+              break;
+            case 2:
+              if (!optionsUrl) {
+                _context2.n = 4;
+                break;
+              }
+              _context2.n = 3;
+              return fetchOptionsFromUrl('', [], {
+                page: 1
+              });
+            case 3:
+              result = _context2.v;
+              _context2.n = 5;
+              break;
+            case 4:
+              result = {
+                options: []
+              };
+            case 5:
+              setLoadedOptions(((_result = result) === null || _result === void 0 ? void 0 : _result.options) || []);
               if (objValue) {
-                exists = result === null || result === void 0 || (_result$options = result.options) === null || _result$options === void 0 ? void 0 : _result$options.some(function (opt) {
+                exists = (_result2 = result) === null || _result2 === void 0 || (_result2 = _result2.options) === null || _result2 === void 0 ? void 0 : _result2.some(function (opt) {
                   return opt[optionValue] === objValue[optionValue];
                 });
                 if (!exists) {
@@ -39159,17 +39274,17 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
                   });
                 }
               }
-            case 2:
-              return _context.a(2);
+            case 6:
+              return _context2.a(2);
           }
-        }, _callee);
+        }, _callee2);
       }));
       return function loadInitialOptions() {
-        return _ref2.apply(this, arguments);
+        return _ref4.apply(this, arguments);
       };
     }();
     loadInitialOptions();
-  }, [options]);
+  }, [options, optionsUrl]);
   useEffect(function () {
     var observer = new MutationObserver(function () {
       var panel = document.querySelector('.p-multiselect-panel.p-component');
@@ -39206,13 +39321,17 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
   };
   var optionTemplate = function optionTemplate(option) {
     if (!option) return null;
-    var _ref3 = selectMetaConfig || {};
-      _ref3.labelStyle;
-      var generalIcon = _ref3.generalIcon;
+    console.log(option);
+    var _ref5 = selectMetaConfig || {};
+      _ref5.labelStyle;
+      var generalIcon = _ref5.generalIcon;
     var styleLabel = {
       marginLeft: '10px'
     };
     return /*#__PURE__*/React__default.createElement("div", {
+      onClick: function onClick() {
+        clickedFromList.current = true;
+      },
       style: _objectSpread2({
         fontFamily: 'Arial',
         fontSize: '14px',
@@ -39229,16 +39348,16 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
       style: styleLabel
     }, option[optionLabel]));
   };
-  var selectedItemTemplate = function selectedItemTemplate(optionValue, index) {
+  var selectedItemTemplate = function selectedItemTemplate(paramValue, index) {
     var selectedOption = loadedOptions.find(function (opt) {
-      return opt.value === optionValue;
+      return opt[optionValue] === paramValue;
     });
     if (!selectedOption) return null;
     // const isLastItem = index === selectedOptions.length - 1;
     var handleRemove = function handleRemove(e) {
       e.stopPropagation();
       var newSelectedOptions = selectedOptions.filter(function (opt) {
-        return opt !== optionValue;
+        return opt !== paramValue;
       });
       setSelectedOptions(newSelectedOptions);
       if (onChange) onChange(newSelectedOptions);
@@ -39272,20 +39391,45 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
     if (loadLazyTimeout.current) {
       clearTimeout(loadLazyTimeout.current);
     }
-    loadLazyTimeout.current = setTimeout(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+    loadLazyTimeout.current = setTimeout(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
+      var _result3;
       var first, last, _items, result, newOptions, i, virtualscroll;
-      return _regenerator().w(function (_context2) {
-        while (1) switch (_context2.n) {
+      return _regenerator().w(function (_context3) {
+        while (1) switch (_context3.n) {
           case 0:
             first = event.first, last = event.last;
             _items = _toConsumableArray$7(loadedOptions);
-            _context2.n = 1;
-            return options(inputValue, [], {
+            if (!(typeof options === 'function')) {
+              _context3.n = 2;
+              break;
+            }
+            _context3.n = 1;
+            return options("", [], {
               page: currentPageRef.current + 1
             });
           case 1:
-            result = _context2.v;
-            newOptions = (result === null || result === void 0 ? void 0 : result.options) || [];
+            result = _context3.v;
+            _context3.n = 5;
+            break;
+          case 2:
+            if (!optionsUrl) {
+              _context3.n = 4;
+              break;
+            }
+            _context3.n = 3;
+            return fetchOptionsFromUrl("", [], {
+              page: currentPageRef.current + 1
+            });
+          case 3:
+            result = _context3.v;
+            _context3.n = 5;
+            break;
+          case 4:
+            result = {
+              options: []
+            };
+          case 5:
+            newOptions = ((_result3 = result) === null || _result3 === void 0 ? void 0 : _result3.options) || [];
             for (i = first; i < last; i++) {
               if (!_items[i] && newOptions[i - first]) {
                 _items[i] = newOptions[i - first];
@@ -39294,16 +39438,15 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
             setLoadedOptions(_items);
             setLoading(false);
             currentPageRef.current += 1;
-
-            // redimensionnement du conteneur
+            // Redimensionnement du conteneur
             virtualscroll = document.querySelector('.p-virtualscroller.p-dropdown-items-wrapper');
             if (virtualscroll) {
               virtualscroll.style.height = "auto";
             }
-          case 2:
-            return _context2.a(2);
+          case 6:
+            return _context3.a(2);
         }
-      }, _callee2);
+      }, _callee3);
     })), 500);
   };
   return /*#__PURE__*/React__default.createElement("div", {
@@ -39665,11 +39808,6 @@ var MultiSelect = function MultiSelect(props) {
   }, errorMessage || 'Sélection invalide')));
 };
 
-var simulateNetworkDelay = function simulateNetworkDelay() {
-  return new Promise(function (res) {
-    return setTimeout(res, 400);
-  });
-};
 var optionsExample = [{
   label: 'New York',
   value: 'NY'
@@ -39756,17 +39894,6 @@ var syncOptions$1 = [{
   value: '5',
   color: '#ec4899'
 }];
-var createFakeOptions = function createFakeOptions(start, length) {
-  var options = [];
-  for (var i = start; i < start + length; i++) {
-    options.push({
-      value: i,
-      label: "Option ".concat(i),
-      color: 'black'
-    });
-  }
-  return options;
-};
 var MultiSelectPresets = {
   Default: {
     placeholder: 'Sélectionnez des options',
@@ -39851,81 +39978,37 @@ var MultiSelectPresets = {
   // Configuration pour les options asynchrones
   SelectMetaAsync: {
     isSelectMeta: true,
+    // value: [9, 4],
+    // objValue: [{ label: 'Option 9', value: 9, color: "#67688C" }, { label: 'Option 4', value: 4, color: "#39C9BF" }],
+    // options: async (search = '', _, { page }) => {
+    //     await simulateNetworkDelay();
+    //     const allOptions = createFakeOptions(0, 100);
+    //     const filtered = allOptions.filter(opt =>
+    //         opt.label.toLowerCase().includes(search.toLowerCase())
+    //     );
+    //     const pageSize = 30;
+    //     const start = (page - 1) * pageSize;
+    //     return {
+    //         options: filtered.slice(start, start + pageSize),
+    //         hasMore: start + pageSize < filtered.length,
+    //         additional: { page: page + 1 },
+    //     };
+    // },
+    // optionLabel: 'label',
+    // optionValue: 'value',
+
+    value: [3, 4],
     objValue: [{
-      label: 'Option 9',
-      value: 9,
-      color: "#67688C"
+      name: 'Clementine Bauch',
+      id: 3
     }, {
-      label: 'Option 4',
-      value: 4,
-      color: "#39C9BF"
+      name: 'Patricia Lebsack',
+      id: 4
     }],
-    // objValue: [
-    //     {
-    //         "id": 2299,
-    //         "nom": "Economique",
-    //         "color": "#62BAC0",
-    //         "label": "Economique",
-    //         "value": 2299
-    //     },
-    //     {
-    //         "id": 2300,
-    //         "nom": "Financière",
-    //         "color": "#40839E",
-    //         "label": "Financière",
-    //         "value": 2300
-    //     },
-    //     {
-    //         "id": 2301,
-    //         "nom": "Données bancaires",
-    //         "color": "#E5E798",
-    //         "label": "Données bancaires",
-    //         "value": 2301
-    //     }
-    // ],
-    // value: ['3', '4'],
-    options: function () {
-      var _options = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
-        var search,
-          _ref3,
-          page,
-          allOptions,
-          filtered,
-          pageSize,
-          start,
-          _args2 = arguments;
-        return _regenerator().w(function (_context2) {
-          while (1) switch (_context2.n) {
-            case 0:
-              search = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : '';
-              _ref3 = _args2.length > 2 ? _args2[2] : undefined, page = _ref3.page;
-              _context2.n = 1;
-              return simulateNetworkDelay();
-            case 1:
-              allOptions = createFakeOptions(0, 100);
-              filtered = allOptions.filter(function (opt) {
-                return opt.label.toLowerCase().includes(search.toLowerCase());
-              });
-              pageSize = 30;
-              start = (page - 1) * pageSize;
-              return _context2.a(2, {
-                options: filtered.slice(start, start + pageSize),
-                hasMore: start + pageSize < filtered.length,
-                additional: {
-                  page: page + 1
-                }
-              });
-          }
-        }, _callee2);
-      }));
-      function options() {
-        return _options.apply(this, arguments);
-      }
-      return options;
-    }(),
+    optionsUrl: "https://jsonplaceholder.typicode.com/users",
+    optionLabel: 'name',
+    optionValue: 'id',
     placeholder: 'Sélectionnez une ou plusieurs options',
-    optionLabel: 'label',
-    optionValue: 'value',
     valueStyle: {
       marginRight: '15px',
       marginBottom: '5px'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "arengibook",
   "private": false,
-  "version": "2.4.635",
+  "version": "2.4.637",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "exports": {