From 7209441eb6aa87d03a3cdcc41f620a9772e0169f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dar=C3=ADo=20Here=C3=B1=C3=BA?= Date: Thu, 20 Sep 2018 13:05:46 -0300 Subject: [PATCH 01/13] Typo on #16? (#552) --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 39f14b1..5098694 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ Rebuilt [react-bootstrap-table](https://github.com/AllenFang/react-bootstrap-tab * [`react-bootstrap-table2-overlay`](https://www.npmjs.com/package/react-bootstrap-table2-overlay) * [`react-bootstrap-table2-toolkit`](https://www.npmjs.com/package/react-bootstrap-table2-toolkit) -This can help your application with less bundled size and also help us have clean design to avoid handling to much logic in kernal module(SRP). +This can help your application with less bundled size and also help us have clean design to avoid handling to much logic in kernel module(SRP). ## Migration If you are the user from legacy [`react-bootstrap-table`](https://github.com/AllenFang/react-bootstrap-table/), please have a look on [this](./docs/migration.md). @@ -40,4 +40,4 @@ $ yarn storybook $ Go to localhost:6006 ``` -**Storybook examples: [`packages/react-bootstrap-table2-example/examples`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/master/packages/react-bootstrap-table2-example/examples)** \ No newline at end of file +**Storybook examples: [`packages/react-bootstrap-table2-example/examples`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/master/packages/react-bootstrap-table2-example/examples)** From 33b36e5108f25414d3adb2d30c95db48ee957ac7 Mon Sep 17 00:00:00 2001 From: pnthang01 Date: Sat, 29 Sep 2018 11:54:23 +0700 Subject: [PATCH 02/13] add onContextMenu event (#556) --- packages/react-bootstrap-table2/src/row-event-delegater.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react-bootstrap-table2/src/row-event-delegater.js b/packages/react-bootstrap-table2/src/row-event-delegater.js index 283ffd6..ee62606 100644 --- a/packages/react-bootstrap-table2/src/row-event-delegater.js +++ b/packages/react-bootstrap-table2/src/row-event-delegater.js @@ -5,7 +5,8 @@ const events = [ 'onClick', 'onDoubleClick', 'onMouseEnter', - 'onMouseLeave' + 'onMouseLeave', + 'onContextMenu' ]; export default ExtendBase => From db19e7dd9bee8853f5d18e633e800d1149b6aab3 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sat, 29 Sep 2018 13:26:44 +0800 Subject: [PATCH 03/13] fix #527 --- .../react-bootstrap-table2-editor/src/editing-cell.js | 8 +++++--- packages/react-bootstrap-table2-editor/src/text-editor.js | 7 +++++-- .../react-bootstrap-table2-editor/src/textarea-editor.js | 7 +++++-- 3 files changed, 15 insertions(+), 7 deletions(-) diff --git a/packages/react-bootstrap-table2-editor/src/editing-cell.js b/packages/react-bootstrap-table2-editor/src/editing-cell.js index 463c8c5..39aa9a5 100644 --- a/packages/react-bootstrap-table2-editor/src/editing-cell.js +++ b/packages/react-bootstrap-table2-editor/src/editing-cell.js @@ -24,6 +24,7 @@ export default (_, onStartEdit) => onUpdate: PropTypes.func.isRequired, onEscape: PropTypes.func.isRequired, timeToCloseMessage: PropTypes.number, + autoSelectText: PropTypes.bool, className: PropTypes.string, style: PropTypes.object } @@ -31,6 +32,7 @@ export default (_, onStartEdit) => static defaultProps = { timeToCloseMessage: TIME_TO_CLOSE_MESSAGE, className: null, + autoSelectText: false, style: {} } @@ -121,7 +123,7 @@ export default (_, onStartEdit) => render() { let editor; - const { row, column, className, style, rowIndex, columnIndex } = this.props; + const { row, column, className, style, rowIndex, columnIndex, autoSelectText } = this.props; const { dataField } = column; const value = _.get(row, dataField); @@ -174,13 +176,13 @@ export default (_, onStartEdit) => } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.SELECT) { editor = ; } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.TEXTAREA) { - editor = ; + editor = ; } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.CHECKBOX) { editor = ; } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.DATE) { editor = ; } else { - editor = ; + editor = ; } return ( diff --git a/packages/react-bootstrap-table2-editor/src/text-editor.js b/packages/react-bootstrap-table2-editor/src/text-editor.js index 1a28a29..aaee204 100644 --- a/packages/react-bootstrap-table2-editor/src/text-editor.js +++ b/packages/react-bootstrap-table2-editor/src/text-editor.js @@ -5,9 +5,10 @@ import PropTypes from 'prop-types'; class TextEditor extends Component { componentDidMount() { - const { defaultValue, didMount } = this.props; + const { defaultValue, didMount, autoSelectText } = this.props; this.text.value = defaultValue; this.text.focus(); + if (autoSelectText) this.text.select(); if (didMount) didMount(); } @@ -16,7 +17,7 @@ class TextEditor extends Component { } render() { - const { defaultValue, didMount, className, ...rest } = this.props; + const { defaultValue, didMount, className, autoSelectText, ...rest } = this.props; const editorClass = cs('form-control editor edit-text', className); return ( Date: Sat, 29 Sep 2018 13:27:06 +0800 Subject: [PATCH 04/13] patch docs and story for #527 --- docs/cell-edit.md | 6 ++ .../cell-edit/auto-select-text-input-table.js | 78 +++++++++++++++++++ .../stories/index.js | 2 + 3 files changed, 86 insertions(+) create mode 100644 packages/react-bootstrap-table2-example/examples/cell-edit/auto-select-text-input-table.js diff --git a/docs/cell-edit.md b/docs/cell-edit.md index 8502c8c..6c46151 100644 --- a/docs/cell-edit.md +++ b/docs/cell-edit.md @@ -10,6 +10,7 @@ $ npm install react-bootstrap-table2-editor --save * [blurToSave](#blurToSave) * [nonEditableRows](#nonEditableRows) * [timeToCloseMessage](#timeToCloseMessage) +* [autoSelectText](#autoSelectText) * [beforeSaveCell](#beforeSaveCell) * [afterSaveCell](#afterSaveCell) * [errorMessage](#errorMessage) @@ -43,6 +44,11 @@ Default is `false`, enable it will be able to save the cell automatically when b ### cellEdit.nonEditableRows - [Function] `cellEdit.nonEditableRows` accept a callback function and expect return an array which used to restrict all the columns of some rows as non-editable. So the each item in return array should be rowkey(`keyField`) +### cellEdit.autoSelectText - [Bool] +Default is false, when enable it, `react-bootstrap-table2` will help you to select the text in the text input automatically when editing. + +> NOTE: This props only work for `text` and `textarea`. + ### cellEdit.timeToCloseMessage - [Function] If a [`column.validator`](./columns.md#validator) defined and the new value is invalid, `react-bootstrap-table2` will popup a alert at the bottom of editor. `cellEdit.timeToCloseMessage` is a chance to let you decide how long the alert should be stay. Default is 3000 millisecond. diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/auto-select-text-input-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/auto-select-text-input-table.js new file mode 100644 index 0000000..05ea4b9 --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/cell-edit/auto-select-text-input-table.js @@ -0,0 +1,78 @@ +/* eslint react/prefer-stateless-function: 0 */ +import React from 'react'; + +import BootstrapTable from 'react-bootstrap-table-next'; +import cellEditFactory, { Type } from 'react-bootstrap-table2-editor'; +import Code from 'components/common/code-block'; +import { jobsGenerator } from 'utils/common'; + +const jobs = jobsGenerator(); + +const columns = [{ + dataField: 'id', + text: 'Job ID' +}, { + dataField: 'name', + text: 'Job Name' +}, { + dataField: 'owner', + text: 'Job Owner' +}, { + dataField: 'type', + text: 'Job Type', + editor: { + type: Type.TEXTAREA + } +}]; + +const sourceCode = `\ +import BootstrapTable from 'react-bootstrap-table-next'; +import cellEditFactory, { Type } from 'react-bootstrap-table2-editor'; + +const columns = [{ + dataField: 'id', + text: 'Job ID' +}, { + dataField: 'name', + text: 'Job Name' +}, { + dataField: 'owner', + text: 'Job Owner' +}, { + dataField: 'type', + text: 'Job Type', + editor: { + type: Type.TEXTAREA + } +}]; + + +`; + +export default () => ( +
+

