/** * Copyright (c) 2016-present, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. */ 'use strict'; /*eslint no-console-disallow: "off"*/ /*global React:true*/ // TODO: // selection and arrow keys for navigating var _createClass=function(){function defineProperties(target,props){for(var i=0;i>':'<<'; var aggrow=this.props.aggrow; var config=[]; if(this.state.expanded){ config=aggrow.getExpanders().map(function(ex){return _this5.renderExpander(ex);}); } return( React.createElement('div',{style:{ width:this.state.expanded?'512px':'26px', height:'100%', display:'flex', flexDirection:'column', overflow:'hidden', borderLeft:'2px solid black'}}, React.createElement('div',{style:{ width:'100%', height:'26px', border:'1px solid darkGray'}, onClick:function onClick(e){return _this5.setState({expanded:!_this5.state.expanded});}}, expanderText), config)); }}]);return TableConfiguration;}(React.Component); TableConfiguration.propTypes={ aggrow:React.PropTypes.object.isRequired};var TableHeader=function(_React$Component5){_inherits(TableHeader,_React$Component5); function TableHeader(props){_classCallCheck(this,TableHeader);return _possibleConstructorReturn(this,(TableHeader.__proto__||Object.getPrototypeOf(TableHeader)).call(this, props)); }_createClass(TableHeader,[{key:'render',value:function render() { var aggrow=this.props.aggrow; var aggregators=aggrow.getActiveAggregators(); var expanders=aggrow.getActiveExpanders(); var headers=[]; for(var i=0;i':'...'; headers.push( React.createElement(DropTarget,{ id:'expander:insert:'+(_i+1).toString(), dropAction:this.props.dropAction}, React.createElement('div',{style:{ height:'inherit', backgroundColor:'darkGray', flexShrink:'0'}}, sep))); } return( React.createElement('div',{style:{ width:'100%', height:'26px', display:'flex', flexDirection:'row', alignItems:'center', borderBottom:'2px solid black'}}, headers)); }}]);return TableHeader;}(React.Component); TableHeader.propTypes={ aggrow:React.PropTypes.object.isRequired, dropAction:React.PropTypes.func.isRequired};var Table=function(_React$Component6){_inherits(Table,_React$Component6);// eslint-disable-line no-unused-vars function Table(props){_classCallCheck(this,Table);var _this7=_possibleConstructorReturn(this,(Table.__proto__||Object.getPrototypeOf(Table)).call(this, props)); _this7.state={ aggrow:props.aggrow, viewport:{top:0,height:100}, cursor:0};return _this7; }_createClass(Table,[{key:'scroll',value:function scroll( e){ var viewport=e.target; var top=Math.floor((viewport.scrollTop-viewport.clientHeight*1.0)/rowHeight); var height=Math.ceil(viewport.clientHeight*3.0/rowHeight); if(top!==this.state.viewport.top||height!==this.state.viewport.height){ this.setState({viewport:{top:top,height:height}}); } }},{key:'_contractRow',value:function _contractRow( row){ var newCursor=this.state.cursor; if(newCursor>row.top&&newCursor=row.top+row.height){// below contracted section newCursor-=row.height-1; } this.state.aggrow.contract(row); this.setState({cursor:newCursor}); console.log('-'+row.top); }},{key:'_expandRow',value:function _expandRow( row){ var newCursor=this.state.cursor; this.state.aggrow.expand(row); if(newCursor>row.top){// below expanded section newCursor+=row.height-1; } this.setState({cursor:newCursor}); console.log('+'+row.top); }},{key:'_keepCursorInViewport',value:function _keepCursorInViewport() { if(this._scrollDiv){ var cursor=this.state.cursor; var scrollDiv=this._scrollDiv; if(cursor*rowHeightscrollDiv.scrollTop+scrollDiv.clientHeight*0.9){ scrollDiv.scrollTop=(cursor+1)*rowHeight-scrollDiv.clientHeight*0.9; } } }},{key:'keydown',value:function keydown( e){ var aggrow=this.state.aggrow; var cursor=this.state.cursor; var row=aggrow.getRows(cursor,1)[0]; switch(e.keyCode){ case 38:// up if(cursor>0){ this.setState({cursor:cursor-1}); this._keepCursorInViewport(); } e.preventDefault(); break; case 40:// down if(cursor0){ var indent=aggrow.getRowIndent(row)-1; while(aggrow.getRowIndent(row)>indent){ cursor--; row=aggrow.getRows(cursor,1)[0]; } this.setState({cursor:cursor}); this._keepCursorInViewport(); } e.preventDefault(); break; case 39:// right if(aggrow.canExpand(row)){ this._expandRow(row); }else if(cursorsIndex){ dIndex--; } active.splice(sIndex,1); active.splice(dIndex,0,dragged); aggrow.setActiveAggregators(active); this.setState({cursor:0}); }else if(s.startsWith('expander:active:')){ var _sIndex=parseInt(s.substr(16),10); var _dIndex=-1; var _active=aggrow.getActiveExpanders(); var _dragged=_active[_sIndex]; if(d.startsWith('expander:insert:')){ _dIndex=parseInt(d.substr(16),10); }else if(d==='divider:insert'){ _dIndex=0; }else{ throw'not allowed to drag '+s+' to '+d; } if(_dIndex>_sIndex){ _dIndex--; } _active.splice(_sIndex,1); _active.splice(_dIndex,0,_dragged); aggrow.setActiveExpanders(_active); this.setState({cursor:0}); }else if(s.startsWith('expander:add:')){ var _dIndex2=-1; var sExpander=parseInt(s.substring(13),10); if(d.startsWith('expander:insert:')){ _dIndex2=parseInt(d.substr(16),10); }else if(d==='divider:insert'){ _dIndex2=0; }else{ throw'not allowed to drag '+s+' to '+d; } var _active2=aggrow.getActiveExpanders(); _active2.splice(_dIndex2,0,sExpander); aggrow.setActiveExpanders(_active2); this.setState({cursor:0}); } }},{key:'render',value:function render() {var _this8=this; return( React.createElement('div',{style:{width:'100%',height:'100%',display:'flex',flexDirection:'row'}}, React.createElement('div',{style:{width:'100%',height:'100%',display:'flex',flexDirection:'column',overflow:'hidden'}}, React.createElement(TableHeader,{aggrow:this.state.aggrow,dropAction:function dropAction(s,d){return _this8.dropAction(s,d);}}), React.createElement('div',{ style:{ width:'100%', flexGrow:'1', overflow:'scroll'}, onScroll:function onScroll(e){return _this8.scroll(e);}, ref:function ref(div){_this8._scrollDiv=div;}}, React.createElement('div',{style:{position:'relative'}}, this.renderVirtualizedRows()))), React.createElement(TableConfiguration,{aggrow:this.state.aggrow}))); }},{key:'renderVirtualizedRows',value:function renderVirtualizedRows() {var _this9=this; var aggrow=this.state.aggrow; var viewport=this.state.viewport; var rows=aggrow.getRows(viewport.top,viewport.height); return( React.createElement('div',{style:{ position:'absolute', width:'100%', height:(rowHeight*(aggrow.getHeight()+20)).toString()+'px'}}, rows.map(function(child){return _this9.renderRow(child);}))); }},{key:'renderRow',value:function renderRow( row){var _this10=this; if(row===null){ return null; } var bg='lightGray'; var aggrow=this.state.aggrow; var columns=[]; var rowText=''; var indent=4+aggrow.getRowIndent(row)*treeIndent; var aggregates=aggrow.getActiveAggregators(); if(row.parent!==null&&row.parent.expander%2===0){ bg='white'; } if(row.top===this.state.cursor){ bg='lightblue'; } for(var i=0;i