Merge pull request #569 from react-bootstrap-table/feat/527

Implement auto select input text when editing cell

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
 ### <a name='nonEditableRows'>cellEdit.nonEditableRows - [Function]</a>
 `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`)
 
+### <a name='autoSelectText'>cellEdit.autoSelectText - [Bool]</a>
+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`.
+
 ### <a name='timeToCloseMessage'>cellEdit.timeToCloseMessage - [Function]</a>
 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.
 

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 = <DropdownEditor { ...editorProps } />;
       } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.TEXTAREA) {
-        editor = <TextAreaEditor { ...editorProps } />;
+        editor = <TextAreaEditor { ...editorProps } autoSelectText={ autoSelectText } />;
       } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.CHECKBOX) {
         editor = <CheckBoxEditor { ...editorProps } />;
       } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.DATE) {
         editor = <DateEditor { ...editorProps } />;
       } else {
-        editor = <TextEditor { ...editorProps } />;
+        editor = <TextEditor { ...editorProps } autoSelectText={ autoSelectText } />;
       }
 
       return (

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 (
       <input
@@ -38,11 +39,13 @@ TextEditor.propTypes = {
     PropTypes.string,
     PropTypes.number
   ]),
+  autoSelectText: PropTypes.bool,
   didMount: PropTypes.func
 };
 TextEditor.defaultProps = {
   className: null,
   defaultValue: '',
+  autoSelectText: false,
   didMount: undefined
 };
 export default TextEditor;

packages/react-bootstrap-table2-editor/src/textarea-editor.js

@@ -10,9 +10,10 @@ class TextAreaEditor 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();
   }
 
@@ -28,7 +29,7 @@ class TextAreaEditor 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-textarea', className);
     return (
       <textarea
@@ -52,11 +53,13 @@ TextAreaEditor.propTypes = {
     PropTypes.number
   ]),
   onKeyDown: PropTypes.func,
+  autoSelectText: PropTypes.bool,
   didMount: PropTypes.func
 };
 TextAreaEditor.defaultProps = {
   className: '',
   defaultValue: '',
+  autoSelectText: false,
   onKeyDown: undefined,
   didMount: undefined
 };

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
+  }
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ jobs }
+  columns={ columns }
+  cellEdit={
+    cellEditFactory({
+      mode: 'click',
+      autoSelectText: true
+    })
+  }
+/>
+`;
+
+export default () => (
+  <div>
+    <h3>Auto Select Text Input Field When Editing</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ jobs }
+      columns={ columns }
+      cellEdit={
+        cellEditFactory({
+          mode: 'click',
+          autoSelectText: true
+        })
+      }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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', () => <CellLevelEditable />)
   .add('Rich Hook Functions', () => <CellEditHooks />)
   .add('Validation', () => <CellEditValidator />)
+  .add('Auto Select Text Input', () => <AutoSelectTextInput />)
   .add('Custom Cell Style', () => <CellEditStyleTable />)
   .add('Custom Cell Classes', () => <CellEditClassTable />)
   .add('Custom Editor Classes', () => <EditorClassTable />)