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

Merge pull request #263 from react-bootstrap-table/develop

Browse Source 
2018/03/19 release
This commit is contained in:
Allen 2018-03-18 23:03:55 +08:00 committed by GitHub
commit 3956fbca11
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 416 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -1,4 +1,5 @@
# react-bootstrap-table2
[![Build Status](https://travis-ci.org/react-bootstrap-table/react-bootstrap-table2.svg?branch=master)](https://travis-ci.org/react-bootstrap-table/react-bootstrap-table2)
Rebuilt [react-bootstrap-table](https://github.com/AllenFang/react-bootstrap-table)
> `react-bootstrap-table2`'s npm module name is [**`react-bootstrap-table-next`**](https://www.npmjs.com/package/react-bootstrap-table-next) due to some guys already used it

16
docs/README.md
View File

@ -15,6 +15,8 @@
* [bordered](#bordered)
* [hover](#hover)
* [condensed](#condensed)
* [id](#id)
* [classes](#classes)
* [cellEdit](#cellEdit)
* [selectRow](#selectRow)
* [rowStyle](#rowStyle)
@ -59,14 +61,14 @@ A special case for remote pagination:
remote={ { pagination: true, filter: false, sort: false } }
```
There is a apecial case for remote pagination, even you only specified the paignation need to handle as remote, `react-bootstrap-table2` will handle all the table changes(filter, sort etc) as remote mode, because `react-bootstrap-table2` only know the data of current page, but filtering, searching or sort need to work on overall datas.
There is a special case for remote pagination, even you only specified the pagination need to handle as remote, `react-bootstrap-table2` will handle all the table changes(filter, sort etc) as remote mode, because `react-bootstrap-table2` only know the data of current page, but filtering, searching or sort need to work on overall data.
### <a name='loading'>loading - [Bool]</a>
Telling if table is loading or not, for example: waiting data loading, filtering etc. It's **only** valid when [`remote`](#remote) is enabled.
When `loading` is `true`, `react-bootstrap-table2` will attend to render a overlay on table via [`overlay`](#overlay) prop, if [`overlay`](#overlay) prop is not given, `react-bootstrap-table2` will ignore the overlay rendering.
### <a name='overlay'>overlay - [Function]</a>
`overlay` accept a factory funtion which should returning a higher order component. By default, `react-bootstrap-table2-overlay` can be a good option for you:
`overlay` accept a factory function which should returning a higher order component. By default, `react-bootstrap-table2-overlay` can be a good option for you:
```sh
$ npm install react-bootstrap-table2-overlay
@ -100,6 +102,10 @@ Same as bootstrap `.table-hover` class for adding mouse hover effect (grey backg
### <a name='condensed'>condensed - [Bool]</a>
Same as bootstrap `.table-condensed` class for making a table more compact by cutting cell padding in half.
### <a name='id'>id - [String]</a>
Customize id on `table` element.
### <a name='classes'>classes - [String]</a>
Customize class on `table` element.
### <a name='cellEdit'>cellEdit - [Object]</a>
Makes table cells editable, please see [cellEdit definition](./cell-edit.md) for more detail.
@ -163,7 +169,7 @@ const defaultSorted = [{
```
### <a name='pagination'>pagination - [Object]</a>
`pagination` allow user to render a pagination panel on the bottom of table. But pagination funcitonality is separated from core of `react-bootstrap-table2` so that you are suppose to install `react-bootstrap-table2-paginator` additionaly.
`pagination` allow user to render a pagination panel on the bottom of table. But pagination functionality is separated from core of `react-bootstrap-table2` so that you are suppose to install `react-bootstrap-table2-paginator` additionally.
```sh
$ npm install react-bootstrap-table2-paginator --save
@ -205,7 +211,7 @@ paginator({
prePageTitle: 'Go to previous', // the title of previous page button
firstPageTitle: 'Go to first', // the title of first page button
lastPageTitle: 'Go to last', // the title of last page button
hideSizePerPage: true, // hide the size per page dorpdown
hideSizePerPage: true, // hide the size per page dropdown
hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false
onPageChange: (page, sizePerPage) => {}, // callback function when page was changing
onSizePerPageChange: (sizePerPage, page) => {}, // callback function when page size was changing
@ -213,7 +219,7 @@ paginator({
```
### <a name='filter'>filter - [Object]</a>
`filter` allow user to filter data by column. However, filter funcitonality is separated from core of `react-bootstrap-table2` so that you are suppose to install `react-bootstrap-table2-filter` firstly.
`filter` allow user to filter data by column. However, filter functionality is separated from core of `react-bootstrap-table2` so that you are suppose to install `react-bootstrap-table2-filter` firstly.
```sh
$ npm install react-bootstrap-table2-filter --save

22
docs/columns.md
View File

@ -137,7 +137,7 @@ Enable the column sort via a `true` value given.
```
## <a name='classes'>column.classes - [String | Function]</a>
It's availabe to have custom class on table column:
It's available to have custom class on table column:
```js
{
@ -165,7 +165,7 @@ In addition, `classes` also accept a callback function which have more power to
A new `String` will be the result as element class.
## <a name='headerClasses'>column.headerClasses - [String | Function]</a>
It's similar to [`column.classes`](#classes), `headerClasses` is availabe to have customized class on table header column:
It's similar to [`column.classes`](#classes), `headerClasses` is available to have customized class on table header column:
```js
{
@ -190,7 +190,7 @@ Furthermore, it also accept a callback function which takes 2 arguments and a `S
A new `String` will be the result of element headerClasses.
## <a name='style'>column.style - [Object | Function]</a>
It's availabe to have custom style on table column:
It's available to have custom style on table column:
```js
{
@ -220,7 +220,7 @@ A new `Object` will be the result of element style.
## <a name='headerStyle'>column.headerStyle - [Object | Function]</a>
It's availabe to have customized inline-style on table header column:
It's available to have customized inline-style on table header column:
```js
{
@ -278,7 +278,7 @@ A new `String` will be the result of element title.
}
```
It's also availabe to custom via a callback function:
It's also available to custom via a callback function:
```js
{
headerTitle: function callback(column, colIndex) { ... }
@ -401,7 +401,7 @@ A new `Object` will be the result of element HTML attributes.
> Caution:
> If `column.classes`, `column.style`, `column.title`, `column.hidden` or `column.align` was given at the same time, property `attrs` has lower priorty and it will be overwrited.
> If `column.classes`, `column.style`, `column.title`, `column.hidden` or `column.align` was given at the same time, property `attrs` has lower priority and it will be overwritten.
```js
{
@ -412,7 +412,7 @@ A new `Object` will be the result of element HTML attributes.
```
## <a name='headerAttrs'>column.headerAttrs - [Object | Function]</a>
`headerAttrs` is similiar to [`column.attrs`](#attrs) but it works for header column.
`headerAttrs` is similar to [`column.attrs`](#attrs) but it works for header column.
```js
{
// omit...
@ -444,7 +444,7 @@ A new `Object` will be the result of element headerAttrs.
> Caution:
> Same as [column.attrs](#attrs), it has lower priority and will be
> overwrited when other props related to HTML attributes were given.
> overwritten when other props related to HTML attributes were given.
### <a name='headerSortingClasses'>headerSortingClasses - [String | Function]</a>
@ -467,7 +467,7 @@ const headerSortingClasses = (column, sortOrder, isLastSorting, colIndex) => { .
### <a name='headerSortingStyle'>headerSortingStyle - [Object | Function]</a>
It's similiar to [headerSortingClasses](#headerSortingClasses). It allows to customize the style of header cell when this column is sorting. A style `Object` and `callback` are acceptable. `callback` takes **4** arguments and an `Object` is expected to return:
It's similar to [headerSortingClasses](#headerSortingClasses). It allows to customize the style of header cell when this column is sorting. A style `Object` and `callback` are acceptable. `callback` takes **4** arguments and an `Object` is expected to return:
```js
const sortingHeaderStyle = {
@ -502,7 +502,7 @@ If a callback function given, you can control the editable level as cell level:
}
```
The return value can be a bool or an object. If your valiation is pass, return `true` explicitly. If your valiation is invalid, return following object instead:
The return value can be a bool or an object. If your validation is pass, return `true` explicitly. If your validation is invalid, return following object instead:
```js
{
valid: false,
@ -574,7 +574,7 @@ import { textFilter } from 'react-bootstrap-table2-filter';
For some reason of simple customization, `react-bootstrap-table2` allow you to pass some props to filter factory function. Please check [here](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/master/packages/react-bootstrap-table2-filter/README.md) for more detail tutorial.
## <a name='filterValue'>column.filterValue - [Function]</a>
Sometimes, if the cell/column value that you don't want to filter on them, you can define `filterValue` to return a actual value you wanna be filterd:
Sometimes, if the cell/column value that you don't want to filter on them, you can define `filterValue` to return a actual value you wanna be filtered:
**Parameters**
* `cell`: The value of current cell.

16
docs/migration.md
View File

@ -1,8 +1,8 @@
# Migration Guide
* Please see the [CHANGELOG](https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2018/01/24/new-version-0.1.0.html) for `react-bootstrap-table2` first drop.
* Please see the [Roadmap](https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2018/01/24/release-plan.html) for `react-bootstrap-table2` in 2018/Q1.
* Feel free to see the [offical docs](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/about.html), we list all the basic usage here!!
* Please see the [Road Map](https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2018/01/24/release-plan.html) for `react-bootstrap-table2` in 2018/Q1.
* Feel free to see the [official docs](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/about.html), we list all the basic usage here!!
## Preface
@ -23,11 +23,11 @@ Currently, **I still can't implement all the mainly features in legacy `react-bo
* [`react-bootstrap-table2-overlay`](https://www.npmjs.com/package/react-bootstrap-table2-overlay)
* Overlay/Loading Addons
This can help your application with less bundled size and also help `react-bootstrap-table2` have clean design to avoid handling to much logic in kernal module(SRP). Hence, which means you probably need to install above addons when you need specific features.
This can help your application with less bundled size and also help `react-bootstrap-table2` have clean design to avoid handling to much logic in kernel module(SRP). Hence, which means you probably need to install above addons when you need specific features.
## Core Table Migration
There is a big chagne is that there's no `TableHeaderColumn` in the `react-bootstrap-table2`, instead you are supposed to be define the `columns` prop on `BootstrapTable`:
There is a big change is that there's no `TableHeaderColumn` in the `react-bootstrap-table2`, instead you are supposed to be define the `columns` prop on `BootstrapTable`:
```js
import BootstrapTable from 'react-bootstrap-table-next';
@ -48,8 +48,8 @@ const columns = [{
The `text` property is just same as the children for the `TableHeaderColumn`, if you want to custom the header, there's a new property is: [`headerFormatter`](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columnheaderformatter-function).
* [`BootstrapTable` Definitation](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/table-props.html)
* [Column Definitation](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html)
* [`BootstrapTable` Definition](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/table-props.html)
* [Column Definition](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html)
## Table Sort
@ -65,7 +65,7 @@ Please see [Work with table sort](https://react-bootstrap-table.github.io/react-
- [ ] Sort management
- [ ] Multi sort
Due to no `TableHeaderColumn` so that no `dataSort` here, please add [`sort`](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columnsort-bool) property on column definitation.
Due to no `TableHeaderColumn` so that no `dataSort` here, please add [`sort`](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columnsort-bool) property on column definition.
## Row Selection
@ -93,7 +93,7 @@ Please see [available filter configuration](https://react-bootstrap-table.github
Remember to install [`react-bootstrap-table2-filter`](https://www.npmjs.com/package/react-bootstrap-table2-filter) firstly.
Due to no `TableHeaderColumn` so that no `filter` here, please add [`filter`](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columnfilter-object) property on column definitation and [`filter`](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/table-props.html#filter-object) prop on `BootstrapTable`.
Due to no `TableHeaderColumn` so that no `filter` here, please add [`filter`](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columnfilter-object) property on column definition and [`filter`](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/table-props.html#filter-object) prop on `BootstrapTable`.
## Cell Edit

2
docs/row-selection.md
View File

@ -102,7 +102,7 @@ const selectRow = {
```
### <a name='bgColor'>selectRow.bgColor - [String | Function]</a>
The backgroud color when row is selected
The background color when row is selected
```js
const selectRow = {

48
packages/react-bootstrap-table2-example/examples/basic/customized-id-classes.js vendored Normal file
View File

@ -0,0 +1,48 @@
import React from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
import Code from 'components/common/code-block';
import { productsGenerator } from 'utils/common';
const products = productsGenerator();
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name'
}, {
dataField: 'price',
text: 'Product Price'
}];
const sourceCode = `\
import BootstrapTable from 'react-bootstrap-table-next';
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name'
}, {
dataField: 'price',
text: 'Product Price'
}];
<BootstrapTable id="bar" keyField='id' data={ products } columns={ columns } />
<BootstrapTable classes="foo" keyField='id' data={ products } columns={ columns } />
`;
export default () => (
<div>
<h4> Customized table ID </h4>
<BootstrapTable id="bar" keyField="id" data={ products } columns={ columns } />
<h4> Customized table className </h4>
<BootstrapTable classes="foo" keyField="id" data={ products } columns={ columns } />
<Code>{ sourceCode }</Code>
</div>
);

2
packages/react-bootstrap-table2-example/examples/header-columns/column-event-table.js vendored
View File

@ -28,7 +28,7 @@ import BootstrapTable from 'react-bootstrap-table-next';
const columns = [{
dataField: 'id',
text: 'Product ID',
events: {
headerEvents: {
onClick: () => alert('Click on Product ID header column')
}
}, {

144
packages/react-bootstrap-table2-example/examples/row-selection/selection-management.js vendored Normal file
View File

@ -0,0 +1,144 @@
import React from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
import Code from 'components/common/code-block';
import { productsGenerator } from 'utils/common';
const products = productsGenerator();
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name'
}, {
dataField: 'price',
text: 'Product Price'
}];
const sourceCode = `\
import BootstrapTable from 'react-bootstrap-table-next';
class SelectionManagment extends React.Component {
constructor(props) {
super(props);
this.state = { selected: [0, 1] };
}
handleBtnClick = () => {
if (!this.state.selected.includes(2)) {
this.setState(() => ({
selected: [...this.state.selected, 2]
}));
} else {
this.setState(() => ({
selected: this.state.selected.filter(x => x !== 2)
}));
}
}
handleOnSelect = (row, isSelect) => {
if (isSelect) {
this.setState(() => ({
selected: [...this.state.selected, row.id]
}));
} else {
this.setState(() => ({
selected: this.state.selected.filter(x => x !== row.id)
}));
}
}
handleOnSelectAll = (isSelect, rows) => {
const ids = rows.map(r => r.id);
if (isSelect) {
this.setState(() => ({
selected: ids
}));
} else {
this.setState(() => ({
selected: []
}));
}
}
render() {
const selectRow = {
mode: 'checkbox',
clickToSelect: true,
selected: this.state.selected,
onSelect: this.handleOnSelect,
onSelectAll: this.handleOnSelectAll
};
return (
<div>
<button className="btn btn-success" onClick={ this.handleBtnClick }>Select/UnSelect 3rd row</button>
<BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow } />
<Code>{ sourceCode }</Code>
</div>
);
}
}
`;
export default class SelectionManagment extends React.Component {
constructor(props) {
super(props);
this.state = { selected: [0, 1] };
}
handleBtnClick = () => {
if (!this.state.selected.includes(2)) {
this.setState(() => ({
selected: [...this.state.selected, 2]
}));
} else {
this.setState(() => ({
selected: this.state.selected.filter(x => x !== 2)
}));
}
}
handleOnSelect = (row, isSelect) => {
if (isSelect) {
this.setState(() => ({
selected: [...this.state.selected, row.id]
}));
} else {
this.setState(() => ({
selected: this.state.selected.filter(x => x !== row.id)
}));
}
}
handleOnSelectAll = (isSelect, rows) => {
const ids = rows.map(r => r.id);
if (isSelect) {
this.setState(() => ({
selected: ids
}));
} else {
this.setState(() => ({
selected: []
}));
}
}
render() {
const selectRow = {
mode: 'checkbox',
clickToSelect: true,
selected: this.state.selected,
onSelect: this.handleOnSelect,
onSelectAll: this.handleOnSelectAll
};
return (
<div>
<button className="btn btn-success" onClick={ this.handleBtnClick }>Select/UnSelect 3rd row</button>
<BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow } />
<Code>{ sourceCode }</Code>
</div>
);
}
}

4
packages/react-bootstrap-table2-example/stories/index.js vendored
View File

@ -9,6 +9,7 @@ import BasicTable from 'examples/basic';
import BorderlessTable from 'examples/basic/borderless-table';
import StripHoverCondensedTable from 'examples/basic/striped-hover-condensed-table';
import NoDataTable from 'examples/basic/no-data-table';
import CustomizedIdClassesTable from 'examples/basic/customized-id-classes';
import CaptionTable from 'examples/basic/caption-table';
// work on columns
@ -78,6 +79,7 @@ import SingleSelectionTable from 'examples/row-selection/single-selection';
import MultipleSelectionTable from 'examples/row-selection/multiple-selection';
import ClickToSelectTable from 'examples/row-selection/click-to-select';
import DefaultSelectTable from 'examples/row-selection/default-select';
import SelectionManagement from 'examples/row-selection/selection-management';
import ClickToSelectWithCellEditTable from 'examples/row-selection/click-to-select-with-cell-edit';
import SelectionStyleTable from 'examples/row-selection/selection-style';
import SelectionClassTable from 'examples/row-selection/selection-class';
@ -121,6 +123,7 @@ storiesOf('Basic Table', module)
.add('striped, hover, condensed table', () => <StripHoverCondensedTable />)
.add('borderless table', () => <BorderlessTable />)
.add('Indication For Empty Table', () => <NoDataTable />)
.add('Customized id and class table', () => <CustomizedIdClassesTable />)
.add('Table with caption', () => <CaptionTable />);
storiesOf('Work on Columns', module)
@ -191,6 +194,7 @@ storiesOf('Row Selection', module)
.add('Multiple Selection', () => <MultipleSelectionTable />)
.add('Click to Select', () => <ClickToSelectTable />)
.add('Default Select', () => <DefaultSelectTable />)
.add('Selection Management', () => <SelectionManagement />)
.add('Click to Select and Edit Cell', () => <ClickToSelectWithCellEditTable />)
.add('Selection Style', () => <SelectionStyleTable />)
.add('Selection Class', () => <SelectionClassTable />)

7
packages/react-bootstrap-table2-example/stories/stylesheet/base-table/_index.scss Normal file
View File

@ -0,0 +1,7 @@
table.foo {
background-color: $grey-500;
}
table#bar {
background-color: $light-blue;
}

1
packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss
View File

@ -3,6 +3,7 @@
@import "base/github-corner";
@import "base/code-block";
@import "base-table/index";
@import "welcome/index";
@import "columns/index";
@import "cell-edit/index";

8
packages/react-bootstrap-table2/src/bootstrap-table.js vendored
View File

@ -42,6 +42,8 @@ class BootstrapTable extends PropsBaseResolver(Component) {
store,
columns,
keyField,
id,
classes,
striped,
hover,
bordered,
@ -58,7 +60,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
'table-hover': hover,
'table-bordered': bordered,
'table-condensed': condensed
});
}, classes);
const cellSelectionInfo = this.resolveSelectRowProps({
onRowSelect: this.props.onRowSelect
@ -74,7 +76,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
return (
<div className="react-bootstrap-table">
<table className={ tableClass }>
<table id={ id } className={ tableClass }>
{ tableCaption }
<Header
columns={ columns }
@ -116,6 +118,8 @@ BootstrapTable.propTypes = {
striped: PropTypes.bool,
bordered: PropTypes.bool,
hover: PropTypes.bool,
id: PropTypes.string,
classes: PropTypes.string,
condensed: PropTypes.bool,
caption: PropTypes.oneOfType([
PropTypes.node,

5
packages/react-bootstrap-table2/src/cell.js vendored
View File

@ -39,7 +39,6 @@ class Cell extends Component {
} = this.props;
const {
dataField,
hidden,
formatter,
formatExtraData,
style,
@ -80,10 +79,6 @@ class Cell extends Component {
_.isFunction(align) ? align(content, row, rowIndex, columnIndex) : align;
}
if (hidden) {
cellStyle.display = 'none';
}
if (cellClasses) cellAttrs.className = cellClasses;
if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle;

5
packages/react-bootstrap-table2/src/header-cell.js vendored
View File

@ -24,7 +24,6 @@ const HeaderCell = (props) => {
text,
sort,
filter,
hidden,
headerTitle,
headerAlign,
headerFormatter,
@ -58,10 +57,6 @@ const HeaderCell = (props) => {
cellStyle.textAlign = _.isFunction(headerAlign) ? headerAlign(column, index) : headerAlign;
}
if (hidden) {
cellStyle.display = 'none';
}
if (sort) {
const customClick = cellAttrs.onClick;
cellAttrs.onClick = (e) => {

29
packages/react-bootstrap-table2/src/header.js vendored
View File

@ -27,20 +27,23 @@ const Header = (props) => {
}
{
columns.map((column, i) => {
const currSort = column.dataField === sortField;
const isLastSorting = column.dataField === sortField;
if (!column.hidden) {
const currSort = column.dataField === sortField;
const isLastSorting = column.dataField === sortField;
return (
<HeaderCell
index={ i }
key={ column.dataField }
column={ column }
onSort={ onSort }
sorting={ currSort }
onFilter={ onFilter }
sortOrder={ sortOrder }
isLastSorting={ isLastSorting }
/>);
return (
<HeaderCell
index={ i }
key={ column.dataField }
column={ column }
onSort={ onSort }
sorting={ currSort }
onFilter={ onFilter }
sortOrder={ sortOrder }
isLastSorting={ isLastSorting }
/>);
}
return false;
})
}
</tr>

13
packages/react-bootstrap-table2/src/row-selection/wrapper.js vendored
View File

@ -22,19 +22,18 @@ export default Base =>
super(props);
this.handleRowSelect = this.handleRowSelect.bind(this);
this.handleAllRowsSelect = this.handleAllRowsSelect.bind(this);
props.store.selected = this.props.selectRow.selected || [];
props.store.selected = props.selectRow.selected || [];
this.state = {
selectedRowKeys: props.store.selected
};
}
componentWillReceiveProps(nextProps) {
if (nextProps.selectRow) {
this.store.selected = nextProps.selectRow.selected || [];
this.setState(() => ({
selectedRowKeys: this.store.selected
}));
}
nextProps.store.selected = nextProps.selectRow.selected || [];
this.setState(() => ({
selectedRowKeys: nextProps.store.selected
}));
}
/**

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

@ -58,46 +58,49 @@ class Row extends eventDelegater(Component) {
}
{
columns.map((column, index) => {
const { dataField } = column;
const content = _.get(row, dataField);
let editable = _.isDefined(column.editable) ? column.editable : true;
if (dataField === keyField || !editableRow) editable = false;
if (_.isFunction(column.editable)) {
editable = column.editable(content, row, rowIndex, index);
}
if (rowIndex === editingRowIdx && index === editingColIdx) {
let editCellstyle = column.editCellStyle || {};
let editCellclasses = column.editCellClasses;
if (_.isFunction(column.editCellStyle)) {
editCellstyle = column.editCellStyle(content, row, rowIndex, index);
if (!column.hidden) {
const { dataField } = column;
const content = _.get(row, dataField);
let editable = _.isDefined(column.editable) ? column.editable : true;
if (dataField === keyField || !editableRow) editable = false;
if (_.isFunction(column.editable)) {
editable = column.editable(content, row, rowIndex, index);
}
if (_.isFunction(column.editCellClasses)) {
editCellclasses = column.editCellClasses(content, row, rowIndex, index);
if (rowIndex === editingRowIdx && index === editingColIdx) {
let editCellstyle = column.editCellStyle || {};
let editCellclasses = column.editCellClasses;
if (_.isFunction(column.editCellStyle)) {
editCellstyle = column.editCellStyle(content, row, rowIndex, index);
}
if (_.isFunction(column.editCellClasses)) {
editCellclasses = column.editCellClasses(content, row, rowIndex, index);
}
return (
<EditingCell
key={ `${content}-${index}` }
row={ row }
column={ column }
className={ editCellclasses }
style={ editCellstyle }
{ ...rest }
/>
);
}
return (
<EditingCell
<Cell
key={ `${content}-${index}` }
row={ row }
rowIndex={ rowIndex }
columnIndex={ index }
column={ column }
className={ editCellclasses }
style={ editCellstyle }
{ ...rest }
onStart={ onStart }
editable={ editable }
clickToEdit={ mode === CLICK_TO_CELL_EDIT }
dbclickToEdit={ mode === DBCLICK_TO_CELL_EDIT }
/>
);
}
return (
<Cell
key={ `${content}-${index}` }
row={ row }
rowIndex={ rowIndex }
columnIndex={ index }
column={ column }
onStart={ onStart }
editable={ editable }
clickToEdit={ mode === CLICK_TO_CELL_EDIT }
dbclickToEdit={ mode === DBCLICK_TO_CELL_EDIT }
/>
);
return false;
})
}
</tr>

46
packages/react-bootstrap-table2/test/bootstrap-table.test.js vendored
View File

@ -46,8 +46,50 @@ describe('BootstrapTable', () => {
expect(wrapper.state().data).toEqual(store.data);
});
it('should have table-bordered class as default', () => {
expect(wrapper.find('table.table-bordered').length).toBe(1);
it("should only have classes 'table' and 'table-bordered' as default", () => {
expect(wrapper.find('table').prop('className')).toBe('table table-bordered');
});
it('should not have customized id as default', () => {
expect(wrapper.find('table').prop('id')).toBeUndefined();
});
});
describe('when props.classes was defined', () => {
const classes = 'foo';
beforeEach(() => {
wrapper = shallow(
<BootstrapTable
keyField="id"
columns={ columns }
data={ data }
store={ store }
classes={ classes }
/>);
});
it('should display customized classes correctly', () => {
expect(wrapper.find(`table.${classes}`).length).toBe(1);
});
});
describe('when props.id was defined', () => {
const id = 'foo';
beforeEach(() => {
wrapper = shallow(
<BootstrapTable
keyField="id"
columns={ columns }
data={ data }
store={ store }
id={ id }
/>);
});
it('should display customized id correctly', () => {
expect(wrapper.find(`table#${id}`).length).toBe(1);
});
});

32
packages/react-bootstrap-table2/test/cell.test.js
View File

@ -27,24 +27,6 @@ describe('Cell', () => {
});
});
describe('when column.hidden prop is true', () => {
const column = {
dataField: 'id',
text: 'ID',
hidden: true
};
beforeEach(() => {
wrapper = shallow(<Cell row={ row } columnIndex={ 1 } rowIndex={ 1 } column={ column } />);
});
it('should have \'none\' value for style.display', () => {
const style = wrapper.find('td').prop('style');
expect(style).toBeDefined();
expect(style.display).toEqual('none');
});
});
describe('when column.formatter prop is defined', () => {
const rowIndex = 1;
const column = {
@ -390,20 +372,6 @@ describe('Cell', () => {
});
});
describe('when column.hidden prop is defined', () => {
it('attrs.style.hidden should be overwrited', () => {
column.hidden = true;
column.attrs = { style: { hidden: true } };
wrapper = shallow(
<Cell row={ row } columnIndex={ columnIndex } rowIndex={ 1 } column={ column } />);
const style = wrapper.find('td').prop('style');
expect(style).toBeDefined();
expect(style.display).toEqual('none');
});
});
describe('when column.align prop is defined', () => {
it('attrs.style.textAlign should be overwrited', () => {
column.align = 'center';

18
packages/react-bootstrap-table2/test/header-cell.test.js
View File

@ -33,24 +33,6 @@ describe('HeaderCell', () => {
});
});
describe('when column.hidden props is true', () => {
const column = {
dataField: 'id',
text: 'ID',
hidden: true
};
beforeEach(() => {
wrapper = shallow(<HeaderCell column={ column } index={ index } />);
});
it('should have \'none\' value for style.display', () => {
const style = wrapper.find('th').prop('style');
expect(style).toBeDefined();
expect(style.display).toEqual('none');
});
});
describe('when column.headerTitle prop is defined', () => {
let column;
beforeEach(() => {

23
packages/react-bootstrap-table2/test/header.test.js
View File

@ -101,6 +101,29 @@ describe('Header', () => {
});
});
describe('when column.hidden is true', () => {
beforeEach(() => {
const newColumns = [{
dataField: 'id',
text: 'ID',
hidden: true
}, {
dataField: 'name',
text: 'Name'
}];
wrapper = shallow(
<Header
{ ...mockHeaderResolvedProps }
columns={ newColumns }
/>
);
});
it('should not render column with hidden value true', () => {
expect(wrapper.find(HeaderCell).length).toBe(1);
});
});
describe('when selectRow.mode is checkbox (multiple selection)', () => {
beforeEach(() => {
const selectRow = { mode: 'checkbox' };

29
packages/react-bootstrap-table2/test/row-selection/wrapper.test.js
View File

@ -68,7 +68,26 @@ describe('RowSelectionWrapper', () => {
expect(wrapper.props().onAllRowsSelect).toBeDefined();
});
describe('when selectRow.selected is defiend', () => {
describe('componentWillReceiveProps', () => {
const nextSelected = [0];
const nextProps = {
store: {
selected: nextSelected
},
selectRow: {
mode: 'checkbox',
selected: nextSelected
}
};
it('should update state.selectedRowKeys with next selected rows', () => {
wrapper.instance().componentWillReceiveProps(nextProps);
expect(nextProps.store.selected).toEqual(nextSelected);
expect(wrapper.state('selectedRowKeys')).toEqual(nextSelected);
});
});
describe('when selectRow.selected is defined', () => {
beforeEach(() => {
selectRow.mode = 'checkbox';
selectRow.selected = [1, 3];
@ -96,7 +115,7 @@ describe('RowSelectionWrapper', () => {
const firstSelectedRow = data[0][keyField];
const secondSelectedRow = data[1][keyField];
it('call handleRowSelect function should seting correct state.selectedRowKeys', () => {
it('call handleRowSelect function should setting correct state.selectedRowKeys', () => {
wrapper.instance().handleRowSelect(firstSelectedRow, rowIndex);
expect(wrapper.state('selectedRowKeys')).toEqual([firstSelectedRow]);
@ -122,7 +141,7 @@ describe('RowSelectionWrapper', () => {
);
});
it('call handleRowSelect function should seting correct state.selectedRowKeys', () => {
it('call handleRowSelect function should setting correct state.selectedRowKeys', () => {
wrapper.instance().handleRowSelect(firstSelectedRow, true, rowIndex);
expect(wrapper.state('selectedRowKeys')).toEqual(expect.arrayContaining([firstSelectedRow]));
@ -136,7 +155,7 @@ describe('RowSelectionWrapper', () => {
expect(wrapper.state('selectedRowKeys')).toEqual([]);
});
it('call handleAllRowsSelect function should seting correct state.selectedRowKeys', () => {
it('call handleAllRowsSelect function should setting correct state.selectedRowKeys', () => {
wrapper.instance().handleAllRowsSelect();
expect(wrapper.state('selectedRowKeys')).toEqual(expect.arrayContaining([firstSelectedRow, secondSelectedRow]));
@ -144,7 +163,7 @@ describe('RowSelectionWrapper', () => {
expect(wrapper.state('selectedRowKeys')).toEqual([]);
});
it('call handleAllRowsSelect function with a bool args should seting correct state.selectedRowKeys', () => {
it('call handleAllRowsSelect function with a bool args should setting correct state.selectedRowKeys', () => {
wrapper.instance().handleAllRowsSelect(true);
expect(wrapper.state('selectedRowKeys')).toEqual(expect.arrayContaining([firstSelectedRow, secondSelectedRow]));

26
packages/react-bootstrap-table2/test/row.test.js
View File

@ -502,6 +502,32 @@ describe('Row', () => {
});
});
describe('when cloumn.hidden is true', () => {
beforeEach(() => {
const newColumns = [{
dataField: 'id',
text: 'ID',
hidden: true
}, {
dataField: 'name',
text: 'Name'
}, {
dataField: 'price',
text: 'Price'
}];
wrapper = shallow(
<Row
{ ...mockBodyResolvedProps }
rowIndex={ rowIndex }
columns={ newColumns }
row={ row }
/>);
});
it('should not render column with hidden value true', () => {
expect(wrapper.find(Cell).length).toBe(2);
});
});
describe('selectRow', () => {
let selectRow;