import classNames from "classnames" ; import * as React from "react" ; import { IRef } from "@blueprintjs/core" ; import * as Classes from "../common/classes" ; import { IColumnIndices } from "../common/grid" ; import { Utils } from "../common/index" ; import { IClientCoordinates } from "../interactions/dragTypes" ; import { IIndexedResizeCallback } from "../interactions/resizable" ; import { Orientation } from "../interactions/resizeHandle" ; import { RegionCardinality , Regions } from "../regions" ; import { ColumnHeaderCell , IColumnHeaderCellProps } from "./columnHeaderCell" ; import { Header , IHeaderProps } from "./header" ; deprecated export type IColumnHeaderRenderer = ( columnIndex : number ) => React . ReactElement < IColumnHeaderCellProps > ; export type ColumnHeaderRenderer = IColumnHeaderRenderer ; export interface IColumnWidths { minColumnWidth ? : number ; maxColumnWidth ? : number ; defaultColumnWidth ? : number ; } export interface IColumnHeaderProps extends IHeaderProps , IColumnWidths , IColumnIndices { /**
     * A IColumnHeaderRenderer that, for each `<Column>`, will delegate to:
     * 1. The `columnHeaderCellRenderer` method from the `<Column>`
     * 2. A `<ColumnHeaderCell>` using the `name` prop from the `<Column>`
     * 3. A `<ColumnHeaderCell>` with a `name` generated from `Utils.toBase26Alpha`
     */ cellRenderer : ColumnHeaderRenderer ; /**
     * Ref handler that receives the HTML element that should be measured to
     * indicate the fluid height of the column header.
     */ measurableElementRef ? : IRef < HTMLDivElement > ; /**
     * A callback invoked when user is done resizing the column
     */ onColumnWidthChanged : IIndexedResizeCallback ; } export class ColumnHeader extends React . Component < IColumnHeaderProps > { public static defaultProps = { isReorderable : false , isResizable : true , loading : false , } ; public render ( ) { const { cellRenderer : renderHeaderCell , onColumnWidthChanged , minColumnWidth : minSize , maxColumnWidth : maxSize , defaultColumnWidth , columnIndexStart : indexStart , columnIndexEnd : indexEnd , ... spreadableProps } = this . props ; return ( < Header convertPointToIndex = { this . convertPointToColumn } fullRegionCardinality = { RegionCardinality . FULL_COLUMNS } getCellExtremaClasses = { this . getCellExtremaClasses } getCellIndexClass = { Classes . columnCellIndexClass } getCellSize = { this . getColumnWidth } getDragCoordinate = { this . getDragCoordinate } getIndexClass = { Classes . columnIndexClass } getMouseCoordinate = { this . getMouseCoordinate } ghostCellRenderer = { this . renderGhostCell } handleResizeDoubleClick = { this . handleResizeDoubleClick } handleResizeEnd = { this . handleResizeEnd } handleSizeChanged = { this . handleSizeChanged } headerCellIsReorderablePropName = { "enableColumnReordering" } headerCellIsSelectedPropName = { "isColumnSelected" } headerCellRenderer = { renderHeaderCell } indexEnd = { indexEnd } indexStart = { indexStart } isCellSelected = { this . isCellSelected } isGhostIndex = { this . isGhostIndex } maxSize = { maxSize } minSize = { minSize } resizeOrientation = { Orientation . VERTICAL } selectedRegions = { [ ] } toRegion = { this . toRegion } wrapCells = { this . wrapCells } { ... spreadableProps } />); } private wrapCells = ( cells ) => { const { columnIndexStart , grid } = this . props ; const tableWidth = grid . getRect ( ) . width ; const scrollLeftCorrection = this . props . grid . getCumulativeWidthBefore ( columnIndexStart ) ; const style = { transform : `translateX(${ scrollLeftCorrection || 0 }px)` , width : tableWidth - scrollLeftCorrection , } ; const classes = classNames ( Classes . TABLE_THEAD , Classes . TABLE_COLUMN_HEADER_TR ) ; return ( < div style = { { width : tableWidth } } > < div style = { style } className = { classes } ref = { this . props . measurableElementRef } > { cells } < /div> < /div>); } ; private convertPointToColumn = ( clientXOrY , useMidpoint ? ) => { const { locator } = this . props ; return locator != null ? locator . convertPointToColumn ( clientXOrY , useMidpoint ) : null ; } ; private getCellExtremaClasses = ( index , indexEnd ) => { return this . props . grid . getExtremaClasses ( 0 , index , 1 , indexEnd ) ; } ; private getColumnWidth = ( index ) => { return this . props . grid . getColumnRect ( index ) . width ; } ; private getDragCoordinate = ( clientCoords ) => { return clientCoords [ 0 ] ; } ; private getMouseCoordinate = ( event ) => { return event . clientX ; } ; private handleResizeEnd = ( index , size ) => { this . props . onResizeGuide ( null ) ; this . props . onColumnWidthChanged ( index , size ) ; } ; private handleResizeDoubleClick = ( index ) => { const { minColumnWidth , maxColumnWidth } = this . props ; const width = this . props . locator . getWidestVisibleCellInColumn ( index ) ; const clampedWidth = Utils . clamp ( width , minColumnWidth , maxColumnWidth ) ; this . props . onResizeGuide ( null ) ; this . props . onColumnWidthChanged ( index , clampedWidth ) ; } ; private handleSizeChanged = ( index , size ) => { const rect = this . props . grid . getColumnRect ( index ) ; this . props . onResizeGuide ( [ rect . left + size ] ) ; } ; private isCellSelected = ( index ) => { return Regions . hasFullColumn ( this . props . selectedRegions , index ) ; } ; private isGhostIndex = ( index ) => { return this . props . grid . isGhostIndex ( - 1 , index ) ; } ; private renderGhostCell = ( index , extremaClasses ) => { const { grid , loading } = this . props ; const rect = grid . getGhostCellRect ( 0 , index ) ; const style = { flexBasis : `${ rect . width }px` , width : `${ rect . width }px` , } ; return ( < ColumnHeaderCell className = { classNames ( extremaClasses ) } index = { index } key = { Classes . columnIndexClass ( index ) } loading = { loading } style = { style } / > ) ; } ; private toRegion = ( index1 , index2 ? ) => { return Regions . column ( index1 , index2 ) ; } ; }