diff --git a/README.md b/README.md index 9c91f4b..7d90d42 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/docs/README.md b/docs/README.md index 096ca24..34b38df 100644 --- a/docs/README.md +++ b/docs/README.md @@ -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. ### loading - [Bool] 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. ### overlay - [Function] -`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 ### condensed - [Bool] Same as bootstrap `.table-condensed` class for making a table more compact by cutting cell padding in half. +### id - [String] +Customize id on `table` element. +### classes - [String] +Customize class on `table` element. ### cellEdit - [Object] Makes table cells editable, please see [cellEdit definition](./cell-edit.md) for more detail. @@ -163,7 +169,7 @@ const defaultSorted = [{ ``` ### pagination - [Object] -`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({ ``` ### filter - [Object] -`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 diff --git a/docs/columns.md b/docs/columns.md index b80c48a..eeab42b 100644 --- a/docs/columns.md +++ b/docs/columns.md @@ -137,7 +137,7 @@ Enable the column sort via a `true` value given. ``` ## column.classes - [String | Function] -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. ## column.headerClasses - [String | Function] -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. ## column.style - [Object | Function] -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. ## column.headerStyle - [Object | Function] -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. ``` ## column.headerAttrs - [Object | Function] -`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. ### headerSortingClasses - [String | Function] @@ -467,7 +467,7 @@ const headerSortingClasses = (column, sortOrder, isLastSorting, colIndex) => { . ### headerSortingStyle - [Object | Function] -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. ## column.filterValue - [Function] -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. diff --git a/docs/migration.md b/docs/migration.md index ae009e4..a9d2104 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -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 diff --git a/docs/row-selection.md b/docs/row-selection.md index c877e6b..b75aa1f 100644 --- a/docs/row-selection.md +++ b/docs/row-selection.md @@ -102,7 +102,7 @@ const selectRow = { ``` ### selectRow.bgColor - [String | Function] -The backgroud color when row is selected +The background color when row is selected ```js const selectRow = { diff --git a/packages/react-bootstrap-table2-example/examples/basic/customized-id-classes.js b/packages/react-bootstrap-table2-example/examples/basic/customized-id-classes.js new file mode 100644 index 0000000..d14c606 --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/basic/customized-id-classes.js @@ -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' +}]; + + + +`; + +export default () => ( +
+

Customized table ID

+ + +

Customized table className

