@insticc/react-datagrid-2 1.1.27 → 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,
@@ -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/package.json

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