@insticc/react-datagrid-2 1.1.26 → 1.1.28

package/build/wrapper/index.js

@@ -44,6 +44,8 @@ var DataGrid = function DataGrid(_ref) {
     createRows = _ref.createRows,
     _ref$actions = _ref.actions,
     actions = _ref$actions === void 0 ? null : _ref$actions,
+    _ref$filerActions = _ref.filerActions,
+    filerActions = _ref$filerActions === void 0 ? null : _ref$filerActions,
     _ref$extraActions = _ref.extraActions,
     extraActions = _ref$extraActions === void 0 ? null : _ref$extraActions,
     _ref$hasExcelExport = _ref.hasExcelExport,
@@ -183,7 +185,7 @@ var DataGrid = function DataGrid(_ref) {
       }, {});
       setRowSelection(newSelection);
     }
-  }, [selectedIds, rowSelection]);
+  }, [selectedIds]);
   (0, _react.useEffect)(function () {
     if (typeof window !== 'undefined') {
       setIsLoading(false);
@@ -253,6 +255,12 @@ var DataGrid = function DataGrid(_ref) {
   var renderTopToolbarCustomActions = function renderTopToolbarCustomActions(_ref2) {
     var table = _ref2.table;
     var selectedRows = table.getSelectedRowModel().flatRows;
+    var defaultStyle = {
+      display: 'flex',
+      height: '36px',
+      alignItems: 'center',
+      justifyContent: 'center'
+    };
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       style: {
         display: 'flex',
@@ -272,7 +280,9 @@ var DataGrid = function DataGrid(_ref) {
             gap: '.5em',
             flexWrap: 'wrap'
           },
-          children: (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && actions.map(function (e) {
+          children: (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && actions.filter(function (e) {
+            return e.visible !== undefined ? e.visible : true;
+          }).map(function (e) {
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton["default"], {
               table: table,
               toggle: e.toggle,
@@ -297,7 +307,9 @@ var DataGrid = function DataGrid(_ref) {
             flexWrap: 'wrap',
             gap: 3
           },
-          children: [(extraActions === null || extraActions === void 0 ? void 0 : extraActions.length) > 0 && extraActions.map(function (a, idx) {
+          children: [(extraActions === null || extraActions === void 0 ? void 0 : extraActions.length) > 0 && extraActions.filter(function (e) {
+            return e.visible !== undefined ? e.visible : true;
+          }).map(function (a, idx) {
             var _ref3 = a || {},
               fnc = _ref3["function"],
               content = _ref3.content,
@@ -307,12 +319,6 @@ var DataGrid = function DataGrid(_ref) {
               _ref3$style = _ref3.style,
               style = _ref3$style === void 0 ? {} : _ref3$style,
               propsButton = _ref3.propsButton;
-            var defaultStyle = {
-              display: 'flex',
-              height: '36px',
-              alignItems: 'center',
-              justifyContent: 'center'
-            };
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
               title: tooltip || content,
               arrow: true,
@@ -328,6 +334,41 @@ var DataGrid = function DataGrid(_ref) {
                 }, propsButton))
               })
             }, "extraActions" + idx);
+          }), (filerActions === null || filerActions === void 0 ? void 0 : filerActions.length) > 0 && filerActions.filter(function (e) {
+            return e.visible !== undefined ? e.visible : true;
+          }).map(function (e, idx) {
+            var _ref4 = e || {},
+              state = _ref4.state,
+              fnc = _ref4["function"],
+              key = _ref4.key,
+              name = _ref4.name,
+              _ref4$tooltip = _ref4.tooltip,
+              tooltip = _ref4$tooltip === void 0 ? '' : _ref4$tooltip,
+              disabled = _ref4.disabled;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+              title: tooltip || name,
+              arrow: true,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_semanticUiReact.Button, _objectSpread(_objectSpread({
+                  circular: true,
+                  toggle: true,
+                  active: !state,
+                  inverted: true,
+                  color: state ? "orange" : "green"
+                }, name ? {
+                  content: name
+                } : {}), {}, {
+                  onClick: fnc,
+                  icon: state ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_semanticUiReact.Icon, {
+                    name: "eye slash"
+                  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_semanticUiReact.Icon, {
+                    name: "eye"
+                  }),
+                  disabled: disabled,
+                  style: defaultStyle
+                }), key || name)
+              })
+            }, "filterActions" + idx);
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExportActions["default"], {
             table: table,
             data: createRows,
@@ -353,12 +394,7 @@ var DataGrid = function DataGrid(_ref) {
                 }),
                 primary: true,
                 inverted: true,
-                style: {
-                  display: 'flex',
-                  height: '36px',
-                  alignItems: 'center',
-                  justifyContent: 'center'
-                }
+                style: defaultStyle
               })
             })
           }), hasClearSelectionBtn && (!disableSelect || disableRows.length > 0) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
@@ -518,16 +554,16 @@ var DataGrid = function DataGrid(_ref) {
       filterRegex: 'Regex',
       filterLogical: 'Logical'
     },
-    renderColumnFilterModeMenuItems: function renderColumnFilterModeMenuItems(_ref4) {
-      var internalFilterOptions = _ref4.internalFilterOptions,
-        onSelectFilterMode = _ref4.onSelectFilterMode;
+    renderColumnFilterModeMenuItems: function renderColumnFilterModeMenuItems(_ref5) {
+      var internalFilterOptions = _ref5.internalFilterOptions,
+        onSelectFilterMode = _ref5.onSelectFilterMode;
       return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ColumnFilter["default"], {
         filterOptions: internalFilterOptions,
         onSelectFilterMode: onSelectFilterMode
       }, "filters")];
     },
-    renderTopToolbar: function renderTopToolbar(_ref5) {
-      var table = _ref5.table;
+    renderTopToolbar: function renderTopToolbar(_ref6) {
+      var table = _ref6.table;
       var selectedRows = table.getSelectedRowModel().flatRows;
       var _table$getState$pagin = table.getState().pagination,
         pageIndex = _table$getState$pagin.pageIndex,
@@ -654,8 +690,8 @@ var DataGrid = function DataGrid(_ref) {
         padding: 'auto'
       })
     },
-    muiTableBodyCellProps: function muiTableBodyCellProps(_ref6) {
-      var row = _ref6.row;
+    muiTableBodyCellProps: function muiTableBodyCellProps(_ref7) {
+      var row = _ref7.row;
       var isDisabled = disableRows.length > 0 ? disableRows.includes(row.original[rowKey]) : false;
       return {
         sx: _objectSpread(_objectSpread({
@@ -750,8 +786,8 @@ var DataGrid = function DataGrid(_ref) {
       };
     },
     onRowSelectionChange: setRowSelection,
-    muiTableBodyRowProps: function muiTableBodyRowProps(_ref7) {
-      var row = _ref7.row;
+    muiTableBodyRowProps: function muiTableBodyRowProps(_ref8) {
+      var row = _ref8.row;
       return {
         sx: {
           backgroundColor: row.depth > 0 ? '#f0f0f0' : 'white'
@@ -763,8 +799,8 @@ var DataGrid = function DataGrid(_ref) {
     enableTopToolbar: enableTopToolbar,
     enableBottomToolbar: enableBottomToolbar,
     enableExpanding: enableExpanding,
-    muiSelectCheckboxProps: function muiSelectCheckboxProps(_ref8) {
-      var row = _ref8.row;
+    muiSelectCheckboxProps: function muiSelectCheckboxProps(_ref9) {
+      var row = _ref9.row;
       return {
         checked: rowSelection[row.id] || false,
         onChange: function onChange() {
@@ -815,7 +851,7 @@ var DataGrid = function DataGrid(_ref) {
       return r.original;
     });
     if (onVisibleRowsChange) onVisibleRowsChange(rows);
-  }, [table, onVisibleRowsChange]);
+  }, [table.getRowModel().rows, onVisibleRowsChange]);
   (0, _react.useEffect)(function () {
     if (enableFixedHeader) (0, _gridFixedHeader["default"])('fixed-header', enableFixedActions);
   }, [enableFixedHeader, enableFixedActions]);
@@ -853,16 +889,26 @@ DataGrid.propTypes = {
     icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].string]),
     selectionMode: _propTypes["default"].oneOf(['single', 'multi', 'always']),
     confirmMessage: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].string]),
-    hasConfirmMessage: _propTypes["default"].bool
+    hasConfirmMessage: _propTypes["default"].bool,
+    visible: _propTypes["default"].bool
   })),
   // array of objects -> each object represents a single data grid action button
+  filerActions: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    name: _propTypes["default"].string,
+    "function": _propTypes["default"].func.isRequired,
+    tooltip: _propTypes["default"].string,
+    icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].string]),
+    visible: _propTypes["default"].bool
+  })),
+  // array of objects -> each object represents a single data grid filter action button
   extraActions: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     tooltip: _propTypes["default"].string,
     "function": _propTypes["default"].func.isRequired,
     content: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].element]).isRequired,
     icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].string]),
     style: _propTypes["default"].object,
