arengibook 2.4.607 → 2.4.609

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useContext, useEffect, useState, useRef, forwardRef, Fragment } from 'react';
+import React__default, { useContext, useEffect, useState, useRef, forwardRef, Fragment, useMemo } from 'react';
 import ReactDOM from 'react-dom';
 
 function _arrayWithHoles$d(r) {
@@ -36027,9 +36027,36 @@ var Dropdown = function Dropdown(_ref) {
     _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) {
-      console.log("objValue");
       setValueToOptionMap(objValue);
     }
     var handleScroll = function handleScroll(e) {
@@ -36206,6 +36233,57 @@ 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;
@@ -36329,10 +36407,54 @@ 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,
@@ -36347,10 +36469,28 @@ 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
   }, isGroupedOption && {
     optionGroupLabel: 'label',
     optionGroupChildren: 'items'
@@ -36499,7 +36639,7 @@ var DropdownPresets = {
     placeholder: 'Sélectionnez une couleur',
     options: optionsWithColors,
     isSelectMeta: true,
-    editable: true,
+    editable: false,
     selectMetaConfig: {
       generalIcon: 'pi pi-circle-fill'
     },
@@ -36514,14 +36654,9 @@ var DropdownPresets = {
     }
   },
   SelectMetaAsyncLoad: {
-    editable: true,
-    // value: 2,
-    objValue: {
-      label: 'Option 2',
-      value: 2,
-      color: '#000000'
-    },
-    // simule un affichage direct de l'option dans l'input si celle-ci a été enregistrée (si options asynchrones uniquement
+    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
     options: function () {
       var _options = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(search, loadedOptions, _ref) {
         var page, length, start, data;

package/package.json

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