qbs-react-grid 1.1.1 → 1.1.3

package/es/qbsTable/CustomTableCell.js

@@ -5,8 +5,8 @@ var _excluded = ["rowData", "onChange", "checkedKeys", "dataKey", "dataTheme"],
   _excluded3 = ["rowData", "renderCell", "toolTip", "dataKey", "onChange", "rowClick", "type", "link"];
 import React 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,12 @@ 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, {
+  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)));
+  }, 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))));
 });

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

@@ -7,8 +7,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireDefault(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"];
@@ -90,13 +90,13 @@ 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, {
+  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)));
+  }, 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))));
 });
 exports.CustomTableCell = CustomTableCell;

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.1",
+  "version": "1.1.3",
   "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 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}>
@@ -64,15 +63,17 @@ 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 }) => {
     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>
+      <>
+        <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>
+      </>
     );
   }
 );

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>
   );
 };