From 9f9203bffabab94e8e7fc65eae0141eb9be21196 Mon Sep 17 00:00:00 2001 From: Chun-MingChen Date: Sat, 10 Mar 2018 18:54:26 +0800 Subject: [PATCH 01/14] implement customized classes and id on the table --- packages/react-bootstrap-table2/src/bootstrap-table.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) 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 }
Date: Sat, 10 Mar 2018 18:54:41 +0800 Subject: [PATCH 02/14] [test] test for customized classes and id --- .../test/bootstrap-table.test.js | 46 ++++++++++++++++++- 1 file changed, 44 insertions(+), 2 deletions(-) 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); }); }); From 8a8c2d49643335baafaadb58ec0eb71745c8c249 Mon Sep 17 00:00:00 2001 From: Chun-MingChen Date: Sat, 10 Mar 2018 18:54:59 +0800 Subject: [PATCH 03/14] [example] add demo for customized classes and id table --- .../examples/basic/customized-id-classes.js | 48 +++++++++++++++++++ .../stories/index.js | 2 + .../stories/stylesheet/base-table/_index.scss | 7 +++ .../stories/stylesheet/storybook.scss | 1 + 4 files changed, 58 insertions(+) create mode 100644 packages/react-bootstrap-table2-example/examples/basic/customized-id-classes.js create mode 100644 packages/react-bootstrap-table2-example/stories/stylesheet/base-table/_index.scss 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/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index b7444a7..c16dc53 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 @@ -121,6 +122,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) 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"; From 3ed4d87b29049a2437e8f5a745d53202d2e37a28 Mon Sep 17 00:00:00 2001 From: Chun-MingChen Date: Sat, 17 Mar 2018 15:29:09 +0800 Subject: [PATCH 04/14] correct attribute key of columns.headerEvent in column-event-tables --- .../examples/header-columns/column-event-table.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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') } }, { From 0eda54b772955c908c1ebea970f3c0236522e8ed Mon Sep 17 00:00:00 2001 From: Chun-MingChen Date: Sat, 17 Mar 2018 16:04:03 +0800 Subject: [PATCH 05/14] correct the typo of documents --- docs/README.md | 10 +++++----- docs/columns.md | 22 +++++++++++----------- docs/migration.md | 16 ++++++++-------- docs/row-selection.md | 2 +- 4 files changed, 25 insertions(+), 25 deletions(-) diff --git a/docs/README.md b/docs/README.md index 096ca24..7871d5f 100644 --- a/docs/README.md +++ b/docs/README.md @@ -59,14 +59,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 @@ -163,7 +163,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 +205,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 +213,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 = { From ceebdf5a139f1c3035e7910a0296bbaff835d84b Mon Sep 17 00:00:00 2001 From: Chun-MingChen Date: Sat, 17 Mar 2018 17:05:02 +0800 Subject: [PATCH 06/14] refine store to set selectRow when receiving props --- .../src/row-selection/wrapper.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/react-bootstrap-table2/src/row-selection/wrapper.js b/packages/react-bootstrap-table2/src/row-selection/wrapper.js index b8c79bd..1be101e 100644 --- a/packages/react-bootstrap-table2/src/row-selection/wrapper.js +++ b/packages/react-bootstrap-table2/src/row-selection/wrapper.js @@ -22,19 +22,17 @@ 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 - })); - } + this.setState(() => ({ + selectedRowKeys: nextProps.store.selected + })); } /** From d80ae13513a413f7d2a611612e8cb5a48d2134b7 Mon Sep 17 00:00:00 2001 From: Chun-MingChen Date: Sat, 17 Mar 2018 17:25:20 +0800 Subject: [PATCH 07/14] [test] test for RowSelectionWrapper#componentWillReceiveProps --- .../test/row-selection/wrapper.test.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) 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..347b867 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,18 @@ describe('RowSelectionWrapper', () => { expect(wrapper.props().onAllRowsSelect).toBeDefined(); }); - describe('when selectRow.selected is defiend', () => { + describe('componentWillReceiveProps', () => { + const nextSelected = [0]; + const nextProps = { store: { selected: nextSelected } }; + + it('should update state.selectedRowKeys with next selected rows', () => { + wrapper.instance().componentWillReceiveProps(nextProps); + + expect(wrapper.state('selectedRowKeys')).toEqual(nextSelected); + }); + }); + + describe('when selectRow.selected is defined', () => { beforeEach(() => { selectRow.mode = 'checkbox'; selectRow.selected = [1, 3]; From 923439dc816bfeec9c15fe91af8e0f3edeebecff Mon Sep 17 00:00:00 2001 From: Chun-MingChen Date: Sat, 17 Mar 2018 17:29:30 +0800 Subject: [PATCH 08/14] correct typo --- .../test/row-selection/wrapper.test.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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 347b867..749c0e4 100644 --- a/packages/react-bootstrap-table2/test/row-selection/wrapper.test.js +++ b/packages/react-bootstrap-table2/test/row-selection/wrapper.test.js @@ -107,7 +107,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]); @@ -133,7 +133,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])); @@ -147,7 +147,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])); @@ -155,7 +155,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])); From 55336108a05dafc0740b56136857f12ddcdcb7a7 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sun, 18 Mar 2018 14:07:44 +0800 Subject: [PATCH 09/14] should recieve newest selectRow.selected --- .../src/row-selection/wrapper.js | 3 ++- .../test/row-selection/wrapper.test.js | 12 ++++++++++-- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/react-bootstrap-table2/src/row-selection/wrapper.js b/packages/react-bootstrap-table2/src/row-selection/wrapper.js index 1be101e..1a94416 100644 --- a/packages/react-bootstrap-table2/src/row-selection/wrapper.js +++ b/packages/react-bootstrap-table2/src/row-selection/wrapper.js @@ -30,8 +30,9 @@ export default Base => } componentWillReceiveProps(nextProps) { + nextProps.store.selected = nextProps.selectRow.selected || []; this.setState(() => ({ - selectedRowKeys: nextProps.store.selected + selectedRowKeys: nextProps.selectRow.selected })); } 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 749c0e4..59dc190 100644 --- a/packages/react-bootstrap-table2/test/row-selection/wrapper.test.js +++ b/packages/react-bootstrap-table2/test/row-selection/wrapper.test.js @@ -70,11 +70,19 @@ describe('RowSelectionWrapper', () => { describe('componentWillReceiveProps', () => { const nextSelected = [0]; - const nextProps = { store: { selected: nextSelected } }; + 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); }); }); From c11539b9fb1c0ce87f653ea836b6cac375cd3723 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sun, 18 Mar 2018 14:33:11 +0800 Subject: [PATCH 10/14] [docs] patch id and classes for BootstrapTable --- docs/README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/README.md b/docs/README.md index 7871d5f..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) @@ -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. From 6bc81dddd0fb436e4387695b718f1f033424d4fc Mon Sep 17 00:00:00 2001 From: Parth Prajapati Date: Sun, 18 Mar 2018 13:12:21 +0530 Subject: [PATCH 11/14] Fixed #237 (#261) * Fixed #237 * Solved lint errors * Removed test cases for display: none checks - added test cases for hidden columns check --- packages/react-bootstrap-table2/src/cell.js | 5 -- .../react-bootstrap-table2/src/header-cell.js | 5 -- packages/react-bootstrap-table2/src/header.js | 29 +++++---- packages/react-bootstrap-table2/src/row.js | 65 ++++++++++--------- .../react-bootstrap-table2/test/cell.test.js | 32 --------- .../test/header-cell.test.js | 18 ----- .../test/header.test.js | 23 +++++++ .../react-bootstrap-table2/test/row.test.js | 26 ++++++++ 8 files changed, 99 insertions(+), 104 deletions(-) diff --git a/packages/react-bootstrap-table2/src/cell.js b/packages/react-bootstrap-table2/src/cell.js index d50eeb4..dc535a7 100644 --- a/packages/react-bootstrap-table2/src/cell.js +++ b/packages/react-bootstrap-table2/src/cell.js @@ -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; diff --git a/packages/react-bootstrap-table2/src/header-cell.js b/packages/react-bootstrap-table2/src/header-cell.js index b6af21e..bb012d1 100644 --- a/packages/react-bootstrap-table2/src/header-cell.js +++ b/packages/react-bootstrap-table2/src/header-cell.js @@ -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) => { 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.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/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.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; From 6f9361934a0bb44e6eb75172fa954975193d890d Mon Sep 17 00:00:00 2001 From: Chun-MingChen Date: Sun, 18 Mar 2018 16:10:06 +0800 Subject: [PATCH 12/14] set state.selectedRowKeys based on store --- packages/react-bootstrap-table2/src/row-selection/wrapper.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-bootstrap-table2/src/row-selection/wrapper.js b/packages/react-bootstrap-table2/src/row-selection/wrapper.js index 1a94416..c2880bf 100644 --- a/packages/react-bootstrap-table2/src/row-selection/wrapper.js +++ b/packages/react-bootstrap-table2/src/row-selection/wrapper.js @@ -32,7 +32,7 @@ export default Base => componentWillReceiveProps(nextProps) { nextProps.store.selected = nextProps.selectRow.selected || []; this.setState(() => ({ - selectedRowKeys: nextProps.selectRow.selected + selectedRowKeys: nextProps.store.selected })); } From d5ddd8c3af8947ba6dfd6f93a891e67bc9f25e5b Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sun, 18 Mar 2018 16:44:39 +0800 Subject: [PATCH 13/14] add selection management example --- .../row-selection/selection-management.js | 144 ++++++++++++++++++ .../stories/index.js | 2 + 2 files changed, 146 insertions(+) create mode 100644 packages/react-bootstrap-table2-example/examples/row-selection/selection-management.js 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 c16dc53..3f116f5 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -79,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'; @@ -193,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', () => ) From 33a8da701b508e898d33deda157d42ecb3b77cef Mon Sep 17 00:00:00 2001 From: Parth Prajapati Date: Sun, 18 Mar 2018 14:28:27 +0530 Subject: [PATCH 14/14] Add TravisCI badge --- README.md | 1 + 1 file changed, 1 insertion(+) 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