qbs-react-grid 2.1.0 → 2.2.1

package/es/qbsTable/labels.d.ts

@@ -0,0 +1,48 @@
+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 declare const DEFAULT_QBS_TABLE_LABELS: Required<Omit<QbsTableLabels, 'showingRange'>> & {
+    showingRange: (start: number, end: number, total: number) => string;
+};
+export declare const mergeLabels: (labels?: QbsTableLabels) => {
+    showingRange: (start: number, end: number, total: number) => string;
+    search: string;
+    searchAriaLabel: string;
+    clear: string;
+    selectedItems: string;
+    switchToDefaultView: string;
+    switchToRelaxedView: string;
+    switchToFullScreen: string;
+    switchToTableView: string;
+    switchToCardView: string;
+    noDataFound: string;
+    itemsPerPage: string;
+    fixedColumns: string;
+    visibleColumns: string;
+    availableColumns: string;
+    resetToDefault: string;
+    save: string;
+    viewMore: string;
+    viewLess: string;
+    actions: string;
+};
+export declare const formatSelectedItems: (selectedItemsLabel: string, count: number) => string;

package/es/qbsTable/labels.js

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+export var DEFAULT_QBS_TABLE_LABELS = {
+  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: function showingRange(start, end, total) {
+    return "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 var mergeLabels = function mergeLabels(labels) {
+  var _labels$showingRange;
+  return _extends({}, DEFAULT_QBS_TABLE_LABELS, labels, {
+    showingRange: (_labels$showingRange = labels === null || labels === void 0 ? void 0 : labels.showingRange) != null ? _labels$showingRange : DEFAULT_QBS_TABLE_LABELS.showingRange
+  });
+};
+export var formatSelectedItems = function formatSelectedItems(selectedItemsLabel, count) {
+  return selectedItemsLabel + "(" + count + ") ";
+};

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { QbsColumnProps } from '../commontypes';
+import { type QbsTableLabels } from '../labels';
 type Props = {
     columns: QbsColumnProps[];
     data: any;
@@ -9,6 +10,7 @@ type Props = {
     handleMenuActions?: () => void;
     cardColumLimit?: number;
     childDetailHeading?: string;
+    labels?: QbsTableLabels;
 };
 declare const CardComponent: React.FC<Props>;
 export default CardComponent;

package/es/qbsTable/utilities/CardComponent.js

@@ -1,4 +1,5 @@
 import React, { useRef, useState } from 'react';
+import { mergeLabels } from '../labels';
 import CardMenuDropdown from './CardMenuDropdown';
 import { handleCellFormat } from './handleFormatCell';
 import { ArrowUpIcon } from './icons';
@@ -15,7 +16,9 @@ var CardComponent = function CardComponent(_ref) {
     cardColumLimit = _ref$cardColumLimit === void 0 ? 5 : _ref$cardColumLimit,
     handleMenuActions = _ref.handleMenuActions,
     _ref$childDetailHeadi = _ref.childDetailHeading,
-    childDetailHeading = _ref$childDetailHeadi === void 0 ? '' : _ref$childDetailHeadi;
+    childDetailHeading = _ref$childDetailHeadi === void 0 ? '' : _ref$childDetailHeadi,
+    labelsProp = _ref.labels;
+  var labels = mergeLabels(labelsProp);
   var _useState = useState(false),
     viewMore = _useState[0],
     setViewMore = _useState[1];
@@ -64,10 +67,11 @@ var CardComponent = function CardComponent(_ref) {
     rowData: data,
     iconName: "more",
     rowIndex: index,
-    handleMenuActions: handleMenuActions
+    handleMenuActions: handleMenuActions,
+    labels: labels
   })), columns.length > initialDisplayCount && /*#__PURE__*/React.createElement(TooltipComponent, {
     tableBodyRef: useCardRef,
-    title: viewMore ? ' View Less' : 'View More',
+    title: viewMore ? labels.viewLess : labels.viewMore,
     enabled: false
   }, /*#__PURE__*/React.createElement("button", {
     onClick: toggleViewMore,

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ActionProps } from '../commontypes';
+import { type QbsTableLabels } from '../labels';
 type Props = {
     iconName: string;
     actionDropDown: ActionProps[];
@@ -8,6 +9,7 @@ type Props = {
     dataTheme?: string;
     tableBodyRef: React.RefObject<HTMLDivElement>;
     rowIndex?: number;
+    labels?: QbsTableLabels;
 };
 declare const CardMenuDropdown: React.FC<Props>;
 export default CardMenuDropdown;

package/es/qbsTable/utilities/CardMenuDropdown.js

@@ -1,10 +1,13 @@
 import React, { useEffect, useRef, useState } from 'react';
+import { mergeLabels } from '../labels';
 import { ThreeDotIcon } from './icons';
 import TooltipComponent from './ToolTip';
 var CardMenuDropdown = function CardMenuDropdown(_ref) {
   var actionDropDown = _ref.actionDropDown,
     handleMenuActions = _ref.handleMenuActions,
-    rowData = _ref.rowData;
+    rowData = _ref.rowData,
+    labelsProp = _ref.labels;
+  var labels = mergeLabels(labelsProp);
   var _useState = useState(false),
     openMenu = _useState[0],
     setOpenMenu = _useState[1];
@@ -63,7 +66,7 @@ var CardMenuDropdown = function CardMenuDropdown(_ref) {
     onClick: toggleMenu,
     ref: menuButtonRef
   }, /*#__PURE__*/React.createElement(TooltipComponent, {
-    title: "Actions",
+    title: labels.actions,
     enabled: false,
     ref: menuButtonRef
   }, /*#__PURE__*/React.createElement(ThreeDotIcon, null))), openMenu && /*#__PURE__*/React.createElement("div", {

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { QbsColumnProps } from '../commontypes';
+import { type QbsTableLabels } from '../labels';
 interface ColumnToggleProps {
     columns: QbsColumnProps[];
     onToggle: (columnName: string) => void;
@@ -11,6 +12,7 @@ interface ColumnToggleProps {
     tableHeight?: number;
     viewMode?: string;
     setViewMode?: (value: string) => void;
+    labels?: QbsTableLabels;
 }
 declare const ColumnToggle: React.FC<ColumnToggleProps>;
 export default ColumnToggle;

package/es/qbsTable/utilities/ColumShowHide.js

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { mergeLabels } from '../labels';
 import { SettingsIcon } from './icons';
 var ColumnToggle = function ColumnToggle(_ref) {
   var columns = _ref.columns,
@@ -9,7 +10,9 @@ var ColumnToggle = function ColumnToggle(_ref) {
     handleResetColumns = _ref.handleResetColumns,
     handleColumnToggle = _ref.handleColumnToggle,
     _ref$tableHeight = _ref.tableHeight,
-    tableHeight = _ref$tableHeight === void 0 ? 450 : _ref$tableHeight;
+    tableHeight = _ref$tableHeight === void 0 ? 450 : _ref$tableHeight,
+    labelsProp = _ref.labels;
+  var labels = mergeLabels(labelsProp);
   var _useState = useState(null),
     draggedItem = _useState[0],
     setDraggedItem = _useState[1];
@@ -164,7 +167,7 @@ var ColumnToggle = function ColumnToggle(_ref) {
     className: "qbs-table-popup-item"
   }, /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-popup-label"
-  }, "FIXED COLUMNS"), /*#__PURE__*/React.createElement("div", {
+  }, labels.fixedColumns), /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-columns-container"
   }, /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-column"
@@ -176,7 +179,7 @@ var ColumnToggle = function ColumnToggle(_ref) {
     className: "qbs-table-popup-item"
   }, /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-popup-label"
-  }, "VISIBLE COLUMNS"), /*#__PURE__*/React.createElement("div", {
+  }, labels.visibleColumns), /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-columns-container"
   }, /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-column"
@@ -188,7 +191,7 @@ var ColumnToggle = function ColumnToggle(_ref) {
     className: "qbs-table-popup-item"
   }, /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-popup-label"
-  }, "AVAILABLE COLUMNS"), /*#__PURE__*/React.createElement("div", {
+  }, labels.availableColumns), /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-columns-container"
   }, /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-column"
