qbs-react-grid 2.1.0 → 2.2.1

package/src/qbsTable/Toolbar.tsx

@@ -5,6 +5,7 @@ import { QbsTableToolbarProps } from './commontypes';
 import debounce from './utilities/debounce';
 import { CardView, ContentView, DefaultView, ExpandIcon, TableView } from './utilities/icons';
 import SearchInput from './utilities/SearchInput';
+import { formatSelectedItems, mergeLabels } from './labels';
 import { getRowDisplayRange } from './utilities/tablecalc';
 import TooltipComponent from './utilities/ToolTip';
 
@@ -33,8 +34,10 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
   fullWidthView = false,
   setTableFullView,
   setRowViewToggle,
-  isFullScreen = false
+  isFullScreen = false,
+  labels: labelsProp
 }) => {
+  const labels = mergeLabels(labelsProp);
   const debouncedOnSearch = useCallback(debounce(onSearch ?? (() => {}), 1000), [onSearch]);
   const [searchParam, setSearchParam] = useState<string | undefined>(searchValue);
   const toolbarRef = useRef<HTMLDivElement>(null);
@@ -79,7 +82,8 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
           <div className="qbs-table-primary-filter">
             {search && (
               <SearchInput
-                placeholder={searchPlaceholder ?? 'Search'}
+                placeholder={searchPlaceholder ?? labels.search}
+                searchAriaLabel={labels.searchAriaLabel}
                 handleChange={handleChange}
                 handleSearch={handleSearch}
                 searchValue={searchParam}
@@ -114,12 +118,12 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
               <div className="flex gap-2 qbs-row-switch-cntainer">
                 {rowViewToggle && (
                   <div className="flex gap-2 table_cell_style">
-                    <TooltipComponent tableBodyRef={toolbarRef} title={'Switch to Default View'}>
+                    <TooltipComponent tableBodyRef={toolbarRef} title={labels.switchToDefaultView}>
                       <div onClick={() => setRowViewToggle?.(true)}>
                         <DefaultView className={`${defaultRowView ? 'active' : ''}`} />
                       </div>
                     </TooltipComponent>
-                    <TooltipComponent tableBodyRef={toolbarRef} title={'Switch to Relaxed View'}>
+                    <TooltipComponent tableBodyRef={toolbarRef} title={labels.switchToRelaxedView}>
                       <div onClick={() => setRowViewToggle?.(false)}>
                         <ContentView className={`${!defaultRowView ? 'active' : ''}`} />
                       </div>
@@ -128,7 +132,7 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
                 )}
                 {isFullScreen && (
                   <div className=" table_full_width">
-                    <TooltipComponent tableBodyRef={toolbarRef} title={'Switch to Full Screen'}>
+                    <TooltipComponent tableBodyRef={toolbarRef} title={labels.switchToFullScreen}>
                       <div onClick={() => setTableFullView?.(!fullWidthView)}>
                         <ExpandIcon className={`${fullWidthView ? 'active' : ''}`} />
                       </div>
@@ -140,7 +144,7 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
 
             {enableTableToggle && !isMobile && (
               <div className="qbs-table-top-icons flex gap-2">
-                <TooltipComponent tableBodyRef={toolbarRef} title={'Switch to Table View'}>
+                <TooltipComponent tableBodyRef={toolbarRef} title={labels.switchToTableView}>
                   <div onClick={() => setTableViewToggle?.(true)}>
                     <TableView className={`${tableViewToggle ? 'active' : ''}`} />
                   </div>
@@ -149,7 +153,7 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
                 <div className="border-r h-4 w-1"></div>
 
                 <div onClick={() => setTableViewToggle?.(false)}>
-                  <TooltipComponent tableBodyRef={toolbarRef} title={'Switch to Card View'}>
+                  <TooltipComponent tableBodyRef={toolbarRef} title={labels.switchToCardView}>
                     <CardView className={`${!tableViewToggle ? 'active' : ''}`} />
                   </TooltipComponent>
                 </div>
@@ -175,10 +179,12 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
         >
           {checkedKeys && checkedKeys?.length > 0 ? (
             <div className="qbs-table-toolbar-sub-container-start">
-              <div className="selected-row">{`Selected Items(${checkedKeys?.length}) `}</div>
+              <div className="selected-row">
+                {formatSelectedItems(labels.selectedItems, checkedKeys?.length ?? 0)}
+              </div>
               <div className="selected-row-action">
                 <button className="btn" onClick={() => onSelect?.([])}>
-                  Clear
+                  {labels.clear}
                 </button>
                 {selectedRowActions?.map((actions, index: number) => (
                   <>
@@ -204,7 +210,8 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
                   {getRowDisplayRange(
                     paginationProps.total ?? 0,
                     paginationProps.rowsPerPage ?? 0,
-                    paginationProps.currentPage ?? 0
+                    paginationProps.currentPage ?? 0,
+                    labels.showingRange
                   )}
                 </div>
               )}

package/src/qbsTable/commontypes.ts

@@ -1,5 +1,9 @@
 import React, { ReactElement, ReactNode } from 'react';
 
+import type { QbsTableLabels } from './labels';
+
+export type { QbsTableLabels };
+
 interface Content {
   cell: ReactNode | string;
   toolTip?: string;
@@ -74,6 +78,7 @@ export interface QbsTableProps {
   searchValue?: string;
   handleSearchValue?: (value?: string) => void;
   theme?: string;
+  rtl?: boolean;
   onRowClick?: (data: any) => void;
   cellBordered?: boolean;
   bordered?: boolean;
@@ -94,6 +99,7 @@ export interface QbsTableProps {
   advancefilter?: ReactElement | ReactNode;
   tableHeaderActions?: ReactElement | ReactNode;
   searchPlaceholder?: string;
+  labels?: QbsTableLabels;
   selectedRowActions?: {
     actionTitle?: string;
     action: (checked: (number | string)[]) => void;
@@ -171,6 +177,7 @@ export interface QbsTableToolbarProps {
   dataLength: number;
   headerHeight?: number;
   searchPlaceholder?: string;
+  labels?: QbsTableLabels;
   tableView?: boolean;
   enableTableToggle?: boolean;
   tableViewToggle?: boolean;

package/src/qbsTable/labels.ts

@@ -0,0 +1,58 @@
+export interface QbsTableLabels {
+  search?: string;
+  searchAriaLabel?: string;
+  clear?: string;
+  selectedItems?: string;
+  switchToDefaultView?: string;
+  switchToRelaxedView?: string;
+  switchToFullScreen?: string;
+  switchToTableView?: string;
+  switchToCardView?: string;
+  noDataFound?: string;
+  showingRange?: (start: number, end: number, total: number) => string;
+  itemsPerPage?: string;
+  fixedColumns?: string;
+  visibleColumns?: string;
+  availableColumns?: string;
+  resetToDefault?: string;
+  save?: string;
+  viewMore?: string;
+  viewLess?: string;
+  actions?: string;
+}
+
+export const DEFAULT_QBS_TABLE_LABELS: Required<
+  Omit<QbsTableLabels, 'showingRange'>
+> & {
+  showingRange: (start: number, end: number, total: number) => string;
+} = {
+  search: 'Search',
+  searchAriaLabel: 'Search',
+  clear: 'Clear',
+  selectedItems: 'Selected Items',
+  switchToDefaultView: 'Switch to Default View',
+  switchToRelaxedView: 'Switch to Relaxed View',
+  switchToFullScreen: 'Switch to Full Screen',
+  switchToTableView: 'Switch to Table View',
+  switchToCardView: 'Switch to Card View',
+  noDataFound: 'No Data Found',
+  showingRange: (start, end, total) => `Showing ${start} to ${end} of ${total}`,
+  itemsPerPage: 'Items per page',
+  fixedColumns: 'FIXED COLUMNS',
+  visibleColumns: 'VISIBLE COLUMNS',
+  availableColumns: 'AVAILABLE COLUMNS',
+  resetToDefault: 'Reset to default',
+  save: 'Save',
+  viewMore: 'View More',
+  viewLess: 'View Less',
+  actions: 'Actions'
+};
+
+export const mergeLabels = (labels?: QbsTableLabels) => ({
+  ...DEFAULT_QBS_TABLE_LABELS,
+  ...labels,
+  showingRange: labels?.showingRange ?? DEFAULT_QBS_TABLE_LABELS.showingRange
+});
+
+export const formatSelectedItems = (selectedItemsLabel: string, count: number) =>
+  `${selectedItemsLabel}(${count}) `;

package/src/qbsTable/utilities/CardComponent.tsx

@@ -1,6 +1,7 @@
 import React, { useRef, useState } from 'react';
 
 import { QbsColumnProps } from '../commontypes';
+import { mergeLabels, type QbsTableLabels } from '../labels';
 import CardMenuDropdown from './CardMenuDropdown';
 import { handleCellFormat } from './handleFormatCell';
 import { ArrowUpIcon } from './icons';
@@ -17,6 +18,7 @@ type Props = {
   handleMenuActions?: () => void;
   cardColumLimit?: number;
   childDetailHeading?: string;
+  labels?: QbsTableLabels;
 };
 
 const CardComponent: React.FC<Props> = ({
@@ -27,8 +29,10 @@ const CardComponent: React.FC<Props> = ({
   index,
   cardColumLimit = 5,
   handleMenuActions,
-  childDetailHeading = ''
+  childDetailHeading = '',
+  labels: labelsProp
 }) => {
+  const labels = mergeLabels(labelsProp);
   const [viewMore, setViewMore] = useState(false);
   const initialDisplayCount = cardColumLimit;
 
@@ -102,13 +106,14 @@ const CardComponent: React.FC<Props> = ({
                 iconName="more"
                 rowIndex={index}
                 handleMenuActions={handleMenuActions}
+                labels={labels}
               />
             </div>
 
             {columns.length > initialDisplayCount && (
               <TooltipComponent
                 tableBodyRef={useCardRef}
-                title={viewMore ? ' View Less' : 'View More'}
+                title={viewMore ? labels.viewLess : labels.viewMore}
                 enabled={false}
               >
                 <button

package/src/qbsTable/utilities/CardMenuDropdown.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { ActionProps } from '../commontypes';
+import { mergeLabels, type QbsTableLabels } from '../labels';
 import { ThreeDotIcon } from './icons';
 import TooltipComponent from './ToolTip';
 
@@ -11,9 +12,16 @@ type Props = {
   dataTheme?: string;
   tableBodyRef: React.RefObject<HTMLDivElement>;
   rowIndex?: number;
+  labels?: QbsTableLabels;
 };
 
-const CardMenuDropdown: React.FC<Props> = ({ actionDropDown, handleMenuActions, rowData }) => {
+const CardMenuDropdown: React.FC<Props> = ({
+  actionDropDown,
+  handleMenuActions,
+  rowData,
+  labels: labelsProp
+}) => {
+  const labels = mergeLabels(labelsProp);
   const [openMenu, setOpenMenu] = useState(false);
   const [menuPositionStyles, setMenuPositionStyles] = useState<{
     top?: string;
@@ -73,7 +81,7 @@ const CardMenuDropdown: React.FC<Props> = ({ actionDropDown, handleMenuActions,
   return (
     <div className="dropdown text-black dark:text-white dark:bg-[#424242] bg-white" ref={menuRef}>
       <button className="dropdown-toggle" onClick={toggleMenu} ref={menuButtonRef}>
-        <TooltipComponent title="Actions" enabled={false} ref={menuButtonRef}>
+        <TooltipComponent title={labels.actions} enabled={false} ref={menuButtonRef}>
           <ThreeDotIcon />
         </TooltipComponent>
       </button>

package/src/qbsTable/utilities/ColumShowHide.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 import { QbsColumnProps } from '../commontypes';
+import { mergeLabels, type QbsTableLabels } from '../labels';
 import { SettingsIcon } from './icons';
 
 interface ColumnToggleProps {
@@ -14,6 +15,7 @@ interface ColumnToggleProps {
   tableHeight?: number;
   viewMode?: string;
   setViewMode?: (value: string) => void;
+  labels?: QbsTableLabels;
 }
 
 const ColumnToggle: React.FC<ColumnToggleProps> = ({
@@ -24,8 +26,10 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
   setIsOpen,
   handleResetColumns,
   handleColumnToggle,
-  tableHeight = 450
+  tableHeight = 450,
+  labels: labelsProp
 }) => {
+  const labels = mergeLabels(labelsProp);
   const [draggedItem, setDraggedItem] = useState<number | null>(null);
   const popupRef = useRef<HTMLDivElement | null>(null);
   const [dragOverPosition, setDragOverPosition] = useState<number | null>();
@@ -185,7 +189,7 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
           >
             <div className="qbs-table-popup-container">
               <div className="qbs-table-popup-item">
-                <div className="qbs-table-popup-label">FIXED COLUMNS</div>
+                <div className="qbs-table-popup-label">{labels.fixedColumns}</div>
                 <div className="qbs-table-columns-container">
                   <div className="qbs-table-column">
                     {columns.map((column, index) =>
@@ -196,7 +200,7 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
               </div>
               <div className="qbs-table-divider"></div>
               <div className="qbs-table-popup-item">
-                <div className="qbs-table-popup-label">VISIBLE COLUMNS</div>
+                <div className="qbs-table-popup-label">{labels.visibleColumns}</div>
                 <div className="qbs-table-columns-container">
                   <div className="qbs-table-column">
                     {columns.map((column, index) =>
@@ -209,7 +213,7 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
                 <>
                   <div className="qbs-table-divider"></div>
                   <div className="qbs-table-popup-item">
-                    <div className="qbs-table-popup-label">AVAILABLE COLUMNS</div>
+                    <div className="qbs-table-popup-label">{labels.availableColumns}</div>
                     <div className="qbs-table-columns-container">
                       <div className="qbs-table-column">
                         {columns.map((column, index) =>
@@ -233,10 +237,10 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
                     href="#"
                     onClick={() => handleResetColumns?.()}
                   >
-                    Reset to default
+                    {labels.resetToDefault}
                   </a>
                   <a className="qbs-table-reset-link" href="#" onClick={() => handleColToggle()}>
-                    Save
+                    {labels.save}
                   </a>
                 </div>
               </>

package/src/qbsTable/utilities/SearchInput.tsx

@@ -2,12 +2,14 @@ import React, { memo, useCallback } from 'react';
 
 export interface SearchProps {
   placeholder: string;
+  searchAriaLabel?: string;
   handleChange: (value: string) => void;
   searchValue: string | undefined;
   handleSearch: (value?: string) => void;
 }
 const SearchInput: React.FC<SearchProps> = ({
   placeholder,
+  searchAriaLabel = 'Search',
   handleChange,
   searchValue,
   handleSearch
@@ -37,7 +39,7 @@ const SearchInput: React.FC<SearchProps> = ({
           placeholder={placeholder}
           value={searchValue ?? ''}
           onChange={handleInputChange}
-          aria-label="Search"
+          aria-label={searchAriaLabel}
         />
         <button
           className="search-button absolute left-1 bottom-1.5 bg-white text-grey-dark"

package/src/qbsTable/utilities/tablecalc.ts

@@ -1,6 +1,12 @@
-export function getRowDisplayRange(totalRows: number, rowsPerPage: number, pageNumber: number) {
+export function getRowDisplayRange(
+  totalRows: number,
+  rowsPerPage: number,
+  pageNumber: number,
+  formatRange: (start: number, end: number, total: number) => string = (start, end, total) =>
+    `Showing ${start} to ${end} of ${total}`
+) {
   const start = (pageNumber - 1) * rowsPerPage + 1;
   const end = Math.min(pageNumber * rowsPerPage, totalRows);
 
-  return `Showing ${start ?? 0} to ${end ?? 0} of ${totalRows ?? 0}`;
+  return formatRange(start ?? 0, end ?? 0, totalRows ?? 0);
 }