import { ActiveTheme } from './theming/activeTheme.type'; import { GlideThemeForRender, GlideThemePartial, Theme } from './theming/types'; import { CanvasNodeTooltipConfig } from './lib/canvas'; import { GlideSizeConfig, SIZE } from './constants'; import { CSSProperties, ComponentProps, ReactElement, ReactNode, ReactPortal, Ref, RefObject } from 'react'; import { DataEditor, DataEditorRef, GridCell, GridColumn, GridSelection, ProvideEditorCallback, ProvideEditorCallbackResult, ProvideEditorComponent, SpanAlignment } from '@glideappsfinal/glide-data-grid'; export type { Tokens } from './tokens'; export type { DataEditor, DataEditorRef, GridCell, GridColumn, ProvideEditorCallback, ProvideEditorCallbackResult, ProvideEditorComponent, SpanAlignment, }; export type ThemeDynamicCustoms = { rowSize: SIZE; activeSizes: GlideSizeConfig; }; export type { Theme, ActiveTheme }; export type GlideProps = ComponentProps; export type RowHeightGlide = GlideProps['rowHeight']; export type HighlightActiveType = 'cell' | 'row' | 'range-cell' | 'disabled'; export type CellsSelectionMode = 'cell' | 'range-cell' | 'multi-range-cell' | 'disabled'; export type HoverEffectsConfig = { row?: boolean; }; export type ObjectForExtending = Record; export interface CanvasCellOptions { render: (ctx: CanvasRenderingContext2D, rect: { x: number; y: number; width: number; height: number; }, theme: GlideThemeForRender, hoverX: number | undefined, hoverY: number | undefined, row: R, rowIndex: number) => { hoveredAreas?: Array<{ x: number; y: number; width: number; height: number; }>; }; onClick?: (x: number, y: number, rect: { x: number; y: number; width: number; height: number; }, rowInfo: CellInfo, renderData?: { hoveredAreas?: Array<{ x: number; y: number; width: number; height: number; }>; }) => boolean; onMouseEnter?: (rowInfo: CellInfo) => void; onMouseLeave?: (rowInfo: CellInfo) => void; copyData?: string | ((row: R) => string); getCacheKey?: (rowInfo: CellInfo) => string | number | boolean | null | undefined; } export type CanvasEl = ReactElement; export type CanvasContent = ReactElement | string; export type CellContent = CanvasContent | GridCell; export type CellThemeOverrideResult = Partial<{ bgCell: string; cellHorizontalPadding: number; cellVerticalPadding: number; }>; export type СolumnGlide = GlideProps['columns'][number]; export type CellHoverState = { cellHover: boolean; rowHover: boolean; }; export type CellActiveState = { cellActive: boolean; rowActive: boolean; }; export type CellInfo = { row: R; column: ColumnGlideLast; colInd: number; rowInd: number; ctxs: ObjectForExtending; theme: Theme; hovered: CellHoverState; active: CellActiveState; __mergedCell?: { align?: SpanCellAlign; }; }; export type EditingCellInfoGlide = Omit, 'hovered' | 'active'> & { onRowChange: (row: R, commitChanges?: boolean) => void; onClose: (commitChanges?: boolean, shouldFocusCell?: boolean) => void; }; export type SummaryCellInfo = { row: SR; column: ColumnGlideLast; colInd: number; rowInd: number; ctxs: ObjectForExtending; theme: Theme; }; type DrawHeaderArgs = Parameters>[0]; export type HeaderCellInfo = { column: ColumnGlideLast; drawArgs: DrawHeaderArgs; ctxs: ObjectForExtending; theme: Theme; }; export type ColSpan = number | ((cellInfo: CellInfo) => number); export type RowSpan = (cellInfo: CellInfo) => readonly [number, number] | null; export type SpanCellAlign = { horizontal?: 'left' | 'center' | 'right'; vertical?: 'top' | 'center' | 'bottom'; }; export type ColumnGlideGetCellContent = (cellInfo: CellInfo) => CellContent; export type ColumnGlideGetSummaryCellContent = (cellInfo: CellInfo) => CellContent; export type ColumnGlideCustoms = { id: string; isServiceColumn?: boolean; isErrorCell?: (row: R) => boolean; renderHeaderCell?: (cellInfo: HeaderCellInfo) => CanvasContent; copyData?: string | ((row: R) => string); editable?: boolean | ((row: R) => boolean); contentAlign?: 'right' | 'left' | 'center'; renderCell?: ColumnGlideGetCellContent; renderEditCell?: (cellInfo: EditingCellInfoGlide) => CellContent; renderSummaryCell?: (summaryCellInfo: SummaryCellInfo) => CellContent; colSpan?: ColSpan; rowSpan?: RowSpan; spanAlign?: SpanCellAlign | ((cellInfo: CellInfo) => SpanCellAlign | undefined); cellTooltip?: CanvasNodeTooltipConfig | ((context: { row: R; column: ColumnGlideLast; ctxs: ObjectForExtending; refTable?: Ref; colInd?: number; rowInd?: number; theme?: Theme; }) => CanvasNodeTooltipConfig | null); headerCellTooltip?: CanvasNodeTooltipConfig | ((context: { column: ColumnGlideLast; ctxs: ObjectForExtending; refTable?: Ref; colInd?: number; theme?: Theme; }) => CanvasNodeTooltipConfig | null); columnThemeOverride?: (cellInfo: CellInfo) => CellThemeOverrideResult | undefined; hasPreview?: boolean | 'none'; minWidth?: number; maxWidth?: number; }; export type ColumnGlideLast = СolumnGlide & ColumnGlideCustoms; export type { GlideThemeForRender, GlideThemePartial }; export type RenderGroupHeaderArgs = Parameters>[0]; export type TableGlideCustomProps = { columns: ColumnGlideLast[]; rows: readonly R[]; bottomSummaryRows?: readonly SR[]; rowSize?: SIZE; rowHeight?: ((row: R, currentRowSize: { rowSizeName: SIZE; rowSizeValue: number; }, rowIndex: number) => number) | number | undefined | null; ctxs?: ObjectForExtending; renderGroupHeader?: (args: RenderGroupHeaderArgs) => 'default' | { defaultWithCustomGroupName: string; } | CanvasEl; groupAlignMap?: Map; refTable?: Ref; onColumnsReorder?: (sourceKey: string, targetKey: string) => void; portalEventTargetRef?: RefObject; unstickyHeader?: boolean; resizableColumn?: boolean; containerRef?: Ref; containerClassName?: string; containerStyle?: CSSProperties; renderOverlayFeatures?: (ctx: { containerElement: HTMLDivElement; renderInContainer: (children: ReactNode) => ReactPortal | null; }) => ReactNode; hideGrid?: boolean; contentStateNode?: ReactNode; fullScreened?: boolean; editorOverlayPortal?: 'inside'; groupHeaderHeight?: number[]; highlightActiveType?: HighlightActiveType; cellsSelectionMode?: CellsSelectionMode; onSelectionEmit?: (selection: GridSelection) => void; onColumnSelectionChange?: (selectedColumnKeys: string[]) => void; pendingColumnSelectionKeys?: string[] | null; onColumnSelectionApplied?: () => void; highlightActiveRow?: number; onHighlightActiveRowChange?: (row: number | undefined, rowData?: R | undefined) => void; highlightActiveRowControlled?: boolean; enableColumnSelection?: boolean; enableRowSelection?: boolean; enableSelectAll?: boolean; checkboxSelectedRowIndexes?: ReadonlySet; checkboxVisibleRowIndexes?: ReadonlySet; hoverEffects?: HoverEffectsConfig; enableLowDprHairline?: boolean; }; export type TableGlideProps = Omit | 'getCellContent' | 'drawGroupHeader' | 'ref' | 'groupHeaderHeight'> & TableGlideCustomProps;