vhad/react-bootstrap-table2
1
0
Fork 0
mirror of https://github.com/gosticks/react-bootstrap-table2.git synced 2025-10-16 11:55:39 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactoring row level components

Browse Source
This commit is contained in:
AllenFang 2018-09-17 23:12:16 +08:00
parent 52fc84899b
commit ee6cec5a2d
10 changed files with 364 additions and 358 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
packages/react-bootstrap-table2/src/row-aggregator.js vendored
View File

@ -1,143 +0,0 @@
/* eslint react/prop-types: 0 */
/* eslint react/no-array-index-key: 0 */
import React from 'react';
import PropTypes from 'prop-types';
import _ from './utils';
import Row from './row';
import ExpandCell from './row-expand/expand-cell';
import SelectionCell from './row-selection/selection-cell';
import shouldRowUpdater from './row-should-updater';
export default class RowAggregator extends shouldRowUpdater(React.Component) {
static propTypes = {
attrs: PropTypes.object
}
static defaultProps = {
attrs: {}
}
constructor(props) {
super(props);
this.clickNum = 0;
this.createClickEventHandler = this.createClickEventHandler.bind(this);
}
shouldComponentUpdate(nextProps) {
const shouldUpdate =
this.props.selected !== nextProps.selected ||
this.props.expanded !== nextProps.expanded ||
this.props.selectable !== nextProps.selectable ||
this.shouldUpdateByWhenEditing(nextProps) ||
this.shouldUpdatedByNormalProps(nextProps);
return shouldUpdate;
}
createClickEventHandler(cb) {
return (e) => {
const {
row,
selected,
keyField,
selectable,
expandable,
rowIndex,
expanded,
expandRow,
selectRow,
DELAY_FOR_DBCLICK
} = this.props;
const clickFn = () => {
if (cb) {
cb(e, row, rowIndex);
}
const key = _.get(row, keyField);
if (expandRow && expandable) {
expandRow.onRowExpand(key, !expanded, rowIndex, e);
}
if (selectRow.clickToSelect && selectable) {
selectRow.onRowSelect(key, !selected, rowIndex, e);
}
};
if (DELAY_FOR_DBCLICK) {
this.clickNum += 1;
_.debounce(() => {
if (this.clickNum === 1) {
clickFn();
}
this.clickNum = 0;
}, DELAY_FOR_DBCLICK)();
} else {
clickFn();
}
};
}
render() {
const {
row,
columns,
keyField,
rowIndex,
style,
className,
attrs,
selectRow,
expandRow,
expanded,
selected,
selectable,
...rest
} = this.props;
const key = _.get(row, keyField);
const { hideSelectColumn, clickToSelect } = selectRow;
const { showExpandColumn } = expandRow;
const newAttrs = { ...attrs };
if (clickToSelect || !!expandRow.renderer) {
newAttrs.onClick = this.createClickEventHandler(attrs.onClick);
}
return (
<Row
shouldUpdate
key={ key }
row={ row }
keyField={ keyField }
rowIndex={ rowIndex }
columns={ columns }
style={ style }
className={ className }
attrs={ newAttrs }
{ ...rest }
>
{
showExpandColumn ? (
<ExpandCell
{ ...expandRow }
rowKey={ key }
rowIndex={ rowIndex }
expanded={ expanded }
/>
) : null
}
{
!hideSelectColumn
? (
<SelectionCell
{ ...selectRow }
rowKey={ key }
rowIndex={ rowIndex }
selected={ selected }
disabled={ !selectable }
/>
)
: null
}
</Row>
);
}
}

57
packages/react-bootstrap-table2/src/row-selection/row-binder.js vendored
View File

@ -1,57 +0,0 @@
/* eslint react/prop-types: 0 */
import React from 'react';
import cs from 'classnames';
import _ from '../utils';
import SelectionContext from '../contexts/selection-context';
export default (Component) => {
const renderWithSelection = (props, selectRow) => {
const key = props.value;
const selected = selectRow.selected.includes(key);
const selectable = !selectRow.nonSelectable || !selectRow.nonSelectable.includes(key);
let {
style,
className
} = props;
if (selected) {
const selectedStyle = _.isFunction(selectRow.style)
? selectRow.style(props.row, props.rowIndex)
: selectRow.style;
const selectedClasses = _.isFunction(selectRow.classes)
? selectRow.classes(props.row, props.rowIndex)
: selectRow.classes;
style = {
...style,
...selectedStyle
};
className = cs(className, selectedClasses) || undefined;
if (selectRow.bgColor) {
style = style || {};
style.backgroundColor = _.isFunction(selectRow.bgColor)
? selectRow.bgColor(props.row, props.rowIndex)
: selectRow.bgColor;
}
}
return (
<Component
{ ...props }
style={ style }
className={ className }
selectRow={ { ...selectRow } }
selected={ selected }
selectable={ selectable }
/>
);
};
return props => (
<SelectionContext.Consumer>
{ selectRow => renderWithSelection(props, selectRow) }
</SelectionContext.Consumer>
);
};

