qbs-react-grid 2.1.0 → 2.2.0

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