arengibook 2.4.585 → 2.4.587

package/dist/index.js

@@ -35801,196 +35801,223 @@ var PopupPresets = {
 var Dropdown = function Dropdown(_ref) {
   var _ref$options = _ref.options,
     options = _ref$options === void 0 ? [] : _ref$options,
-    _ref$isGroupedOption = _ref.isGroupedOption,
-    isGroupedOption = _ref$isGroupedOption === void 0 ? false : _ref$isGroupedOption,
     value = _ref.value,
     _ref$placeholder = _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,
-    filter = _ref$filter === void 0 ? false : _ref$filter,
-    _ref$optionLabel = _ref.optionLabel,
-    optionLabel = _ref$optionLabel === void 0 ? 'label' : _ref$optionLabel,
-    _ref$optionValue = _ref.optionValue,
-    optionValue = _ref$optionValue === void 0 ? 'value' : _ref$optionValue,
-    _ref$invalid = _ref.invalid,
-    invalid = _ref$invalid === void 0 ? false : _ref$invalid,
-    _ref$errorMessage = _ref.errorMessage,
-    errorMessage = _ref$errorMessage === void 0 ? '' : _ref$errorMessage,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    _ref$multiple = _ref.multiple,
+    multiple = _ref$multiple === void 0 ? false : _ref$multiple,
+    name = _ref.name,
+    classInput = _ref.classInput,
+    ongletID = _ref.ongletID,
+    onChangeFunction = _ref.onChangeFunction,
+    _ref$isSelectMeta = _ref.isSelectMeta,
+    isSelectMeta = _ref$isSelectMeta === void 0 ? false : _ref$isSelectMeta,
+    _ref$selectMetaConfig = _ref.selectMetaConfig,
+    selectMetaConfig = _ref$selectMetaConfig === void 0 ? {
+      generalIcon: null
+    } : _ref$selectMetaConfig,
     _ref$valueStyle = _ref.valueStyle,
     valueStyle = _ref$valueStyle === void 0 ? {
-      paddingTop: '1rem',
-      paddingBottom: '1rem'
+      fontSize: '14px',
+      fontFamily: 'Arial'
     } : _ref$valueStyle,
     _ref$optionStyle = _ref.optionStyle,
-    optionStyle = _ref$optionStyle === void 0 ? {} : _ref$optionStyle,
-    name = _ref.name,
-    _ref$showClear = _ref.showClear,
-    showClear = _ref$showClear === void 0 ? false : _ref$showClear,
-    _ref$groupedItemTempl = _ref.groupedItemTemplateConfig,
-    groupedItemTemplateConfig = _ref$groupedItemTempl === void 0 ? {
-      showIcon: false,
-      iconKey: 'icon',
-      showImage: false,
-      imageKey: 'image',
-      imageStyle: null,
-      labelStyle: null,
-      generalIcon: null,
-      generalImage: null
-    } : _ref$groupedItemTempl;
+    optionStyle = _ref$optionStyle === void 0 ? {
+      fontSize: '14px',
+      fontFamily: 'Arial'
+    } : _ref$optionStyle;
   var _useState = useState(value !== null && value !== void 0 ? value : null),
     _useState2 = _slicedToArray$8(_useState, 2),
     optionSelected = _useState2[0],
     setOptionSelected = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray$8(_useState3, 2),
+    isOpen = _useState4[0],
+    setIsOpen = _useState4[1];
+  var ref = useRef();
+  var refValue = useRef();
   useEffect(function () {
     setOptionSelected(value !== null && value !== void 0 ? value : null);
   }, [value]);
+  var inverseColor = function inverseColor(hexColor) {
+    var r = parseInt(hexColor.substr(1, 2), 16);
+    var g = parseInt(hexColor.substr(3, 2), 16);
+    var b = parseInt(hexColor.substr(5, 2), 16);
+    var luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    return luminance > 0.5 ? '#000000' : '#FFFFFF';
+  };
+  var handleChange = function handleChange(e) {
+    var newValue = e.value;
+    setOptionSelected(newValue);
+    if (onChangeFunction) {
+      onChangeFunction(newValue);
+    }
+    if (!multiple) {
+      setIsOpen(false);
+    }
+  };
+  var onMenuOpen = function onMenuOpen() {
+    setIsOpen(true);
+  };
+  var onMenuClose = function onMenuClose() {
+    setIsOpen(false);
+  };
+  var handleClickOutside = function handleClickOutside(e) {
+    if (ref.current && !ref.current.contains(e.target)) {
+      setIsOpen(false);
+    }
+  };
   useEffect(function () {
-    var handleScroll = function handleScroll(e) {
-      var target = e.target;
-
-      // Si on scroll dans la liste elle-même (aucun effet de suppression de liste)
-      if (target.closest && target.closest('.p-dropdown-panel')) {
-        return;
-      }
-
-      // Sinon, le zone de liste est fermée
-      var dropdownPanels = document.querySelectorAll('.p-dropdown-panel');
-      dropdownPanels.forEach(function (panel) {
-        if (panel && panel.style.display !== 'none') {
-          document.body.click(); // Déclenche un "click outside"
-        }
-      });
-    };
-    window.addEventListener('scroll', handleScroll, true);
+    document.addEventListener('mousedown', handleClickOutside);
     return function () {
-      window.removeEventListener('scroll', handleScroll, true);
+      document.removeEventListener('mousedown', handleClickOutside);
     };
   }, []);
-  var resetDropdownFilter = function resetDropdownFilter() {
-    setTimeout(function () {
-      var dropdownPanels = document.querySelectorAll('.p-dropdown-panel');
-      dropdownPanels.forEach(function (panel) {
-        var input = panel.querySelector('.p-dropdown-filter');
-        if (input) {
-          input.value = '';
-          input.dispatchEvent(new Event('input', {
-            bubbles: true
-          }));
-        }
+  var renderSelectedItems = function renderSelectedItems() {
+    if (!optionSelected) return null;
+    if (multiple && Array.isArray(optionSelected)) {
+      if (optionSelected.length <= 5) {
+        return optionSelected.map(function (opt, index) {
+          return opt && opt.color && opt.nom ? /*#__PURE__*/React__default.createElement("span", {
+            key: index,
+            className: "badge badge-primary select-badge",
+            style: {
+              backgroundColor: opt.color
+            }
+          }, opt.nom) : null;
+        });
+      } else {
+        return /*#__PURE__*/React__default.createElement("div", {
+          onClick: function onClick(e) {
+            e.stopPropagation();
+            setIsOpen(false);
+            var event = new CustomEvent('openInfoSelect', {
+              detail: {
+                value: optionSelected
+              }
+            });
+            document.dispatchEvent(event);
+          }
+        }, /*#__PURE__*/React__default.createElement("div", {
+          className: "selectMetaCounter"
+        }, /*#__PURE__*/React__default.createElement("span", {
+          className: "badge trigger_popup_fricc"
+        }, optionSelected.length), /*#__PURE__*/React__default.createElement("div", {
+          className: "test-title-ON"
+        }, "Toggle")));
+      }
+    } else if (optionSelected.color && optionSelected.nom) {
+      return /*#__PURE__*/React__default.createElement("span", {
+        className: "badge badge-primary select-badge",
+        style: {
+          backgroundColor: optionSelected.color,
+          color: inverseColor(optionSelected.color)
+        }
+      }, optionSelected.nom);
+    }
+  };
+  var renderHiddenInputs = function renderHiddenInputs() {
+    if (multiple && Array.isArray(optionSelected)) {
+      return optionSelected.map(function (opt, index) {
+        return opt && opt.id ? /*#__PURE__*/React__default.createElement("input", {
+          type: "hidden",
+          key: index,
+          name: !readOnly ? name : '',
+          className: classInput,
+          "data-id-onglet": ongletID,
+          value: opt.id,
+          "data-name": opt.nom,
+          ref: index === 0 ? refValue : null
+        }) : null;
       });
-    }, 50);
-  };
-  var style = {
-    border: invalid ? '1px solid red' : '1px solid #ccc',
-    width: '100%'
+    } else if (optionSelected && optionSelected.id) {
+      return /*#__PURE__*/React__default.createElement("input", {
+        type: "hidden",
+        name: !readOnly ? name : '',
+        className: classInput,
+        "data-id-onglet": ongletID,
+        value: optionSelected.id,
+        "data-name": optionSelected.nom,
+        ref: refValue
+      });
+    }
+    return null;
   };
   var optionTemplate = function optionTemplate(option) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      style: _objectSpread2({
-        fontSize: '14px'
-      }, optionStyle)
-    }, option.label);
-  };
-  var valueTemplate = function valueTemplate(option) {
-    return /*#__PURE__*/React__default.createElement("span", {
-      style: _objectSpread2({
-        fontFamily: 'Arial',
-        fontSize: '14px'
-      }, valueStyle)
-    }, (option === null || option === void 0 ? void 0 : option.label) || placeholder);
-  };
-  var groupedItemTemplate = function groupedItemTemplate(option) {
-    var _ref2 = groupedItemTemplateConfig || {},
-      showImage = _ref2.showImage,
-      imageKey = _ref2.imageKey,
-      imageStyle = _ref2.imageStyle,
-      showIcon = _ref2.showIcon,
-      iconKey = _ref2.iconKey,
-      labelStyle = _ref2.labelStyle,
-      generalIcon = _ref2.generalIcon,
-      generalImage = _ref2.generalImage;
-    var icon = option.value && option.value[iconKey];
-    var styleLabel = {};
-    if (generalIcon || generalIcon || showImage && option[imageKey] || showIcon && icon) {
-      styleLabel = {
-        'marginLeft': '10px'
+    if (!isSelectMeta) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        style: _objectSpread2({
+          fontSize: '14px'
+        }, optionStyle)
+      }, option.label);
+    } else {
+      var _ref2 = selectMetaConfig || {},
+        generalIcon = _ref2.generalIcon;
+      var styleLabel = {
+        marginLeft: '10px',
+        color: option === null || option === void 0 ? void 0 : option.color
       };
-    }
-    if (option.group) {
       return /*#__PURE__*/React__default.createElement("div", {
-        className: "flex align-items-center"
+        className: "flex align-items-center",
+        style: {
+          width: '100%'
+        }
       }, /*#__PURE__*/React__default.createElement("div", {
-        style: _objectSpread2({
+        style: {
           fontSize: '15px',
           fontWeight: 'bold'
-        }, labelStyle)
+        }
       }, generalIcon && /*#__PURE__*/React__default.createElement("i", {
-        style: _objectSpread2({
-          fontSize: '15px',
-          fontWeight: 'bold'
-        }, labelStyle),
-        className: generalIcon
-      }), generalImage && /*#__PURE__*/React__default.createElement("img", {
-        alt: "General",
-        src: generalImage,
-        style: imageStyle || {
-          width: '18px',
-          marginRight: '0.5rem'
-        },
-        className: "mr-2"
-      }), showImage && option[imageKey] && /*#__PURE__*/React__default.createElement("img", {
-        alt: option.label,
-        src: option[imageKey],
-        style: imageStyle || {
-          width: '18px',
-          marginRight: '0.5rem'
+        style: {
+          color: option === null || option === void 0 ? void 0 : option.color
         },
-        className: "mr-2"
-      }), showIcon && icon && /*#__PURE__*/React__default.createElement("i", {
-        style: _objectSpread2({
-          fontSize: '15px',
-          fontWeight: 'bold'
-        }, labelStyle),
-        className: 'mr-2 ' + icon
+        className: generalIcon
       }), /*#__PURE__*/React__default.createElement("span", {
         style: styleLabel
-      }, option.label)));
+      }, (option === null || option === void 0 ? void 0 : option.nom) || (option === null || option === void 0 ? void 0 : option.label))));
+    }
+  };
+  var valueTemplate = function valueTemplate(option) {
+    if (!option) {
+      return /*#__PURE__*/React__default.createElement("span", {
+        style: valueStyle
+      }, placeholder);
     }
+    var iconColor = option !== null && option !== void 0 && option.color ? inverseColor(option.color) : '#FFFFFF';
+    return /*#__PURE__*/React__default.createElement("div", {
+      style: _objectSpread2({
+        backgroundColor: option.color,
+        color: iconColor,
+        padding: '0.5rem',
+        borderRadius: '1rem',
+        display: 'inline-block'
+      }, valueStyle)
+    }, option.nom || option.label);
   };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-col gap-1"
