qbs-react-grid 1.0.51 → 1.1.1

package/es/qbsTable/CustomTableCell.js

@@ -2,10 +2,11 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _excluded = ["rowData", "onChange", "checkedKeys", "dataKey", "dataTheme"],
   _excluded2 = ["rowData", "dataKey", "expandedRowKeys", "onChange"],
-  _excluded3 = ["rowData", "renderCell", "toolTip", "dataKey", "onChange", "rowClick", "link"];
+  _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';
 var CHECKBOX_LINE_HEIGHT = '36px';
 export var CheckCell = /*#__PURE__*/React.memo(function (_ref) {
   var rowData = _ref.rowData,
@@ -78,6 +79,7 @@ export var CustomTableCell = /*#__PURE__*/React.memo(function (_ref4) {
     dataKey = _ref4.dataKey,
     onChange = _ref4.onChange,
     rowClick = _ref4.rowClick,
+    type = _ref4.type,
     link = _ref4.link,
     props = _objectWithoutPropertiesLoose(_ref4, _excluded3);
   return /*#__PURE__*/React.createElement(Cell, _extends({}, props, {
@@ -87,5 +89,5 @@ export var CustomTableCell = /*#__PURE__*/React.memo(function (_ref4) {
       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 : rowData[dataKey]) : /*#__PURE__*/React.createElement(React.Fragment, null, (_renderCell2 = renderCell(rowData)) === null || _renderCell2 === void 0 ? void 0 : _renderCell2.cell));
+  }, 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/QbsTable.js

@@ -285,7 +285,8 @@ var QbsTable = function QbsTable(_ref) {
         isVisible = _ref3.isVisible,
         link = _ref3.link,
         rowClick = _ref3.rowClick,
-        sortKey = _ref3.sortKey;
+        sortKey = _ref3.sortKey,
+        type = _ref3.type;
       return /*#__PURE__*/React.createElement(React.Fragment, null, isVisible && /*#__PURE__*/React.createElement(React.Fragment, null, grouped ? /*#__PURE__*/React.createElement(ColumnGroup, {
         header: groupheader,
         fixed: fixed,
@@ -310,6 +311,7 @@ var QbsTable = function QbsTable(_ref) {
           renderCell: child.renderCell,
           dataKey: child.field,
           dataTheme: dataTheme,
+          type: child.type,
           link: child.link
         }) : /*#__PURE__*/React.createElement(Cell, {
           className: " " + classes.cellClass,
@@ -332,6 +334,7 @@ var QbsTable = function QbsTable(_ref) {
         renderCell: renderCell,
         dataKey: field,
         rowClick: rowClick,
+        type: type,
         dataTheme: dataTheme,
         link: link
       }) : /*#__PURE__*/React.createElement(Cell, {

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/commontypes.d.ts

@@ -17,6 +17,7 @@ export interface ColumnBase {
     link?: boolean;
     rowClick?: (rowData: any) => void;
     sortKey?: string;
+    type?: string;
 }
 export interface QbsColumnProps extends ColumnBase {
     grouped?: boolean;
@@ -38,6 +39,7 @@ export interface ActionProps {
     icon: React.ReactNode;
     toolTip?: string;
     hidden?: boolean;
+    hide?: (data: any) => boolean;
 }
 export interface QbsTableProps {
     isLoading?: boolean;

package/es/qbsTable/utilities/SearchInput.js

@@ -1,4 +1,4 @@
-import React, { useCallback, memo } from 'react';
+import React, { memo, useCallback } from 'react';
 var SearchInput = function SearchInput(_ref) {
   var placeholder = _ref.placeholder,
     handleChange = _ref.handleChange,

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

@@ -0,0 +1 @@
+export declare const handleCellFormat: (data: any, type: string) => any;

package/es/qbsTable/utilities/handleFormatCell.js

@@ -0,0 +1,46 @@
+var convertDateFormat = function convertDateFormat(input, type) {
+  // Splitting the string by space to separate date and time
+  if (input && input !== null) {
+    var parts = input.split(' ');
+    var datePart = parts[0];
+    var timePart = parts.length > 1 ? " " + parts[1] : '';
+
+    // Splitting the date into [month, day, year]
+    var separator = datePart.includes('-') ? '-' : '/';
+    var dateComponents = datePart.split(separator);
+    if (dateComponents.length !== 3) {
+      // Invalid date format
+      return input;
+    }
+    var day, month, year;
+    if (dateComponents.length === 3) {
+      if (dateComponents[0].length === 4) {
+        // Format: yyyy/mm/dd
+        year = dateComponents[0];
+        month = dateComponents[1];
+        day = dateComponents[2];
+      } else {
+        // Format: mm/dd/yyyy
+        month = dateComponents[0];
+        day = dateComponents[1];
+        year = dateComponents[2];
+      }
+    } else {
+      return input; // Invalid date format
+    }
+
+    // Rearranging to day/month/year format
+    return type === 'dateTime' ? day + "-" + month + "-" + year + " " + timePart : day + "-" + month + "-" + year;
+  } else {
+    return '';
+  }
+};
+export var handleCellFormat = function handleCellFormat(data, type) {
+  switch (type) {
+    case 'date':
+    case 'dateTime':
+      return convertDateFormat(data, type);
+    default:
+      return data;
+  }
+};

package/es/qbsTable/utilities/menuDropDown.js

@@ -41,7 +41,8 @@ var MenuDropDown = function MenuDropDown(_ref) {
   }, /*#__PURE__*/React.createElement(ThreeDotIcon, null)), openMenu && /*#__PURE__*/React.createElement("div", {
     className: 'qbs-table-qbs-table-menu-dropdown-content'
   }, actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.map(function (item) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, !item.hidden && /*#__PURE__*/React.createElement("a", {
+    var _item$hide;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, !(item !== null && item !== void 0 && item.hidden) && !(item !== null && item !== void 0 && (_item$hide = item.hide) !== null && _item$hide !== void 0 && _item$hide.call(item, rowData)) && /*#__PURE__*/React.createElement("a", {
       key: item.title,
       className: "p-2 leading-7 hover:bg-background ",
       onClick: function onClick(e) {

package/lib/qbsTable/CustomTableCell.js

@@ -8,9 +8,10 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _react = _interopRequireDefault(require("react"));
 var _Cell = _interopRequireDefault(require("../Cell"));
 var _menuDropDown = _interopRequireDefault(require("./utilities/menuDropDown"));
+var _handleFormatCell = require("./utilities/handleFormatCell");
 var _excluded = ["rowData", "onChange", "checkedKeys", "dataKey", "dataTheme"],
   _excluded2 = ["rowData", "dataKey", "expandedRowKeys", "onChange"],
-  _excluded3 = ["rowData", "renderCell", "toolTip", "dataKey", "onChange", "rowClick", "link"];
+  _excluded3 = ["rowData", "renderCell", "toolTip", "dataKey", "onChange", "rowClick", "type", "link"];
 var CHECKBOX_LINE_HEIGHT = '36px';
 var CheckCell = /*#__PURE__*/_react["default"].memo(function (_ref) {
   var rowData = _ref.rowData,
@@ -86,6 +87,7 @@ var CustomTableCell = /*#__PURE__*/_react["default"].memo(function (_ref4) {
     dataKey = _ref4.dataKey,
     onChange = _ref4.onChange,
     rowClick = _ref4.rowClick,
+    type = _ref4.type,
     link = _ref4.link,
     props = (0, _objectWithoutPropertiesLoose2["default"])(_ref4, _excluded3);
   return /*#__PURE__*/_react["default"].createElement(_Cell["default"], (0, _extends2["default"])({}, props, {
@@ -95,6 +97,6 @@ var CustomTableCell = /*#__PURE__*/_react["default"].memo(function (_ref4) {
       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 : rowData[dataKey]) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (_renderCell2 = renderCell(rowData)) === null || _renderCell2 === void 0 ? void 0 : _renderCell2.cell));
+  }, 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/QbsTable.js

@@ -292,7 +292,8 @@ var QbsTable = function QbsTable(_ref) {
         isVisible = _ref3.isVisible,
         link = _ref3.link,
         rowClick = _ref3.rowClick,
-        sortKey = _ref3.sortKey;
+        sortKey = _ref3.sortKey,
+        type = _ref3.type;
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isVisible && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, grouped ? /*#__PURE__*/_react["default"].createElement(_ColumnGroup["default"], {
         header: groupheader,
         fixed: fixed,
@@ -317,6 +318,7 @@ var QbsTable = function QbsTable(_ref) {
           renderCell: child.renderCell,
           dataKey: child.field,
           dataTheme: dataTheme,
+          type: child.type,
           link: child.link
         }) : /*#__PURE__*/_react["default"].createElement(_Cell["default"], {
           className: " " + classes.cellClass,
@@ -339,6 +341,7 @@ var QbsTable = function QbsTable(_ref) {
         renderCell: renderCell,
         dataKey: field,
         rowClick: rowClick,
+        type: type,
         dataTheme: dataTheme,
         link: link
       }) : /*#__PURE__*/_react["default"].createElement(_Cell["default"], {

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/commontypes.d.ts

@@ -17,6 +17,7 @@ export interface ColumnBase {
     link?: boolean;
     rowClick?: (rowData: any) => void;
     sortKey?: string;
+    type?: string;
 }
 export interface QbsColumnProps extends ColumnBase {
     grouped?: boolean;
@@ -38,6 +39,7 @@ export interface ActionProps {
     icon: React.ReactNode;
     toolTip?: string;
     hidden?: boolean;
+    hide?: (data: any) => boolean;
 }
 export interface QbsTableProps {
     isLoading?: boolean;

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

@@ -0,0 +1 @@
+export declare const handleCellFormat: (data: any, type: string) => any;

package/lib/qbsTable/utilities/handleFormatCell.js

@@ -0,0 +1,51 @@
+"use strict";
+
+exports.__esModule = true;
+exports.handleCellFormat = void 0;
+var convertDateFormat = function convertDateFormat(input, type) {
+  // Splitting the string by space to separate date and time
+  if (input && input !== null) {
+    var parts = input.split(' ');
+    var datePart = parts[0];
+    var timePart = parts.length > 1 ? " " + parts[1] : '';
+
+    // Splitting the date into [month, day, year]
+    var separator = datePart.includes('-') ? '-' : '/';
+    var dateComponents = datePart.split(separator);
+    if (dateComponents.length !== 3) {
+      // Invalid date format
+      return input;
+    }
+    var day, month, year;
+    if (dateComponents.length === 3) {
+      if (dateComponents[0].length === 4) {
+        // Format: yyyy/mm/dd
+        year = dateComponents[0];
+        month = dateComponents[1];
+        day = dateComponents[2];
+      } else {
+        // Format: mm/dd/yyyy
+        month = dateComponents[0];
+        day = dateComponents[1];
+        year = dateComponents[2];
+      }
+    } else {
+      return input; // Invalid date format
+    }
+
+    // Rearranging to day/month/year format
+    return type === 'dateTime' ? day + "-" + month + "-" + year + " " + timePart : day + "-" + month + "-" + year;
+  } else {
+    return '';
+  }
+};
+var handleCellFormat = function handleCellFormat(data, type) {
+  switch (type) {
+    case 'date':
+    case 'dateTime':
+      return convertDateFormat(data, type);
+    default:
+      return data;
+  }
+};
+exports.handleCellFormat = handleCellFormat;

package/lib/qbsTable/utilities/menuDropDown.js

@@ -47,7 +47,8 @@ var MenuDropDown = function MenuDropDown(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(_icons.ThreeDotIcon, null)), openMenu && /*#__PURE__*/_react["default"].createElement("div", {
     className: 'qbs-table-qbs-table-menu-dropdown-content'
   }, actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.map(function (item) {
-    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !item.hidden && /*#__PURE__*/_react["default"].createElement("a", {
+    var _item$hide;
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !(item !== null && item !== void 0 && item.hidden) && !(item !== null && item !== void 0 && (_item$hide = item.hide) !== null && _item$hide !== void 0 && _item$hide.call(item, rowData)) && /*#__PURE__*/_react["default"].createElement("a", {
       key: item.title,
       className: "p-2 leading-7 hover:bg-background ",
       onClick: function onClick(e) {

package/package.json

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

package/src/qbsTable/CustomTableCell.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import Cell from '../Cell';
 import MenuDropDown from './utilities/menuDropDown';
+import { handleCellFormat } from './utilities/handleFormatCell';
 
 const CHECKBOX_LINE_HEIGHT = '36px';
 
@@ -61,15 +62,15 @@ export const ExpandCell: React.FC<any> = React.memo(
   )
 );
 export const CustomTableCell: React.FC<any> = React.memo(
-  ({ rowData, renderCell, toolTip, dataKey, onChange, rowClick, link, ...props }) => {
+  ({ 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 : rowData[dataKey]}
+            {renderCell ? renderCell(rowData)?.cell : handleCellFormat(rowData[dataKey], type)}
           </a>
         ) : (
-          <>{renderCell(rowData)?.cell}</>
+          <>{renderCell ? renderCell(rowData)?.cell : handleCellFormat(rowData[dataKey], type)}</>
         )}
       </Cell>
     );

package/src/qbsTable/QbsTable.tsx

@@ -277,7 +277,8 @@ const QbsTable: React.FC<QbsTableProps> = ({
           isVisible,
           link,
           rowClick,
-          sortKey
+          sortKey,
+          type
         }) => (
           <>
             {isVisible && (
@@ -313,6 +314,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
                               renderCell={child.renderCell}
                               dataKey={child.field}
                               dataTheme={dataTheme}
+                              type={child.type}
                               link={child.link}
                             />
                           ) : (
@@ -348,6 +350,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
                         renderCell={renderCell}
                         dataKey={field}
                         rowClick={rowClick}
+                        type={type}
                         dataTheme={dataTheme}
                         link={link}
                       />

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/commontypes.ts

@@ -18,6 +18,7 @@ export interface ColumnBase {
   link?: boolean;
   rowClick?: (rowData: any) => void;
   sortKey?: string;
+  type?: string;
 }
 
 export interface QbsColumnProps extends ColumnBase {
@@ -42,6 +43,7 @@ export interface ActionProps {
   icon: React.ReactNode;
   toolTip?: string;
   hidden?: boolean;
+  hide?: (data: any) => boolean;
 }
 
 export interface QbsTableProps {

package/src/qbsTable/utilities/SearchInput.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback, memo } from 'react';
+import React, { memo, useCallback } from 'react';
+
 export interface SearchProps {
   placeholder: string;
   handleChange: (value: string) => void;

package/src/qbsTable/utilities/handleFormatCell.ts

@@ -0,0 +1,45 @@
+const convertDateFormat = (input: string, type?: string): string => {
+  // Splitting the string by space to separate date and time
+  if (input && input !== null) {
+    const parts = input.split(' ');
+    const datePart = parts[0];
+    const timePart = parts.length > 1 ? ` ${parts[1]}` : '';
+
+    // Splitting the date into [month, day, year]
+    const separator = datePart.includes('-') ? '-' : '/';
+
+    const dateComponents = datePart.split(separator);
+
+    if (dateComponents.length !== 3) {
+      // Invalid date format
+      return input;
+    }
+    let day, month, year;
+    if (dateComponents.length === 3) {
+      if (dateComponents[0].length === 4) {
+        // Format: yyyy/mm/dd
+        [year, month, day] = dateComponents;
+      } else {
+        // Format: mm/dd/yyyy
+        [month, day, year] = dateComponents;
+      }
+    } else {
+      return input; // Invalid date format
+    }
+
+    // Rearranging to day/month/year format
+    return type === 'dateTime' ? `${day}-${month}-${year} ${timePart}` : `${day}-${month}-${year}`;
+  } else {
+    return '';
+  }
+};
+
+export const handleCellFormat = (data: any, type: string) => {
+  switch (type) {
+    case 'date':
+    case 'dateTime':
+      return convertDateFormat(data, type);
+    default:
+      return data;
+  }
+};

package/src/qbsTable/utilities/menuDropDown.tsx

@@ -50,7 +50,7 @@ const MenuDropDown: React.FC<Props> = ({ actionDropDown, handleMenuActions, rowD
         <div className={'qbs-table-qbs-table-menu-dropdown-content'}>
           {actionDropDown?.map(item => (
             <>
-              {!item.hidden && (
+              {!item?.hidden && !item?.hide?.(rowData) && (
                 <a
                   key={item.title}
                   className={`p-2 leading-7 hover:bg-background `}