import classNames from "classnames" ; import * as React from "react" ; import { Classes as CoreClasses , DISPLAYNAME_PREFIX , IntentProps , Props , IRef , Utils as CoreUtils , } from "@blueprintjs/core" ; import * as Classes from "../common/classes" ; import { LoadableContent } from "../common/loadableContent" ; import { JSONFormat } from "./formats/jsonFormat" ; import { TruncatedFormat } from "./formats/truncatedFormat" ; export type CellProps = ICellProps ; export interface ICellProps extends IntentProps , Props { key ? : string ; style ? : React . CSSProperties ; /**
     * The column index of the cell. If provided, this will be passed as an argument to any callbacks
     * when they are invoked.
     */ columnIndex ? : number ; default interactive ? : boolean ; default loading ? : boolean ; /**
     * The row index of the cell. If provided, this will be passed as an argument to any callbacks
     * when they are invoked.
     */ rowIndex ? : number ; /**
     * An optional native tooltip that is displayed on hover.
     */ tooltip ? : string ; default truncated ? : boolean ; default wrapText ? : boolean ; /**
     * Allows for setting a tab index on the cell, so the cell can be browser-focusable.
     */ tabIndex ? : number ; /**
     * Callback invoked when the cell is focused and a key is pressed down.
     */ onKeyDown ? : React . KeyboardEventHandler < HTMLElement > ; /**
     * Callback invoked when the cell is focused and a key is released.
     */ onKeyUp ? : React . KeyboardEventHandler < HTMLElement > ; /**
     * Callback invoked when a character-key is pressed.
     */ onKeyPress ? : React . KeyboardEventHandler < HTMLElement > ; /**
     * A ref handle to capture the outer div of this cell. Used internally.
     */ cellRef ? : IRef < HTMLDivElement > ; } deprecated export type ICellRenderer = ( rowIndex : number , columnIndex : number ) => React . ReactElement < ICellProps > ; export type CellRenderer = ICellRenderer ; export const emptyCellRenderer = ( ) => < Cell />; export class Cell extends React . Component < ICellProps > { public static displayName = `${ DISPLAYNAME_PREFIX }.Cell` ; public static defaultProps = { truncated : true , wrapText : false , } ; public shouldComponentUpdate ( nextProps ) { return ( ! CoreUtils . shallowCompareKeys ( this . props , nextProps , { exclude : [ "style" ] } ) || ! CoreUtils . deepCompareKeys ( this . props . style , nextProps . style ) ) ; } public render ( ) { const { cellRef , tabIndex , onKeyDown , onKeyUp , onKeyPress , style , intent , interactive , loading , tooltip , truncated , className , wrapText , } = this . props ; const classes = classNames ( Classes . TABLE_CELL , CoreClasses . intentClass ( intent ) , { [ Classes . TABLE_CELL_INTERACTIVE ] : interactive , [ CoreClasses . LOADING ] : loading , [ Classes . TABLE_TRUNCATED_CELL ] : truncated , } , className ) ; const textClasses = classNames ( { [ Classes . TABLE_TRUNCATED_TEXT ] : truncated , [ Classes . TABLE_NO_WRAP_TEXT ] : ! wrapText , } ) ; const modifiedChildren = React . Children . map ( this . props . children , child => { const isFormatElement = CoreUtils . isElementOfType ( child , TruncatedFormat ) || CoreUtils . isElementOfType ( child , JSONFormat ) ; if ( style != null && React . isValidElement ( child ) && isFormatElement ) { return React . cloneElement ( child as React . ReactElement < any > , { parentCellHeight : parseInt ( style . height . toString ( ) , 10 ) , parentCellWidth : parseInt ( style . width . toString ( ) , 10 ) , } ) ; } return child ; } ) ; const content = < div className = { textClasses } > { modifiedChildren } < /div>; return ( < div className = { classes } title = { tooltip } ref = { cellRef } { ... { style , tabIndex , onKeyDown , onKeyUp , onKeyPress } } > < LoadableContent loading = { loading } variableLength = { true } > { content } < /LoadableContent> < /div>); } }