qbs-react-grid 1.1.23 → 1.1.25

package/es/Table.js

@@ -8,7 +8,7 @@ import debounce from 'lodash/debounce';
 import flatten from 'lodash/flatten';
 import isFunction from 'lodash/isFunction';
 import PropTypes from 'prop-types';
-import React, { useCallback, useImperativeHandle, useReducer, useRef, useState, useEffect } from 'react';
+import React, { useCallback, useEffect, useImperativeHandle, useReducer, useRef, useState } from 'react';
 import CellGroup from './CellGroup';
 import { CELL_PADDING_HEIGHT, EXPANDED_KEY, ROW_HEADER_HEIGHT, ROW_HEIGHT, SCROLLBAR_WIDTH, SORT_TYPE, TREE_DEPTH } from './constants';
 import EmptyMessage from './EmptyMessage';
@@ -616,7 +616,6 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     return scrollbars;
   };
-  console.log(window.innerHeight, 'sdfsfsf');
   var _useState2 = useState(Array(data === null || data === void 0 ? void 0 : data.length).fill(1)),
     rowZIndices = _useState2[0],
     setRowZIndices = _useState2[1];

package/es/qbsTable/QbsTable.js

@@ -6,12 +6,13 @@ import ColumnGroup from '../ColumnGroup';
 import HeaderCell from '../HeaderCell';
 import Pagination from '../Pagination';
 import Table from '../Table';
-import { ActionCell, CheckCell, CustomTableCell, ExpandCell, CustomRowStatus } from './CustomTableCell';
+import { ActionCell, CheckCell, CustomRowStatus, CustomTableCell, ExpandCell } from './CustomTableCell';
 import ToolBar from './Toolbar';
 import ColumToggle from './utilities/ColumShowHide';
 import debounce from './utilities/debounce';
 import { deepEqual } from './utilities/deepEqual';
 import { SettingsIcon } from './utilities/icons';
+
 // import 'qbs-react-table/dist/css/qbs-react-grid.css';
 
 import '../../dist/css/qbs-react-grid.css';
@@ -507,7 +508,8 @@ var QbsTable = function QbsTable(_ref) {
     onReorder: onReorder,
     isOpen: isOpen,
     setIsOpen: setIsOpen,
-    handleResetColumns: handleResetColumns
+    handleResetColumns: handleResetColumns,
+    handleColumnToggle: handleColumnToggle
   })), /*#__PURE__*/React.createElement(ActionCell, {
     actionProps: actionProps,
     className: classes.cellClass + " " + classes.actionCellClass,

package/es/qbsTable/utilities/ColumShowHide.d.ts

@@ -6,6 +6,7 @@ interface ColumnToggleProps {
     onReorder: (columns: QbsColumnProps[]) => void;
     setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
     isOpen: boolean;
+    handleColumnToggle?: (columns: QbsColumnProps[]) => void;
     handleResetColumns?: () => void;
 }
 declare const ColumnToggle: React.FC<ColumnToggleProps>;

package/es/qbsTable/utilities/ColumShowHide.js

@@ -6,7 +6,8 @@ var ColumnToggle = function ColumnToggle(_ref) {
     onReorder = _ref.onReorder,
     isOpen = _ref.isOpen,
     setIsOpen = _ref.setIsOpen,
-    handleResetColumns = _ref.handleResetColumns;
+    handleResetColumns = _ref.handleResetColumns,
+    handleColumnToggle = _ref.handleColumnToggle;
   var _useState = useState(null),
     draggedItem = _useState[0],
     setDraggedItem = _useState[1];
@@ -141,6 +142,10 @@ var ColumnToggle = function ColumnToggle(_ref) {
       return !item.isVisible;
     })) === null || _columns$filter === void 0 ? void 0 : _columns$filter.length) > 0 ? true : false;
   };
+  var handleColToggle = function handleColToggle() {
+    setIsOpen(false);
+    handleColumnToggle === null || handleColumnToggle === void 0 ? void 0 : handleColumnToggle(columns);
+  };
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
     onClick: function onClick() {
       return setIsOpen(!isOpen);
@@ -187,13 +192,24 @@ var ColumnToggle = function ColumnToggle(_ref) {
   })))))), handleResetColumns && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-divider"
   }), /*#__PURE__*/React.createElement("div", {
-    className: "qbs-table-popup-item"
+    className: "qbs-table-popup-item",
+    style: {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-between'
+    }
   }, /*#__PURE__*/React.createElement("a", {
     className: "qbs-table-reset-link",
     href: "#",
     onClick: function onClick() {
       return handleResetColumns === null || handleResetColumns === void 0 ? void 0 : handleResetColumns();
     }
-  }, "Reset to default"))))));
+  }, "Reset to default"), /*#__PURE__*/React.createElement("a", {
+    className: "qbs-table-reset-link",
+    href: "#",
+    onClick: function onClick() {
+      return handleColToggle();
+    }
+  }, "Save"))))));
 };
 export default ColumnToggle;

