qbs-react-grid 2.2.4 → 2.2.6

package/src/qbsTable/utilities/icons.tsx

@@ -5,7 +5,7 @@ export const ThreeDotIcon: React.FC<any> = () => {
     <svg width="4" height="16" viewBox="0 0 4 16" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M2 2.16665L2 2.17498M2 7.99998L2 8.00831M2 13.8333L2 13.8416M2 2.99998C1.53976 2.99998 1.16667 2.62688 1.16667 2.16665C1.16667 1.70641 1.53976 1.33331 2 1.33331C2.46024 1.33331 2.83333 1.70641 2.83333 2.16665C2.83333 2.62688 2.46024 2.99998 2 2.99998ZM2 8.83331C1.53976 8.83331 1.16667 8.46022 1.16667 7.99998C1.16667 7.53974 1.53976 7.16665 2 7.16665C2.46024 7.16665 2.83333 7.53974 2.83333 7.99998C2.83333 8.46022 2.46024 8.83331 2 8.83331ZM2 14.6666C1.53976 14.6666 1.16666 14.2935 1.16666 13.8333C1.16666 13.3731 1.53976 13 2 13C2.46024 13 2.83333 13.3731 2.83333 13.8333C2.83333 14.2935 2.46024 14.6666 2 14.6666Z"
-        stroke="currentColor"
+        stroke="#313131"
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -134,80 +134,3 @@ export const TableView: React.FC<any> = ({ className }) => {
     </svg>
   );
 };
