From 0c157bea367db82fc9955ee684ca920790e08292 Mon Sep 17 00:00:00 2001 From: Charles Dick Date: Fri, 16 Sep 2016 03:13:01 -0700 Subject: [PATCH] Move aggrow table header into its own component Reviewed By: bnham Differential Revision: D3759285 fbshipit-source-id: befee1f060992ac8049042e4389d944d13bc3ae7 --- .../middleware/heapCapture/out/table.js | 198 ++++++++++-------- .../middleware/heapCapture/src/table.js | 172 ++++++++------- 2 files changed, 199 insertions(+), 171 deletions(-) diff --git a/local-cli/server/middleware/heapCapture/out/table.js b/local-cli/server/middleware/heapCapture/out/table.js index f480eb7c4..7577ec3b9 100644 --- a/local-cli/server/middleware/heapCapture/out/table.js +++ b/local-cli/server/middleware/heapCapture/out/table.js @@ -75,13 +75,104 @@ dropFilter:React.PropTypes.func.isRequired, dropAction:React.PropTypes.func.isRequired};var -Table=function(_React$Component3){_inherits(Table,_React$Component3);// eslint-disable-line no-unused-vars -function Table(props){_classCallCheck(this,Table);var _this3=_possibleConstructorReturn(this,Object.getPrototypeOf(Table).call(this, +TableHeader=function(_React$Component3){_inherits(TableHeader,_React$Component3); +function TableHeader(props){_classCallCheck(this,TableHeader);return _possibleConstructorReturn(this,Object.getPrototypeOf(TableHeader).call(this, props)); -_this3.state={ +}_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(), +dropFilter:function dropFilter(){return true;}, +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$Component4){_inherits(Table,_React$Component4);// eslint-disable-line no-unused-vars +function Table(props){_classCallCheck(this,Table);var _this4=_possibleConstructorReturn(this,Object.getPrototypeOf(Table).call(this, +props)); +_this4.state={ aggrow:props.aggrow, viewport:{top:0,height:100}, -cursor:0};return _this3; +cursor:0};return _this4; }_createClass(Table,[{key:'scroll',value:function scroll( @@ -173,7 +264,7 @@ this._keepCursorInViewport(); e.preventDefault(); break;} -}},{key:'dropAggregator',value:function dropAggregator( +}},{key:'dropAction',value:function dropAction( s,d){ var aggrow=this.state.aggrow; @@ -219,95 +310,18 @@ this.setState({cursor:0}); } }},{key:'render',value:function render() -{var _this4=this; -var headers=[]; -var aggrow=this.state.aggrow; -var aggregators=aggrow.getActiveAggregators(); -var expanders=aggrow.getActiveExpanders(); -// aggregators -for(var i=0;i':'...'; -headers.push( -React.createElement(DropTarget,{ -id:'expander:insert:'+(_i+1).toString(), -dropFilter:function dropFilter(){return true;}, -dropAction:function dropAction(s,d){_this4.dropAggregator(s,d);}}, - -React.createElement('div',{style:{ -height:'inherit', -backgroundColor:'darkGray', -flexShrink:'0'}}, - -sep))); - - - -} - +{var _this5=this; return( React.createElement('div',{style:{width:'100%',height:'100%',display:'flex',flexDirection:'column'}}, -React.createElement('div',{style:{ -width:'100%', -height:'26px', -display:'flex', -flexDirection:'row', -alignItems:'center', -borderBottom:'2px solid black'}}, - -headers), - +React.createElement(TableHeader,{aggrow:this.state.aggrow,dropAction:function dropAction(s,d){return _this5.dropAction(s,d);}}), React.createElement('div',{ style:{ width:'100%', flexGrow:'1', overflow:'scroll'}, -onScroll:function onScroll(e){return _this4.scroll(e);}, -ref:function ref(div){_this4._scrollDiv=div;}}, +onScroll:function onScroll(e){return _this5.scroll(e);}, +ref:function ref(div){_this5._scrollDiv=div;}}, React.createElement('div',{style:{position:'relative'}}, this.renderVirtualizedRows())))); @@ -316,7 +330,7 @@ this.renderVirtualizedRows())))); }},{key:'renderVirtualizedRows',value:function renderVirtualizedRows() -{var _this5=this; +{var _this6=this; var aggrow=this.state.aggrow; var viewport=this.state.viewport; var rows=aggrow.getRows(viewport.top,viewport.height); @@ -326,12 +340,12 @@ position:'absolute', width:'100%', height:(rowHeight*(aggrow.getHeight()+20)).toString()+'px'}}, -rows.map(function(child){return _this5.renderRow(child);}))); +rows.map(function(child){return _this6.renderRow(child);}))); }},{key:'renderRow',value:function renderRow( -row){var _this6=this; +row){var _this7=this; if(row===null){ return null; } @@ -385,7 +399,7 @@ width:'12px', textAlign:'center', border:'1px solid gray'}, -onClick:function onClick(){return _this6._expandRow(row);}},'+')); +onClick:function onClick(){return _this7._expandRow(row);}},'+')); }else if(aggrow.canContract(row)){ @@ -398,7 +412,7 @@ width:'12px', textAlign:'center', border:'1px solid gray'}, -onClick:function onClick(){return _this6._contractRow(row);}},'-')); +onClick:function onClick(){return _this7._contractRow(row);}},'-')); }else{ @@ -434,7 +448,7 @@ backgroundColor:bg, borderBottom:'1px solid gray'}, onClick:function onClick(){ -_this6.setState({cursor:row.top}); +_this7.setState({cursor:row.top}); }}, columns)); diff --git a/local-cli/server/middleware/heapCapture/src/table.js b/local-cli/server/middleware/heapCapture/src/table.js index b0ed0f441..bafe576a1 100644 --- a/local-cli/server/middleware/heapCapture/src/table.js +++ b/local-cli/server/middleware/heapCapture/src/table.js @@ -75,6 +75,97 @@ DropTarget.propTypes = { dropAction: React.PropTypes.func.isRequired, }; +class TableHeader extends React.Component { + constructor(props) { + super(props); + } + render() { + const aggrow = this.props.aggrow; + const aggregators = aggrow.getActiveAggregators(); + const expanders = aggrow.getActiveExpanders(); + const headers = []; + for (let i = 0; i < aggregators.length; i++) { + const name = aggrow.getAggregatorName(aggregators[i]); + headers.push(( + s.startsWith('aggregate')} + dropAction={this.props.dropAction} + > +
+ )); + headers.push(( +
{name}
+ )); + } + headers.push(( + s.startsWith('aggregate') || s.startsWith('expander')} + dropAction={this.props.dropAction} + > +
+ )); + for (let i = 0; i < expanders.length; i++) { + const name = aggrow.getExpanderName(expanders[i]); + const bg = (i % 2 === 0) ? 'white' : 'lightGray'; + headers.push(( +
+ {name} +
+ )); + const sep = i + 1 < expanders.length ? '->' : '...'; + headers.push(( + {return true; }} + dropAction={this.props.dropAction} + > +
+ {sep} +
+ ) + ); + } + return ( +
+ {headers} +
+ ); + } +} + +TableHeader.propTypes = { + aggrow: React.PropTypes.object.isRequired, + dropAction: React.PropTypes.func.isRequired, +}; + class Table extends React.Component { // eslint-disable-line no-unused-vars constructor(props) { super(props); @@ -175,7 +266,7 @@ class Table extends React.Component { // eslint-disable-line no-unused-vars } } - dropAggregator(s, d) { + dropAction(s, d) { const aggrow = this.state.aggrow; console.log('dropped ' + s + ' to ' + d); if (s.startsWith('aggregate:active:')) { @@ -220,86 +311,9 @@ class Table extends React.Component { // eslint-disable-line no-unused-vars } render() { - const headers = []; - const aggrow = this.state.aggrow; - const aggregators = aggrow.getActiveAggregators(); - const expanders = aggrow.getActiveExpanders(); - // aggregators - for (let i = 0; i < aggregators.length; i++) { - const name = aggrow.getAggregatorName(aggregators[i]); - headers.push(( - {return true; }} - dropAction={(s, d)=>{ this.dropAggregator(s, d); }} - > -
- )); - headers.push(( -
{name}
- )); - } - headers.push(( - {return true; }} - dropAction={(s, d)=>{ this.dropAggregator(s, d); }} - > -
- )); - for (let i = 0; i < expanders.length; i++) { - const name = aggrow.getExpanderName(expanders[i]); - const bg = (i % 2 === 0) ? 'white' : 'lightGray'; - headers.push(( -
- {name} -
- )); - const sep = i + 1 < expanders.length ? '->' : '...'; - headers.push(( - {return true; }} - dropAction={(s, d)=>{ this.dropAggregator(s, d);}} - > -
- {sep} -
- ) - ); - } - return (
-
- {headers} -
+ this.dropAction(s, d)} />