package/lib/Table.js

@@ -623,7 +623,6 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     }
     return scrollbars;
   };
-  console.log(window.innerHeight, 'sdfsfsf');
   var _useState2 = (0, _react.useState)(Array(data === null || data === void 0 ? void 0 : data.length).fill(1)),
     rowZIndices = _useState2[0],
     setRowZIndices = _useState2[1];

package/lib/qbsTable/QbsTable.js

@@ -514,7 +514,8 @@ var QbsTable = function QbsTable(_ref) {
     onReorder: onReorder,
     isOpen: isOpen,
     setIsOpen: setIsOpen,
-    handleResetColumns: handleResetColumns
+    handleResetColumns: handleResetColumns,
+    handleColumnToggle: handleColumnToggle
   })), /*#__PURE__*/_react["default"].createElement(_CustomTableCell.ActionCell, {
     actionProps: actionProps,
     className: classes.cellClass + " " + classes.actionCellClass,

package/lib/qbsTable/utilities/ColumShowHide.d.ts

@@ -6,6 +6,7 @@ interface ColumnToggleProps {
     onReorder: (columns: QbsColumnProps[]) => void;
     setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
     isOpen: boolean;
+    handleColumnToggle?: (columns: QbsColumnProps[]) => void;
     handleResetColumns?: () => void;
 }
 declare const ColumnToggle: React.FC<ColumnToggleProps>;

package/lib/qbsTable/utilities/ColumShowHide.js

@@ -12,7 +12,8 @@ var ColumnToggle = function ColumnToggle(_ref) {
     onReorder = _ref.onReorder,
     isOpen = _ref.isOpen,
     setIsOpen = _ref.setIsOpen,
-    handleResetColumns = _ref.handleResetColumns;
+    handleResetColumns = _ref.handleResetColumns,
+    handleColumnToggle = _ref.handleColumnToggle;
   var _useState = (0, _react.useState)(null),
     draggedItem = _useState[0],
     setDraggedItem = _useState[1];
@@ -147,6 +148,10 @@ var ColumnToggle = function ColumnToggle(_ref) {
       return !item.isVisible;
     })) === null || _columns$filter === void 0 ? void 0 : _columns$filter.length) > 0 ? true : false;
   };
+  var handleColToggle = function handleColToggle() {
+    setIsOpen(false);
+    handleColumnToggle === null || handleColumnToggle === void 0 ? void 0 : handleColumnToggle(columns);
+  };
   return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("button", {
     onClick: function onClick() {
       return setIsOpen(!isOpen);
@@ -193,14 +198,25 @@ var ColumnToggle = function ColumnToggle(_ref) {
   })))))), handleResetColumns && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-divider"
   }), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "qbs-table-popup-item"
+    className: "qbs-table-popup-item",
+    style: {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-between'
+    }
   }, /*#__PURE__*/_react["default"].createElement("a", {
     className: "qbs-table-reset-link",
     href: "#",
     onClick: function onClick() {
       return handleResetColumns === null || handleResetColumns === void 0 ? void 0 : handleResetColumns();
     }
-  }, "Reset to default"))))));
+  }, "Reset to default"), /*#__PURE__*/_react["default"].createElement("a", {
+    className: "qbs-table-reset-link",
+    href: "#",
+    onClick: function onClick() {
+      return handleColToggle();
+    }
+  }, "Save"))))));
 };
 var _default = ColumnToggle;
 exports["default"] = _default;

package/package.json

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

package/src/Table.tsx

@@ -3,50 +3,17 @@ import debounce from 'lodash/debounce';
 import flatten from 'lodash/flatten';
 import isFunction from 'lodash/isFunction';
 import PropTypes from 'prop-types';
-import React, {
-  useCallback,
-  useImperativeHandle,
-  useReducer,
-  useRef,
-  useState,
-  useEffect
-} from 'react';
+import React, { useCallback, useEffect, useImperativeHandle, useReducer, useRef, useState } from 'react';
 
 import CellGroup from './CellGroup';
