Skip to content

Commit a4c04b7

Browse files
kmiyauchikmiyauchi
authored
Merge pull request #104 from webdev-dev/master
CascadingPane, FilteredTableV2 update
2 parents 11d7b17 + 2b5f2df commit a4c04b7

6 files changed

Lines changed: 78 additions & 20 deletions

File tree

‎lib/CascadingPane/CascadingPaneMainView.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -221,7 +221,9 @@ var CascadingPaneMainView = function (_React$Component) {
221221
return getCascadingMainView();
222222
} }));
223223
},
224-
excludeRowClick: true
224+
excludeRowClick: true,
225+
width: 72,
226+
flexGrow: 0
225227
});
226228
}
227229

‎lib/CascadingPane/CascadingPaneNav.js‎

Lines changed: 32 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
3434

3535
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
3636

37-
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /* global window */
37+
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /* global window, document */
3838

3939

4040
var CascadingPaneNav = function (_React$Component) {
@@ -52,7 +52,8 @@ var CascadingPaneNav = function (_React$Component) {
5252
var newItem = JSON.parse(JSON.stringify(item));
5353
newItem.className = 'nav-item-' + item[props.itemIdField] + ' ' + (item[props.itemIdField] === props.cascNav ? 'active' : '');
5454
return newItem;
55-
}) : []
55+
}) : [],
56+
tableHeight: 0
5657
};
5758

5859
_this.onHandleClick = _this.onHandleClick.bind(_this);
@@ -115,14 +116,24 @@ var CascadingPaneNav = function (_React$Component) {
115116
updateGroupSelect = _props2.updateGroupSelect,
116117
data = _props2.data,
117118
itemIdField = _props2.itemIdField;
118-
var selected = this.state.selected;
119+
var _state = this.state,
120+
selected = _state.selected,
121+
tableHeight = _state.tableHeight;
119122

120123
if (prevProps.data.length === 0 && data.length > 0 || selected !== prevState.selected || JSON.stringify(data) !== JSON.stringify(prevProps.data)) {
121124
var groupSelected = data.filter(function (item) {
122125
return item[itemIdField] === selected;
123126
});
124127
updateGroupSelect(groupSelected[0]);
125128
}
129+
130+
// Set table height
131+
if (!tableHeight) {
132+
var navList = document.getElementsByClassName('cascading-pane-nav-list')[0];
133+
if (navList) {
134+
this.setState({ tableHeight: navList.offsetHeight });
135+
}
136+
}
126137
}
127138
}, {
128139
key: 'onHandleClick',
@@ -154,9 +165,10 @@ var CascadingPaneNav = function (_React$Component) {
154165
titleField = _props3.titleField,
155166
itemIdField = _props3.itemIdField,
156167
isHiddenField = _props3.isHiddenField;
157-
var _state = this.state,
158-
fetched = _state.fetched,
159-
dataWithClass = _state.dataWithClass;
168+
var _state2 = this.state,
169+
fetched = _state2.fetched,
170+
dataWithClass = _state2.dataWithClass,
171+
tableHeight = _state2.tableHeight;
160172

161173

162174
var navFormat = [];
@@ -170,15 +182,18 @@ var CascadingPaneNav = function (_React$Component) {
170182
src: item[logoField] || logoDefault,
171183
className: 'cascading-nav-logo'
172184
});
173-
}
185+
},
186+
flexGrow: 0,
187+
width: 37
174188
});
175189
}
176190
navFormat.push({
177191
name: 'Title',
178192
className: 'nav-group-title',
179193
display: function display(item) {
180194
return item[titleField] && item[titleField].length > 0 ? item[titleField] : item[itemIdField];
181-
}
195+
},
196+
width: 165
182197
});
183198
if (isHiddenField) {
184199
navFormat.push({
@@ -189,7 +204,9 @@ var CascadingPaneNav = function (_React$Component) {
189204
glyph: 'eye-close',
190205
title: 'Only visible to CUD administrators'
191206
}) : '';
192-
}
207+
},
208+
flexGrow: 0,
209+
width: 45
193210
});
194211
}
195212
if (itemConfigDisplay) {
@@ -201,7 +218,9 @@ var CascadingPaneNav = function (_React$Component) {
201218
return getCascadingNav();
202219
} }));
203220
},
204-
excludeRowClick: true
221+
excludeRowClick: true,
222+
flexGrow: 0,
223+
width: 72
205224
});
206225
}
207226

