qbs-react-grid 1.1.0 → 1.1.2

package/es/qbsTable/CustomTableCell.js

@@ -3,10 +3,10 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 var _excluded = ["rowData", "onChange", "checkedKeys", "dataKey", "dataTheme"],
   _excluded2 = ["rowData", "dataKey", "expandedRowKeys", "onChange"],
   _excluded3 = ["rowData", "renderCell", "toolTip", "dataKey", "onChange", "rowClick", "type", "link"];
-import React from 'react';
+import React, { useState } from 'react';
 import Cell from '../Cell';
-import MenuDropDown from './utilities/menuDropDown';
 import { handleCellFormat } from './utilities/handleFormatCell';
+import MenuDropDown from './utilities/menuDropDown';
 var CHECKBOX_LINE_HEIGHT = '36px';
 export var CheckCell = /*#__PURE__*/React.memo(function (_ref) {
   var rowData = _ref.rowData,
@@ -82,12 +82,30 @@ export var CustomTableCell = /*#__PURE__*/React.memo(function (_ref4) {
     type = _ref4.type,
     link = _ref4.link,
     props = _objectWithoutPropertiesLoose(_ref4, _excluded3);
-  return /*#__PURE__*/React.createElement(Cell, _extends({}, props, {
+  var _useState = useState(false),
+    openMenu = _useState[0],
+    setOpenMenu = _useState[1];
+  var handleRightClick = function handleRightClick() {
+    setOpenMenu(true);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Cell, _extends({}, props, {
     dataKey: dataKey
   }), link ? /*#__PURE__*/React.createElement("a", {
     onClick: function onClick() {
       return rowClick === null || rowClick === void 0 ? void 0 : rowClick(rowData);
     },
-    className: "qbs-table-row-link"
-  }, renderCell ? (_renderCell = renderCell(rowData)) === null || _renderCell === void 0 ? void 0 : _renderCell.cell : handleCellFormat(rowData[dataKey], type)) : /*#__PURE__*/React.createElement(React.Fragment, null, renderCell ? (_renderCell2 = renderCell(rowData)) === null || _renderCell2 === void 0 ? void 0 : _renderCell2.cell : handleCellFormat(rowData[dataKey], type)));
+    className: "qbs-table-row-link",
+    onContextMenu: function onContextMenu() {
+      // Additional actions on right-click, if needed
+      handleRightClick();
+    }
+  }, renderCell ? (_renderCell = renderCell(rowData)) === null || _renderCell === void 0 ? void 0 : _renderCell.cell : handleCellFormat(rowData[dataKey], type)) : /*#__PURE__*/React.createElement(React.Fragment, null, renderCell ? (_renderCell2 = renderCell(rowData)) === null || _renderCell2 === void 0 ? void 0 : _renderCell2.cell : handleCellFormat(rowData[dataKey], type))), openMenu && /*#__PURE__*/React.createElement("div", {
+    className: 'qbs-table-qbs-table-menu-dropdown-content'
+  }, /*#__PURE__*/React.createElement("a", {
+    key: 'sdf',
+    onClick: function onClick() {
+      return window.open(rowClick === null || rowClick === void 0 ? void 0 : rowClick(rowData));
+    },
+    className: "p-2 leading-7 hover:bg-background "
+  }, "sdfsdfsdf")));
 });

package/es/qbsTable/Toolbar.js

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import debounce from './utilities/debounce';
 import SearchInput from './utilities/SearchInput';
 import { getRowDisplayRange } from './utilities/tablecalc';
@@ -21,12 +21,16 @@ var ToolBar = function ToolBar(_ref) {
     onSelect = _ref.onSelect,
     dataLength = _ref.dataLength;
   var debouncedOnSearch = useCallback(debounce(onSearch != null ? onSearch : function () {}, 1000), [onSearch]);
+  var _useState = useState(searchValue),
+    searchParam = _useState[0],
+    setSearchParam = _useState[1];
   var handleSearch = useCallback(function (e) {
     if (debouncedOnSearch) {
       debouncedOnSearch(e);
     }
   }, [debouncedOnSearch]);
   var handleChange = useCallback(function (e) {
+    setSearchParam(e);
     if (asyncSearch) {
       handleSearch(e);
     } else {
@@ -56,7 +60,7 @@ var ToolBar = function ToolBar(_ref) {
     placeholder: "Search",
     handleChange: handleChange,
     handleSearch: handleSearch,
-    searchValue: searchValue
+    searchValue: searchParam
   }), /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-primary-filter"
   }, primaryFilter)), /*#__PURE__*/React.createElement("div", {

package/es/qbsTable/utilities/ToolTip.js

@@ -1,16 +1,27 @@
-import React from 'react';
-import { Tooltip, Whisper } from 'rsuite';
-var tooltip = function tooltip(titleL) {
-  return /*#__PURE__*/React.createElement(Tooltip, null, titleL);
-};
+import React, { useEffect, useState } from 'react';
 var TooltipComponent = function TooltipComponent(_ref) {
   var title = _ref.title,
     children = _ref.children;
-  return /*#__PURE__*/React.createElement(Whisper, {
-    placement: "bottom",
-    controlId: "control-id-hover",
-    trigger: "hover",
-    speaker: tooltip(title)
-  }, children);
+  var _useState = useState(0),
+    scrollY = _useState[0],
+    setScrollY = _useState[1];
+  var _useState2 = useState(true),
+    isScrollingUp = _useState2[0],
+    setIsScrollingUp = _useState2[1];
+  var handleScroll = function handleScroll() {
+    setIsScrollingUp(window.scrollY < scrollY);
+    setScrollY(window.scrollY);
+  };
+  useEffect(function () {
+    window.addEventListener('scroll', handleScroll);
+    return function () {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [scrollY]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "qbs-table-tooltip " + (!isScrollingUp ? 'up' : 'down')
+  }, /*#__PURE__*/React.createElement("span", null, children), /*#__PURE__*/React.createElement("span", {
+    className: "tooltiptext"
+  }, title));
 };
 export default TooltipComponent;

package/lib/qbsTable/CustomTableCell.js

@@ -5,13 +5,15 @@ exports.__esModule = true;
 exports.ExpandCell = exports.CustomTableCell = exports.CheckCell = exports.ActionCell = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _Cell = _interopRequireDefault(require("../Cell"));
-var _menuDropDown = _interopRequireDefault(require("./utilities/menuDropDown"));
 var _handleFormatCell = require("./utilities/handleFormatCell");
+var _menuDropDown = _interopRequireDefault(require("./utilities/menuDropDown"));
 var _excluded = ["rowData", "onChange", "checkedKeys", "dataKey", "dataTheme"],
   _excluded2 = ["rowData", "dataKey", "expandedRowKeys", "onChange"],
   _excluded3 = ["rowData", "renderCell", "toolTip", "dataKey", "onChange", "rowClick", "type", "link"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var CHECKBOX_LINE_HEIGHT = '36px';
 var CheckCell = /*#__PURE__*/_react["default"].memo(function (_ref) {
   var rowData = _ref.rowData,
@@ -90,13 +92,31 @@ var CustomTableCell = /*#__PURE__*/_react["default"].memo(function (_ref4) {
     type = _ref4.type,
     link = _ref4.link,
     props = (0, _objectWithoutPropertiesLoose2["default"])(_ref4, _excluded3);
-  return /*#__PURE__*/_react["default"].createElement(_Cell["default"], (0, _extends2["default"])({}, props, {
+  var _useState = (0, _react.useState)(false),
+    openMenu = _useState[0],
+    setOpenMenu = _useState[1];
+  var handleRightClick = function handleRightClick() {
+    setOpenMenu(true);
+  };
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Cell["default"], (0, _extends2["default"])({}, props, {
     dataKey: dataKey
   }), link ? /*#__PURE__*/_react["default"].createElement("a", {
     onClick: function onClick() {
       return rowClick === null || rowClick === void 0 ? void 0 : rowClick(rowData);
     },
-    className: "qbs-table-row-link"
-  }, renderCell ? (_renderCell = renderCell(rowData)) === null || _renderCell === void 0 ? void 0 : _renderCell.cell : (0, _handleFormatCell.handleCellFormat)(rowData[dataKey], type)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, renderCell ? (_renderCell2 = renderCell(rowData)) === null || _renderCell2 === void 0 ? void 0 : _renderCell2.cell : (0, _handleFormatCell.handleCellFormat)(rowData[dataKey], type)));
+    className: "qbs-table-row-link",
+    onContextMenu: function onContextMenu() {
+      // Additional actions on right-click, if needed
+      handleRightClick();
+    }
+  }, renderCell ? (_renderCell = renderCell(rowData)) === null || _renderCell === void 0 ? void 0 : _renderCell.cell : (0, _handleFormatCell.handleCellFormat)(rowData[dataKey], type)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, renderCell ? (_renderCell2 = renderCell(rowData)) === null || _renderCell2 === void 0 ? void 0 : _renderCell2.cell : (0, _handleFormatCell.handleCellFormat)(rowData[dataKey], type))), openMenu && /*#__PURE__*/_react["default"].createElement("div", {
+    className: 'qbs-table-qbs-table-menu-dropdown-content'
+  }, /*#__PURE__*/_react["default"].createElement("a", {
+    key: 'sdf',
+    onClick: function onClick() {
+      return window.open(rowClick === null || rowClick === void 0 ? void 0 : rowClick(rowData));
+    },
+    className: "p-2 leading-7 hover:bg-background "
+  }, "sdfsdfsdf")));
 });
 exports.CustomTableCell = CustomTableCell;

package/lib/qbsTable/Toolbar.js

@@ -28,12 +28,16 @@ var ToolBar = function ToolBar(_ref) {
     onSelect = _ref.onSelect,
     dataLength = _ref.dataLength;
   var debouncedOnSearch = (0, _react.useCallback)((0, _debounce["default"])(onSearch != null ? onSearch : function () {}, 1000), [onSearch]);
+  var _useState = (0, _react.useState)(searchValue),
+    searchParam = _useState[0],
+    setSearchParam = _useState[1];
   var handleSearch = (0, _react.useCallback)(function (e) {
     if (debouncedOnSearch) {
       debouncedOnSearch(e);
     }
   }, [debouncedOnSearch]);
   var handleChange = (0, _react.useCallback)(function (e) {
+    setSearchParam(e);
     if (asyncSearch) {
       handleSearch(e);
     } else {
@@ -63,7 +67,7 @@ var ToolBar = function ToolBar(_ref) {
     placeholder: "Search",
     handleChange: handleChange,
     handleSearch: handleSearch,
-    searchValue: searchValue
+    searchValue: searchParam
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-primary-filter"
   }, primaryFilter)), /*#__PURE__*/_react["default"].createElement("div", {

package/lib/qbsTable/utilities/ToolTip.js

@@ -1,22 +1,34 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _rsuite = require("rsuite");
-var tooltip = function tooltip(titleL) {
-  return /*#__PURE__*/_react["default"].createElement(_rsuite.Tooltip, null, titleL);
-};
+var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var TooltipComponent = function TooltipComponent(_ref) {
   var title = _ref.title,
     children = _ref.children;
-  return /*#__PURE__*/_react["default"].createElement(_rsuite.Whisper, {
-    placement: "bottom",
-    controlId: "control-id-hover",
-    trigger: "hover",
-    speaker: tooltip(title)
-  }, children);
+  var _useState = (0, _react.useState)(0),
+    scrollY = _useState[0],
+    setScrollY = _useState[1];
+  var _useState2 = (0, _react.useState)(true),
+    isScrollingUp = _useState2[0],
+    setIsScrollingUp = _useState2[1];
+  var handleScroll = function handleScroll() {
+    setIsScrollingUp(window.scrollY < scrollY);
+    setScrollY(window.scrollY);
+  };
+  (0, _react.useEffect)(function () {
+    window.addEventListener('scroll', handleScroll);
+    return function () {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [scrollY]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "qbs-table-tooltip " + (!isScrollingUp ? 'up' : 'down')
+  }, /*#__PURE__*/_react["default"].createElement("span", null, children), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "tooltiptext"
+  }, title));
 };
 var _default = TooltipComponent;
 exports["default"] = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qbs-react-grid",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "A React table component",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",

package/src/qbsTable/CustomTableCell.tsx

@@ -1,11 +1,10 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import Cell from '../Cell';
-import MenuDropDown from './utilities/menuDropDown';
 import { handleCellFormat } from './utilities/handleFormatCell';
+import MenuDropDown from './utilities/menuDropDown';
 
 const CHECKBOX_LINE_HEIGHT = '36px';
-
 export const CheckCell: React.FC<any> = React.memo(
   ({ rowData, onChange, checkedKeys, dataKey, dataTheme, ...props }) => (
     <Cell {...props} style={{ padding: 0 }} dataTheme={dataTheme}>
@@ -63,16 +62,40 @@ export const ExpandCell: React.FC<any> = React.memo(
 );
 export const CustomTableCell: React.FC<any> = React.memo(
   ({ rowData, renderCell, toolTip, dataKey, onChange, rowClick, type, link, ...props }) => {
+    const [openMenu, setOpenMenu] = useState(false);
+    const handleRightClick = () => {
+      setOpenMenu(true);
+    };
     return (
-      <Cell {...props} dataKey={dataKey}>
-        {link ? (
-          <a onClick={() => rowClick?.(rowData)} className="qbs-table-row-link">
-            {renderCell ? renderCell(rowData)?.cell : handleCellFormat(rowData[dataKey], type)}
-          </a>
-        ) : (
-          <>{renderCell ? renderCell(rowData)?.cell : handleCellFormat(rowData[dataKey], type)}</>
+      <>
+        <Cell {...props} dataKey={dataKey}>
+          {link ? (
+            <a
+              onClick={() => rowClick?.(rowData)}
+              className="qbs-table-row-link"
+              onContextMenu={() => {
+                // Additional actions on right-click, if needed
+                handleRightClick();
+              }}
+            >
+              {renderCell ? renderCell(rowData)?.cell : handleCellFormat(rowData[dataKey], type)}
+            </a>
+          ) : (
+            <>{renderCell ? renderCell(rowData)?.cell : handleCellFormat(rowData[dataKey], type)}</>
+          )}
+        </Cell>
+        {openMenu && (
+          <div className={'qbs-table-qbs-table-menu-dropdown-content'}>
+            <a
+              key={'sdf'}
+              onClick={() => window.open(rowClick?.(rowData))}
+              className={`p-2 leading-7 hover:bg-background `}
+            >
+              sdfsdfsdf
+            </a>
+          </div>
         )}
-      </Cell>
+      </>
     );
   }
 );

package/src/qbsTable/Toolbar.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import { QbsTableToolbarProps } from './commontypes';
 import debounce from './utilities/debounce';
@@ -23,7 +23,7 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
   dataLength
 }) => {
   const debouncedOnSearch = useCallback(debounce(onSearch ?? (() => {}), 1000), [onSearch]);
-
+  const [searchParam, setSearchParam] = useState<string | undefined>(searchValue);
   const handleSearch = useCallback(
     (e?: string) => {
       if (debouncedOnSearch) {
@@ -35,6 +35,7 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
 
   const handleChange = useCallback(
     (e?: string) => {
+      setSearchParam(e);
       if (asyncSearch) {
         handleSearch(e);
       } else {
@@ -61,7 +62,7 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
               placeholder="Search"
               handleChange={handleChange}
               handleSearch={handleSearch}
-              searchValue={searchValue}
+              searchValue={searchParam}
             />
           )}
           <div className="qbs-table-primary-filter">{primaryFilter}</div>

package/src/qbsTable/utilities/ToolTip.tsx

@@ -1,19 +1,25 @@
-import React from 'react';
-import { Tooltip, Whisper } from 'rsuite';
+import React, { useEffect, useState } from 'react';
 
-const tooltip = (titleL: string) => {
-  return <Tooltip>{titleL}</Tooltip>;
-};
 const TooltipComponent: React.FC<any> = ({ title, children }) => {
+  const [scrollY, setScrollY] = useState(0);
+  const [isScrollingUp, setIsScrollingUp] = useState(true);
+
+  const handleScroll = () => {
+    setIsScrollingUp(window.scrollY < scrollY);
+    setScrollY(window.scrollY);
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [scrollY]);
   return (
-    <Whisper
-      placement="bottom"
-      controlId="control-id-hover"
-      trigger="hover"
-      speaker={tooltip(title)}
-    >
-      {children}
-    </Whisper>
+    <div className={`qbs-table-tooltip ${!isScrollingUp ? 'up' : 'down'}`}>
+      <span>{children}</span>
+      <span className="tooltiptext">{title}</span>
+    </div>
   );
 };