From db19e7dd9bee8853f5d18e633e800d1149b6aab3 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sat, 29 Sep 2018 13:26:44 +0800 Subject: [PATCH 1/2] 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 2/2] 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', () => )