Auto Select Text Input Field When Editing

+ + { sourceCode } +
+); diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index 0c652db..264580d 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -97,6 +97,7 @@ import CellEditHooks from 'examples/cell-edit/cell-edit-hooks-table'; import CellEditValidator from 'examples/cell-edit/cell-edit-validator-table'; import CellEditStyleTable from 'examples/cell-edit/cell-edit-style-table'; import CellEditClassTable from 'examples/cell-edit/cell-edit-class-table'; +import AutoSelectTextInput from 'examples/cell-edit/auto-select-text-input-table'; import EditorStyleTable from 'examples/cell-edit/editor-style-table'; import EditorClassTable from 'examples/cell-edit/editor-class-table'; import DropdownEditorTable from 'examples/cell-edit/dropdown-editor-table'; @@ -276,6 +277,7 @@ storiesOf('Cell Editing', module) .add('Cell Level Editable', () => ) .add('Rich Hook Functions', () => ) .add('Validation', () => ) + .add('Auto Select Text Input', () => ) .add('Custom Cell Style', () => ) .add('Custom Cell Classes', () => ) .add('Custom Editor Classes', () => ) From d4fa9a84e38d2f2d0a63595b63ace6c6612b295f Mon Sep 17 00:00:00 2001 From: Allen Date: Sat, 29 Sep 2018 14:00:33 +0800 Subject: [PATCH 05/13] fix #538 (#570) --- .../src/contexts/selection-context.js | 10 +++- .../test/contexts/selection-context.test.js | 52 +++++++++++++------ 2 files changed, 45 insertions(+), 17 deletions(-) diff --git a/packages/react-bootstrap-table2/src/contexts/selection-context.js b/packages/react-bootstrap-table2/src/contexts/selection-context.js index 631ffe5..12a7af8 100644 --- a/packages/react-bootstrap-table2/src/contexts/selection-context.js +++ b/packages/react-bootstrap-table2/src/contexts/selection-context.js @@ -80,7 +80,15 @@ export default ( } if (onSelectAll) { - onSelectAll(!isUnSelect, dataOperator.getSelectedRows(data, keyField, currSelected), e); + onSelectAll( + !isUnSelect, + dataOperator.getSelectedRows( + data, + keyField, + isUnSelect ? this.state.selected : currSelected + ), + e + ); } this.setState(() => ({ selected: currSelected })); diff --git a/packages/react-bootstrap-table2/test/contexts/selection-context.test.js b/packages/react-bootstrap-table2/test/contexts/selection-context.test.js index 819fada..f53432e 100644 --- a/packages/react-bootstrap-table2/test/contexts/selection-context.test.js +++ b/packages/react-bootstrap-table2/test/contexts/selection-context.test.js @@ -220,6 +220,25 @@ describe('DataContext', () => { it('should set state.selected correctly', () => { expect(wrapper.state('selected')).toEqual(data.map(d => d[keyField])); }); + + describe('when selectRow.onSelectAll is defined', () => { + const onSelectAll = jest.fn(); + beforeEach(() => { + wrapper = shallow(shallowContext({ + ...defaultSelectRow, + onSelectAll + })); + wrapper.instance().handleAllRowsSelect(e, false); + }); + + it('should call selectRow.onSelectAll correctly', () => { + expect(onSelectAll).toHaveBeenCalledWith( + true, + dataOperator.getSelectedRows(data, keyField, wrapper.state('selected')), + e + ); + }); + }); }); describe('when isUnSelect argument is true', () => { @@ -234,24 +253,25 @@ describe('DataContext', () => { it('should set state.selected correctly', () => { expect(wrapper.state('selected')).toEqual([]); }); - }); - describe('when selectRow.onSelectAll is defined', () => { - const onSelectAll = jest.fn(); - beforeEach(() => { - wrapper = shallow(shallowContext({ - ...defaultSelectRow, - onSelectAll - })); - wrapper.instance().handleAllRowsSelect(e, false); - }); + describe('when selectRow.onSelectAll is defined', () => { + const onSelectAll = jest.fn(); + beforeEach(() => { + wrapper = shallow(shallowContext({ + ...defaultSelectRow, + selected: data.map(d => d[keyField]), + onSelectAll + })); + wrapper.instance().handleAllRowsSelect(e, true); + }); - it('should call selectRow.onSelectAll correctly', () => { - expect(onSelectAll).toHaveBeenCalledWith( - true, - dataOperator.getSelectedRows(data, keyField, wrapper.state('selected')), - e - ); + it('should call selectRow.onSelectAll correctly', () => { + expect(onSelectAll).toHaveBeenCalledWith( + false, + dataOperator.getSelectedRows(data, keyField, data.map(d => d[keyField])), + e + ); + }); }); }); }); From 0cdf086d56d59a79e4463b7cd14da734ba2b09e6 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sat, 29 Sep 2018 14:31:10 +0800 Subject: [PATCH 06/13] fix #541 --- packages/react-bootstrap-table2-toolkit/context.js | 4 +++- .../react-bootstrap-table2-toolkit/src/search/SearchBar.js | 1 + 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/react-bootstrap-table2-toolkit/context.js b/packages/react-bootstrap-table2-toolkit/context.js index eba442e..0bf29b8 100644 --- a/packages/react-bootstrap-table2-toolkit/context.js +++ b/packages/react-bootstrap-table2-toolkit/context.js @@ -17,6 +17,7 @@ class ToolkitProvider extends statelessDrcorator(React.Component) { search: PropTypes.oneOfType([ PropTypes.bool, PropTypes.shape({ + defaultSearch: PropTypes.string, searchFormatted: PropTypes.bool }) ]), @@ -42,7 +43,7 @@ class ToolkitProvider extends statelessDrcorator(React.Component) { constructor(props) { super(props); this.state = { - searchText: '' + searchText: typeof props.search === 'object' ? (props.search.defaultSearch || '') : '' }; this._ = null; this.onSearch = this.onSearch.bind(this); @@ -85,6 +86,7 @@ class ToolkitProvider extends statelessDrcorator(React.Component) { return ( debounceCallback() } className={ `form-control ${className}` } + defaultValue={ searchText } placeholder={ placeholder || SearchBar.defaultProps.placeholder } { ...rest } /> From 2b1204501782e8e67056c732fc1aceeed679fb7c Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sat, 29 Sep 2018 14:31:32 +0800 Subject: [PATCH 07/13] patch docs and add story for #541 --- .../examples/search/default-search.js | 83 +++++++++++++++++++ .../stories/index.js | 2 + .../react-bootstrap-table2-toolkit/README.md | 16 ++++ 3 files changed, 101 insertions(+) create mode 100644 packages/react-bootstrap-table2-example/examples/search/default-search.js diff --git a/packages/react-bootstrap-table2-example/examples/search/default-search.js b/packages/react-bootstrap-table2-example/examples/search/default-search.js new file mode 100644 index 0000000..dc38cbc --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/search/default-search.js @@ -0,0 +1,83 @@ +/* eslint react/prop-types: 0 */ +import React from 'react'; + +import BootstrapTable from 'react-bootstrap-table-next'; +import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; +import Code from 'components/common/code-block'; +import { productsGenerator } from 'utils/common'; + +const { SearchBar } = Search; +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'; +import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; + +const { SearchBar } = Search; +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name' +}, { + dataField: 'price', + text: 'Product Price' +}]; + + + { + props => ( +
+