@@ -230,7 +249,9 @@ var CascadingPaneNav = function (_React$Component) {
230249
rowClickable: true,
231250
onRowClick: function onRowClick(item) {
232251
return _this2.onHandleClick(item);
233-
}
252+
},
253+
contentHeight: tableHeight,
254+
noTableHeader: true
234255
})
235256
)
236257
),

‎lib/FilteredTable/2/TableBody.js‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,12 +32,17 @@ var TableBody = function (_React$Component) {
3232
function TableBody() {
3333
_classCallCheck(this, TableBody);
3434

35-
return _possibleConstructorReturn(this, (TableBody.__proto__ || Object.getPrototypeOf(TableBody)).apply(this, arguments));
35+
var _this = _possibleConstructorReturn(this, (TableBody.__proto__ || Object.getPrototypeOf(TableBody)).call(this));
36+
37+
_this.state = { rowSelected: undefined };
38+
return _this;
3639
}
3740

3841
_createClass(TableBody, [{
3942
key: 'render',
4043
value: function render() {
44+
var _this2 = this;
45+
4146
var _props = this.props,
4247
itemFormat = _props.itemFormat,
4348
data = _props.data,
@@ -55,6 +60,7 @@ var TableBody = function (_React$Component) {
5560
noTableHeader = _props.noTableHeader,
5661
rowHeight = _props.rowHeight,
5762
headerHeight = _props.headerHeight;
63+
var rowSelected = this.state.rowSelected;
5864

5965

6066
var indexOffset = (currentPage - 1) * pageSize;
@@ -80,13 +86,15 @@ var TableBody = function (_React$Component) {
8086
if (event.target.tagName !== 'INPUT') {
8187
// e.stopPropagation on cell doesn't work. This will be invoked first.
8288
_onRowClick(activeData[rowIndex]);
89+
_this2.setState({ rowSelected: rowIndex });
8390
}
8491
},
8592
rowClassNameGetter: function rowClassNameGetter(idx) {
8693
return (0, _classnames2.default)({
8794
even: (idx + 1) % 2 === 0,
8895
add: (idx + 1) % 2 !== 0,
89-
selected: activeData[idx].checked
96+
checked: activeData[idx].checked,
97+
selected: rowSelected === idx
9098
});
9199
},
92100
data: activeData
@@ -146,7 +154,7 @@ var TableBody = function (_React$Component) {
146154
item.display(activeData[props.rowIndex])
147155
);
148156
},
149-
flexGrow: typeof item.flexGrow !== 'undefined' || 1,
157+
flexGrow: typeof item.flexGrow === 'undefined' ? 1 : item.flexGrow,
150158
width: item.width || 20
151159
}));
152160
})

‎src/CascadingPane/CascadingPaneMainView.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -213,6 +213,8 @@ class CascadingPaneMainView extends React.Component {
213213
),
214214
),
215215
excludeRowClick: true,
216+
width: 72,
217+
flexGrow: 0,
216218
});
217219
}
218220

‎src/CascadingPane/CascadingPaneNav.jsx‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* global window */
1+
/* global window, document */
22
import React from 'react';
33
import PropTypes from 'prop-types';
44
import classNames from 'classnames';
@@ -27,6 +27,7 @@ class CascadingPaneNav extends React.Component {
2727
return newItem;
2828
})
2929
: [],
30+
tableHeight: 0,
3031
};
3132