@@ -209,12 +212,12 @@ var ColumnToggle = function ColumnToggle(_ref) {
     onClick: function onClick() {
       return handleResetColumns === null || handleResetColumns === void 0 ? void 0 : handleResetColumns();
     }
-  }, "Reset to default"), /*#__PURE__*/React.createElement("a", {
+  }, labels.resetToDefault), /*#__PURE__*/React.createElement("a", {
     className: "qbs-table-reset-link",
     href: "#",
     onClick: function onClick() {
       return handleColToggle();
     }
-  }, "Save"))))));
+  }, labels.save))))));
 };
 export default ColumnToggle;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 export interface SearchProps {
     placeholder: string;
+    searchAriaLabel?: string;
     handleChange: (value: string) => void;
     searchValue: string | undefined;
     handleSearch: (value?: string) => void;

package/es/qbsTable/utilities/SearchInput.js

@@ -1,6 +1,8 @@
 import React, { memo, useCallback } from 'react';
 var SearchInput = function SearchInput(_ref) {
   var placeholder = _ref.placeholder,
+    _ref$searchAriaLabel = _ref.searchAriaLabel,
+    searchAriaLabel = _ref$searchAriaLabel === void 0 ? 'Search' : _ref$searchAriaLabel,
     handleChange = _ref.handleChange,
     searchValue = _ref.searchValue,
     handleSearch = _ref.handleSearch;
@@ -24,7 +26,7 @@ var SearchInput = function SearchInput(_ref) {
     placeholder: placeholder,
     value: searchValue != null ? searchValue : '',
     onChange: handleInputChange,
-    "aria-label": "Search"
+    "aria-label": searchAriaLabel
   }), /*#__PURE__*/React.createElement("button", {
     className: "search-button absolute left-1 bottom-1.5 bg-white text-grey-dark",
     onClick: function onClick() {

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

@@ -1 +1 @@
-export declare function getRowDisplayRange(totalRows: number, rowsPerPage: number, pageNumber: number): string;
+export declare function getRowDisplayRange(totalRows: number, rowsPerPage: number, pageNumber: number, formatRange?: (start: number, end: number, total: number) => string): string;

package/es/qbsTable/utilities/tablecalc.js

@@ -1,5 +1,10 @@
-export function getRowDisplayRange(totalRows, rowsPerPage, pageNumber) {
+export function getRowDisplayRange(totalRows, rowsPerPage, pageNumber, formatRange) {
+  if (formatRange === void 0) {
+    formatRange = function formatRange(start, end, total) {
+      return "Showing " + start + " to " + end + " of " + total;
+    };
+  }
   var start = (pageNumber - 1) * rowsPerPage + 1;
   var end = Math.min(pageNumber * rowsPerPage, totalRows);
-  return "Showing " + (start != null ? start : 0) + " to " + (end != null ? end : 0) + " of " + (totalRows != null ? totalRows : 0);
+  return formatRange(start != null ? start : 0, end != null ? end : 0, totalRows != null ? totalRows : 0);
 }

package/lib/Cell.js

@@ -86,10 +86,11 @@ var Cell = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   var nextHeight = isHeaderCell ? headerHeight : cellHeight;
   var styles = (0, _extends4["default"])({}, predefinedStyle, (_extends2 = {}, _extends2[fullText ? 'minWidth' : 'width'] = width, _extends2.height = nextHeight, _extends2.zIndex = depth, _extends2[rtl ? 'right' : 'left'] = left, _extends2));
   var paddingKey = rtl ? 'paddingRight' : 'paddingLeft';
+  var resolvedAlign = rtl && align === 'left' ? 'right' : rtl && align === 'right' ? 'left' : align;
   var contentStyles = (0, _extends4["default"])({}, style, (_extends3 = {
     width: fullText ? width - 1 : width,
     height: nextHeight,
-    textAlign: align
+    textAlign: resolvedAlign
   }, _extends3[paddingKey] = isTreeCol ? depth * _constants.LAYER_WIDTH + 10 : (style === null || style === void 0 ? void 0 : style[paddingKey]) || (style === null || style === void 0 ? void 0 : style.padding), _extends3));
   if (verticalAlign) {
     contentStyles.display = 'table-cell';

package/lib/Pagination.d.ts

@@ -1,4 +1,5 @@
 import { FC } from 'react';
+import { type QbsTableLabels } from './qbsTable/labels';
 type PageProps = {
     paginationProps: {
         total?: number;
@@ -9,6 +10,8 @@ type PageProps = {
         onRowsPerPage?: (row: number, page: number) => void;
         onPagination?: (row: number, page: number) => void;
     };
+    labels?: QbsTableLabels;
+    dataTheme?: string;
 };
 declare const Pagination: FC<PageProps>;
 export default Pagination;

package/lib/Pagination.js

@@ -5,6 +5,7 @@ exports.__esModule = true;
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _customSelect = _interopRequireDefault(require("./customSelect"));
+var _labels = require("./qbsTable/labels");
 var _tablecalc = require("./qbsTable/utilities/tablecalc");
 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; }
@@ -41,7 +42,10 @@ var PageIndex = function PageIndex(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, renderPageNumbers());
 };
 var Pagination = function Pagination(_ref2) {
-  var paginationProps = _ref2.paginationProps;
+  var paginationProps = _ref2.paginationProps,
+    labelsProp = _ref2.labels,
+    dataTheme = _ref2.dataTheme;
+  var labels = (0, _labels.mergeLabels)(labelsProp);
   var _paginationProps$drop = paginationProps.dropOptions,
     dropOptions = _paginationProps$drop === void 0 ? [10, 20, 50, 100, 200] : _paginationProps$drop,
     _paginationProps$curr = paginationProps.currentPage,
@@ -82,13 +86,14 @@ var Pagination = function Pagination(_ref2) {
   };
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-custom-pagination",
+    "data-theme": dataTheme,
     style: {
       display: 'flex',
       justifyContent: 'space-between'
     }
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "rows-count"
-  }, (0, _tablecalc.getRowDisplayRange)(total, rowsPerPageState, currentPage)), /*#__PURE__*/_react["default"].createElement("div", {
+  }, (0, _tablecalc.getRowDisplayRange)(total, rowsPerPageState, currentPage, labels.showingRange)), /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-pagination-right-block"
   }, /*#__PURE__*/_react["default"].createElement("button", {
     className: "qbs-table-icon-container",
@@ -167,7 +172,7 @@ var Pagination = function Pagination(_ref2) {
     className: "qbs-table-pagination-flexBox"
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: "qbs-table-pagination-text"
-  }, "Items per page"), /*#__PURE__*/_react["default"].createElement(_customSelect["default"], {
+  }, labels.itemsPerPage), /*#__PURE__*/_react["default"].createElement(_customSelect["default"], {
     options: dropData,
     selectedValue: rowsPerPageState,
     onChange: handleRowsPerPage

package/lib/index.d.ts

@@ -11,5 +11,5 @@ export type { ColumnProps } from './Column';
 export type { CellProps } from './Cell';
 export type { HeaderCellProps } from './HeaderCell';
 export type { ColumnGroupProps } from './ColumnGroup';
-export type { QbsTableProps } from './qbsTable/commontypes';
+export type { QbsTableProps, QbsTableLabels } from './qbsTable/commontypes';
 export type { StandardProps, SortType, RowDataType, RowKeyType, TableSizeChangeEventName } from './@types/common';

package/lib/less/qbs-table.less

@@ -104,12 +104,156 @@
   }
 }
 .qbs-table[data-theme='dark'] {
-  background-color: #333333;
-  color: #ffffff;
+  background-color: #1f1f1f;
+  color: #f5f5f5;
+
+  .qbs-table-border-wrap {
+    border-color: #3d3d3d;
+    background: #262626;
+  }
+
+  .qbs-table-toolbar-container,
+  .qbs-table-toolbar,
+  .qbs-table-toolbar-sub-container,
+  .sub-qbs-table-toolbar {
+    color: #f5f5f5;
+  }
+
+  .qbs-table-search-container {
+    .input {
+      border-color: #4a4a4a;
+      background: #2d2d2d;
+      color: #f5f5f5;
+
+      &:hover,
+      &:focus {
+        border-color: #6b6b6b;
+        background: #2d2d2d;
+      }
+    }
+
+    .search-button,
+    .close-button {
+      color: #d1d1d1;
+      background-color: transparent;
+    }
+  }
+
+  .qbs-table-column-popup,
+  .qbs-table-popup-container {
+    background: #2d2d2d;
+    color: #f5f5f5;
+    border-color: #4a4a4a;
+  }
+
+  .qbs-table-popup-label,
+  .qbs-table-popup-value,
+  .qbs-table-reset-link {
+    color: #f5f5f5;
+  }
+
+  .qbs-table-custom-pagination,
+  .qbs-table-pagination-text,
+  .rows-count {
+    color: #f5f5f5;
+  }
+
+  .qbs-table-icon-container svg path {
+    stroke: #e5e5e5;
+  }
+
+  .custom-select-trigger,
+  .custom-select-options {
+    background: #2d2d2d;
+    color: #f5f5f5;
+    border-color: #4a4a4a;
+  }
+
+  .qbs-card-container {
+    border-color: #4a4a4a;
+    background: #262626;
+    color: #f5f5f5;
+  }
+
+  .nodata-title {
+    color: #f5f5f5;
+  }
+
+  .tooltiptext {
+    background-color: #3d3d3d;
+    color: #fff;
+  }
+}
+
+.qbs-table-custom-pagination[data-theme='dark'] {
+  color: #f5f5f5;
+
+  .rows-count,
+  .qbs-table-pagination-text {
+    color: #f5f5f5;
+  }
+
+  .qbs-table-icon-container svg path {
+    stroke: #e5e5e5;
+  }
 }
+
 .rs-table-cell-content[data-theme='dark'] {
-  background-color: #333333;
-  color: #ffffff;
+  background-color: #262626;
+  color: #f5f5f5;
+}
+
+.qbs-table[data-theme='dark'] {
+  .rs-table,
+  .rs-table-body-row-wrapper,
+  .rs-table-row,
+  .rs-table-cell,
+  .rs-table-cell-group,
+  .rs-table-row-header,
+  .rs-table-row-header .rs-table-cell {
+    background-color: #262626;
+    color: #f5f5f5;
+  }
+
+  .rs-table-cell-content {
+    background-color: #262626;
+    color: #f5f5f5;
+  }
+
+  .rs-table-row-header .rs-table-cell-content,
+  .rs-table-cell-header .rs-table-cell-content {
+    background-color: #1b2028;
+    color: #f5f5f5;
+  }
+
+  .rs-table-hover .rs-table-body-row-wrapper .rs-table-row:hover,
+  .rs-table-hover .rs-table-body-row-wrapper .rs-table-row:hover .rs-table-cell,
+  .rs-table-hover .rs-table-body-row-wrapper .rs-table-row:hover .rs-table-cell-content {
+    background-color: #1d2633;
+  }
+
+  .rs-table-cell {
+    border-color: #3d3d3d;
+  }
+
+  .rs-table-scrollbar {
+    background-color: #2d2d2d;
+  }
+
+  .rs-table-scrollbar-handle {
+    background-color: #5a5a5a;
+  }
+}
+
+.qbs-table[dir='rtl'] {
+  .rs-table-cell-header .rs-table-cell-content {
+    text-align: right;
+  }
+
+  .rs-table-cell-wrap {
+    justify-content: flex-start;
+    width: 100%;
+  }
 }
 /* Dropdown container */
 .qbs-table-menu-dropdown {