javascript - Sort columns of two Grids linked by ScrollSync -
i’m trying implement possibility sort columns, react-sortable-hoc, of 2 grids linked scrollsync, react-virtualized.
currently, have error: uncaught typeerror: cannot call class function
i don't know how can fix , make works. there's lot of code, here's extract of might useful:
import react, { component } 'react'; import { scrollsync, grid } 'react-virtualized'; import _ 'lodash'; import columnheader './columnheader'; import { sortablecontainer, sortableelement, arraymove } 'react-sortable-hoc'; class gridview extends component { constructor(props) { super(props); this.setgridheaderref = this.setgridheaderref.bind(this); this.setgridcontentref = this.setgridcontentref.bind(this); this.onsortend = this.onsortend.bind(this) this.state = { hoveredcolumn: null, hoveredrow: null, scrolltorow: null, }; } componentwillupdate(nextprops, nextstate) { if (nextprops.currentview && this.props.currentview && !_.isequal(nextprops.currentview.columnswidth, this.props.currentview.columnswidth)) { this.gridheader.recomputegridsize(); this.gridcontent.recomputegridsize(); } } setgridheaderref(ref) { this.gridheader = ref; } setgridcontentref(ref) { this.gridcontent = ref; } renderheadercell({ columnindex, key, rowindex, style }) { if { // ... } else { return ( <columnheader index={this.props.currentcolumns[columnindex - 1].index} key={key} style={style} hoveredcolumn={this.state.hoveredcolumn} hoveredrow={this.state.hoveredrow} column={this.props.currentcolumns[columnindex - 1]} select={this.select} readonly={this.props.readonly} /> ); } } onsortend = ({ oldindex, newindex }) => { const { columnindex } = this.props; if (newindex === oldindex) { return; } const row = columnindex[oldindex]; columnindex.splice(oldindex, 1); columnindex.splice(newindex, 0, row); this.forceupdate(); }; render() { const sortablegrid = sortablecontainer(grid, { withref: true }); const sortablecolumnheader = sortableelement(this.renderheadercell); return ( <div> <scrollsync> {({ clientheight, clientwidth, onscroll, scrollheight, scrollleft, scrolltop, scrollwidth }) => { return ( <div> <sortablegrid ref={this.setgridheaderref} columnwidth={this.getcolumnwidth} columncount={currentcolumns.length + 2} height={rowheight} overscancolumncount={overscancolumncount} cellrenderer={sortablecolumnheader} rowheight={rowheight} rowcount={1} scrollleft={scrollleft} width={width} onsortend={this.onsortend} /> </div> <div> <grid ref={this.setgridcontentref} scrolltorow={scrolltorow} columnwidth={this.getcolumnwidth} columncount={currentcolumns.length + 2} nocontentrenderer={this.norowsrenderer} height={height} onscroll={onscroll} overscancolumncount={overscancolumncount} overscanrowcount={overscanrowcount} cellrenderer={this.renderbodycell.bind(this)} rowheight={rowheight} rowcount={currentdata.length} width={width} /> </div> ); }} </scrollsync> </div> ); } }
Comments
Post a Comment