Input something at below input field:

+ +
+ +
+ ) + } + +`; + +export default () => ( +
+ + { + props => ( +
+

Input something at below input field:

+ +
+ +
+ ) + } + + { sourceCode } +
+); diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index 264580d..e97ba7a 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -137,6 +137,7 @@ import CustomPaginationTable from 'examples/pagination/custom-pagination'; // search import SearchTable from 'examples/search'; +import DefaultSearch from 'examples/search/default-search'; import DefaultCustomSearch from 'examples/search/default-custom-search'; import FullyCustomSearch from 'examples/search/fully-custom-search'; import SearchFormattedData from 'examples/search/search-formatted'; @@ -323,6 +324,7 @@ storiesOf('Pagination', module) storiesOf('Table Search', module) .addDecorator(bootstrapStyle()) .add('Basic Search Table', () => ) + .add('Default Search Table', () => ) .add('Default Custom Search', () => ) .add('Fully Custom Search', () => ) .add('Search Fromatted Value', () => ) diff --git a/packages/react-bootstrap-table2-toolkit/README.md b/packages/react-bootstrap-table2-toolkit/README.md index 0886862..bfcce99 100644 --- a/packages/react-bootstrap-table2-toolkit/README.md +++ b/packages/react-bootstrap-table2-toolkit/README.md @@ -63,6 +63,22 @@ const { SearchBar } = Search; ### Search Options +#### defaultSearch - [string] +Accept a string that will be used for default searching when first time table render. + +```js + + // ... + +``` + #### searchFormatted - [bool] If you want to search on the formatted data, you are supposed to enable this props. `react-bootstrap-table2` will check if you define the `column.formatter` when doing search. From 2c68f226468c62dc192359a21fc6806010c30645 Mon Sep 17 00:00:00 2001 From: Allen Date: Sat, 29 Sep 2018 14:46:29 +0800 Subject: [PATCH 08/13] fix #543 (#572) --- packages/react-bootstrap-table2-toolkit/src/csv/exporter.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-bootstrap-table2-toolkit/src/csv/exporter.js b/packages/react-bootstrap-table2-toolkit/src/csv/exporter.js index e0e31f1..cb967b5 100644 --- a/packages/react-bootstrap-table2-toolkit/src/csv/exporter.js +++ b/packages/react-bootstrap-table2-toolkit/src/csv/exporter.js @@ -58,7 +58,7 @@ export const save = ( } ) => { FileSaver.saveAs( - new Blob(['\ufeff', content], { type: 'text/plain;charset=utf-8' }), + new Blob([content], { type: 'text/plain;charset=utf-8' }), fileName, noAutoBOM ); From 8f028d9dd4d57ec38e64bcfe0d259d1aa45ed31d Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sat, 29 Sep 2018 15:12:27 +0800 Subject: [PATCH 09/13] fix #567, add selectRow.hideSelectAll --- .../src/bootstrap-table.js | 1 + .../src/row-selection/selection-header-cell.js | 6 +++++- .../row-selection/selection-header-cell.test.js | 16 ++++++++++++++++ 3 files changed, 22 insertions(+), 1 deletion(-) diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js index 50ec912..75b7e4f 100644 --- a/packages/react-bootstrap-table2/src/bootstrap-table.js +++ b/packages/react-bootstrap-table2/src/bootstrap-table.js @@ -146,6 +146,7 @@ BootstrapTable.propTypes = { mode: PropTypes.oneOf([Const.ROW_SELECT_SINGLE, Const.ROW_SELECT_MULTIPLE]).isRequired, clickToSelect: PropTypes.bool, clickToEdit: PropTypes.bool, + hideSelectAll: PropTypes.bool, onSelect: PropTypes.func, onSelectAll: PropTypes.func, style: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), diff --git a/packages/react-bootstrap-table2/src/row-selection/selection-header-cell.js b/packages/react-bootstrap-table2/src/row-selection/selection-header-cell.js index 3658e0a..8635bd5 100644 --- a/packages/react-bootstrap-table2/src/row-selection/selection-header-cell.js +++ b/packages/react-bootstrap-table2/src/row-selection/selection-header-cell.js @@ -27,6 +27,7 @@ export default class SelectionHeaderCell extends Component { mode: PropTypes.string.isRequired, checkedStatus: PropTypes.string, onAllRowsSelect: PropTypes.func, + hideSelectAll: PropTypes.bool, selectionHeaderRenderer: PropTypes.func } @@ -63,7 +64,10 @@ export default class SelectionHeaderCell extends Component { CHECKBOX_STATUS_CHECKED, CHECKBOX_STATUS_INDETERMINATE, ROW_SELECT_MULTIPLE } = Const; - const { mode, checkedStatus, selectionHeaderRenderer } = this.props; + const { mode, checkedStatus, selectionHeaderRenderer, hideSelectAll } = this.props; + if (hideSelectAll) { + return ; + } const checked = checkedStatus === CHECKBOX_STATUS_CHECKED; diff --git a/packages/react-bootstrap-table2/test/row-selection/selection-header-cell.test.js b/packages/react-bootstrap-table2/test/row-selection/selection-header-cell.test.js index be9a519..da89009 100644 --- a/packages/react-bootstrap-table2/test/row-selection/selection-header-cell.test.js +++ b/packages/react-bootstrap-table2/test/row-selection/selection-header-cell.test.js @@ -104,6 +104,22 @@ describe('', () => { }); describe('render', () => { + describe('when props.hideSelectAll is true', () => { + beforeEach(() => { + const checkedStatus = Const.CHECKBOX_STATUS_CHECKED; + + wrapper = shallow( + + ); + }); + + it('should render empty th element', () => { + expect(wrapper.find('th').length).toBe(1); + expect(wrapper.find('th[data-row-selection]').length).toBe(1); + expect(wrapper.find(CheckBox).length).toBe(0); + }); + }); + describe('when props.mode is radio', () => { beforeEach(() => { const checkedStatus = Const.CHECKBOX_STATUS_CHECKED; From dd0b8c6b0fbcffbd0ff99f8b86a97497fcb0bb10 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sat, 29 Sep 2018 15:13:23 +0800 Subject: [PATCH 10/13] add story and patch docs for #567 --- docs/row-selection.md | 11 ++++ .../examples/row-selection/hide-select-all.js | 59 +++++++++++++++++++ .../stories/index.js | 2 + 3 files changed, 72 insertions(+) create mode 100644 packages/react-bootstrap-table2-example/examples/row-selection/hide-select-all.js diff --git a/docs/row-selection.md b/docs/row-selection.md index eb57e6b..9ed4e9f 100644 --- a/docs/row-selection.md +++ b/docs/row-selection.md @@ -16,6 +16,7 @@ * [onSelect](#onSelect) * [onSelectAll](#onSelectAll) * [hideSelectColumn](#hideSelectColumn) +* [hideSelectAll](#hideSelectAll) * [selectionRenderer](#selectionRenderer) * [selectionHeaderRenderer](#selectionHeaderRenderer) @@ -222,3 +223,13 @@ const selectRow = { bgColor: 'red' }; ``` + +### selectRow.hideSelectAll - [Bool] +Default is `false`, if you don't want to render the select all checkbox on the header of selection column, give this prop as `true`! + +```js +const selectRow = { + mode: 'checkbox', + hideSelectAll: true +}; +``` diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/hide-select-all.js b/packages/react-bootstrap-table2-example/examples/row-selection/hide-select-all.js new file mode 100644 index 0000000..6f036b8 --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/row-selection/hide-select-all.js @@ -0,0 +1,59 @@ +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 selectRow = { + mode: 'checkbox', + clickToSelect: true, + hideSelectAll: true +}; + +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' +}]; + +const selectRow = { + mode: 'checkbox', + clickToSelect: true, + hideSelectAll: true +}; + + +`; + +export default () => ( +
+ + { sourceCode } +
+); diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index e97ba7a..dbfdf48 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -116,6 +116,7 @@ import ClickToSelectWithCellEditTable from 'examples/row-selection/click-to-sele import SelectionNoDataTable from 'examples/row-selection/selection-no-data'; import SelectionStyleTable from 'examples/row-selection/selection-style'; import SelectionClassTable from 'examples/row-selection/selection-class'; +import HideSelectAllTable from 'examples/row-selection/hide-select-all'; import CustomSelectionTable from 'examples/row-selection/custom-selection'; import NonSelectableRowsTable from 'examples/row-selection/non-selectable-rows'; import SelectionBgColorTable from 'examples/row-selection/selection-bgcolor'; @@ -300,6 +301,7 @@ storiesOf('Row Selection', module) .add('Selection without Data', () => ) .add('Selection Style', () => ) .add('Selection Class', () => ) + .add('Hide Select All', () => ) .add('Custom Selection', () => ) .add('Selection Background Color', () => ) .add('Not Selectabled Rows', () => ) From f8a3fedbb29d9302f7a1bcc76157ca45a05d22de Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sat, 29 Sep 2018 15:29:42 +0800 Subject: [PATCH 11/13] fix #564 --- packages/react-bootstrap-table2/src/bootstrap-table.js | 1 + .../src/contexts/row-expand-context.js | 5 +++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js index 75b7e4f..b0d4779 100644 --- a/packages/react-bootstrap-table2/src/bootstrap-table.js +++ b/packages/react-bootstrap-table2/src/bootstrap-table.js @@ -166,6 +166,7 @@ BootstrapTable.propTypes = { onExpandAll: PropTypes.func, nonExpandable: PropTypes.array, showExpandColumn: PropTypes.bool, + onlyOneExpanding: PropTypes.bool, expandColumnRenderer: PropTypes.func, expandHeaderColumnRenderer: PropTypes.func }), diff --git a/packages/react-bootstrap-table2/src/contexts/row-expand-context.js b/packages/react-bootstrap-table2/src/contexts/row-expand-context.js index d6b1702..3e882c6 100644 --- a/packages/react-bootstrap-table2/src/contexts/row-expand-context.js +++ b/packages/react-bootstrap-table2/src/contexts/row-expand-context.js @@ -25,12 +25,13 @@ export default ( } handleRowExpand = (rowKey, expanded, rowIndex, e) => { - const { data, keyField, expandRow: { onExpand } } = this.props; + const { data, keyField, expandRow: { onExpand, onlyOneExpanding } } = this.props; let currExpanded = [...this.state.expanded]; if (expanded) { - currExpanded.push(rowKey); + if (onlyOneExpanding) currExpanded = [rowKey]; + else currExpanded.push(rowKey); } else { currExpanded = currExpanded.filter(value => value !== rowKey); } From 4ff5be706af1fe6134dd8421e6ac2dfa88b4cf0b Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sat, 29 Sep 2018 15:30:04 +0800 Subject: [PATCH 12/13] patch docs and add story for #564 --- docs/row-expand.md | 11 +++ .../examples/row-expand/expand-only-one.js | 73 +++++++++++++++++++ .../stories/index.js | 2 + 3 files changed, 86 insertions(+) create mode 100644 packages/react-bootstrap-table2-example/examples/row-expand/expand-only-one.js diff --git a/docs/row-expand.md b/docs/row-expand.md index 1aa958a..5f6b47a 100644 --- a/docs/row-expand.md +++ b/docs/row-expand.md @@ -13,6 +13,7 @@ * [onExpand](#onExpand) * [onExpandAll](#onExpandAll) * [showExpandColumn](#showExpandColumn) +* [onlyOneExpanding](#onlyOneExpanding) * [expandColumnRenderer](#expandColumnRenderer) * [expandHeaderColumnRenderer](#expandHeaderColumnRenderer) @@ -127,3 +128,13 @@ const expandRow = { showExpandColumn: true }; ``` + +### expandRow.onlyOneExpanding - [Bool] +Default is `false`. Enable this will only allow one row get expand at the same time. + +```js +const expandRow = { + renderer: (row) => ... + onlyOneExpanding: true +}; +``` diff --git a/packages/react-bootstrap-table2-example/examples/row-expand/expand-only-one.js b/packages/react-bootstrap-table2-example/examples/row-expand/expand-only-one.js new file mode 100644 index 0000000..4ef5bc4 --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/row-expand/expand-only-one.js @@ -0,0 +1,73 @@ +import React from 'react'; + +import BootstrapTable from 'react-bootstrap-table-next'; +import Code from 'components/common/code-block'; +import { productsExpandRowsGenerator } from 'utils/common'; + +const products = productsExpandRowsGenerator(); + +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name' +}, { + dataField: 'price', + text: 'Product Price' +}]; + +const expandRow = { + onlyOneExpanding: true, + renderer: row => ( +
+

{ `This Expand row is belong to rowKey ${row.id}` }

+

You can render anything here, also you can add additional data on every row object

+

expandRow.renderer callback will pass the origin row object to you

+
+ ) +}; + +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' +}]; + +const expandRow = { + renderer: row => ( +
+

