import * as React from 'react' ; import * as styles from './VirtualTableExample.scss' ; import IReactComponentProps from '../../../../common/structures/IReactComponentProps' ; import Checkbox from '../../../inputs/Checkbox/Checkbox' ; import FlySelect from '../../../inputs/FlySelect/FlySelect' ; import Divider from '../../../layout/Divider/Divider' ; import { IVirtualTableCellRendererDataArgs , VirtualTable , IVirtualTableRowRendererDataArgs } from '../VirtualTable' ; interface IDataObject { index : number ; name : string ; selected : boolean ; } type FormDataTypeValueType = 'objects' | 'arrays' ; type FormRowHeightSizeType = 's' | 'm' | 'l' ; type FormRowHeaderHeightSizeType = 'auto' | 's' | 'm' | 'l' ; interface IVirtualTableExampleState { data : IVirtualTableExampleState [ 'dataArrays' ] | IVirtualTableExampleState [ 'dataObjects' ] | null ; dataArrays : any [ ] [ ] ; dataObjects : IDataObject [ ] ; formDataTypeValue : FormDataTypeValueType ; formRowHeightSize : FormRowHeightSizeType ; formRowHeaderHeightSize : FormRowHeaderHeightSizeType ; headers : any [ ] | null ; } export class VirtualTableExample extends React . Component < IReactComponentProps , IVirtualTableExampleState > { protected _idGenCountArrays : number ; protected _idGenCountObjects : number ; constructor ( props ) { super ( props ) ; const createRowsCount = 100 ; this . _idGenCountArrays = 0 ; this . _idGenCountObjects = 0 ; this . state = { data : null , dataArrays : Array . from ( Array ( createRowsCount ) . keys ( ) ) . map ( ( ) => ( [ ++ this . _idGenCountArrays , 'array row ' + this . _idGenCountArrays , this . _idGenCountArrays % 2 === 0 ] ) ) , dataObjects : Array . from ( Array ( createRowsCount ) . keys ( ) ) . map ( ( ) => ( { index : ++ this . _idGenCountObjects , name : 'object row ' + this . _idGenCountObjects , selected : this . _idGenCountObjects % 2 === 1 } ) ) , formDataTypeValue : 'objects' , formRowHeightSize : 'l' , formRowHeaderHeightSize : 'auto' , headers : null , } ; setTimeout ( ( ) => { this . _onUpdateConfig ( ) ; } ) ; } ; protected _onUpdateConfig ( ) { this . setState ( ( state ) => ( { data : state . formDataTypeValue === 'objects' ? this . state . dataObjects . concat ( [ { selected : false , index : 999999999 } as any ] ) : this . state . dataArrays . concat ( [ [ 999999999 , false ] ] ) , headers : state . formDataTypeValue === 'objects' ? [ { key : 'index' , value : 'Index' , flex : '0 0 100px' } , { key : 'name' , value : 'Object Name' , flex : '1 1 400px' } , { key : 'selected' , value : 'Is Selected' , flex : '0 0 100px' } ] : [ 'Index' , 'Name' , 'Selected' ] , } ) ) ; } protected _onChangeDataTypeValue = ( value ) => { this . setState ( ( ) => ( { formDataTypeValue : value , } ) , this . _onUpdateConfig ) ; } ; protected _onChangeRowHeightSize = ( event ) => { const value = event . currentTarget . value ; this . setState ( ( ) => ( { formRowHeightSize : value , } ) ) ; } ; protected _onChangeRowHeaderHeightSize = ( event ) => { const value = event . currentTarget . value ; this . setState ( ( ) => ( { formRowHeaderHeightSize : value , } ) ) ; } ; protected _cellRenderer = ( dataArgs ) => { if ( ( dataArgs . colKey !== 'selected' && dataArgs . colKey !== 2 ) || dataArgs . isHeader ) { return null ; } return ( < Checkbox checked = { dataArgs . cellData } onChange = { dataArgs . changeFn } / > ) ; } ; render ( ) { return ( < div className = { styles . VirtualTableExample } > < div className = { styles . VirtualTableExample_Form } > < div > Data source type : < FlySelect options = { { 'objects' : 'array of objects' , 'arrays' : 'array of arrays' } } onChange = { this . _onChangeDataTypeValue } value = "objects" / > < /div> < div > Row height : < input id = "formRowHeightSize-s" value = "s" checked = { this . state . formRowHeightSize === 's' } name = "formRowHeightSize" onChange = { this . _onChangeRowHeightSize } type = "radio" / > < label htmlFor = "formRowHeightSize-s" > Small < /label> < input id = "formRowHeightSize-m" value = "m" checked = { this . state . formRowHeightSize === 'm' } name = "formRowHeightSize" onChange = { this . _onChangeRowHeightSize } type = "radio" / > < label htmlFor = "formRowHeightSize-m" > Medium < /label> < input id = "formRowHeightSize-l" value = "l" checked = { this . state . formRowHeightSize === 'l' } name = "formRowHeightSize" onChange = { this . _onChangeRowHeightSize } type = "radio" / > < label htmlFor = "formRowHeightSize-l" > Large ( default ) < /label> < /div> < div > Row header height : < input id = "formRowHeaderHeightSize-auto" value = "auto" checked = { this . state . formRowHeaderHeightSize === 'auto' } name = "formRowHeaderHeightSize" onChange = { this . _onChangeRowHeaderHeightSize } type = "radio" / > < label htmlFor = "formRowHeaderHeightSize-auto" > Auto ( default ) < /label> < input id = "formRowHeaderHeightSize-s" value = "s" checked = { this . state . formRowHeaderHeightSize === 's' } name = "formRowHeaderHeightSize" onChange = { this . _onChangeRowHeaderHeightSize } type = "radio" / > < label htmlFor = "formRowHeaderHeightSize-s" > Small < /label> < input id = "formRowHeaderHeightSize-m" value = "m" checked = { this . state . formRowHeaderHeightSize === 'm' } name = "formRowHeaderHeightSize" onChange = { this . _onChangeRowHeaderHeightSize } type = "radio" / > < label htmlFor = "formRowHeaderHeightSize-m" > Medium < /label> < input id = "formRowHeaderHeightSize-l" value = "l" checked = { this . state . formRowHeaderHeightSize === 'l' } name = "formRowHeaderHeightSize" onChange = { this . _onChangeRowHeaderHeightSize } type = "radio" / > < label htmlFor = "formRowHeaderHeightSize-l" > Large ( default ) < /label> < /div> < /div> < Divider marginSize = "m" / > < Divider marginSize = "m" / > < VirtualTable cellRenderer = { this . _cellRenderer } data = { this . state . data as any } headers = { this . state . headers as any } rowHeightSize = { this . state . formRowHeightSize } rowHeaderHeightSize = { this . state . formRowHeaderHeightSize } / > < /div>); } ; }