8
packages/react-bootstrap-table2/src/row-selection/selection-header-cell-binder.js vendored
View File

@ -1,8 +0,0 @@
import React from 'react';
import SelectionContext from '../contexts/selection-context';
export default Component => () => (
<SelectionContext.Consumer>
{ selectRow => <Component { ...selectRow } /> }
</SelectionContext.Consumer>
);

146
packages/react-bootstrap-table2/src/row.js vendored
View File

@ -1,146 +0,0 @@
/* eslint react/prop-types: 0 */
/* eslint react/no-array-index-key: 0 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import _ from './utils';
import Cell from './cell';
import eventDelegater from './row-event-delegater';
import shouldRowUpdater from './row-should-updater';
class Row extends shouldRowUpdater(eventDelegater(Component)) {
shouldComponentUpdate(nextProps) {
console.log('lol');
const shouldUpdate =
nextProps.shouldUpdate ||
this.shouldUpdateByWhenEditing(nextProps) ||
this.shouldUpdatedByNormalProps(nextProps);
return shouldUpdate;
}
render() {
const {
row,
keyField,
columns,
rowIndex,
className,
style,
attrs,
editable,
editingRowIdx,
editingColIdx,
onStart,
clickToEdit,
dbclickToEdit
} = this.props;
const trAttrs = this.delegate(attrs);
return (
<tr style={ style } className={ className } { ...trAttrs }>
{ this.props.children }
{
columns.map((column, index) => {
if (!column.hidden) {
const { dataField } = column;
const content = _.get(row, dataField);
if (rowIndex === editingRowIdx && index === editingColIdx) {
const EditingCell = this.props.EditingCellComponent;
return (
<EditingCell
key={ `${content}-${index}-editing` }
row={ row }
rowIndex={ rowIndex }
column={ column }
columnIndex={ index }
/>
);
}
// render cell
let cellTitle;
let cellStyle = {};
const cellAttrs = {
..._.isFunction(column.attrs)
? column.attrs(content, row, rowIndex, index)
: column.attrs,
...column.events
};
const cellClasses = _.isFunction(column.classes)
? column.classes(content, row, rowIndex, index)
: column.classes;
if (column.style) {
cellStyle = _.isFunction(column.style)
? column.style(content, row, rowIndex, index)
: column.style;
cellStyle = Object.assign({}, cellStyle) || {};
}
if (column.title) {
cellTitle = _.isFunction(column.title)
? column.title(content, row, rowIndex, index)
: content;
cellAttrs.title = cellTitle;
}
if (column.align) {
cellStyle.textAlign =
_.isFunction(column.align)
? column.align(content, row, rowIndex, index)
: column.align;
}
if (cellClasses) cellAttrs.className = cellClasses;
if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle;
let editableCell = _.isDefined(column.editable) ? column.editable : true;
if (column.dataField === keyField || !editable) editableCell = false;
if (_.isFunction(column.editable)) {
editableCell = column.editable(content, row, rowIndex, index);
}
return (
<Cell
key={ `${content}-${index}` }
row={ row }
editable={ editableCell }
rowIndex={ rowIndex }
columnIndex={ index }
column={ column }
onStart={ onStart }
clickToEdit={ clickToEdit }
dbclickToEdit={ dbclickToEdit }
{ ...cellAttrs }
/>
);
}
return false;
})
}
</tr>
);
}
}
Row.propTypes = {
row: PropTypes.object.isRequired,
rowIndex: PropTypes.number.isRequired,
columns: PropTypes.array.isRequired,
style: PropTypes.object,
className: PropTypes.string,
attrs: PropTypes.object,
shouldUpdate: PropTypes.bool
};
Row.defaultProps = {
editable: true,
style: {},
className: null,
attrs: {},
shouldUpdate: false
};
export default Row;

110
packages/react-bootstrap-table2/src/row/aggregate-row.js vendored Normal file
View File

@ -0,0 +1,110 @@
/* eslint react/prop-types: 0 */
import React from 'react';
import PropTypes from 'prop-types';
import _ from '../utils';
import ExpandCell from '../row-expand/expand-cell';
import SelectionCell from '../row-selection/selection-cell';
import shouldUpdater from './should-updater';
import eventDelegater from './event-delegater';
import RowPureContent from './row-pure-content';
export default class RowAggregator extends shouldUpdater(eventDelegater(React.Component)) {
static propTypes = {
attrs: PropTypes.object,
style: PropTypes.object
}
static defaultProps = {
attrs: {},
style: {}
}
constructor(props) {
super(props);
this.clickNum = 0;
this.shouldUpdateRowContent = false;
this.createClickEventHandler = this.createClickEventHandler.bind(this);
}
shouldComponentUpdate(nextProps) {
if (
this.props.selected !== nextProps.selected ||
this.props.expanded !== nextProps.expanded ||
this.props.selectable !== nextProps.selectable ||
this.shouldUpdateByWhenEditing(nextProps) ||
this.shouldUpdatedBySelfProps(nextProps)
) {
this.shouldUpdateRowContent = this.shouldUpdatedByNormalProps(nextProps);
return true;
}
this.shouldUpdateRowContent = this.shouldUpdatedByNormalProps(nextProps);
return this.shouldUpdateRowContent;
}
render() {
const {
row,
columns,
keyField,
rowIndex,
style,
className,
attrs,
selectRow,
expandRow,
expanded,
selected,
selectable,
...rest
} = this.props;
const key = _.get(row, keyField);
const { hideSelectColumn, clickToSelect } = selectRow;
const { showExpandColumn } = expandRow;
const newAttrs = this.delegate({ ...attrs });
if (clickToSelect || !!expandRow.renderer) {
newAttrs.onClick = this.createClickEventHandler(newAttrs.onClick);
}
return (
<tr
style={ style }
className={ className }
{ ...newAttrs }
>
{
showExpandColumn ? (
<ExpandCell
{ ...expandRow }
rowKey={ key }
rowIndex={ rowIndex }
expanded={ expanded }
/>
) : null
}
{
!hideSelectColumn
? (
<SelectionCell
{ ...selectRow }
rowKey={ key }
rowIndex={ rowIndex }
selected={ selected }
disabled={ !selectable }
/>
)
: null
}
<RowPureContent
row={ row }
columns={ columns }
keyField={ keyField }
rowIndex={ rowIndex }
shouldUpdate={ this.shouldUpdateRowContent }
{ ...rest }
/>
</tr>
);
}
}