+ + + { sourceCode } +
+); diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-event-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-event-table.js index 7928a37..d4394a7 100644 --- a/packages/react-bootstrap-table2-example/examples/header-columns/column-event-table.js +++ b/packages/react-bootstrap-table2-example/examples/header-columns/column-event-table.js @@ -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') } }, { diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/selection-management.js b/packages/react-bootstrap-table2-example/examples/row-selection/selection-management.js new file mode 100644 index 0000000..e0466a3 --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/row-selection/selection-management.js @@ -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 ( +
+ + + { sourceCode } +
+ ); + } +} +`; + +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 ( +
+ + + { sourceCode } +
+ ); + } +} diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index b7444a7..3f116f5 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -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', () => ) .add('borderless table', () => ) .add('Indication For Empty Table', () => ) + .add('Customized id and class table', () => ) .add('Table with caption', () => ); storiesOf('Work on Columns', module) @@ -191,6 +194,7 @@ storiesOf('Row Selection', module) .add('Multiple Selection', () => ) .add('Click to Select', () => ) .add('Default Select', () => ) + .add('Selection Management', () => ) .add('Click to Select and Edit Cell', () => ) .add('Selection Style', () => ) .add('Selection Class', () => ) diff --git a/packages/react-bootstrap-table2-example/stories/stylesheet/base-table/_index.scss b/packages/react-bootstrap-table2-example/stories/stylesheet/base-table/_index.scss new file mode 100644 index 0000000..34353eb --- /dev/null +++ b/packages/react-bootstrap-table2-example/stories/stylesheet/base-table/_index.scss @@ -0,0 +1,7 @@ +table.foo { + background-color: $grey-500; +} + +table#bar { + background-color: $light-blue; +} diff --git a/packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss b/packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss index cf0a024..c38e02c 100644 --- a/packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss +++ b/packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss @@ -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"; diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js index dae3893..743eb3b 100644 --- a/packages/react-bootstrap-table2/src/bootstrap-table.js +++ b/packages/react-bootstrap-table2/src/bootstrap-table.js @@ -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 (
- +
{ tableCaption }
{ 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) => { diff --git a/packages/react-bootstrap-table2/src/header.js b/packages/react-bootstrap-table2/src/header.js index ddbc7bf..38b8c3a 100644 --- a/packages/react-bootstrap-table2/src/header.js +++ b/packages/react-bootstrap-table2/src/header.js @@ -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 ( - ); + return ( + ); + } + return false; }) } diff --git a/packages/react-bootstrap-table2/src/row-selection/wrapper.js b/packages/react-bootstrap-table2/src/row-selection/wrapper.js index b8c79bd..c2880bf 100644 --- a/packages/react-bootstrap-table2/src/row-selection/wrapper.js +++ b/packages/react-bootstrap-table2/src/row-selection/wrapper.js @@ -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 + })); } /** diff --git a/packages/react-bootstrap-table2/src/row.js b/packages/react-bootstrap-table2/src/row.js index 7b1df37..3efb0c5 100644 --- a/packages/react-bootstrap-table2/src/row.js +++ b/packages/react-bootstrap-table2/src/row.js @@ -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 ( + + ); } return ( - ); } - return ( - - ); + return false; }) } diff --git a/packages/react-bootstrap-table2/test/bootstrap-table.test.js b/packages/react-bootstrap-table2/test/bootstrap-table.test.js index 3e5e0e1..682dc73 100644 --- a/packages/react-bootstrap-table2/test/bootstrap-table.test.js +++ b/packages/react-bootstrap-table2/test/bootstrap-table.test.js @@ -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( + ); + }); + + 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( + ); + }); + + it('should display customized id correctly', () => { + expect(wrapper.find(`table#${id}`).length).toBe(1); }); }); diff --git a/packages/react-bootstrap-table2/test/cell.test.js b/packages/react-bootstrap-table2/test/cell.test.js index b83bcc9..439a638 100644 --- a/packages/react-bootstrap-table2/test/cell.test.js +++ b/packages/react-bootstrap-table2/test/cell.test.js @@ -27,24 +27,6 @@ describe('Cell', () => { }); }); - describe('when column.hidden prop is true', () => { - const column = { - dataField: 'id', - text: 'ID', - hidden: true - }; - - beforeEach(() => { - wrapper = shallow(); - }); - - 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( - ); - - 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'; diff --git a/packages/react-bootstrap-table2/test/header-cell.test.js b/packages/react-bootstrap-table2/test/header-cell.test.js index 5983964..535d222 100644 --- a/packages/react-bootstrap-table2/test/header-cell.test.js +++ b/packages/react-bootstrap-table2/test/header-cell.test.js @@ -33,24 +33,6 @@ describe('HeaderCell', () => { }); }); - describe('when column.hidden props is true', () => { - const column = { - dataField: 'id', - text: 'ID', - hidden: true - }; - - beforeEach(() => { - wrapper = shallow(); - }); - - 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(() => { diff --git a/packages/react-bootstrap-table2/test/header.test.js b/packages/react-bootstrap-table2/test/header.test.js index 8ae604b..c502602 100644 --- a/packages/react-bootstrap-table2/test/header.test.js +++ b/packages/react-bootstrap-table2/test/header.test.js @@ -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( +
+ ); + }); + + 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' }; diff --git a/packages/react-bootstrap-table2/test/row-selection/wrapper.test.js b/packages/react-bootstrap-table2/test/row-selection/wrapper.test.js index 278a54e..59dc190 100644 --- a/packages/react-bootstrap-table2/test/row-selection/wrapper.test.js +++ b/packages/react-bootstrap-table2/test/row-selection/wrapper.test.js @@ -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])); diff --git a/packages/react-bootstrap-table2/test/row.test.js b/packages/react-bootstrap-table2/test/row.test.js index 02cc068..117a24f 100644 --- a/packages/react-bootstrap-table2/test/row.test.js +++ b/packages/react-bootstrap-table2/test/row.test.js @@ -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( + ); + }); + + it('should not render column with hidden value true', () => { + expect(wrapper.find(Cell).length).toBe(2); + }); + }); describe('selectRow', () => { let selectRow;