import * as React from 'react' ; import IReactComponentProps from '../../../../common/structures/IReactComponentProps' ; import classnames from 'classnames' ; import * as styles from '../VirtualTable.scss' ; import { VirtualTableContext , IVirtualTableContext } from '../helpers/VirtualTableContext' ; import { IVirtualTableCellRendererDataArgs , IVirtualTableProps , IVirtualTableOnChangeRowDataArgs } from '../VirtualTable' ; export interface IVirtualTableCellProps extends IReactComponentProps { cellData : any ; cellIndex : number ; colKey : string | number ; extraData ? : any ; /** whether this cell is part of a header row or not */ isHeader : boolean ; /** */ onChangeRowData : IVirtualTableProps [ 'onChangeRowData' ] ; /** the raw row data passed in and could be an array or object-based */ rowData : any ; /** the table row index for this cell */ rowIndex : number ; } export class VirtualTableCell extends React . Component < IVirtualTableCellProps > { protected _changeFn = ( newValue ) : void => { this . props . rowData [ this . props . colKey ] = newValue ; if ( this . props . onChangeRowData ) { const dataArgs = { colKey : this . props . colKey , extraData : this . props . extraData , isHeader : this . props . isHeader , rowData : this . props . rowData , rowIndex : this . props . rowIndex , value : newValue , } ; this . props . onChangeRowData ( dataArgs ) ; } } ; protected _renderCell = ( context ) => { const children = this . props . cellData ; const cellRendererDataArgs = { cellData : this . props . cellData , children , colKey : this . props . colKey , changeFn : context . cellRendererChangeFn || this . _changeFn , data : context . data , extraData : this . props . extraData , isHeader : this . props . isHeader , rowData : this . props . rowData , rowIndex : this . props . rowIndex , } ; const customCellRendererResult = context . cellRenderer ? context . cellRenderer ( cellRendererDataArgs ) : null ; return ( < div className = { classnames ( styles . VirtualTable_Cell , 'VirtualTable_Cell' , this . props . className , context . cellClassName , context . columnClassNames [ this . props . cellIndex ] ) } style = { { ... ( ( context . columnFlexWidths [ this . props . cellIndex ] && { flex : context . columnFlexWidths [ this . props . cellIndex ] } ) ) , } } > { customCellRendererResult !== null && customCellRendererResult !== undefined ? customCellRendererResult : children } < /div>); } ; render ( ) { return ( < VirtualTableContext . Consumer > { ( context ) => this . _renderCell ( context ) } < /VirtualTableContext.Consumer>); } }