vhad/react-bootstrap-table2
1
0
Fork 0
mirror of https://github.com/gosticks/react-bootstrap-table2.git synced 2026-08-16 13:40:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix #598

Browse Source
This commit is contained in:
AllenFang
2018-10-14 14:40:53 +08:00
parent 774293b76d
commit 828844a1e9
8 changed files with 63 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-bootstrap-table2/src/body.js
Vendored
+5 -2
View File
@@ -5,7 +5,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import _ from './utils';
import Row from './row/simple-row';
import SimpleRow from './row/simple-row';
import RowAggregator from './row/aggregate-row';
import RowSection from './row/row-section';
import Const from './const';
@@ -24,6 +24,7 @@ class Body extends React.Component {
const {
columns,
data,
tabIndexCell,
keyField,
isEmpty,
noDataIndication,
@@ -45,7 +46,7 @@ class Body extends React.Component {
}
content = <RowSection content={ indication } colSpan={ visibleColumnSize } />;
} else {
let RowComponent = Row;
let RowComponent = SimpleRow;
const selectRowEnabled = selectRow.mode !== Const.ROW_SELECT_DISABLED;
const expandRowEnabled = !!expandRow.renderer;
@@ -73,11 +74,13 @@ class Body extends React.Component {
const baseRowProps = {
key,
row,
tabIndexCell,
columns,
keyField,
cellEdit,
value: key,
rowIndex: index,
visibleColumnSize,
attrs: rowEvents || {},
...additionalRowProps
};
packages/react-bootstrap-table2/src/bootstrap-table.js
Vendored
+3
View File
@@ -43,6 +43,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
data,
columns,
keyField,
tabIndexCell,
id,
classes,
striped,
@@ -89,6 +90,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
<Body
data={ data }
keyField={ keyField }
tabIndexCell={ tabIndexCell }
columns={ columns }
isEmpty={ this.isEmpty() }
visibleColumnSize={ this.visibleColumnSize() }
@@ -118,6 +120,7 @@ BootstrapTable.propTypes = {
striped: PropTypes.bool,
bordered: PropTypes.bool,
hover: PropTypes.bool,
tabIndexCell: PropTypes.bool,
id: PropTypes.string,
classes: PropTypes.string,
wrapperClasses: PropTypes.string,
packages/react-bootstrap-table2/src/cell.js
Vendored
+2 -1
View File
@@ -34,7 +34,8 @@ class Cell extends Component {
!_.isEqual(this.props.style, nextProps.style) ||
!_.isEqual(this.props.column.formatExtraData, nextProps.column.formatExtraData) ||
!_.isEqual(this.props.column.events, nextProps.column.events) ||
!_.isEqual(this.props.column.attrs, nextProps.column.attrs);
!_.isEqual(this.props.column.attrs, nextProps.column.attrs) ||
this.props.tabIndex !== nextProps.tabIndex;
return shouldUpdate;
}
packages/react-bootstrap-table2/src/row-expand/expand-cell.js
Vendored
+16 -3
View File
@@ -12,7 +12,8 @@ export default class ExpandCell extends Component {
expanded: PropTypes.bool.isRequired,
onRowExpand: PropTypes.func.isRequired,
expandColumnRenderer: PropTypes.func,
rowIndex: PropTypes.number
rowIndex: PropTypes.number,
tabIndex: PropTypes.number
}
constructor() {
@@ -20,6 +21,16 @@ export default class ExpandCell extends Component {
this.handleClick = this.handleClick.bind(this);
}
shouldComponentUpdate(nextProps) {
const shouldUpdate =
this.props.rowIndex !== nextProps.rowIndex ||
this.props.expanded !== nextProps.expanded ||
this.props.rowKey !== nextProps.rowKey ||
this.props.tabIndex !== nextProps.tabIndex;
return shouldUpdate;
}
handleClick(e) {
const { rowKey, expanded, onRowExpand, rowIndex } = this.props;
@@ -27,10 +38,12 @@ export default class ExpandCell extends Component {
}
render() {
const { expanded, expandColumnRenderer } = this.props;
const { expanded, expandColumnRenderer, tabIndex } = this.props;
const attrs = {};
if (tabIndex !== -1) attrs.tabIndex = tabIndex;
return (
<td onClick={ this.handleClick }>
<td onClick={ this.handleClick } { ...attrs }>
{
expandColumnRenderer ? expandColumnRenderer({
expanded
packages/react-bootstrap-table2/src/row-selection/selection-cell.js
Vendored
+8 -2
View File
@@ -15,6 +15,7 @@ export default class SelectionCell extends Component {
onRowSelect: PropTypes.func,
disabled: PropTypes.bool,
rowIndex: PropTypes.number,
tabIndex: PropTypes.number,
clickToSelect: PropTypes.bool,
selectionRenderer: PropTypes.func
}
@@ -29,7 +30,8 @@ export default class SelectionCell extends Component {
this.props.rowIndex !== nextProps.rowIndex ||
this.props.selected !== nextProps.selected ||
this.props.disabled !== nextProps.disabled ||
this.props.rowKey !== nextProps.rowKey;
this.props.rowKey !== nextProps.rowKey ||
this.props.tabIndex !== nextProps.tabIndex;
return shouldUpdate;
}
@@ -60,14 +62,18 @@ export default class SelectionCell extends Component {
mode: inputType,
selected,
disabled,
tabIndex,
selectionRenderer
} = this.props;
const attrs = {};
if (tabIndex !== -1) attrs.tabIndex = tabIndex;
return (
<BootstrapContext.Consumer>
{
({ bootstrap4 }) => (
<td onClick={ this.handleClick }>
<td onClick={ this.handleClick } { ...attrs }>
{
selectionRenderer ? selectionRenderer({
mode: inputType,
packages/react-bootstrap-table2/src/row/aggregate-row.js
Vendored
+8
View File
@@ -1,4 +1,5 @@
/* eslint react/prop-types: 0 */
/* eslint no-plusplus: 0 */
import React from 'react';
import PropTypes from 'prop-types';
import _ from '../utils';
@@ -55,6 +56,8 @@ export default class RowAggregator extends shouldUpdater(eventDelegater(React.Co
expanded,
selected,
selectable,
visibleColumnSize,
tabIndexCell,
...rest
} = this.props;
const key = _.get(row, keyField);
@@ -66,6 +69,8 @@ export default class RowAggregator extends shouldUpdater(eventDelegater(React.Co
newAttrs.onClick = this.createClickEventHandler(newAttrs.onClick);
}
let tabIndexStart = (rowIndex * visibleColumnSize) + 1;
return (
<tr
style={ style }
@@ -79,6 +84,7 @@ export default class RowAggregator extends shouldUpdater(eventDelegater(React.Co
rowKey={ key }
rowIndex={ rowIndex }
expanded={ expanded }
tabIndex={ tabIndexCell ? tabIndexStart++ : -1 }
/>
) : null
}
@@ -91,6 +97,7 @@ export default class RowAggregator extends shouldUpdater(eventDelegater(React.Co
rowIndex={ rowIndex }
selected={ selected }
disabled={ !selectable }
tabIndex={ tabIndexCell ? tabIndexStart++ : -1 }
/>
)
: null
@@ -101,6 +108,7 @@ export default class RowAggregator extends shouldUpdater(eventDelegater(React.Co
keyField={ keyField }
rowIndex={ rowIndex }
shouldUpdate={ this.shouldUpdateRowContent }
tabIndexStart={ tabIndexCell ? tabIndexStart : -1 }
{ ...rest }
/>
</tr>
packages/react-bootstrap-table2/src/row/row-pure-content.js
Vendored
+9 -1
View File
@@ -1,5 +1,6 @@
/* eslint react/prop-types: 0 */
/* eslint react/no-array-index-key: 0 */
/* eslint no-plusplus: 0 */
import React from 'react';
import _ from '../utils';
@@ -25,9 +26,12 @@ export default class RowPureContent extends React.Component {
onStart,
clickToEdit,
dbclickToEdit,
EditingCellComponent
EditingCellComponent,
tabIndexStart
} = this.props;
let tabIndex = tabIndexStart;
return columns.map((column, index) => {
if (!column.hidden) {
const { dataField } = column;
@@ -87,6 +91,10 @@ export default class RowPureContent extends React.Component {
editableCell = column.editable(content, row, rowIndex, index);
}
if (tabIndexStart !== -1) {
cellAttrs.tabIndex = tabIndex++;
}
return (
<Cell
key={ `${content}-${index}` }
packages/react-bootstrap-table2/src/row/simple-row.js
Vendored
+12 -5
View File
@@ -7,7 +7,7 @@ import RowPureContent from './row-pure-content';
import eventDelegater from './event-delegater';
import shouldUpdater from './should-updater';
class Row extends shouldUpdater(eventDelegater(Component)) {
class SimpleRow extends shouldUpdater(eventDelegater(Component)) {
constructor(props) {
super(props);
this.shouldUpdateRowContent = false;
@@ -26,19 +26,26 @@ class Row extends shouldUpdater(eventDelegater(Component)) {
className,
style,
attrs,
visibleColumnSize,
tabIndexCell,
...rest
} = this.props;
const trAttrs = this.delegate(attrs);
const tabIndexStart = (this.props.rowIndex * visibleColumnSize) + 1;
return (
<tr style={ style } className={ className } { ...trAttrs }>
<RowPureContent shouldUpdate={ this.shouldUpdateRowContent } { ...rest } />
<RowPureContent
shouldUpdate={ this.shouldUpdateRowContent }
tabIndexStart={ tabIndexCell ? tabIndexStart : -1 }
{ ...rest }
/>
</tr>
);
}
}
Row.propTypes = {
SimpleRow.propTypes = {
row: PropTypes.object.isRequired,
rowIndex: PropTypes.number.isRequired,
columns: PropTypes.array.isRequired,
@@ -47,11 +54,11 @@ Row.propTypes = {
attrs: PropTypes.object
};
Row.defaultProps = {
SimpleRow.defaultProps = {
editable: true,
style: {},
className: null,
attrs: {}
};
export default Row;
export default SimpleRow;