arengibook 2.1.1-table → 2.1.2-table

package/dist/index.js

@@ -49075,41 +49075,65 @@ var SelfEditableCell = function SelfEditableCell(_ref11) {
   switch (col.type) {
     case 'select':
     case 'lienFormulaire':
-      return /*#__PURE__*/React__default.createElement("div", {
-        ref: containerRef
-      }, /*#__PURE__*/React__default.createElement(Dropdown, _extends$J({}, DropdownPresets.Base, {
-        value: localValue,
-        options: col.options,
-        onChange: function onChange(e) {
-          return commit(e.value);
-        },
-        withColor: true,
-        autoFocus: true
-      })));
+      {
+        var rawSelect = rowData[col.field];
+        var isObjModeSelect = rawSelect !== null && rawSelect !== undefined && _typeof$g(rawSelect) === 'object' && 'value' in rawSelect;
+        return /*#__PURE__*/React__default.createElement("div", {
+          ref: containerRef
+        }, /*#__PURE__*/React__default.createElement(Dropdown, _extends$J({}, DropdownPresets.Base, {
+          value: isObjModeSelect ? localValue === null || localValue === void 0 ? void 0 : localValue.value : localValue,
+          options: col.options,
+          onChange: function onChange(e) {
+            var _col$options$find, _col$options;
+            return commit(isObjModeSelect ? (_col$options$find = (_col$options = col.options) === null || _col$options === void 0 ? void 0 : _col$options.find(function (o) {
+              return o.value === e.value;
+            })) !== null && _col$options$find !== void 0 ? _col$options$find : {
+              value: e.value
+            } : e.value);
+          },
+          withColor: true,
+          autoFocus: true
+        })));
+      }
     case 'selectMultiple':
-      return /*#__PURE__*/React__default.createElement("div", {
-        ref: containerRef,
-        style: {
-          width: '100%',
-          maxWidth: '100%',
-          overflow: 'hidden'
-        },
-        onKeyDown: function onKeyDown(e) {
-          if (e.key === 'Enter') {
-            e.stopPropagation();
-            commit(localValueRef.current);
+      {
+        var rawMulti = rowData[col.field];
+        var isObjModeMulti = Array.isArray(rawMulti) && rawMulti.length > 0 && rawMulti[0] !== null && _typeof$g(rawMulti[0]) === 'object' && 'value' in rawMulti[0];
+        var flatValues = isObjModeMulti ? Array.isArray(localValue) ? localValue.map(function (v) {
+          var _v$value;
+          return (_v$value = v === null || v === void 0 ? void 0 : v.value) !== null && _v$value !== void 0 ? _v$value : v;
+        }) : [] : localValue !== null && localValue !== void 0 ? localValue : [];
+        return /*#__PURE__*/React__default.createElement("div", {
+          ref: containerRef,
+          style: {
+            width: '100%',
+            maxWidth: '100%',
+            overflow: 'hidden'
+          },
+          onKeyDown: function onKeyDown(e) {
+            if (e.key === 'Enter') {
+              e.stopPropagation();
+              commit(localValueRef.current);
+            }
           }
-        }
-      }, /*#__PURE__*/React__default.createElement(MultiSelect, _extends$J({}, MultiSelectPresets.Base, {
-        value: localValue !== null && localValue !== void 0 ? localValue : [],
-        options: col.options,
-        onChange: function onChange(ids) {
-          return setLocalValue(ids);
-        },
-        onHide: function onHide() {
-          return commit(localValueRef.current);
-        }
-      })));
+        }, /*#__PURE__*/React__default.createElement(MultiSelect, _extends$J({}, MultiSelectPresets.Base, {
+          value: flatValues,
+          options: col.options,
+          onChange: function onChange(ids) {
+            return setLocalValue(isObjModeMulti ? ids.map(function (id) {
+              var _col$options$find2, _col$options2;
+              return (_col$options$find2 = (_col$options2 = col.options) === null || _col$options2 === void 0 ? void 0 : _col$options2.find(function (o) {
+                return o.value === id;
+              })) !== null && _col$options$find2 !== void 0 ? _col$options$find2 : {
+                value: id
+              };
+            }) : ids);
+          },
+          onHide: function onHide() {
+            return commit(localValueRef.current);
+          }
+        })));
+      }
     case 'date':
       {
         var dateObj = null;
@@ -49607,8 +49631,8 @@ var Table$1 = function Table(_ref13) {
   var initialFilters = useMemo(function () {
     var f = {};
     columns.forEach(function (col) {
-      var _col$options;
-      var hasOptions = ((_col$options = col.options) === null || _col$options === void 0 ? void 0 : _col$options.length) > 0;
+      var _col$options3;
+      var hasOptions = ((_col$options3 = col.options) === null || _col$options3 === void 0 ? void 0 : _col$options3.length) > 0;
       if (col.type === 'selectMultiple' && hasOptions) {
         f[col.field] = {
           value: null,
@@ -49756,27 +49780,37 @@ var Table$1 = function Table(_ref13) {
   }, []);
   var selectTemplate = useCallback(function (col) {
     return function (rowData) {
-      var _col$options2;
+      var _col$options4;
       var val = rowData[col.field];
-      var opt = (_col$options2 = col.options) === null || _col$options2 === void 0 ? void 0 : _col$options2.find(function (o) {
+      var opt = val !== null && val !== undefined && _typeof$g(val) === 'object' && 'value' in val ? val : (_col$options4 = col.options) === null || _col$options4 === void 0 ? void 0 : _col$options4.find(function (o) {
         return o.value === val;
       });
       if (!opt) return val !== null && val !== void 0 ? val : '';
-      if (!normalizeColor(opt.color)) return opt.label;
+      var bg = normalizeColor(opt.color);
       return /*#__PURE__*/React__default.createElement("span", {
         className: "tab_label",
         style: {
-          backgroundColor: normalizeColor(opt.color),
-          color: textColorForBg(normalizeColor(opt.color))
+          backgroundColor: bg !== null && bg !== void 0 ? bg : 'transparent',
+          color: bg ? textColorForBg(bg) : 'inherit',
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: '4px',
+          border: bg ? 'none' : '1px solid #e5e7eb'
+        }
+      }, opt.icon && /*#__PURE__*/React__default.createElement("span", {
+        className: "material-icons",
+        style: {
+          fontSize: '14px',
+          lineHeight: 1
         }
-      }, opt.label);
+      }, opt.icon), opt.label);
     };
   }, []);
   var lienFormulaireTemplate = useCallback(function (col) {
     return function (rowData) {
-      var _col$options3, _ref15, _opt$label, _ref16, _col$href2;
+      var _col$options5, _ref15, _opt$label, _ref16, _col$href2;
       var val = rowData[col.field];
-      var opt = (_col$options3 = col.options) === null || _col$options3 === void 0 ? void 0 : _col$options3.find(function (o) {
+      var opt = (_col$options5 = col.options) === null || _col$options5 === void 0 ? void 0 : _col$options5.find(function (o) {
         return o.value === val;
       });
       var label = (_ref15 = (_opt$label = opt === null || opt === void 0 ? void 0 : opt.label) !== null && _opt$label !== void 0 ? _opt$label : val) !== null && _ref15 !== void 0 ? _ref15 : '';
@@ -49829,18 +49863,40 @@ var Table$1 = function Table(_ref13) {
   };
   var colorTextTemplate = useCallback(function (col) {
     return function (rowData) {
-      var _rowData$col$hrefFiel, _col$href3;
+      var _rowData, _rowData$col$hrefFiel, _col$href3;
       var text = rowData[col.field];
       if (!text) return '';
       var color = normalizeColor(rowData[col.field + 'Color']) || normalizeColor(col.defaultColor) || null;
+      var icon = (_rowData = rowData[col.field + 'Icon']) !== null && _rowData !== void 0 ? _rowData : null;
       var href = col.hrefField ? (_rowData$col$hrefFiel = rowData[col.hrefField]) !== null && _rowData$col$hrefFiel !== void 0 ? _rowData$col$hrefFiel : '#' : (_col$href3 = col.href) !== null && _col$href3 !== void 0 ? _col$href3 : null;
       var inner = color ? /*#__PURE__*/React__default.createElement("span", {
         className: "tab_label",
         style: {
           backgroundColor: color,
-          color: textColorForBg(color)
+          color: textColorForBg(color),
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: '4px'
+        }
+      }, icon && /*#__PURE__*/React__default.createElement("span", {
+        className: "material-icons",
+        style: {
+          fontSize: '14px',
+          lineHeight: 1
+        }
+      }, icon), text) : /*#__PURE__*/React__default.createElement("span", {
+        style: {
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: '4px'
+        }
+      }, icon && /*#__PURE__*/React__default.createElement("span", {
+        className: "material-icons",
+        style: {
+          fontSize: '14px',
+          lineHeight: 1
         }
-      }, text) : /*#__PURE__*/React__default.createElement("span", null, text);
+      }, icon), text);
       if (!href) return inner;
       return /*#__PURE__*/React__default.createElement("a", {
         href: href,
@@ -49923,9 +49979,9 @@ var Table$1 = function Table(_ref13) {
   }, []);
   var journalTemplate = useCallback(function (col) {
     return function (rowData) {
-      var _rowData$col$field5, _rowData;
+      var _rowData$col$field5, _rowData2;
       var count = parseInt((_rowData$col$field5 = rowData[col.field]) !== null && _rowData$col$field5 !== void 0 ? _rowData$col$field5 : 0, 10);
-      var href = (_rowData = rowData[col.field + 'Url']) !== null && _rowData !== void 0 ? _rowData : '#';
+      var href = (_rowData2 = rowData[col.field + 'Url']) !== null && _rowData2 !== void 0 ? _rowData2 : '#';
       return /*#__PURE__*/React__default.createElement("a", {
         href: href,
         title: "Journal",
@@ -50118,8 +50174,8 @@ var Table$1 = function Table(_ref13) {
       var vals = rowData[col.field];
       if (!(vals !== null && vals !== void 0 && vals.length)) return '';
       var opts = vals.map(function (v) {
-        var _col$options4;
-        return (_col$options4 = col.options) === null || _col$options4 === void 0 ? void 0 : _col$options4.find(function (o) {
+        var _col$options6;
+        return v !== null && v !== undefined && _typeof$g(v) === 'object' && 'value' in v ? v : (_col$options6 = col.options) === null || _col$options6 === void 0 ? void 0 : _col$options6.find(function (o) {
           return o.value === v;
         });
       }).filter(Boolean);
@@ -50301,8 +50357,8 @@ var Table$1 = function Table(_ref13) {
     if ((col === null || col === void 0 ? void 0 : col.type) === 'treeSelect' || (col === null || col === void 0 ? void 0 : col.type) === 'devise') return;
     var enrichedRow = newRowData;
     if (col !== null && col !== void 0 && col.updates) {
-      var _col$options5;
-      var option = (_col$options5 = col.options) === null || _col$options5 === void 0 ? void 0 : _col$options5.find(function (opt) {
+      var _col$options7;
+      var option = (_col$options7 = col.options) === null || _col$options7 === void 0 ? void 0 : _col$options7.find(function (opt) {
         return opt.value === newRowData[field];
       });
       if (option) {
@@ -50433,8 +50489,8 @@ var Table$1 = function Table(_ref13) {
             var _onCellChangeRef$curr2;
             var enrichedFields = _defineProperty$g({}, col.field, v);
             if (col.updates) {
-              var _col$options6;
-              var option = (_col$options6 = col.options) === null || _col$options6 === void 0 ? void 0 : _col$options6.find(function (opt) {
+              var _col$options8;
+              var option = (_col$options8 = col.options) === null || _col$options8 === void 0 ? void 0 : _col$options8.find(function (opt) {
                 return opt.value === v;
               });
               if (option) {
@@ -50813,7 +50869,22 @@ var Table$1 = function Table(_ref13) {
         height: "calc(100vh - ".concat(headerH, "px)")
       };
     }() : undefined
-  }, /*#__PURE__*/React__default.createElement(DataTable, {
+  }, onAdd && /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'flex-end',
+      padding: '0 0 8px 0'
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "btn btn-add",
+    onClick: onAdd,
+    style: {
+      border: '2px solid #1E976A',
+      color: '#1E976A',
+      padding: '5px 12px',
+      cursor: 'pointer'
+    }
+  }, addLabel)), /*#__PURE__*/React__default.createElement(DataTable, {
     key: tableKey,
     value: data,
     header: header,
@@ -50841,22 +50912,6 @@ var Table$1 = function Table(_ref13) {
     editingRows: rowEdit ? editingRows : undefined,
     onRowEditChange: rowEdit ? onRowEditChange : undefined,
     onRowEditComplete: rowEdit ? onRowEditComplete : undefined,
-    footer: onAdd ? /*#__PURE__*/React__default.createElement("div", {
-      style: {
-        display: 'flex',
-        justifyContent: 'center',
-        padding: '8px 0'
-      }
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "btn btn-add",
-      onClick: onAdd,
-      style: {
-        border: '2px solid #1E976A',
-        color: '#1E976A',
-        padding: '5px 12px',
-        cursor: 'pointer'
-      }
-    }, addLabel)) : null,
     dataKey: "id",
     tableClassName: 'arengi-table',
     resizableColumns: true,
@@ -51061,7 +51116,7 @@ var Table$1 = function Table(_ref13) {
       }
     });
   }(), visibleColumns.map(function (col, index) {
-    var _col$field, _col$options7, _col$minWidth;
+    var _col$field, _col$options9, _col$minWidth;
     return /*#__PURE__*/React__default.createElement(Column, {
       key: (_col$field = col.field) !== null && _col$field !== void 0 ? _col$field : index,
       sortable: true,
@@ -51070,7 +51125,7 @@ var Table$1 = function Table(_ref13) {
       header: col.header,
       filter: filterVisible,
       filterField: col.field,
-      filterElement: (col.type === 'select' || col.type === 'label' || col.type === 'selectMultiple') && (_col$options7 = col.options) !== null && _col$options7 !== void 0 && _col$options7.length ? function (opts) {
+      filterElement: (col.type === 'select' || col.type === 'label' || col.type === 'selectMultiple') && (_col$options9 = col.options) !== null && _col$options9 !== void 0 && _col$options9.length ? function (opts) {
         return selectFilterElement(opts, col);
       } : textFilterElement,
       showFilterMenu: false,

package/package.json

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