arengibook 2.4.609 → 2.4.610

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useContext, useEffect, useState, useRef, forwardRef, Fragment, useMemo } from 'react';
+import React__default, { useContext, useEffect, useState, useRef, forwardRef, Fragment } from 'react';
 import ReactDOM from 'react-dom';
 
 function _arrayWithHoles$d(r) {
@@ -35963,7 +35963,7 @@ var Dropdown = function Dropdown(_ref) {
     _ref$objValue = _ref.objValue,
     objValue = _ref$objValue === void 0 ? null : _ref$objValue,
     _ref$placeholder = _ref.placeholder,
-    placeholder = _ref$placeholder === void 0 ? null : _ref$placeholder,
+    placeholder = _ref$placeholder === void 0 ? 'Sélectionnez une option' : _ref$placeholder,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$filter = _ref.filter,
@@ -35984,8 +35984,6 @@ var Dropdown = function Dropdown(_ref) {
     onChange = _ref.onChange,
     _ref$optionStyle = _ref.optionStyle,
     optionStyle = _ref$optionStyle === void 0 ? {} : _ref$optionStyle,
-    _ref$editable = _ref.editable,
-    editable = _ref$editable === void 0 ? false : _ref$editable,
     name = _ref.name,
     _ref$showClear = _ref.showClear,
     showClear = _ref$showClear === void 0 ? false : _ref$showClear,
@@ -36020,42 +36018,14 @@ var Dropdown = function Dropdown(_ref) {
     _useState6 = _slicedToArray$8(_useState5, 2),
     loadedOptions = _useState6[0],
     setLoadedOptions = _useState6[1];
-  var isOptionLoadFunction = typeof options === 'function'; // (détecte si l'option est une fonction donc fonction asynchrone)
+  var isOptionLoadFunction = typeof options === 'function';
   var filterRef = useRef('');
   var dropdownRef = useRef(null);
   var _useState7 = useState(null),
     _useState8 = _slicedToArray$8(_useState7, 2),
     valueToOptionMap = _useState8[0],
     setValueToOptionMap = _useState8[1];
-  var _useState9 = useState(20),
-    _useState0 = _slicedToArray$8(_useState9, 2),
-    inputWidth = _useState0[0];
-    _useState0[1]; // largeur initiale minimale
-
   useEffect(function () {
-    // const editableFunction = () => {
-    //     if (editable) {
-    //         const hiddenInput= document.getElementsByClassName("p-dropdown-label");
-    //         hiddenInput[0].setAttribute('type', 'hidden');
-    //
-    //         const editableDiv = document.createElement('div');
-    //         editableDiv.contentEditable = 'true';
-    //         editableDiv.textContent = 'Mon texte ici';
-    //
-    //
-    //         editableDiv.style.display = 'inline-block';
-    //         editableDiv.style.width = 'auto';
-    //         editableDiv.style.padding = '6px 10px';
-    //         editableDiv.style.color = 'green';
-    //         editableDiv.style.backgroundColor = 'gray';
-    //         editableDiv.style.borderRadius = '20px';
-    //         editableDiv.style.fontSize = '16px';
-    //         editableDiv.style.outline = 'none';
-    //         hiddenInput[0].parentNode.insertBefore(editableDiv, hiddenInput[0]);
-    //     }
-    // }
-    // editableFunction();
-
     if (isOptionLoadFunction && objValue && isSelectMeta) {
       setValueToOptionMap(objValue);
     }
@@ -36088,9 +36058,7 @@ var Dropdown = function Dropdown(_ref) {
               setLoading(true);
               _context.p = 1;
               _context.n = 2;
-              return options('', [], {
-                page: 1
-              });
+              return options();
             case 2:
               result = _context.v;
               setLoadedOptions(Array.isArray(result.options) ? result.options : []);
@@ -36233,57 +36201,6 @@ var Dropdown = function Dropdown(_ref) {
       }, (option === null || option === void 0 ? void 0 : option[optionLabel]) || placeholder);
     }
   };
-
-  // const valueTemplate = (option) => {
-  //     if (isSelectMeta) {
-  //         if (objValue === null) {
-  //             const iconColor = option?.color ? inverseColor(option?.color) : '#FFFFFF';
-  //             return (<span ref={dropdownRef}>
-  //                             <div
-  //                                 className={'badge select-badge'}
-  //                                 style={{
-  //                                     backgroundColor: option?.color,
-  //                                     color: iconColor,
-  //                                     padding: '0.5rem',
-  //                                     display: 'inline-block',
-  //                                     ...valueStyle,
-  //                                 }}
-  //                             >
-  //                                 {option?.[optionLabel] ? (
-  //                                     <span style={{ color: iconColor }}>{option?.[optionLabel]}</span>
-  //                                 ) : (
-  //                                     <span style={{ color: '#000000' }}>{placeholder}</span>
-  //                                 )}
-  //                             </div>
-  //                     </span>)
-  //         } else if (objValue && valueToOptionMap && typeof objValue === 'object') {
-  //             const mappedOption = valueToOptionMap;
-  //             const iconColor = mappedOption.color ? inverseColor(mappedOption.color) : '#FFFFFF';
-  //             return (
-  //                 <div
-  //                     className={'badge select-badge'}
-  //                     style={{
-  //                         backgroundColor: mappedOption.color,
-  //                         color: iconColor,
-  //                         padding: '0.5rem',
-  //                         display: 'inline-block',
-  //                         ...valueStyle,
-  //                     }}
-  //                 >
-  //                     <span style={{ color: iconColor }}>{mappedOption.label}</span>
-  //                 </div>
-  //             );
-  //         }
-  //
-  //
-  //     } else {
-  //         return (
-  //             <span style={{ fontFamily: 'Arial', fontSize: '14px', ...valueStyle }}>
-  //                 {option?.[optionLabel] || placeholder}
-  //             </span>
-  //         );
-  //     }
-  // };
   var onLazyLoad = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(event) {
       var _event$filter;
@@ -36291,7 +36208,7 @@ var Dropdown = function Dropdown(_ref) {
       return _regenerator().w(function (_context2) {
         while (1) switch (_context2.n) {
           case 0:
-            if (!(!isOptionLoadFunction || loading)) {
+            if (isOptionLoadFunction) {
               _context2.n = 1;
               break;
             }
@@ -36407,54 +36324,10 @@ var Dropdown = function Dropdown(_ref) {
       }, option.label)));
     }
   };
-
-  // 🔍 Trouver l’option actuelle (comme valueTemplate)
-  var currentOption = useMemo(function () {
-    var allOptions = Array.isArray(loadedOptions) ? loadedOptions : [];
-    return allOptions.find(function (opt) {
-      return opt[optionValue] === optionSelected;
-    }) || null;
-  }, [loadedOptions, optionSelected, optionValue]);
-  var getTextWidth = function getTextWidth(text, font) {
-    var span = document.createElement('span');
-    span.style.visibility = 'hidden';
-    span.style.whiteSpace = 'pre';
-    span.style.position = 'absolute';
-    span.style.font = font;
-    span.textContent = text || '';
-    document.body.appendChild(span);
-    var width = span.offsetWidth;
-    document.body.removeChild(span);
-    return width + 16;
-  };
-  var editableInputStyle = useMemo(function () {
-    if (!editable) return {};
-    var bg = (currentOption === null || currentOption === void 0 ? void 0 : currentOption.color) || '#FFFFFF';
-    var iconColor = currentOption !== null && currentOption !== void 0 && currentOption.color ? inverseColor(currentOption.color) : '#000000';
-    return _objectSpread2({
-      backgroundColor: bg,
-      color: iconColor,
-      padding: '0.5rem',
-      borderRadius: '1rem',
-      width: getTextWidth(currentOption === null || currentOption === void 0 ? void 0 : currentOption.label),
-      marginRight: '16px'
-    }, valueStyle);
-  }, [editable, currentOption, inputWidth, valueStyle]);
-  var handleEditableChange = function handleEditableChange(e) {
-    var text = e.target.value;
-    if (!text || text.trim() === "") {
-      setOptionSelected(null);
-      if (onChange) onChange(null);
-    } else {
-      setOptionSelected(text);
-      if (onChange) onChange(text);
-    }
-  };
   return /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-col gap-1"
   }, /*#__PURE__*/React__default.createElement(Dropdown$1, _extends$A({
     value: optionSelected,
-    valueTemplate: valueTemplate,
     options: loadedOptions,
     onChange: handleChange,
     placeholder: placeholder,
@@ -36469,39 +36342,20 @@ var Dropdown = function Dropdown(_ref) {
       overflowY: 'auto'
     },
     itemTemplate: optionTemplate,
+    valueTemplate: valueTemplate,
     showClear: showClear,
-    optionGroupTemplate: isGroupedOption ? groupedItemTemplate : null,
-    editable: editable
-  }, editable && {
-    editable: editable,
-    pt: {
-      input: {
-        className: 'badge select-badge',
-        style: editableInputStyle
-      },
-      root: {
-        style: {
-          border: '1px solid #ccc',
-          width: '100%',
-          display: 'inline-flex',
-          alignItems: 'center',
-          justifyContent: 'flex-start',
-          padding: '0.25rem 0.5rem'
-        }
-      }
-    },
-    onInput: handleEditableChange
+    optionGroupTemplate: isGroupedOption ? groupedItemTemplate : null
   }, isGroupedOption && {
     optionGroupLabel: 'label',
     optionGroupChildren: 'items'
   }, (isSelectMeta || isOptionLoadFunction) && {
     virtualScrollerOptions: {
-      showLoader: true,
+      lazy: true,
       onLazyLoad: onLazyLoad,
       itemSize: 38,
-      totalrecords: loadedOptions.length + 50,
+      showLoader: true,
       loading: loading,
-      lazy: true
+      delay: 250
     }
   })), name && /*#__PURE__*/React__default.createElement("input", {
     type: "hidden",
@@ -36639,7 +36493,6 @@ var DropdownPresets = {
     placeholder: 'Sélectionnez une couleur',
     options: optionsWithColors,
     isSelectMeta: true,
-    editable: false,
     selectMetaConfig: {
       generalIcon: 'pi pi-circle-fill'
     },
@@ -36654,9 +36507,9 @@ var DropdownPresets = {
     }
   },
   SelectMetaAsyncLoad: {
-    editable: false,
-    value: 3,
-    // objValue: { label: 'Option 3', value: 3, color: '#000000' }, // simule un affichage direct de l'option dans l'input si celle-ci a été enregistrée (si options asynchrones uniquement
+    placeholder: 'Chargement distant simulé',
+    value: 20,
+    // objValue: { label: 'Option 2', value: 2, color: 'green' }, // simule un affichage direct de l'option dans l'input si celle-ci a été enregistrée (si options asynchrones uniquement
     options: function () {
       var _options = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(search, loadedOptions, _ref) {
         var page, length, start, data;
@@ -36664,7 +36517,7 @@ var DropdownPresets = {
           while (1) switch (_context.n) {
             case 0:
               page = _ref.page;
-              length = 20;
+              length = 2;
               start = (page - 1) * length; // Simule un délai réseau
               _context.n = 1;
               return new Promise(function (res) {

package/package.json

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