qbs-react-grid 1.2.1 → 1.2.3

package/lib/Table.js

@@ -36,13 +36,13 @@ var filterTreeData = function filterTreeData(data, expandedRowKeys, rowKey) {
   return (0, _utils.flattenData)(data).filter(function (rowData) {
     if (rowKey) {
       var parents = (0, _utils.findAllParents)(rowData, rowKey);
-      var _expanded = (0, _utils.shouldShowRowByExpanded)(expandedRowKeys, parents);
+      var expanded = (0, _utils.shouldShowRowByExpanded)(expandedRowKeys, parents);
 
       // FIXME This function is supposed to be pure.
       //       Don't mutate rowData in-place!
-      rowData[_constants.EXPANDED_KEY] = _expanded;
+      rowData[_constants.EXPANDED_KEY] = expanded;
       rowData[_constants.TREE_DEPTH] = parents.length;
-      return _expanded;
+      return expanded;
     }
   });
 };
@@ -593,7 +593,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
 
       // Cells marked as deleted when checking for merged cell.
       var removedCell = (_cell$props4 = cell.props) !== null && _cell$props4 !== void 0 && _cell$props4.rowSpan && !rowSpan && ((_rowSpanState$current2 = rowSpanState.current[_cellKey]) === null || _rowSpanState$current2 === void 0 ? void 0 : _rowSpanState$current2[0]) !== 0 ? true : false;