-import {
-  CELL_PADDING_HEIGHT,
-  EXPANDED_KEY,
-  ROW_HEADER_HEIGHT,
-  ROW_HEIGHT,
-  SCROLLBAR_WIDTH,
-  SORT_TYPE,
-  TREE_DEPTH
-} from './constants';
+import { CELL_PADDING_HEIGHT, EXPANDED_KEY, ROW_HEADER_HEIGHT, ROW_HEIGHT, SCROLLBAR_WIDTH, SORT_TYPE, TREE_DEPTH } from './constants';
 import EmptyMessage from './EmptyMessage';
 import Loader from './Loader';
 import MouseArea from './MouseArea';
 import Row, { RowProps } from './Row';
 import Scrollbar, { ScrollbarInstance } from './Scrollbar';
 import TableContext from './TableContext';
-import {
-  findAllParents,
-  findRowKeys,
-  flattenData,
-  isRTL,
-  isSupportTouchEvent,
-  mergeCells,
-  resetLeftForCells,
-  shouldShowRowByExpanded,
-  useAffix,
-  useCellDescriptor,
-  useClassNames,
-  useControlled,
-  usePosition,
-  useScrollListener,
-  useTableDimension,
-  useTableRows,
-  useUpdateEffect
-} from './utils';
+import { findAllParents, findRowKeys, flattenData, isRTL, isSupportTouchEvent, mergeCells, resetLeftForCells, shouldShowRowByExpanded, useAffix, useCellDescriptor, useClassNames, useControlled, usePosition, useScrollListener, useTableDimension, useTableRows, useUpdateEffect } from './utils';
 
 import type {
   StandardProps,
@@ -952,7 +919,6 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
 
     return scrollbars;
   };
-  console.log(window.innerHeight, 'sdfsfsf');
   const [rowZIndices, setRowZIndices] = useState(Array(data?.length).fill(1));
   useEffect(() => {
     if (data?.length > 0) setRowZIndices(Array(data?.length).fill(1));

package/src/qbsTable/QbsTable.tsx

@@ -7,21 +7,17 @@ import HeaderCell from '../HeaderCell';
 import Pagination from '../Pagination';
 import Table from '../Table';
 import { QbsColumnProps, QbsTableProps } from './commontypes';
-import {
-  ActionCell,
-  CheckCell,
-  CustomTableCell,
-  ExpandCell,
-  CustomRowStatus
-} from './CustomTableCell';
+import { ActionCell, CheckCell, CustomRowStatus, CustomTableCell, ExpandCell } from './CustomTableCell';
 import ToolBar from './Toolbar';
 import ColumToggle from './utilities/ColumShowHide';
 import debounce from './utilities/debounce';
 import { deepEqual } from './utilities/deepEqual';
 import { SettingsIcon } from './utilities/icons';
+
 // import 'qbs-react-table/dist/css/qbs-react-grid.css';
 
 import '../../dist/css/qbs-react-grid.css';
+
 const CHECKBOX_LINE_HEIGHT = '36px';
 const COLUMN_WIDTH = 250;
 const QbsTable: React.FC<QbsTableProps> = ({
@@ -562,6 +558,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
                     isOpen={isOpen}
                     setIsOpen={setIsOpen}
                     handleResetColumns={handleResetColumns}
+                    handleColumnToggle={handleColumnToggle}
                   />
                 )}
               </HeaderCell>

package/src/qbsTable/utilities/ColumShowHide.tsx

@@ -9,6 +9,7 @@ interface ColumnToggleProps {
   onReorder: (columns: QbsColumnProps[]) => void;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
   isOpen: boolean;
+  handleColumnToggle?: (columns: QbsColumnProps[]) => void;
   handleResetColumns?: () => void;
 }
 
@@ -18,7 +19,8 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
   onReorder,
   isOpen,
   setIsOpen,
-  handleResetColumns
+  handleResetColumns,
+  handleColumnToggle
 }) => {
   const [draggedItem, setDraggedItem] = useState<number | null>(null);
   const popupRef = useRef<HTMLDivElement | null>(null);
@@ -161,6 +163,10 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
   const handleAvailableColumns = () => {
     return columns.filter(item => !item.isVisible)?.length > 0 ? true : false;
   };
+  const handleColToggle = () => {
+    setIsOpen(false);
+    handleColumnToggle?.(columns);
+  };
   return (
     <div>
       <button onClick={() => setIsOpen(!isOpen)}>
@@ -210,7 +216,10 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
             {handleResetColumns && (
               <>
                 <div className="qbs-table-divider"></div>
-                <div className="qbs-table-popup-item">
+                <div
+                  className="qbs-table-popup-item"
+                  style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}
+                >
                   <a
                     className="qbs-table-reset-link"
                     href="#"
@@ -218,6 +227,9 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
                   >
                     Reset to default
                   </a>
+                  <a className="qbs-table-reset-link" href="#" onClick={() => handleColToggle()}>
+                    Save
+                  </a>
                 </div>
               </>
             )}