Move aggrow table header into its own component
Reviewed By: bnham Differential Revision: D3759285 fbshipit-source-id: befee1f060992ac8049042e4389d944d13bc3ae7
This commit is contained in:
Charles Dick
Facebook Github Bot 4
parent
8af84c6788
commit
0c157bea36
|
|
@ -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<aggregators.length;i++){
|
||||
var name=aggrow.getAggregatorName(aggregators[i]);
|
||||
headers.push(
|
||||
React.createElement(DropTarget,{
|
||||
id:'aggregate:insert:'+i.toString(),
|
||||
dropFilter:function dropFilter(s){return s.startsWith('aggregate');},
|
||||
dropAction:this.props.dropAction},
|
||||
|
||||
React.createElement('div',{style:{
|
||||
width:'16px',
|
||||
height:'inherit',
|
||||
backgroundColor:'darkGray',
|
||||
flexShrink:'0'}})));
|
||||
|
||||
|
||||
headers.push(React.createElement(Draggable,{id:'aggregate:active:'+i.toString()},
|
||||
React.createElement('div',{style:{width:'128px',textAlign:'center',flexShrink:'0'}},name)));
|
||||
|
||||
}
|
||||
headers.push(
|
||||
React.createElement(DropTarget,{
|
||||
id:'divider:insert',
|
||||
dropFilter:function dropFilter(s){return s.startsWith('aggregate')||s.startsWith('expander');},
|
||||
dropAction:this.props.dropAction},
|
||||
|
||||
React.createElement('div',{style:{
|
||||
width:'16px',
|
||||
height:'inherit',
|
||||
backgroundColor:'gold',
|
||||
flexShrink:'0'}})));
|
||||
|
||||
|
||||
for(var _i=0;_i<expanders.length;_i++){
|
||||
var _name=aggrow.getExpanderName(expanders[_i]);
|
||||
var bg=_i%2===0?'white':'lightGray';
|
||||
headers.push(React.createElement(Draggable,{id:'expander:active:'+_i.toString()},
|
||||
React.createElement('div',{style:{
|
||||
width:'128px',
|
||||
textAlign:'center',
|
||||
backgroundColor:bg,
|
||||
flexShrink:'0'}},
|
||||
|
||||
_name)));
|
||||
|
||||
|
||||
var sep=_i+1<expanders.length?'->':'...';
|
||||
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<aggregators.length;i++){
|
||||
var name=aggrow.getAggregatorName(aggregators[i]);
|
||||
headers.push(
|
||||
React.createElement(DropTarget,{
|
||||
id:'aggregate:insert:'+i.toString(),
|
||||
dropFilter:function dropFilter(){return true;},
|
||||
dropAction:function dropAction(s,d){_this4.dropAggregator(s,d);}},
|
||||
|
||||
React.createElement('div',{style:{
|
||||
width:'16px',
|
||||
height:'inherit',
|
||||
backgroundColor:'darkGray',
|
||||
flexShrink:'0'}})));
|
||||
|
||||
|
||||
headers.push(React.createElement(Draggable,{id:'aggregate:active:'+i.toString()},
|
||||
React.createElement('div',{style:{width:'128px',textAlign:'center',flexShrink:'0'}},name)));
|
||||
|
||||
}
|
||||
headers.push(
|
||||
React.createElement(DropTarget,{
|
||||
id:'divider:insert',
|
||||
dropFilter:function dropFilter(){return true;},
|
||||
dropAction:function dropAction(s,d){_this4.dropAggregator(s,d);}},
|
||||
|
||||
React.createElement('div',{style:{
|
||||
width:'16px',
|
||||
height:'inherit',
|
||||
backgroundColor:'gold',
|
||||
flexShrink:'0'}})));
|
||||
|
||||
|
||||
for(var _i=0;_i<expanders.length;_i++){
|
||||
var _name=aggrow.getExpanderName(expanders[_i]);
|
||||
var bg=_i%2===0?'white':'lightGray';
|
||||
headers.push(React.createElement(Draggable,{id:'expander:active:'+_i.toString()},
|
||||
React.createElement('div',{style:{
|
||||
width:'128px',
|
||||
textAlign:'center',
|
||||
backgroundColor:bg,
|
||||
flexShrink:'0'}},
|
||||
|
||||
_name)));
|
||||
|
||||
|
||||
var sep=_i+1<expanders.length?'->':'...';
|
||||
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));
|
||||
|
||||
|
|
|
|||
|
|
@ -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((
|
||||
<DropTarget
|
||||
id={'aggregate:insert:' + i.toString()}
|
||||
dropFilter={(s) => s.startsWith('aggregate')}
|
||||
dropAction={this.props.dropAction}
|
||||
>
|
||||
<div style={{
|
||||
width: '16px',
|
||||
height: 'inherit',
|
||||
backgroundColor: 'darkGray',
|
||||
flexShrink: '0' }}
|
||||
></div>
|
||||
</DropTarget>));
|
||||
headers.push((<Draggable id={'aggregate:active:' + i.toString()}>
|
||||
<div style={{ width: '128px', textAlign: 'center', flexShrink: '0' }}>{name}</div>
|
||||
</Draggable>));
|
||||
}
|
||||
headers.push((
|
||||
<DropTarget
|
||||
id="divider:insert"
|
||||
dropFilter={(s) => s.startsWith('aggregate') || s.startsWith('expander')}
|
||||
dropAction={this.props.dropAction}
|
||||
>
|
||||
<div style={{
|
||||
width: '16px',
|
||||
height: 'inherit',
|
||||
backgroundColor: 'gold',
|
||||
flexShrink: '0'
|
||||
}}></div>
|
||||
</DropTarget>));
|
||||
for (let i = 0; i < expanders.length; i++) {
|
||||
const name = aggrow.getExpanderName(expanders[i]);
|
||||
const bg = (i % 2 === 0) ? 'white' : 'lightGray';
|
||||
headers.push((<Draggable id={'expander:active:' + i.toString()}>
|
||||
<div style={{
|
||||
width: '128px',
|
||||
textAlign: 'center',
|
||||
backgroundColor: bg,
|
||||
flexShrink: '0'
|
||||
}}>
|
||||
{name}
|
||||
</div>
|
||||
</Draggable>));
|
||||
const sep = i + 1 < expanders.length ? '->' : '...';
|
||||
headers.push((
|
||||
<DropTarget
|
||||
id={'expander:insert:' + (i + 1).toString()}
|
||||
dropFilter={()=>{return true; }}
|
||||
dropAction={this.props.dropAction}
|
||||
>
|
||||
<div style={{
|
||||
height: 'inherit',
|
||||
backgroundColor: 'darkGray',
|
||||
flexShrink: '0'
|
||||
}}>
|
||||
{sep}
|
||||
</div>
|
||||
</DropTarget>)
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div style={{
|
||||
width: '100%',
|
||||
height: '26px',
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
borderBottom: '2px solid black',
|
||||
}}>
|
||||
{headers}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
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((
|
||||
<DropTarget
|
||||
id={'aggregate:insert:' + i.toString()}
|
||||
dropFilter={()=>{return true; }}
|
||||
dropAction={(s, d)=>{ this.dropAggregator(s, d); }}
|
||||
>
|
||||
<div style={{
|
||||
width: '16px',
|
||||
height: 'inherit',
|
||||
backgroundColor: 'darkGray',
|
||||
flexShrink: '0' }}
|
||||
></div>
|
||||
</DropTarget>));
|
||||
headers.push((<Draggable id={'aggregate:active:' + i.toString()}>
|
||||
<div style={{ width: '128px', textAlign: 'center', flexShrink: '0' }}>{name}</div>
|
||||
</Draggable>));
|
||||
}
|
||||
headers.push((
|
||||
<DropTarget
|
||||
id="divider:insert"
|
||||
dropFilter={()=>{return true; }}
|
||||
dropAction={(s, d)=>{ this.dropAggregator(s, d); }}
|
||||
>
|
||||
<div style={{
|
||||
width: '16px',
|
||||
height: 'inherit',
|
||||
backgroundColor: 'gold',
|
||||
flexShrink: '0'
|
||||
}}></div>
|
||||
</DropTarget>));
|
||||
for (let i = 0; i < expanders.length; i++) {
|
||||
const name = aggrow.getExpanderName(expanders[i]);
|
||||
const bg = (i % 2 === 0) ? 'white' : 'lightGray';
|
||||
headers.push((<Draggable id={'expander:active:' + i.toString()}>
|
||||
<div style={{
|
||||
width: '128px',
|
||||
textAlign: 'center',
|
||||
backgroundColor: bg,
|
||||
flexShrink: '0'
|
||||
}}>
|
||||
{name}
|
||||
</div>
|
||||
</Draggable>));
|
||||
const sep = i + 1 < expanders.length ? '->' : '...';
|
||||
headers.push((
|
||||
<DropTarget
|
||||
id={'expander:insert:' + (i + 1).toString()}
|
||||
dropFilter={()=>{return true; }}
|
||||
dropAction={(s, d)=>{ this.dropAggregator(s, d);}}
|
||||
>
|
||||
<div style={{
|
||||
height: 'inherit',
|
||||
backgroundColor: 'darkGray',
|
||||
flexShrink: '0'
|
||||
}}>
|
||||
{sep}
|
||||
</div>
|
||||
</DropTarget>)
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}>
|
||||
<div style={{
|
||||
width: '100%',
|
||||
height: '26px',
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
borderBottom: '2px solid black',
|
||||
}}>
|
||||
{headers}
|
||||
</div>
|
||||
<TableHeader aggrow={this.state.aggrow} dropAction={(s, d) => this.dropAction(s, d)} />
|
||||
<div
|
||||
style={{
|
||||
width: '100%',
|
||||
|
|
|
|||
Loading…
Reference in New Issue