-
-export const ExpandIcon: React.FC<any> = ({ className }) => {
-  return (
-    <svg
-      width="16"
-      height="16"
-      className={className}
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M2.66797 5.33073V2.66406M2.66797 2.66406H5.33464M2.66797 2.66406L6.0013 5.9974M13.3346 5.33073V2.66406M13.3346 2.66406H10.668M13.3346 2.66406L10.0013 5.9974M2.66797 10.6641V13.3307M2.66797 13.3307H5.33464M2.66797 13.3307L6.0013 9.9974M13.3346 13.3307L10.0013 9.9974M13.3346 13.3307V10.6641M13.3346 13.3307H10.668"
-        stroke="#585858"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-};
-export const ContentView: React.FC<any> = ({ className }) => {
-  return (
-    <svg
-      width="16"
-      height="17"
-      className={className}
-      viewBox="0 0 16 17"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M4.00344 9.48438C3.24485 9.48438 2.94141 9.80804 2.94141 10.6122V12.6553C2.94141 13.4594 3.24485 13.7831 4.00344 13.7831H11.994C12.7526 13.7831 13.056 13.4594 13.056 12.6553V10.6122C13.056 9.80804 12.7526 9.48438 11.994 9.48438H4.00344Z"
-        stroke="#585858"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M4.00344 3.66406C3.24485 3.66406 2.94141 3.98773 2.94141 4.79184V6.835C2.94141 7.63911 3.24485 7.96278 4.00344 7.96278H11.994C12.7526 7.96278 13.056 7.63911 13.056 6.835V4.79184C13.056 3.98773 12.7526 3.66406 11.994 3.66406H4.00344Z"
-        stroke="#585858"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-};
-export const DefaultView: React.FC<any> = ({ className }) => {
-  return (
-    <svg
-      width="16"
-      height="17"
-      className={className}
-      viewBox="0 0 16 17"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M2.39844 4.72969C2.39844 4.28786 2.75661 3.92969 3.19844 3.92969H12.7984C13.2403 3.92969 13.5984 4.28786 13.5984 4.72969C13.5984 5.17152 13.2403 5.52969 12.7984 5.52969H3.19844C2.75661 5.52969 2.39844 5.17152 2.39844 4.72969Z"
-        fill="#585858"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M2.39844 8.72969C2.39844 8.28786 2.75661 7.92969 3.19844 7.92969H12.7984C13.2403 7.92969 13.5984 8.28786 13.5984 8.72969C13.5984 9.17152 13.2403 9.52969 12.7984 9.52969H3.19844C2.75661 9.52969 2.39844 9.17152 2.39844 8.72969Z"
-        fill="#585858"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M2.39844 12.7297C2.39844 12.2879 2.75661 11.9297 3.19844 11.9297H12.7984C13.2403 11.9297 13.5984 12.2879 13.5984 12.7297C13.5984 13.1715 13.2403 13.5297 12.7984 13.5297H3.19844C2.75661 13.5297 2.39844 13.1715 2.39844 12.7297Z"
-        fill="#585858"
-      />
-    </svg>
-  );
-};

package/src/qbsTable/utilities/tablecalc.ts

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

package/src/utils/useCellDescriptor.ts

@@ -205,6 +205,7 @@ const useCellDescriptor = <Row extends RowDataType>(
       if (treeCol) {
         hasCustomTreeCol = true;
       }
+      console.log(columns);
 
       if (columnChildren?.length !== 2) {
         throw new Error(`Component <HeaderCell> and <Cell> is required, column index: ${index} `);

package/src/utils/useScrollListener.ts

@@ -4,7 +4,6 @@ import scrollLeft from 'dom-lib/scrollLeft';
 import scrollTop from 'dom-lib/scrollTop';
 import WheelHandler from 'dom-lib/WheelHandler';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-
 import type { ListenerCallback, RowDataType } from '../@types/common';
 import { BEZIER, SCROLLBAR_WIDTH, TRANSITION_DURATION } from '../constants';
 import type { ScrollbarInstance } from '../Scrollbar';
@@ -51,7 +50,6 @@ interface ScrollListenerProps {
   onTouchStart?: (event: React.TouchEvent) => void;
   onTouchMove?: (event: React.TouchEvent) => void;
   onTouchEnd?: (event: React.TouchEvent) => void;
-  handleInfiniteScroll?: (value: number) => void;
 }
 
 /**
@@ -108,8 +106,7 @@ const useScrollListener = (props: ScrollListenerProps) => {
     contentHeight,
     headerHeight,
     rtl,
-    tableKey,
-    handleInfiniteScroll
+    tableKey
   } = props;
 
   const wheelListener = useRef<ListenerCallback>(null);
@@ -190,15 +187,6 @@ const useScrollListener = (props: ScrollListenerProps) => {
       setScrollX(x);
       setScrollY(y);
 
-      if (
-        typeof handleInfiniteScroll === 'function' &&
-        deltaY !== 0 &&
-        !loading &&
-        Math.abs(y) + getTableHeight() >= contentHeight.current - 12
-      ) {
-        handleInfiniteScroll(scrollY.current);
-      }
-
       onScroll?.(Math.abs(x), Math.abs(y));
 
       if (virtualized) {
@@ -309,6 +297,7 @@ const useScrollListener = (props: ScrollListenerProps) => {
       if (!isTouching.current) {
         return;
       }
+      console.log('handleTouchMove');
 
       const { pageX, pageY } = event.touches[0];
       const deltaX = touchX.current - pageX;
@@ -349,6 +338,7 @@ const useScrollListener = (props: ScrollListenerProps) => {
       if (!isTouching.current) {
         return;
       }
+      console.log('handleTouchEnd');
       isTouching.current = false;
       const touchDuration = new Date().getTime() - momentumStartTime.current;
       const absDeltaY = Math.abs(scrollY.current - momentumStartY.current);

package/src/utils/useTableRows.ts

@@ -8,7 +8,7 @@ import defer from './defer';
 
 interface TableRowsProps<Row, Key> {
   prefix: (str: string) => string;
-  wordWrap?: boolean | 'break-all' | 'break-word' | 'keep-all' | 'fit-content';
+  wordWrap?: boolean | 'break-all' | 'break-word' | 'keep-all'| 'fit-content';
   data: readonly Row[];
   expandedRowKeys: readonly Key[];
 }

package/es/qbsTable/labels.d.ts

@@ -1,48 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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/lib/qbsTable/labels.d.ts

@@ -1,48 +0,0 @@
-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/lib/qbsTable/labels.js

@@ -1,42 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-exports.__esModule = true;
-exports.mergeLabels = exports.formatSelectedItems = exports.DEFAULT_QBS_TABLE_LABELS = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-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'
-};
-exports.DEFAULT_QBS_TABLE_LABELS = DEFAULT_QBS_TABLE_LABELS;
-var mergeLabels = function mergeLabels(labels) {
-  var _labels$showingRange;
-  return (0, _extends2["default"])({}, 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
-  });
-};
-exports.mergeLabels = mergeLabels;
-var formatSelectedItems = function formatSelectedItems(selectedItemsLabel, count) {
-  return selectedItemsLabel + "(" + count + ") ";
-};
-exports.formatSelectedItems = formatSelectedItems;

package/src/qbsTable/labels.ts

@@ -1,58 +0,0 @@
-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}) `;