-      cells.push( /*#__PURE__*/_react["default"].cloneElement(cell, {
+      cells.push(/*#__PURE__*/_react["default"].cloneElement(cell, {
         hasChildren: hasChildren,
         rowData: rowData,
         rowIndex: props.rowIndex,
@@ -617,7 +617,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     }
     var scrollbars = [];
     if (hasHorizontalScrollbar && !(tableKey === 'parent' && isChildFocused)) {
-      scrollbars.push( /*#__PURE__*/_react["default"].createElement(_Scrollbar["default"], {
+      scrollbars.push(/*#__PURE__*/_react["default"].createElement(_Scrollbar["default"], {
         key: "scrollbar",
         tableId: id,
         style: {
@@ -630,7 +630,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       }));
     }
     if (hasVerticalScrollbar && !(tableKey === 'parent' && isChildFocused)) {
-      scrollbars.push( /*#__PURE__*/_react["default"].createElement(_Scrollbar["default"], {
+      scrollbars.push(/*#__PURE__*/_react["default"].createElement(_Scrollbar["default"], {
         vertical: true,
         key: "vertical-scrollbar",
         tableId: id,
@@ -673,7 +673,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     var bottomHideHeight = 0;
     visibleRows.current = [];
     if (data) {
-      var _top = 0; // Row position
+      var top = 0; // Row position
       var minTop = Math.abs(scrollY.current);
       var maxTop = minTop + height + rowExpandedHeight;
       var isCustomRowHeight = typeof rowHeight === 'function';
@@ -690,13 +690,13 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
           maxTop = maxTop + coveredHeight;
         }
         for (var index = 0; index < data.length; index++) {
-          var _rowData = data[index];
+          var rowData = data[index];
           var maxHeight = tableRowsMaxHeight[index];
-          var expandedRow = shouldRenderExpandedRow(_rowData);
+          var expandedRow = shouldRenderExpandedRow(rowData);
           var nextRowHeight = 0;
           var cellHeight = 0;
           if (typeof rowHeight === 'function') {
-            nextRowHeight = rowHeight(_rowData);
+            nextRowHeight = rowHeight(rowData);
             cellHeight = nextRowHeight;
           } else {
             nextRowHeight = maxHeight ? Math.max(maxHeight + _constants.CELL_PADDING_HEIGHT, rowHeight) : rowHeight;
@@ -709,10 +709,10 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
           contentHeight += nextRowHeight;
           var rowProps = {
             key: index,
-            top: _top,
+            top: top,
             rowIndex: index,
             width: rowWidth,
-            depth: _rowData[_constants.TREE_DEPTH],
+            depth: rowData[_constants.TREE_DEPTH],
             height: nextRowHeight,
             cellHeight: cellHeight,
             index: index,
@@ -720,17 +720,17 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
             handleParentCallBack: handleParentCallBack,
             zIndexValue: rowZIndices[index]
           };
-          _top += nextRowHeight;
+          top += nextRowHeight;
           if (virtualized && !wordWrap) {
-            if (_top + nextRowHeight < minTop) {
+            if (top + nextRowHeight < minTop) {
               topHideHeight += nextRowHeight;
               continue;
-            } else if (_top > maxTop) {
+            } else if (top > maxTop) {
               bottomHideHeight += nextRowHeight;
               continue;
             }
           }
-          visibleRows.current.push(renderRowData(bodyCells, _rowData, rowProps, expandedRow));
+          visibleRows.current.push(renderRowData(bodyCells, rowData, rowProps, expandedRow));
         }
       } else {
         /** virtualized */
@@ -752,11 +752,11 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
         topHideHeight = startIndex * _nextRowHeight;
         bottomHideHeight = (data.length - endIndex) * _nextRowHeight;
         for (var _index = startIndex; _index < endIndex; _index++) {
-          var _rowData2 = data[_index];
+          var _rowData = data[_index];
           var _rowProps = {
             key: _index,
             rowIndex: _index,
-            depth: _rowData2[_constants.TREE_DEPTH],
+            depth: _rowData[_constants.TREE_DEPTH],
             top: _index * _nextRowHeight,
             width: rowWidth,
             height: _nextRowHeight,
@@ -766,7 +766,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
             handleParentCallBack: handleParentCallBack,
             zIndexValue: rowZIndices[_index]
           };
-          visibleRows.current.push(renderRowData(bodyCells, _rowData2, _rowProps, false));
+          visibleRows.current.push(renderRowData(bodyCells, _rowData, _rowProps, false));
         }
       }
     }

package/lib/less/index.less

@@ -1,3 +1,6 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 @import './themes.less';
 
 .rs {

package/lib/less/qbs-table.less

@@ -180,16 +180,77 @@
   transition: all 0.2s ease;
 }
 /* Tooltip container */
+// .qbs-table-tooltip {
+//   position: relative;
+//   display: contents;
+//   cursor: pointer;
+// }
+
+// .qbs-table-tooltip .tooltiptext {
+//   visibility: hidden;
+//   background-color: #000;
+//   color: #fff;
+//   text-align: center;
+//   padding: 6px;
+//   border-radius: 4px;
+//   position: absolute;
+//   z-index: 9999;
+//   opacity: 0;
+//   transition: opacity 0.3s;
+//   font-size: 12px;
+//   font-style: normal;
+//   font-weight: 400;
+//   line-height: 16px;
+//   width: 100px;
+// }
+
+// .qbs-table-tooltip.up .tooltiptext {
+//   bottom: 125%;
+//   left: 0%;
+// }
+
+// .qbs-table-tooltip.down .tooltiptext {
+//   top: 125%;
+//   right: 0px;
+//   left: auto;
+// }
+
+// .qbs-table-tooltip:hover .tooltiptext {
+//   visibility: visible;
+//   opacity: 1;
+// }
+
+// .qbs-table-tooltip .tooltiptext::after {
+//   content: '';
+//   position: absolute;
+//   border-width: 5px;
+//   border-style: solid;
+// }
+
+// .qbs-table-tooltip.up .tooltiptext::after {
+//   top: 100%;
+//   left: 50%;
+//   margin-left: -5px;
+//   border-color: #000 transparent transparent transparent;
+// }
+
+// .qbs-table-tooltip.down .tooltiptext::after {
+//   bottom: 100%;
+//   left: 50%;
+//   margin-left: -5px;
+//   border-color: transparent transparent #000 transparent;
+// }
 .qbs-table-tooltip {
-  position: relative;
-  display: contents;
   cursor: pointer;
+  position: relative;
+  width: auto;
+  display: flex;
 }
 
 .qbs-table-tooltip .tooltiptext {
   visibility: hidden;
-  background-color: #000;
-  color: #fff;
+  background-color: black;
+  color: white;
   text-align: center;
   padding: 6px;
   border-radius: 4px;
@@ -205,20 +266,20 @@
 }
 
 .qbs-table-tooltip.up .tooltiptext {
-  bottom: 125%;
-  left: 0%;
+  bottom: calc(100% + 10px);
+  right: -8px;
+  left: unset;
 }
 
 .qbs-table-tooltip.down .tooltiptext {
-  top: 125%;
-  right: 0px;
-  left: auto;
+  right: -10px;
+  top: calc(100% + 8px);
 }
 
-.qbs-table-tooltip:hover .tooltiptext {
-  visibility: visible;
-  opacity: 1;
-}
+// .qbs-table-tooltip:hover .tooltiptext {
+//   visibility: visible;
+//   opacity: 1;
+// }
 
 .qbs-table-tooltip .tooltiptext::after {
   content: '';
@@ -228,19 +289,25 @@
 }
 
 .qbs-table-tooltip.up .tooltiptext::after {
-  top: 100%;
-  left: 50%;
-  margin-left: -5px;
-  border-color: #000 transparent transparent transparent;
+  border-color: black transparent transparent !important;
+  right: 12px !important;
+  margin-left: -5px !important;
+  top: 100% !important;
+  left: unset !important;
 }
 
 .qbs-table-tooltip.down .tooltiptext::after {
-  bottom: 100%;
-  left: 50%;
-  margin-left: -5px;
-  border-color: transparent transparent #000 transparent;
+  border-color: transparent transparent black;
+  bottom: 100% !important;
+  right: 12px !important;
+  margin-left: -5px !important;
+  left: unset !important;
+}
+.qbs-table-tooltip.down .tooltiptext {
+  top: 145% !important;
+  right: -10px !important;
+  left: auto !important;
 }
-
 .rs-table-row {
   overflow: visible !important;
 }

package/lib/qbsTable/QbsTable.js

@@ -16,9 +16,10 @@ var _Toolbar = _interopRequireDefault(require("./Toolbar"));
 var _ColumShowHide = _interopRequireDefault(require("./utilities/ColumShowHide"));
 var _debounce = _interopRequireDefault(require("./utilities/debounce"));
 var _deepEqual = require("./utilities/deepEqual");
+var _empty = _interopRequireDefault(require("./utilities/empty"));
 var _icons = require("./utilities/icons");
 require("../../dist/css/qbs-react-grid.css");
-var _empty = _interopRequireDefault(require("./utilities/empty"));
+var _CardComponent = _interopRequireDefault(require("./utilities/CardComponent"));
 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; }
 // import 'qbs-react-table/dist/css/qbs-react-grid.css';
@@ -97,7 +98,15 @@ var QbsTable = function QbsTable(_ref) {
     _renderEmpty = _ref.renderEmpty,
     autoHeight = _ref.autoHeight,
     emptySubTitle = _ref.emptySubTitle,
-    emptyTitle = _ref.emptyTitle;
+    emptyTitle = _ref.emptyTitle,
+    _ref$tableView = _ref.tableView,
+    tableView = _ref$tableView === void 0 ? true : _ref$tableView,
+    _ref$enableTableToggl = _ref.enableTableToggle,
+    enableTableToggle = _ref$enableTableToggl === void 0 ? false : _ref$enableTableToggl,
+    _ref$cardColumLimit = _ref.cardColumLimit,
+    cardColumLimit = _ref$cardColumLimit === void 0 ? 5 : _ref$cardColumLimit,
+    _ref$childDetailHeadi = _ref.childDetailHeading,
+    childDetailHeading = _ref$childDetailHeadi === void 0 ? '' : _ref$childDetailHeadi;
   var _useState = (0, _react.useState)(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -115,6 +124,9 @@ var QbsTable = function QbsTable(_ref) {
     isOpen = _useState4[0],
     setIsOpen = _useState4[1];
   var prevColumns = (0, _react.useRef)();
+  var _useState5 = (0, _react.useState)(tableView),
+    tableViewToggle = _useState5[0],
+    setTableViewToggle = _useState5[1];
   var tableBodyRef = (0, _react.useRef)(null);
   var handleSortColumn = (0, _react.useCallback)(function (sortColumn, sortType) {
     setLoading(true);
@@ -137,6 +149,10 @@ var QbsTable = function QbsTable(_ref) {
     var keys = event.target.checked ? data.map(function (item) {
       return item.id;
     }) : [];
+    //  let updatedKeys = [...keys];
+    //  if (checkedKeys) {
+    //    updatedKeys = [...checkedKeys, ...updatedKeys];
+    //  } TODO => previous bug fix removed this section
     var updatedKeys = [].concat(keys);
     setCheckedKeys(updatedKeys);
     handleChecked(updatedKeys);
@@ -233,7 +249,10 @@ var QbsTable = function QbsTable(_ref) {
     onSelect: handleClear,
     handleColumnToggle: handleColumnToggle,
     dataLength: data === null || data === void 0 ? void 0 : data.length,
-    searchPlaceholder: searchPlaceholder
+    searchPlaceholder: searchPlaceholder,
+    setTableViewToggle: setTableViewToggle,
+    tableViewToggle: tableViewToggle,
+    enableTableToggle: enableTableToggle
   };
   var themeToggle = (0, _react.useMemo)(function () {
     return document.getElementById('themeToggle');
@@ -410,7 +429,7 @@ var QbsTable = function QbsTable(_ref) {
     "data-theme": dataTheme
   }, toolbar && /*#__PURE__*/_react["default"].createElement(_Toolbar["default"], toolbarProps), /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-border-wrap"
-  }, /*#__PURE__*/_react["default"].createElement(_Table["default"], {
+  }, tableViewToggle ? /*#__PURE__*/_react["default"].createElement(_Table["default"], {
     height: autoHeight ? undefined : height,
     key: tableKey,
     tableKey: tableKey,
@@ -482,13 +501,13 @@ var QbsTable = function QbsTable(_ref) {
   }, /*#__PURE__*/_react["default"].createElement("input", {
     type: "checkbox",
     onChange: handleCheckAll,
-    id: "checkbox-all",
+    id: 'checkbox-all',
     className: "qbs-table-checkbox-input " + classes.tableCheckBoxClass,
     checked: (data === null || data === void 0 ? void 0 : data.length) > 0 && data.every(function (item) {
       return checkedKeys === null || checkedKeys === void 0 ? void 0 : checkedKeys.includes(item.id);
     })
   }), /*#__PURE__*/_react["default"].createElement("label", {
-    htmlFor: "checkbox-all"
+    htmlFor: 'checkbox-all'
   }, /*#__PURE__*/_react["default"].createElement("svg", {
     width: "8",
     height: "6",
@@ -559,7 +578,21 @@ var QbsTable = function QbsTable(_ref) {
     className: classes.cellClass + " " + classes.actionCellClass,
     handleMenuActions: handleMenuActions,
     dataTheme: dataTheme
-  }))), /*#__PURE__*/_react["default"].createElement("div", null, pagination && (data === null || data === void 0 ? void 0 : data.length) > 0 && /*#__PURE__*/_react["default"].createElement(_Pagination["default"], {
+  }))) : /*#__PURE__*/_react["default"].createElement("div", {
+    className: " p-2"
+  }, data.map(function (items) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "flex flex-col gap-3 p-2",
+      key: items === null || items === void 0 ? void 0 : items.id
+    }, /*#__PURE__*/_react["default"].createElement(_CardComponent["default"], {
+      data: items,
+      cardColumLimit: cardColumLimit,
+      childDetailHeading: childDetailHeading,
+      columns: columns,
+      tableBodyRef: tableBodyRef,
+      actionProps: actionProps
+    }));
+  })), /*#__PURE__*/_react["default"].createElement("div", null, pagination && (data === null || data === void 0 ? void 0 : data.length) > 0 && /*#__PURE__*/_react["default"].createElement(_Pagination["default"], {
     paginationProps: paginationProps
   }))));
 };

package/lib/qbsTable/TableCardList.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { QbsTableProps } from './commontypes';
+import '../../dist/css/qbs-react-grid.css';
+declare const QbsTable: React.FC<QbsTableProps>;
+export default QbsTable;