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-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 ( +`; + +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', () => )