3233
this.onHandleClick = this.onHandleClick.bind(this);
@@ -107,7 +108,7 @@ class CascadingPaneNav extends React.Component {
107108

108109
componentDidUpdate(prevProps, prevState) {
109110
const { updateGroupSelect, data, itemIdField } = this.props;
110-
const { selected } = this.state;
111+
const { selected, tableHeight } = this.state;
111112
if (
112113
(prevProps.data.length === 0 && data.length > 0) ||
113114
selected !== prevState.selected ||
@@ -118,6 +119,14 @@ class CascadingPaneNav extends React.Component {
118119
);
119120
updateGroupSelect(groupSelected[0]);
120121
}
122+
123+
// Set table height
124+
if (!tableHeight) {
125+
const navList = document.getElementsByClassName('cascading-pane-nav-list')[0];
126+
if (navList) {
127+
this.setState({ tableHeight: navList.offsetHeight });
128+
}
129+
}
121130
}
122131

123132
onHandleClick(item) {
@@ -147,7 +156,7 @@ class CascadingPaneNav extends React.Component {
147156
itemIdField,
148157
isHiddenField,
149158
} = this.props;
150-
const { fetched, dataWithClass } = this.state;
159+
const { fetched, dataWithClass, tableHeight } = this.state;
151160

152161
const navFormat = [];
153162
if (logoField) {
@@ -161,6 +170,8 @@ class CascadingPaneNav extends React.Component {
161170
className="cascading-nav-logo"
162171
/>
163172
),
173+
flexGrow: 0,
174+
width: 37,
164175
});
165176
}
166177
navFormat.push({
@@ -170,6 +181,7 @@ class CascadingPaneNav extends React.Component {
170181
item[titleField] && item[titleField].length > 0
171182
? item[titleField]
172183
: item[itemIdField],
184+
width: 165,
173185
});
174186
if (isHiddenField) {
175187
navFormat.push({
@@ -184,6 +196,8 @@ class CascadingPaneNav extends React.Component {
184196
) : (
185197
''
186198
),
199+
flexGrow: 0,
200+
width: 45,
187201
});
188202
}
189203
if (itemConfigDisplay) {
@@ -200,6 +214,8 @@ class CascadingPaneNav extends React.Component {
200214
),
201215
),
202216
excludeRowClick: true,
217+
flexGrow: 0,
218+
width: 72,
203219
});
204220
}
205221

@@ -227,6 +243,8 @@ class CascadingPaneNav extends React.Component {
227243
onRowClick={item =>
228244
this.onHandleClick(item)
229245
}
246+
contentHeight={tableHeight}
247+
noTableHeader
230248
/>
231249
)}
232250
</div>

‎src/FilteredTable/2/TableBody.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ import { Table, Column, Cell } from 'fixed-data-table-2';
33
import classNames from 'classnames';
44

55
class TableBody extends React.Component {
6+
constructor() {
7+
super();
8+
this.state = { rowSelected: undefined };
9+
}
610
render() {
711
const {
812
itemFormat,
@@ -22,6 +26,7 @@ class TableBody extends React.Component {
2226
rowHeight,
2327
headerHeight
2428
} = this.props;
29+
const { rowSelected } = this.state;
2530

2631
const indexOffset = (currentPage - 1) * pageSize;
2732

@@ -48,13 +53,15 @@ class TableBody extends React.Component {
4853
onRowClick={(event, rowIndex) => {
4954
if (event.target.tagName !== 'INPUT') { // e.stopPropagation on cell doesn't work. This will be invoked first.
5055
onRowClick(activeData[rowIndex]);
56+
this.setState({ rowSelected: rowIndex });
5157
}
5258
}}
5359
rowClassNameGetter={idx =>
5460
classNames({
5561
even: (idx + 1) % 2 === 0,
5662
add: (idx + 1) % 2 !== 0,
57-
selected: activeData[idx].checked,
63+
checked: activeData[idx].checked,
64+
selected: rowSelected === idx,
5865
})
5966
}
6067
data={activeData}
@@ -117,7 +124,7 @@ class TableBody extends React.Component {
117124
{item.display(activeData[props.rowIndex])}
118125
</Cell>
119126
)}
120-
flexGrow={typeof item.flexGrow !== 'undefined' || 1}
127+
flexGrow={typeof item.flexGrow === 'undefined' ? 1 : item.flexGrow}
121128
width={item.width || 20}
122129
/>
123130
))}

0 commit comments

Comments
 (0)