@insticc/react-datagrid-2 1.0.28 → 1.0.29

package/build/wrapper/ActionButton.js

@@ -31,7 +31,9 @@ var ActionButton = function ActionButton(_ref) {
     _ref$confirmMessage = _ref.confirmMessage,
     confirmMessage = _ref$confirmMessage === void 0 ? 'Are you sure you want to perform this action?' : _ref$confirmMessage,
     _ref$hasConfirmMessag = _ref.hasConfirmMessage,
-    hasConfirmMessage = _ref$hasConfirmMessag === void 0 ? true : _ref$hasConfirmMessag;
+    hasConfirmMessage = _ref$hasConfirmMessag === void 0 ? true : _ref$hasConfirmMessag,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     enableConfirmMessage = _useState2[0],
@@ -125,7 +127,7 @@ var ActionButton = function ActionButton(_ref) {
     title: tooltip || name,
     arrow: true
   }, /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Button, {
-    disabled: shouldDisableActionButton(table),
+    disabled: disabled || shouldDisableActionButton(table),
     onClick: function onClick() {
       return hasConfirmMessage ? setEnableConfirmMessage(true) : handleConfirm();
     },
@@ -189,7 +191,9 @@ ActionButton.propTypes = {
   // the action button selection mode
   confirmMessage: _propTypes["default"].string,
   // the action confirming message
-  hasConfirmMessage: _propTypes["default"].bool // defines whether there is a confirm message for the action button
+  hasConfirmMessage: _propTypes["default"].bool,
+  // defines whether there is a confirm message for the action button
+  disabled: _propTypes["default"].bool // defines whether the button is disabled
 };
 
 // ActionButton.defaultProps = {

package/build/wrapper/index.js

@@ -13,6 +13,7 @@ var _material = require("@mui/material");
 var _ColumnFilter = _interopRequireDefault(require("./ColumnFilter"));
 var _ExportActions = _interopRequireDefault(require("./ExportActions"));
 var _ActionButton = _interopRequireDefault(require("./ActionButton"));
+var _GridHelper = _interopRequireDefault(require("./utils/GridHelper"));
 var _filters = require("./utils/filters");
 require("bootstrap/dist/css/bootstrap.min.css");
 require("semantic-ui-css/semantic.min.css");
@@ -80,7 +81,9 @@ var DataGrid = function DataGrid(_ref) {
     _ref$enableVirtualiza = _ref.enableVirtualization,
     enableVirtualization = _ref$enableVirtualiza === void 0 ? false : _ref$enableVirtualiza,
     _ref$gridHeight = _ref.gridHeight,
-    gridHeight = _ref$gridHeight === void 0 ? 600 : _ref$gridHeight;
+    gridHeight = _ref$gridHeight === void 0 ? 600 : _ref$gridHeight,
+    _ref$gridHelper = _ref.gridHelper,
+    gridHelper = _ref$gridHelper === void 0 ? null : _ref$gridHelper;
   var _useState = (0, _react.useState)(selectedIds.reduce(function (a, v) {
       return _objectSpread(_objectSpread({}, a), {}, _defineProperty({}, v, true));
     }, {})),
@@ -95,6 +98,10 @@ var DataGrid = function DataGrid(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     sorting = _useState6[0],
     setSorting = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    open = _useState8[0],
+    setOpen = _useState8[1];
   //optionally access the underlying virtualizer instance
   var rowVirtualizerInstanceRef = (0, _react.useRef)(null);
 
@@ -329,7 +336,8 @@ var DataGrid = function DataGrid(_ref) {
             color: e.color,
             selectionMode: e.selectionMode,
             confirmMessage: e.confirmMessage,
-            hasConfirmMessage: e.hasConfirmMessage
+            hasConfirmMessage: e.hasConfirmMessage,
+            disabled: e.disabled
           });
         }
       }), /*#__PURE__*/_react["default"].createElement(_ExportActions["default"], {
@@ -349,24 +357,32 @@ var DataGrid = function DataGrid(_ref) {
         title: "Clear all rows selected",
         arrow: true
       }, /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Button, {
+        circular: true,
         disabled: selectedRows.length < 1,
         onClick: function onClick() {
           return table.resetRowSelection();
         },
-        icon: "redo",
-        content: "Clear Selection",
+        content: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Icon, {
+          style: {
+            margin: 0,
+            color: 'inherit'
+          },
+          name: "square outline"
+        }), /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Icon, {
+          style: {
+            margin: 0,
+            color: 'inherit'
+          },
+          name: "close"
+        })),
         primary: true,
