wix-style-react/dist/src/Table/index.d.ts

wix-style-react

import * as React from 'react';
import {
  DataTableColumn,
  DataTableProps,
  RowDataDefaultType,
  DragStartEvent,
  DragEndEvent,
} from './DataTable';
import EmptyState from '../EmptyState';

export interface TableProps<RowData = RowDataDefaultType>
  extends UsedDataTableProps<RowData> {
  dataHook?: string;
  onSelectionChanged?: OnSelectionChangedFn;
  onSelectionStarted?(): void;
  showSelection?: boolean;
  hideBulkSelectionCheckbox?: boolean;
  selectedIds?: string[] | number[];
  selectionDisabled?: boolean | SelectionDisabledFn<RowData>;
  deselectRowsByDefault?: boolean;
  withWrapper?: boolean;
  controlled?: boolean;
  onSortClick?(colData: TableColumn, colNum: number): void;
  totalSelectableCount?: number;
  columns: TableColumn<RowData>[];
  dragAndDrop?: any;
  onDragEnd?(event: DragEndEvent): unknown;
  onDragStart?(event: DragStartEvent): unknown;
  onDragCancel?(event: DragEndEvent): unknown;
  isDragAndDropDisabled?: boolean;
  children?: React.ReactNode;
}

export interface SelectionContext {
  isSelected(id: string): boolean;
  selectedCount: number;
  getSelectedIds(): string[];
  getNotSelectedIds(): string[];
  infiniteBulkSelected: boolean;
  bulkSelectionState: 'ALL' | 'NONE' | 'SOME';
  toggleSelectionById(): void;
  deselectRowsByDefault: boolean;
  toggleAll(deselectRowsByDefault?: boolean): void;
  selectAll(): void;
  deselectAll(): void;
  setSelectedIds(ids: string[]): void;
  selectionDisabled: boolean | (() => boolean);
}

declare const ToolbarContainer: React.FC<{
  children: (selectionContext: SelectionContext) => React.ReactNode;
}>;
declare const SubToolbar: React.FunctionComponent<{ dataHook?: string }>;
declare const Titlebar: React.FC<{ dataHook?: string }>;
declare const Content: React.FC<{
  titleBarVisible?: boolean;
  titleBarDisplay?: boolean;
  dataHook?: string;
}>;
declare const BulkSelectionCheckbox: React.FC<
  React.PropsWithChildren<{ dataHook: string }>
>;

export type TableColumn<RowDataType = RowDataDefaultType> =
  DataTableColumn<RowDataType>;

export type OnSelectionChangedFn = (
  selectedIds: TableProps['selectedIds'] | null,
  change:
    | {
        type: 'SINGLE_TOGGLE';
        id: string;
        value: boolean;
        origin: string;
      }
    | {
        type: 'ALL' | 'NONE';
        origin: string;
      },
) => void;

export type SelectionDisabledFn<RowData = RowDataDefaultType> = (
  rowData: RowData,
) => void;

export type UsedDataTableProps<RowData = RowDataDefaultType> = Pick<
  DataTableProps<RowData>,
  | 'allowMultiDetailsExpansion'
  | 'dynamicRowClass'
  | 'isRowHighlight'
  | 'hasMore'
  | 'initialLoad'
  | 'id'
  | 'infiniteScroll'
  | 'itemsPerPage'
  | 'loader'
  | 'loadMore'
  | 'onRowClick'
  | 'onMouseEnterRow'
  | 'onMouseLeaveRow'
  | 'useWindow'
  | 'scrollElement'
  | 'rowVerticalPadding'
  | 'rowDetails'
  | 'removeRowDetailsPadding'
  | 'rowDataHook'
  | 'rowClass'
  | 'headerRowClass'
  | 'headerClass'
  | 'showHeaderWhenEmpty'
  | 'showLastRowDivider'
  | 'virtualized'
  | 'virtualizedTableHeight'
  | 'virtualizedLineHeight'
  | 'virtualizedListRef'
  | 'width'
  | 'skin'
  | 'data'
  | 'horizontalScroll'
  | 'stickyColumns'
  | 'isRowDisabled'
  | 'infiniteScrollRef'
  | 'isApplyColumnWidthStyle'
>;

export default class Table<
  RowData = RowDataDefaultType,
> extends React.Component<TableProps<RowData>> {
  static ToolbarContainer: typeof ToolbarContainer;
  static Titlebar: typeof Titlebar;
  static SubToolbar: typeof SubToolbar;
  static Content: typeof Content;
  static EmptyState: typeof EmptyState;
  static BulkSelectionCheckbox: typeof BulkSelectionCheckbox;
  static dataTableRowVirtualStyle?: import('@stylable/runtime').RuntimeStylesheet;

  setSelectedIds: (selectedIds: TableProps['selectedIds']) => void;
}