arengibook 2.0.13-table → 2.0.14-table

package/dist/index.js

@@ -47294,6 +47294,8 @@ var DeviseBodyCell = function DeviseBodyCell(_ref) {
   var rowData = _ref.rowData,
     col = _ref.col,
     editable = _ref.editable,
+    _ref$isRowEditing = _ref.isRowEditing,
+    isRowEditing = _ref$isRowEditing === void 0 ? false : _ref$isRowEditing,
     onSave = _ref.onSave;
   var _useState = useState(false),
     _useState2 = _slicedToArray$c(_useState, 2),
@@ -47329,6 +47331,21 @@ var DeviseBodyCell = function DeviseBodyCell(_ref) {
     setDevise(initialDevise);
     setEditing(true);
   };
+
+  // Sync avec le mode row edit : auto-ouvrir / fermer
+  useEffect(function () {
+    if (isRowEditing && !editing) {
+      var _displayCell$value2, _ref4, _ref5, _displayCell$devise2;
+      setAmount((_displayCell$value2 = displayCell === null || displayCell === void 0 ? void 0 : displayCell.value) !== null && _displayCell$value2 !== void 0 ? _displayCell$value2 : '');
+      var initialDevise = (_ref4 = (_ref5 = (_displayCell$devise2 = displayCell === null || displayCell === void 0 ? void 0 : displayCell.devise) !== null && _displayCell$devise2 !== void 0 ? _displayCell$devise2 : col.currency) !== null && _ref5 !== void 0 ? _ref5 : devises[0]) !== null && _ref4 !== void 0 ? _ref4 : null;
+      deviseRef.current = initialDevise;
+      setDevise(initialDevise);
+      setEditing(true);
+    } else if (!isRowEditing && editing) {
+      setEditing(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isRowEditing]);
   var handleSave = function handleSave() {
     var _devises$find;
     var currentDevise = deviseRef.current;
@@ -47344,7 +47361,7 @@ var DeviseBodyCell = function DeviseBodyCell(_ref) {
     setEditing(false);
   };
   useEffect(function () {
-    if (!editing) return;
+    if (!editing || isRowEditing) return;
     var handler = function handler(e) {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
         setEditing(false);
@@ -47354,7 +47371,7 @@ var DeviseBodyCell = function DeviseBodyCell(_ref) {
     return function () {
       return document.removeEventListener('mousedown', handler);
     };
-  }, [editing]);
+  }, [editing, isRowEditing]);
   if (editing) {
     var devisesOptions = devises.map(function (d) {
       return {
@@ -47418,11 +47435,13 @@ var DeviseBodyCell = function DeviseBodyCell(_ref) {
     className: "span-sub"
   }, "".concat(numberWithSpaces(value), " ").concat(cellDevise.code)));
 };
-var TreeSelectBodyCell = function TreeSelectBodyCell(_ref4) {
-  var rowData = _ref4.rowData,
-    col = _ref4.col,
-    editable = _ref4.editable,
-    onSave = _ref4.onSave;
+var TreeSelectBodyCell = function TreeSelectBodyCell(_ref6) {
+  var rowData = _ref6.rowData,
+    col = _ref6.col,
+    editable = _ref6.editable,
+    _ref6$isRowEditing = _ref6.isRowEditing,
+    isRowEditing = _ref6$isRowEditing === void 0 ? false : _ref6$isRowEditing,
+    onSave = _ref6.onSave;
   var _useState9 = useState(false),
     _useState0 = _slicedToArray$c(_useState9, 2),
     editing = _useState0[0],
@@ -47448,6 +47467,17 @@ var TreeSelectBodyCell = function TreeSelectBodyCell(_ref4) {
     setEditValue(savedValue);
     setEditing(true);
   };
+
+  // Sync avec le mode row edit : auto-ouvrir / fermer
+  useEffect(function () {
+    if (isRowEditing && !editing) {
+      setEditValue(savedValue);
+      setEditing(true);
+    } else if (!isRowEditing && editing) {
+      setEditing(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isRowEditing]);
   var handleChange = function handleChange(e) {
     var val = e.value;
     if (val == null || val === '' || _typeof$f(val) === 'object' && Object.keys(val).length === 0) return;
@@ -47456,7 +47486,7 @@ var TreeSelectBodyCell = function TreeSelectBodyCell(_ref4) {
     onSave(val);
   };
   useEffect(function () {
-    if (!editing) return;
+    if (!editing || isRowEditing) return;
     var handler = function handler(e) {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
         if (e.target.closest('.p-treeselect-panel')) return;
@@ -47467,7 +47497,7 @@ var TreeSelectBodyCell = function TreeSelectBodyCell(_ref4) {
     return function () {
       return document.removeEventListener('mousedown', handler);
     };
-  }, [editing]);
+  }, [editing, isRowEditing]);
   if (editing) {
     var _col$selectionMode, _col$filter, _col$display;
     return /*#__PURE__*/React__default.createElement("div", {
@@ -47516,10 +47546,10 @@ var TreeSelectBodyCell = function TreeSelectBodyCell(_ref4) {
     }, label);
   }));
 };
-var DocumentEditorCell = function DocumentEditorCell(_ref5) {
+var DocumentEditorCell = function DocumentEditorCell(_ref7) {
   var _options$value;
-  var options = _ref5.options,
-    col = _ref5.col;
+  var options = _ref7.options,
+    col = _ref7.col;
   var _useState13 = useState(false),
     _useState14 = _slicedToArray$c(_useState13, 2),
     uploading = _useState14[0],
@@ -47527,7 +47557,7 @@ var DocumentEditorCell = function DocumentEditorCell(_ref5) {
   var fileInputRef = useRef(null);
   var docs = (_options$value = options.value) !== null && _options$value !== void 0 ? _options$value : [];
   var handleFileChange = /*#__PURE__*/function () {
-    var _ref6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(e) {
+    var _ref8 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(e) {
       var file, formData, res, data;
       return _regenerator().w(function (_context) {
         while (1) switch (_context.n) {
@@ -47566,7 +47596,7 @@ var DocumentEditorCell = function DocumentEditorCell(_ref5) {
       }, _callee, null, [[2,, 5, 6]]);
     }));
     return function handleFileChange(_x) {
-      return _ref6.apply(this, arguments);
+      return _ref8.apply(this, arguments);
     };
   }();
   var handleDelete = function handleDelete(id) {
@@ -47615,28 +47645,30 @@ var DocumentEditorCell = function DocumentEditorCell(_ref5) {
     onChange: handleFileChange
   }));
 };
-var Table = function Table(_ref7) {
-  var _ref7$value = _ref7.value,
-    value = _ref7$value === void 0 ? [] : _ref7$value,
-    _ref7$columns = _ref7.columns,
-    columns = _ref7$columns === void 0 ? [] : _ref7$columns,
-    _ref7$paginator = _ref7.paginator,
-    paginator = _ref7$paginator === void 0 ? true : _ref7$paginator,
-    _ref7$rows = _ref7.rows,
-    rows = _ref7$rows === void 0 ? 25 : _ref7$rows,
-    _ref7$loading = _ref7.loading,
-    loading = _ref7$loading === void 0 ? false : _ref7$loading,
-    _ref7$stripedRows = _ref7.stripedRows,
-    stripedRows = _ref7$stripedRows === void 0 ? false : _ref7$stripedRows,
-    _ref7$selectionMode = _ref7.selectionMode,
-    selectionMode = _ref7$selectionMode === void 0 ? null : _ref7$selectionMode,
-    selection = _ref7.selection,
-    onSelectionChange = _ref7.onSelectionChange,
-    _ref7$editable = _ref7.editable,
-    editable = _ref7$editable === void 0 ? false : _ref7$editable,
-    onChange = _ref7.onChange,
-    onCellChange = _ref7.onCellChange,
-    carto = _ref7.carto;
+var Table = function Table(_ref9) {
+  var _ref9$value = _ref9.value,
+    value = _ref9$value === void 0 ? [] : _ref9$value,
+    _ref9$columns = _ref9.columns,
+    columns = _ref9$columns === void 0 ? [] : _ref9$columns,
+    _ref9$paginator = _ref9.paginator,
+    paginator = _ref9$paginator === void 0 ? true : _ref9$paginator,
+    _ref9$rows = _ref9.rows,
+    rows = _ref9$rows === void 0 ? 25 : _ref9$rows,
+    _ref9$loading = _ref9.loading,
+    loading = _ref9$loading === void 0 ? false : _ref9$loading,
+    _ref9$stripedRows = _ref9.stripedRows,
+    stripedRows = _ref9$stripedRows === void 0 ? false : _ref9$stripedRows,
+    _ref9$selectionMode = _ref9.selectionMode,
+    selectionMode = _ref9$selectionMode === void 0 ? null : _ref9$selectionMode,
+    selection = _ref9.selection,
+    onSelectionChange = _ref9.onSelectionChange,
+    _ref9$editable = _ref9.editable,
+    editable = _ref9$editable === void 0 ? false : _ref9$editable,
+    _ref9$rowEdit = _ref9.rowEdit,
+    rowEdit = _ref9$rowEdit === void 0 ? true : _ref9$rowEdit,
+    onChange = _ref9.onChange,
+    onCellChange = _ref9.onCellChange,
+    carto = _ref9.carto;
   var _useState15 = useState(value),
     _useState16 = _slicedToArray$c(_useState15, 2),
     data = _useState16[0],
@@ -47650,21 +47682,41 @@ var Table = function Table(_ref7) {
       return updated;
     });
   }, [onChange]);
+  var _useState17 = useState({}),
+    _useState18 = _slicedToArray$c(_useState17, 2),
+    editingRows = _useState18[0],
+    setEditingRows = _useState18[1];
+  var onRowEditChange = useCallback(function (e) {
+    setEditingRows(e.data);
+  }, []);
+  var onRowEditComplete = useCallback(function (e) {
+    var newData = e.newData,
+      index = e.index;
+    var updated = data.map(function (row, i) {
+      return i === index ? newData : row;
+    });
+    setData(updated);
+    onChange === null || onChange === void 0 || onChange(updated);
+    onCellChange === null || onCellChange === void 0 || onCellChange({
+      rowData: data[index],
+      newRowData: newData
+    });
+  }, [data, onChange, onCellChange]);
   var STORAGE_KEY = useMemo(function () {
     return carto ? "Table:visibleColumns:".concat(carto) : "Table:visibleColumns";
   }, [carto]);
-  var _useState17 = useState(columns),
-    _useState18 = _slicedToArray$c(_useState17, 2),
-    visibleColumns = _useState18[0],
-    setVisibleColumns = _useState18[1];
-  var _useState19 = useState(false),
+  var _useState19 = useState(columns),
     _useState20 = _slicedToArray$c(_useState19, 2),
-    showColumnPicker = _useState20[0],
-    setShowColumnPicker = _useState20[1];
-  var _useState21 = useState(''),
+    visibleColumns = _useState20[0],
+    setVisibleColumns = _useState20[1];
+  var _useState21 = useState(false),
     _useState22 = _slicedToArray$c(_useState21, 2),
-    globalFilter = _useState22[0],
-    setGlobalFilter = _useState22[1];
+    showColumnPicker = _useState22[0],
+    setShowColumnPicker = _useState22[1];
+  var _useState23 = useState(''),
+    _useState24 = _slicedToArray$c(_useState23, 2),
+    globalFilter = _useState24[0],
+    setGlobalFilter = _useState24[1];
   useEffect(function () {
     var nextVisible = columns;
     var defaultVisible = columns.filter(function (c) {
@@ -47687,9 +47739,9 @@ var Table = function Table(_ref7) {
 
   var linkTemplate = useCallback(function (col) {
     return function (rowData) {
-      var _ref8, _col$href;
+      var _ref0, _col$href;
       var label = rowData[col.field];
-      var href = typeof col.href === 'function' ? col.href(rowData) : (_ref8 = (_col$href = col.href) !== null && _col$href !== void 0 ? _col$href : rowData[col.field + 'Url']) !== null && _ref8 !== void 0 ? _ref8 : '#';
+      var href = typeof col.href === 'function' ? col.href(rowData) : (_ref0 = (_col$href = col.href) !== null && _col$href !== void 0 ? _col$href : rowData[col.field + 'Url']) !== null && _ref0 !== void 0 ? _ref0 : '#';
       return /*#__PURE__*/React__default.createElement("div", {
         className: "arengi-table-grey-title-box"
       }, /*#__PURE__*/React__default.createElement("a", {
@@ -47847,13 +47899,14 @@ var Table = function Table(_ref7) {
       return /*#__PURE__*/React__default.createElement(DeviseBodyCell, {
         rowData: rowData,
         col: col,
-        editable: editable && col.editable !== false,
+        editable: editable || rowEdit && col.editable !== false,
+        isRowEditing: rowEdit && !!editingRows[rowData.id],
         onSave: function onSave(newVal) {
           return updateRow(rowData.id, col.field, newVal);
         }
       });
     };
-  }, [editable, updateRow]);
+  }, [editable, rowEdit, editingRows, updateRow]);
   var deviseEditor = useCallback(function () {
     return undefined;
   }, []);
@@ -47977,13 +48030,14 @@ var Table = function Table(_ref7) {
       return /*#__PURE__*/React__default.createElement(TreeSelectBodyCell, {
         rowData: rowData,
         col: col,
-        editable: editable && col.editable !== false,
+        editable: editable || rowEdit && col.editable !== false,
+        isRowEditing: rowEdit && !!editingRows[rowData.id],
         onSave: function onSave(newVal) {
           return updateRow(rowData.id, col.field, newVal);
         }
       });
     };
-  }, [editable, updateRow]);
+  }, [editable, rowEdit, editingRows, updateRow]);
   var treeSelectEditor = useCallback(function () {
     return undefined;
   }, []);
@@ -48012,6 +48066,7 @@ var Table = function Table(_ref7) {
     }
   }, [editable, textEditor, dateEditor, selectEditor, selectMultipleEditor, numericEditor, documentEditor, deviseEditor, treeSelectEditor]);
   var onCellEditComplete = useCallback(function (e) {
+    if (rowEdit) return;
     var rowData = e.rowData,
       newRowData = e.newRowData,
       field = e.field;
@@ -48030,7 +48085,7 @@ var Table = function Table(_ref7) {
       field: field,
       newValue: newRowData[field]
     });
-  }, [data, onChange, onCellChange, columns]);
+  }, [data, onChange, onCellChange, columns, rowEdit]);
 
   /** Get the body renderer for a column based on its type */
   var getBodyTemplate = useCallback(function (col) {
@@ -48183,9 +48238,12 @@ var Table = function Table(_ref7) {
     selection: selection,
     onSelectionChange: onSelectionChange,
     globalFilter: globalFilter,
-    editMode: editable || columns.some(function (c) {
+    editMode: editable || rowEdit || columns.some(function (c) {
       return c.editable === true;
-    }) ? 'cell' : undefined,
+    }) ? rowEdit ? 'row' : 'cell' : undefined,
+    editingRows: rowEdit ? editingRows : undefined,
+    onRowEditChange: rowEdit ? onRowEditChange : undefined,
+    onRowEditComplete: rowEdit ? onRowEditComplete : undefined,
     dataKey: "id",
     tableClassName: '',
     resizableColumns: true,
@@ -48205,12 +48263,23 @@ var Table = function Table(_ref7) {
       header: col.header,
       body: getBodyTemplate(col),
       editor: getEditorTemplate(col),
-      onCellEditComplete: (editable ? col.editable !== false : col.editable === true) ? onCellEditComplete : undefined,
+      onCellEditComplete: !rowEdit && (editable ? col.editable !== false : col.editable === true) ? onCellEditComplete : undefined,
       className: col.field === 'nom' ? 'arengi-table-grey-title' : 'hide1time',
       style: {
         minWidth: (_col$minWidth = col.minWidth) !== null && _col$minWidth !== void 0 ? _col$minWidth : '200px'
       }
     });
+  }), rowEdit && /*#__PURE__*/React__default.createElement(Column, {
+    rowEditor: true,
+    headerStyle: {
+      width: '6rem',
+      minWidth: '6rem'
+    },
+    bodyStyle: {
+      textAlign: 'center'
+    },
+    frozen: true,
+    alignFrozen: "right"
   })));
 };
 

package/package.json

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