-  }, /*#__PURE__*/React__default.createElement(Dropdown$1, _extends$A({
+    className: "select-form-event-container ".concat(readOnly ? 'select-form-event-container-readonly' : ''),
+    ref: ref
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "select-badges-container",
+    onClick: function onClick() {
+      return !readOnly && setIsOpen(true);
+    }
+  }, renderSelectedItems()), !readOnly && /*#__PURE__*/React__default.createElement("span", {
+    className: "caret"
+  }), /*#__PURE__*/React__default.createElement(Dropdown$1, {
     value: optionSelected,
     options: options,
-    onChange: function onChange(e) {
-      return setOptionSelected(e.value);
-    },
+    onChange: handleChange,
     placeholder: placeholder,
-    disabled: disabled,
-    filter: filter,
-    optionLabel: optionLabel,
-    optionValue: optionValue,
-    style: style,
+    disabled: readOnly,
+    onShow: onMenuOpen,
+    onHide: onMenuClose,
+    menuIsOpen: isOpen,
     itemTemplate: optionTemplate,
-    valueTemplate: valueTemplate,
-    onHide: resetDropdownFilter,
-    showClear: showClear,
-    optionGroupTemplate: isGroupedOption ? groupedItemTemplate : null
-  }, isGroupedOption && {
-    optionGroupLabel: 'label',
-    optionGroupChildren: 'items'
-  })), name && /*#__PURE__*/React__default.createElement("input", {
-    type: "hidden",
-    name: name,
-    value: optionSelected !== null && optionSelected !== void 0 ? optionSelected : ''
-  }), invalid && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("small", {
-    style: {
-      color: 'red',
-      fontStyle: 'italic'
-    }
-  }, errorMessage || 'Sélection invalide')));
+    valueTemplate: valueTemplate
+  }), /*#__PURE__*/React__default.createElement("div", null, renderHiddenInputs()));
 };
 
 var optionsExample = [{
@@ -36003,6 +36030,76 @@ var optionsExample = [{
   label: 'Option 3',
   value: '3'
 }];
+var optionsGroup = [{
+  label: 'Germany',
+  code: 'DE',
+  items: [{
+    label: 'Berlin',
+    value: 'Berlin'
+  }, {
+    label: 'Frankfurt',
+    value: 'Frankfurt'
+  }, {
+    label: 'Hamburg',
+    value: 'Hamburg'
+  }, {
+    label: 'Munich',
+    value: 'Munich'
+  }]
+}, {
+  label: 'USA',
+  code: 'US',
+  items: [{
+    label: 'Chicago',
+    value: 'Chicago'
+  }, {
+    label: 'Los Angeles',
+    value: 'Los Angeles'
+  }, {
+    label: 'New York',
+    value: 'New York'
+  }, {
+    label: 'San Francisco',
+    value: 'San Francisco'
+  }]
+}, {
+  label: 'Japan',
+  code: 'JP',
+  items: [{
+    label: 'Kyoto',
+    value: 'Kyoto'
+  }, {
+    label: 'Osaka',
+    value: 'Osaka'
+  }, {
+    label: 'Tokyo',
+    value: 'Tokyo'
+  }, {
+    label: 'Yokohama',
+    value: 'Yokohama'
+  }]
+}];
+var optionsWithColors = [{
+  label: 'Rouge',
+  value: 'rouge',
+  color: '#FF0000'
+}, {
+  label: 'Vert',
+  value: 'vert',
+  color: '#00FF00'
+}, {
+  label: 'Bleu',
+  value: 'bleu',
+  color: '#0000FF'
+}, {
+  label: 'Jaune',
+  value: 'jaune',
+  color: '#FFFF00'
+}, {
+  label: 'Cyan',
+  value: 'cyan',
+  color: '#00FFFF'
+}];
 var DropdownPresets = {
   Default: {
     placeholder: 'Sélectionnez une option',
@@ -36016,6 +36113,38 @@ var DropdownPresets = {
       fontFamily: 'Arial'
     }
   },
+  SelectMeta: {
+    placeholder: 'Sélectionnez une couleur',
+    options: optionsWithColors,
+    isSelectMeta: true,
+    selectMetaConfig: {
+      generalIcon: 'pi pi-circle-fill'
+    },
+    valueStyle: {
+      fontSize: '14px',
+      fontFamily: 'Arial'
+    },
+    optionStyle: {
+      fontSize: '14px',
+      fontFamily: 'Arial'
+    }
+  },
+  Group: {
+    placeholder: 'Veuillez choisir une option',
+    options: optionsGroup,
+    disabled: false,
+    isGroupedOption: true,
+    groupedItemTemplateConfig: {
+      showIcon: false,
+      iconKey: 'icon',
+      showImage: false,
+      imageKey: 'image',
+      imageStyle: null,
+      labelStyle: null,
+      generalIcon: null,
+      generalImage: 'https://tse1.mm.bing.net/th/id/OIP.IQHLwUwt5fy7E-ag0W-34gHaHa?w=474&h=474&c=7'
+    }
+  },
   Disabled: {
     placeholder: 'Sélection désactivée',
     options: optionsExample,

package/package.json

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