-        basic: true,
-        style: {
-          display: 'flex',
-          height: '40px',
-          alignItems: 'center',
-          justifyContent: 'center'
-        }
+        basic: true
+        // style={{ display: 'flex', height: '40px', alignItems: 'center', justifyContent: 'center' }}
       }))), /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
         title: "Clear Filters",
         arrow: true
       }, /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Button, {
+        circular: true,
         onClick: function onClick() {
           return table.resetColumnFilters();
         },
@@ -384,13 +400,19 @@ var DataGrid = function DataGrid(_ref) {
           name: "close"
         })),
         inverted: true,
-        color: "orange",
-        style: {
-          display: 'flex',
-          height: '40px',
-          alignItems: 'center',
-          justifyContent: 'center'
-        }
+        color: "orange"
+        // style={{ display: 'flex', height: '40px', alignItems: 'center', justifyContent: 'center' }}
+      }))), gridHelper && /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
+        title: "Grid Help",
+        arrow: true
+      }, /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Button, {
+        circular: true,
+        onClick: function onClick() {
+          return setOpen(true);
+        },
+        icon: "help",
+        color: "blue"
+        // style={{ display: 'flex', height: '40px', alignItems: 'center', justifyContent: 'center' }}
       }))))), /*#__PURE__*/_react["default"].createElement("div", {
         style: {
           alignSelf: 'flex-end',
@@ -537,7 +559,13 @@ var DataGrid = function DataGrid(_ref) {
     //     </div>
     // )}
   });
-  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_materialReactTable.MaterialReactTable, {
+  return /*#__PURE__*/_react["default"].createElement("div", null, open && /*#__PURE__*/_react["default"].createElement(_GridHelper["default"], {
+    onClose: function onClose() {
+      return setOpen(false);
+    },
+    open: open,
+    content: gridHelper
+  }), /*#__PURE__*/_react["default"].createElement(_materialReactTable.MaterialReactTable, {
     table: table
   }));
 };
@@ -590,7 +618,9 @@ DataGrid.propTypes = {
   enableDensityToggle: _propTypes["default"].bool,
   enableGlobalFilter: _propTypes["default"].bool,
   enableVirtualization: _propTypes["default"].bool,
-  gridHeight: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]) // defines the height of the grid content, can be a number like 600, or a string like '600px' or 'fit-content'
+  gridHeight: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
+  // defines the height of the grid content, can be a number like 600, or a string like '600px' or 'fit-content'
+  gridHelper: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].element])
 };
 var _default = exports["default"] = DataGrid; // DataGrid.defaultProps = {
 //   hasExcelExport: false,

package/build/wrapper/utils/GridHelper.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _semanticUiReact = require("semantic-ui-react");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var GridHelper = function GridHelper(_ref) {
+  var open = _ref.open,
+    content = _ref.content,
+    onClose = _ref.onClose;
+  return /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Modal, {
+    open: open,
+    centered: true,
+    style: {
+      top: 'auto',
+      right: 'auto',
+      left: 'auto',
+      bottom: 'auto',
+      height: 'fit-content'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Modal.Header, null, "Grid Helper"), /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Modal.Content, null, content), /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Modal.Actions, null, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Button, {
+    primary: true,
+    onClick: onClose
+  }, "Close")));
+};
+var _default = exports["default"] = GridHelper;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@insticc/react-datagrid-2",
-  "version": "1.0.28",
+  "version": "1.0.29",
   "description": "",
   "main": "build/index.js",
   "scripts": {