78
packages/react-bootstrap-table2/src/row/event-delegater.js vendored Normal file
View File

@ -0,0 +1,78 @@
import _ from '../utils';
const events = [
'onClick',
'onDoubleClick',
'onMouseEnter',
'onMouseLeave',
'onContextMenu'
];
export default ExtendBase =>
class RowEventDelegater extends ExtendBase {
constructor(props) {
super(props);
this.clickNum = 0;
this.createDefaultEventHandler = this.createDefaultEventHandler.bind(this);
this.createClickEventHandler = this.createClickEventHandler.bind(this);
}
createClickEventHandler(cb) {
return (e) => {
const {
row,
selected,
keyField,
selectable,
expandable,
rowIndex,
expanded,
expandRow,
selectRow,
DELAY_FOR_DBCLICK
} = this.props;
const clickFn = () => {
if (cb) {
cb(e, row, rowIndex);
}
const key = _.get(row, keyField);
if (expandRow && expandable) {
expandRow.onRowExpand(key, !expanded, rowIndex, e);
}
if (selectRow.clickToSelect && selectable) {
selectRow.onRowSelect(key, !selected, rowIndex, e);
}
};
if (DELAY_FOR_DBCLICK) {
this.clickNum += 1;
_.debounce(() => {
if (this.clickNum === 1) {
clickFn();
}
this.clickNum = 0;
}, DELAY_FOR_DBCLICK)();
} else {
clickFn();
}
};
}
createDefaultEventHandler(cb) {
return (e) => {
const { row, rowIndex } = this.props;
cb(e, row, rowIndex);
};
}
delegate(attrs = {}) {
const newAttrs = { ...attrs };
Object.keys(attrs).forEach((attr) => {
if (events.includes(attr)) {
newAttrs[attr] = this.createDefaultEventHandler(attrs[attr]);
}
});
return newAttrs;
}
};

110
packages/react-bootstrap-table2/src/row/row-pure-content.js vendored Normal file
View File