-    propsButton: _propTypes["default"].object
+    propsButton: _propTypes["default"].object,
+    visible: _propTypes["default"].bool
   })),
   // array of objects -> each object represents a single data grid extra action button
   hasExcelExport: _propTypes["default"].bool,

package/build/wrapper/utils/DefaultCellTypes.js

@@ -60,14 +60,23 @@ var DEFAULT_CELL_TYPES = exports.DEFAULT_CELL_TYPES = {
     var cell = _ref.cell;
     return cell.getValue();
   },
-  textTitle: function textTitle(_ref2) {
+  textJustify: function textJustify(_ref2) {
     var cell = _ref2.cell;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      style: {
+        textAlign: "justify"
+      },
       children: cell.getValue()
     });
   },
-  textDescription: function textDescription(_ref3) {
+  textTitle: function textTitle(_ref3) {
     var cell = _ref3.cell;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
+      children: cell.getValue()
+    });
+  },
+  textDescription: function textDescription(_ref4) {
+    var cell = _ref4.cell;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       style: {
         color: '#666'
@@ -75,65 +84,65 @@ var DEFAULT_CELL_TYPES = exports.DEFAULT_CELL_TYPES = {
       children: cell.getValue()
     });
   },
-  textSmall: function textSmall(_ref4) {
-    var cell = _ref4.cell;
+  textSmall: function textSmall(_ref5) {
+    var cell = _ref5.cell;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("small", {
       children: cell.getValue()
     });
   },
-  date: function date(_ref5) {
-    var cell = _ref5.cell,
-      column = _ref5.column;
+  date: function date(_ref6) {
+    var cell = _ref6.cell,
+      column = _ref6.column;
     return (0, _FormatDate["default"])(cell.getValue(), {
       onlyDate: true,
       locale: column.locale || 'pt-PT'
     });
   },
-  datetime: function datetime(_ref6) {
-    var cell = _ref6.cell,
-      column = _ref6.column;
+  datetime: function datetime(_ref7) {
+    var cell = _ref7.cell,
+      column = _ref7.column;
     return (0, _FormatDate["default"])(cell.getValue(), {
       onlyDate: false,
       locale: column.locale || 'pt-PT'
     });
   },
-  number: function number(_ref7) {
-    var cell = _ref7.cell;
+  number: function number(_ref8) {
+    var cell = _ref8.cell;
     return cell.getValue();
   },
-  integer: function integer(_ref8) {
-    var cell = _ref8.cell;
+  integer: function integer(_ref9) {
+    var cell = _ref9.cell;
     return Number.isFinite(cell.getValue()) ? Math.round(cell.getValue()) : cell.getValue();
   },
-  currency: function currency(_ref9) {
-    var cell = _ref9.cell;
+  currency: function currency(_ref10) {
+    var cell = _ref10.cell;
     var v = cell.getValue();
     return typeof v === 'number' ? v.toLocaleString(undefined, {
       style: 'currency',
       currency: 'EUR'
     }) : v;
   },
-  percentage: function percentage(_ref10) {
-    var cell = _ref10.cell;
+  percentage: function percentage(_ref11) {
+    var cell = _ref11.cell;
     var v = cell.getValue();
     return typeof v === 'number' ? "".concat((v * 100).toFixed(2), "%") : v;
   },
-  email: function email(_ref11) {
-    var cell = _ref11.cell;
+  email: function email(_ref12) {
+    var cell = _ref12.cell;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
       href: "mailto:".concat(cell.getValue()),
       children: cell.getValue()
     });
   },
-  phone: function phone(_ref12) {
-    var cell = _ref12.cell;
+  phone: function phone(_ref13) {
+    var cell = _ref13.cell;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
       href: "tel:".concat(cell.getValue()),
       children: cell.getValue()
     });
   },
-  link: function link(_ref13) {
-    var cell = _ref13.cell;
+  link: function link(_ref14) {
+    var cell = _ref14.cell;
     var value = cell.getValue();
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       title: value,
@@ -145,8 +154,8 @@ var DEFAULT_CELL_TYPES = exports.DEFAULT_CELL_TYPES = {
       })
     });
   },
-  array: function array(_ref14) {
-    var cell = _ref14.cell;
+  array: function array(_ref15) {
+    var cell = _ref15.cell;
     var value = cell.getValue();
     var arr = Array.isArray(value) ? value : [];
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -154,8 +163,8 @@ var DEFAULT_CELL_TYPES = exports.DEFAULT_CELL_TYPES = {
       children: arr.join(', ')
     });
   },
-  json: function json(_ref15) {
-    var cell = _ref15.cell;
+  json: function json(_ref16) {
+    var cell = _ref16.cell;
     var value = cell.getValue();
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       title: JSON.stringify(value),
@@ -164,9 +173,9 @@ var DEFAULT_CELL_TYPES = exports.DEFAULT_CELL_TYPES = {
       })
     });
   },
-  countryFlag: function countryFlag(_ref16) {
-    var cell = _ref16.cell,
-      column = _ref16.column;
+  countryFlag: function countryFlag(_ref17) {
+    var cell = _ref17.cell,
+      column = _ref17.column;
     var v = cell.getValue();
     if (!v) return "";
     var iso2 = String(v).toUpperCase();
@@ -189,9 +198,9 @@ var DEFAULT_CELL_TYPES = exports.DEFAULT_CELL_TYPES = {
       })]
     });
   },
-  persons: function persons(_ref17) {
-    var cell = _ref17.cell,
-      column = _ref17.column;
+  persons: function persons(_ref18) {
+    var cell = _ref18.cell,
+      column = _ref18.column;
     var value = cell.getValue();
     var arr;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@insticc/react-datagrid-2",
-  "version": "1.1.26",
+  "version": "1.1.28",
   "description": "",
   "main": "build/index.js",
   "files": [