{ \`This Expand row is belong to rowKey $\{row.id}\` }

+

You can render anything here, also you can add additional data on every row object

+

expandRow.renderer callback will pass the origin row object to you

+
+ ) +}; + + +`; + +export default () => ( +
+ + { sourceCode } +
+); diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index dbfdf48..771655f 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -128,6 +128,7 @@ import BasicRowExpand from 'examples/row-expand'; import RowExpandManagement from 'examples/row-expand/expand-management'; import NonExpandableRows from 'examples/row-expand/non-expandable-rows'; import ExpandColumn from 'examples/row-expand/expand-column'; +import ExpandOnlyOne from 'examples/row-expand/expand-only-one'; import CustomExpandColumn from 'examples/row-expand/custom-expand-column'; import ExpandHooks from 'examples/row-expand/expand-hooks'; @@ -314,6 +315,7 @@ storiesOf('Row Expand', module) .add('Expand Management', () => ) .add('Non Expandabled Rows', () => ) .add('Expand Indicator', () => ) + .add('Expand Only One Row at The Same Time', () => ) .add('Custom Expand Indicator', () => ) .add('Expand Hooks', () => ); From ee2885d0554dc41de650905e2605a4c8f2ec6815 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sat, 29 Sep 2018 15:52:59 +0800 Subject: [PATCH 13/13] fix #558 --- packages/react-bootstrap-table2/src/header-cell.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-bootstrap-table2/src/header-cell.js b/packages/react-bootstrap-table2/src/header-cell.js index 2053453..79b4b9b 100644 --- a/packages/react-bootstrap-table2/src/header-cell.js +++ b/packages/react-bootstrap-table2/src/header-cell.js @@ -49,6 +49,7 @@ const HeaderCell = (props) => { if (headerStyle) { cellStyle = _.isFunction(headerStyle) ? headerStyle(column, index) : headerStyle; + cellStyle = cellStyle ? { ...cellStyle } : cellStyle; } if (headerTitle) {