arengibook 2.4.607 → 2.4.608

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) {
@@ -36158,44 +36185,43 @@ var Dropdown = function Dropdown(_ref) {
   };
   var valueTemplate = function valueTemplate(option) {
     if (isSelectMeta) {
-      if (objValue && valueToOptionMap && _typeof$a(objValue) === 'object') {
-        var mappedOption = valueToOptionMap;
-        var iconColor = mappedOption.color ? inverseColor(mappedOption.color) : '#FFFFFF';
-        return /*#__PURE__*/React__default.createElement("div", {
-          className: 'badge select-badge',
-          style: _objectSpread2({
-            backgroundColor: mappedOption.color,
-            color: iconColor,
-            padding: '0.5rem',
-            display: 'inline-block'
-          }, valueStyle)
-        }, /*#__PURE__*/React__default.createElement("span", {
-          style: {
-            color: iconColor
-          }
-        }, mappedOption.label));
-      }
       if (objValue === null) {
-        var _iconColor = option !== null && option !== void 0 && option.color ? inverseColor(option === null || option === void 0 ? void 0 : option.color) : '#FFFFFF';
+        var iconColor = option !== null && option !== void 0 && option.color ? inverseColor(option === null || option === void 0 ? void 0 : option.color) : '#FFFFFF';
         return /*#__PURE__*/React__default.createElement("span", {
           ref: dropdownRef
         }, /*#__PURE__*/React__default.createElement("div", {
           className: 'badge select-badge',
           style: _objectSpread2({
             backgroundColor: option === null || option === void 0 ? void 0 : option.color,
-            color: _iconColor,
+            color: iconColor,
             padding: '0.5rem',
             display: 'inline-block'
           }, valueStyle)
         }, option !== null && option !== void 0 && option[optionLabel] ? /*#__PURE__*/React__default.createElement("span", {
           style: {
-            color: _iconColor
+            color: iconColor
           }
         }, option === null || option === void 0 ? void 0 : option[optionLabel]) : /*#__PURE__*/React__default.createElement("span", {
           style: {
             color: '#000000'
           }
         }, placeholder)));
+      } else if (objValue && valueToOptionMap && _typeof$a(objValue) === 'object') {
+        var mappedOption = valueToOptionMap;
+        var _iconColor = mappedOption.color ? inverseColor(mappedOption.color) : '#FFFFFF';
+        return /*#__PURE__*/React__default.createElement("div", {
+          className: 'badge select-badge',
+          style: _objectSpread2({
+            backgroundColor: mappedOption.color,
+            color: _iconColor,
+            padding: '0.5rem',
+            display: 'inline-block'
+          }, valueStyle)
+        }, /*#__PURE__*/React__default.createElement("span", {
+          style: {
+            color: _iconColor
+          }
+        }, mappedOption.label));
       }
     } else {
       return /*#__PURE__*/React__default.createElement("span", {
@@ -36329,10 +36355,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 +36417,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 +36587,7 @@ var DropdownPresets = {
     placeholder: 'Sélectionnez une couleur',
     options: optionsWithColors,
     isSelectMeta: true,
-    editable: true,
+    editable: false,
     selectMetaConfig: {
       generalIcon: 'pi pi-circle-fill'
     },
@@ -36514,14 +36602,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.608",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "exports": {