@ -0,0 +1,110 @@
/* eslint react/prop-types: 0 */
/* eslint react/no-array-index-key: 0 */
import React from 'react';
import _ from '../utils';
import Cell from '../cell';
export default class RowPureContent extends React.Component {
shouldComponentUpdate(nextProps) {
if (typeof this.props.shouldUpdate !== 'undefined') {
if (nextProps.shouldUpdate === this.props.shouldUpdate) {
return false;
}
}
return true;
}
render() {
const {
row,
keyField,
columns,
rowIndex,
editable,
editingRowIdx,
editingColIdx,
onStart,
clickToEdit,
dbclickToEdit,
EditingCellComponent
} = this.props;
return columns.map((column, index) => {
if (!column.hidden) {
const { dataField } = column;
const content = _.get(row, dataField);
if (rowIndex === editingRowIdx && index === editingColIdx) {
return (
<EditingCellComponent
key={ `${content}-${index}-editing` }
row={ row }
rowIndex={ rowIndex }
column={ column }
columnIndex={ index }
/>
);
}
// render cell
let cellTitle;
let cellStyle = {};
const cellAttrs = {
..._.isFunction(column.attrs)
? column.attrs(content, row, rowIndex, index)
: column.attrs,
...column.events
};
const cellClasses = _.isFunction(column.classes)
? column.classes(content, row, rowIndex, index)
: column.classes;
if (column.style) {
cellStyle = _.isFunction(column.style)
? column.style(content, row, rowIndex, index)
: column.style;
cellStyle = Object.assign({}, cellStyle) || {};
}
if (column.title) {
cellTitle = _.isFunction(column.title)
? column.title(content, row, rowIndex, index)
: content;
cellAttrs.title = cellTitle;
}
if (column.align) {
cellStyle.textAlign =
_.isFunction(column.align)
? column.align(content, row, rowIndex, index)
: column.align;
}
if (cellClasses) cellAttrs.className = cellClasses;
if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle;
let editableCell = _.isDefined(column.editable) ? column.editable : true;
if (column.dataField === keyField || !editable) editableCell = false;
if (_.isFunction(column.editable)) {
editableCell = column.editable(content, row, rowIndex, index);
}
return (
<Cell
key={ `${content}-${index}` }
row={ row }
editable={ editableCell }
rowIndex={ rowIndex }
columnIndex={ index }
column={ column }
onStart={ onStart }
clickToEdit={ clickToEdit }
dbclickToEdit={ dbclickToEdit }
{ ...cellAttrs }
/>
);
}
return false;
});
}
}

0
packages/react-bootstrap-table2/src/row-section.js → packages/react-bootstrap-table2/src/row/row-section.js vendored
View File

14
packages/react-bootstrap-table2/src/row-should-updater.js → packages/react-bootstrap-table2/src/row/should-updater.js vendored
View File

@ -1,5 +1,5 @@
/* eslint react/prop-types: 0 */
import _ from './utils';
import _ from '../utils';
export default ExtendBase =>
class RowShouldUpdater extends ExtendBase {
@ -11,14 +11,20 @@ export default ExtendBase =>
);
}
shouldUpdatedBySelfProps(nextProps) {
return (
this.props.className !== nextProps.className ||
!_.isEqual(this.props.style, nextProps.style) ||
!_.isEqual(this.props.attrs, nextProps.attrs)
);
}
shouldUpdatedByNormalProps(nextProps) {
const shouldUpdate =
this.props.rowIndex !== nextProps.rowIndex ||
this.props.className !== nextProps.className ||
this.props.editable !== nextProps.editable ||
this.props.columns.length !== nextProps.columns.length ||
!_.isEqual(this.props.row, nextProps.row) ||
!_.isEqual(this.props.style, nextProps.style);
!_.isEqual(this.props.row, nextProps.row);
return shouldUpdate;
}

56
packages/react-bootstrap-table2/src/row/simple-row.js vendored Normal file
View File

@ -0,0 +1,56 @@
/* eslint react/prop-types: 0 */
/* eslint react/no-array-index-key: 0 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import RowPureContent from './row-pure-content';
import eventDelegater from './event-delegater';
import shouldUpdater from './should-updater';
class Row extends shouldUpdater(eventDelegater(Component)) {
constructor(props) {
super(props);
this.shouldUpdateRowContent = false;
}
shouldComponentUpdate(nextProps) {
this.shouldUpdateRowContent = this.shouldUpdatedByNormalProps(nextProps);
if (this.shouldUpdateRowContent) return true;
return this.shouldUpdatedBySelfProps(nextProps);
}
render() {
const {
className,
style,
attrs,
...rest
} = this.props;
const trAttrs = this.delegate(attrs);
return (
<tr style={ style } className={ className } { ...trAttrs }>
<RowPureContent shouldUpdate={ this.shouldUpdateRowContent } { ...rest } />
</tr>
);
}
}
Row.propTypes = {
row: PropTypes.object.isRequired,
rowIndex: PropTypes.number.isRequired,
columns: PropTypes.array.isRequired,
style: PropTypes.object,
className: PropTypes.string,
attrs: PropTypes.object
};
Row.defaultProps = {
editable: true,
style: {},
className: null,
attrs: {}
};
export default Row;