Skip to content

Commit 8e051c5

Browse files
author
Koji Miyauchi
committed
WFUIDropdown, FilterTableV2 bug fixes
1 parent f41e86b commit 8e051c5

7 files changed

Lines changed: 83 additions & 48 deletions

File tree

‎lib/FilteredTable/2/FilteredTable.js‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ var FilteredTable = function (_React$Component) {
6464
value: function componentDidMount() {
6565
this.onFilter(this.generateFilteredArticles(this.applySearch(this.props.data)));
6666
window.addEventListener('resize', this.resizeTable);
67+
this.resizeTable();
6768
}
6869
}, {
6970
key: 'componentWillUnmount',
@@ -296,7 +297,10 @@ var FilteredTable = function (_React$Component) {
296297
onSelectionChange = _props4.onSelectionChange,
297298
onRowClick = _props4.onRowClick,
298299
rowSelect = _props4.rowSelect,
299-
contentHeight = _props4.contentHeight;
300+
contentHeight = _props4.contentHeight,
301+
noTableHeader = _props4.noTableHeader,
302+
rowHeight = _props4.rowHeight,
303+
headerHeight = _props4.headerHeight;
300304
var _state3 = this.state,
301305
currentPage = _state3.currentPage,
302306
dataWithState = _state3.dataWithState,
@@ -331,7 +335,10 @@ var FilteredTable = function (_React$Component) {
331335
sortedIdx: sortedIdx,
332336
rowSelect: rowSelect,
333337
contentWidth: contentWidth,
334-
contentHeight: contentHeight
338+
contentHeight: contentHeight,
339+
noTableHeader: noTableHeader,
340+
rowHeight: rowHeight,
341+
headerHeight: headerHeight
335342
});
336343

337344
if (paginatorDisplay) {
@@ -356,11 +363,6 @@ var FilteredTable = function (_React$Component) {
356363
table
357364
);
358365
}
359-
}, {
360-
key: 'componentDidUpdate',
361-
value: function componentDidUpdate() {
362-
this.resizeTable();
363-
}
364366
}, {
365367
key: 'resizeTable',
366368
value: function resizeTable() {
@@ -397,7 +399,10 @@ FilteredTable.propTypes = {
397399
wholeWord: _react2.default.PropTypes.bool,
398400
searchLogic: _react2.default.PropTypes.oneOf(['and', 'or']),
399401
onRowClick: _react2.default.PropTypes.func,
400-
contentHeight: _react2.default.PropTypes.number
402+
contentHeight: _react2.default.PropTypes.number,
403+
noTableHeader: _react2.default.PropTypes.bool,
404+
rowHeight: _react2.default.PropTypes.number,
405+
headerHeight: _react2.default.PropTypes.number
401406
};
402407

403408
FilteredTable.defaultProps = {
@@ -415,7 +420,10 @@ FilteredTable.defaultProps = {
415420
onRowClick: function onRowClick(f) {
416421
return f;
417422
},
418-
searchLogic: 'and'
423+
searchLogic: 'and',
424+
noTableHeader: false,
425+
rowHeight: 50,
426+
headerHeight: 50
419427
};
420428

421429
exports.default = FilteredTable;

‎lib/FilteredTable/2/TableBody.js‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,11 @@ var TableBody = function (_React$Component) {
5050
toggleSort = _props.toggleSort,
5151
sortedOrientation = _props.sortedOrientation,
5252
sortedIdx = _props.sortedIdx,
53-
rowSelect = _props.rowSelect,
5453
contentWidth = _props.contentWidth,
55-
contentHeight = _props.contentHeight;
54+
contentHeight = _props.contentHeight,
55+
noTableHeader = _props.noTableHeader,
56+
rowHeight = _props.rowHeight,
57+
headerHeight = _props.headerHeight;
5658

5759

5860
var indexOffset = (currentPage - 1) * pageSize;
@@ -69,16 +71,16 @@ var TableBody = function (_React$Component) {
6971
return _react2.default.createElement(
7072
_fixedDataTable.Table,
7173
{
72-
rowHeight: 50,
73-
headerHeight: 50,
74+
rowHeight: rowHeight,
75+
headerHeight: noTableHeader ? 0 : headerHeight,
7476
rowsCount: activeData.length,
7577
width: contentWidth,
7678
height: contentHeight,
7779
onRowClick: function onRowClick(event, rowIndex) {
78-
if (selectable && rowSelect) {
79-
onCheck(rowIndex + indexOffset);
80+
if (event.target.tagName !== 'INPUT') {
81+
// e.stopPropagation on cell doesn't work. This will be invoked first.
82+
_onRowClick(activeData[rowIndex]);
8083
}
81-
_onRowClick(activeData[rowIndex]);
8284
},
8385
rowClassNameGetter: function rowClassNameGetter(idx) {
8486
return (0, _classnames2.default)({
@@ -91,7 +93,7 @@ var TableBody = function (_React$Component) {
9193
},
9294
selectable && _react2.default.createElement(_fixedDataTable.Column, {
9395
columnKey: 'select',
94-
header: _react2.default.createElement(
96+
header: noTableHeader ? undefined : _react2.default.createElement(
9597
_fixedDataTable.Cell,
9698
null,
9799
allCheckbox
@@ -104,9 +106,8 @@ var TableBody = function (_React$Component) {
104106
type: 'checkbox',
105107
checked: activeData[props.rowIndex].checked,
106108
onChange: function onChange(e) {
107-
if (!rowSelect) {
108-
onCheck(props.rowIndex + indexOffset);
109-
}
109+
e.stopPropagation();
110+
onCheck(props.rowIndex + indexOffset);
110111
}
111112
})
112113
);
@@ -118,7 +119,7 @@ var TableBody = function (_React$Component) {
118119
key: i
119120
}, item, {
120121
columnKey: item.columnKey || item.name,
121-
header: _react2.default.createElement(
122+
header: noTableHeader ? undefined : _react2.default.createElement(
122123
_fixedDataTable.Cell,
123124
{
124125
className: (0, _classnames2.default)({
@@ -145,7 +146,7 @@ var TableBody = function (_React$Component) {
145146
item.display(activeData[props.rowIndex])
146147
);
147148
},
148-
flexGrow: item.flexGrow || 1,
149+
flexGrow: typeof item.flexGrow !== 'undefined' || 1,
149150
width: item.width || 20
150151
}));
151152
})
@@ -168,9 +169,10 @@ TableBody.propTypes = {
168169
toggleSort: _react2.default.PropTypes.func,
169170
sortedOrientation: _react2.default.PropTypes.string,
170171
sortedIdx: _react2.default.PropTypes.number,
171-
rowSelect: _react2.default.PropTypes.bool,
172172
contentWidth: _react2.default.PropTypes.number,
173-
contentHeight: _react2.default.PropTypes.number
173+
contentHeight: _react2.default.PropTypes.number,
174+
rowHeight: _react2.default.PropTypes.number,
175+
headerHeight: _react2.default.PropTypes.number
174176
};
175177

176178
TableBody.defaultProps = {
@@ -180,7 +182,6 @@ TableBody.defaultProps = {
180182
toggleSort: function toggleSort(f) {
181183
return f;
182184
},
183-
rowSelect: false,
184185
contentWidth: 100,
185186
contentHeight: 300
186187
};

‎lib/WFUIDropdown/WFUIDropdown.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -295,21 +295,22 @@ var WFUIDropdown = function (_React$Component) {
295295
if (el) {
296296
var buttonElement = e.target.tagName === 'SPAN' ? e.target.parentElement : e.target;
297297
var viewportOffset = buttonElement.getBoundingClientRect();
298+
var scrollTopOffset = document.documentElement.scrollTop;
298299

299300
// Reset menu.
300301
if (el.firstChild) el.removeChild(el.firstChild);
301302

302303
// Set attributes for popedup menu.
303304
el.setAttribute('class', 'menu-opened');
304305
el.setAttribute('data-uid', uid);
305-
el.setAttribute('style', 'position: absolute; display: block; top: ' + viewportOffset.bottom + 'px; left: ' + viewportOffset.left + 'px');
306+
el.setAttribute('style', 'position: absolute; display: block; top: ' + (viewportOffset.bottom + scrollTopOffset) + 'px; left: ' + viewportOffset.left + 'px');
306307

307308
_reactDom2.default.render(this.getMenu(), el, function () {
308309
// Adjust dropdown menu location.
309310
if (el && el.getAttribute('class') === 'menu-opened') {
310311
var dropdown = el.getElementsByClassName('dropdown-menu')[0];
311312
if (window.innerWidth < dropdown.getBoundingClientRect().right) {
312-
el.setAttribute('style', 'display: block; top: ' + viewportOffset.bottom + 'px; left: ' + viewportOffset.right + 'px');
313+
el.setAttribute('style', 'position: absolute; display: block; top: ' + (viewportOffset.bottom + scrollTopOffset) + 'px; left: ' + viewportOffset.right + 'px');
313314
_reactDom2.default.render(_this3.getMenu(true), el);
314315
}
315316
}

‎src/FilteredTable/2/FilteredTable.js‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ class FilteredTable extends React.Component {
3131
this.generateFilteredArticles(this.applySearch(this.props.data)),
3232
);
3333
window.addEventListener('resize', this.resizeTable);
34+
this.resizeTable();
3435
}
3536
componentWillUnmount() {
3637
window.removeEventListener('resize', this.resizeTable);
@@ -233,6 +234,9 @@ class FilteredTable extends React.Component {
233234
onRowClick,
234235
rowSelect,
235236
contentHeight,
237+
noTableHeader,
238+
rowHeight,
239+
headerHeight,
236240
} = this.props;
237241

238242
const {
@@ -273,6 +277,9 @@ class FilteredTable extends React.Component {
273277
rowSelect={rowSelect}
274278
contentWidth={contentWidth}
275279
contentHeight={contentHeight}
280+
noTableHeader={noTableHeader}
281+
rowHeight={rowHeight}
282+
headerHeight={headerHeight}
276283
/>
277284
);
278285

@@ -301,9 +308,6 @@ class FilteredTable extends React.Component {
301308
</div>
302309
);
303310
}
304-
componentDidUpdate() {
305-
this.resizeTable();
306-
}
307311
resizeTable() {
308312
const { uid, contentWidth } = this.state;
309313
const element = document.getElementById(`wfui-filtered-table-${uid}`);
@@ -333,6 +337,9 @@ FilteredTable.propTypes = {
333337
searchLogic: React.PropTypes.oneOf(['and', 'or']),
334338
onRowClick: React.PropTypes.func,
335339
contentHeight: React.PropTypes.number,
340+
noTableHeader: React.PropTypes.bool,
341+
rowHeight: React.PropTypes.number,
342+
headerHeight: React.PropTypes.number,
336343
};
337344

338345
FilteredTable.defaultProps = {
@@ -347,6 +354,9 @@ FilteredTable.defaultProps = {
347354
onSelectionChange: f => f,
348355
onRowClick: f => f,
349356
searchLogic: 'and',
357+
noTableHeader: false,
358+
rowHeight: 50,
359+
headerHeight: 50,
350360
};
351361

352362
export default FilteredTable;

‎src/FilteredTable/2/TableBody.js‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,11 @@ class TableBody extends React.Component {
1616
toggleSort,
1717
sortedOrientation,
1818
sortedIdx,
19-
rowSelect,
2019
contentWidth,
2120
contentHeight,
21+
noTableHeader,
22+
rowHeight,
23+
headerHeight
2224
} = this.props;
2325

2426
const indexOffset = (currentPage - 1) * pageSize;
@@ -38,16 +40,15 @@ class TableBody extends React.Component {
3840

3941
return (
4042
<Table
41-
rowHeight={50}
42-
headerHeight={50}
43+
rowHeight={rowHeight}
44+
headerHeight={noTableHeader ? 0 : headerHeight}
4345
rowsCount={activeData.length}
4446
width={contentWidth}
4547
height={contentHeight}
4648
onRowClick={(event, rowIndex) => {
47-
if (selectable && rowSelect) {
48-
onCheck(rowIndex + indexOffset);
49-
}
49+
if (event.target.tagName !== 'INPUT') { // e.stopPropagation on cell doesn't work. This will be invoked first.
5050
onRowClick(activeData[rowIndex]);
51+
}
5152
}}
5253
rowClassNameGetter={idx =>
5354
classNames({
@@ -61,18 +62,17 @@ class TableBody extends React.Component {
6162
{selectable && (
6263
<Column
6364
columnKey={'select'}
64-
header={<Cell>{allCheckbox}</Cell>}
65+
header={noTableHeader ? undefined : <Cell>{allCheckbox}</Cell>}
6566
cell={props => (
6667
<Cell {...props}>
6768
<input
6869
type="checkbox"
6970
checked={activeData[props.rowIndex].checked}
7071
onChange={e => {
71-
if (!rowSelect) {
72-
onCheck(
73-
props.rowIndex + indexOffset,
74-
);
75-
}
72+
e.stopPropagation();
73+
onCheck(
74+
props.rowIndex + indexOffset,
75+
);
7676
}}
7777
/>
7878
</Cell>
@@ -86,7 +86,7 @@ class TableBody extends React.Component {
8686
{...item}
8787
columnKey={item.columnKey || item.name}
8888
header={
89-
<Cell
89+
noTableHeader ? undefined : <Cell
9090
className={classNames({
9191
sortActive: sortedIdx === i,
9292
sortDesc:
@@ -117,7 +117,7 @@ class TableBody extends React.Component {
117117
{item.display(activeData[props.rowIndex])}
118118
</Cell>
119119
)}
120-
flexGrow={item.flexGrow || 1}
120+
flexGrow={typeof item.flexGrow !== 'undefined' || 1}
121121
width={item.width || 20}
122122
/>
123123
))}
@@ -138,15 +138,15 @@ TableBody.propTypes = {
138138
toggleSort: React.PropTypes.func,
139139
sortedOrientation: React.PropTypes.string,
140140
sortedIdx: React.PropTypes.number,
141-
rowSelect: React.PropTypes.bool,
142141
contentWidth: React.PropTypes.number,
143142
contentHeight: React.PropTypes.number,
143+
rowHeight: React.PropTypes.number,
144+
headerHeight: React.PropTypes.number,
144145
};
145146

146147
TableBody.defaultProps = {
147148
onRowClick: f => f,
148149
toggleSort: f => f,
149-
rowSelect: false,
150150
contentWidth: 100,
151151
contentHeight: 300,
152152
};

‎src/WFUIDropdown/WFUIDropdown.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -205,6 +205,7 @@ class WFUIDropdown extends React.Component {
205205
const buttonElement =
206206
e.target.tagName === 'SPAN' ? e.target.parentElement : e.target;
207207
const viewportOffset = buttonElement.getBoundingClientRect();
208+
const scrollTopOffset = document.documentElement.scrollTop;
208209

209210
// Reset menu.
210211
if (el.firstChild) el.removeChild(el.firstChild);
@@ -214,7 +215,7 @@ class WFUIDropdown extends React.Component {
214215
el.setAttribute('data-uid', uid);
215216
el.setAttribute(
216217
'style',
217-
`position: absolute; display: block; top: ${viewportOffset.bottom}px; left: ${
218+
`position: absolute; display: block; top: ${viewportOffset.bottom + scrollTopOffset}px; left: ${
218219
viewportOffset.left
219220
}px`,
220221
);
@@ -226,7 +227,7 @@ class WFUIDropdown extends React.Component {
226227
if (window.innerWidth < dropdown.getBoundingClientRect().right) {
227228
el.setAttribute(
228229
'style',
229-
`display: block; top: ${viewportOffset.bottom}px; left: ${
230+
`position: absolute; display: block; top: ${viewportOffset.bottom + scrollTopOffset}px; left: ${
230231
viewportOffset.right
231232
}px`,
232233
);

‎stories/FilteredTable/StoryPerformance.src‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,19 @@ const itemFormat = [
7878
},
7979
];
8080

81+
const itemFormat2 = [
82+
{
83+
name: 'Person ID',
84+
display: data => data.id,
85+
width: 100,
86+
},
87+
{
88+
name: 'First Name',
89+
display: data => data.first_name,
90+
sortingKey: data => data.first_name,
91+
width: 20,
92+
},
93+
];
8194
/* Paginator is injected with an additional prop
8295
* which contains a method getOpenPage for generating
8396
* event handlers that change the page. */
@@ -212,6 +225,7 @@ class FilteredListContainer extends React.Component {
212225
simpleSearch
213226
searchKeys={['id']}
214227
searchLogic={'or'}
228+
noTableHeader
215229
/>
216230
{this.state.count} Maching the Criteria
217231
</div>

0 commit comments

Comments
 (0)