Merge pull request #523 from react-bootstrap-table/enhance/514

Enhance/514

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

@@ -13,7 +13,9 @@ class CheckBoxEditor extends Component {
   }
 
   componentDidMount() {
+    const { didMount } = this.props;
     this.checkbox.focus();
+    if (didMount) didMount();
   }
 
   getValue() {
@@ -28,7 +30,7 @@ class CheckBoxEditor extends Component {
   }
 
   render() {
-    const { defaultValue, className, ...rest } = this.props;
+    const { defaultValue, didMount, className, ...rest } = this.props;
     const editorClass = cs('editor edit-chseckbox checkbox', className);
     return (
       <input
@@ -50,12 +52,14 @@ CheckBoxEditor.propTypes = {
   ]),
   value: PropTypes.string,
   defaultValue: PropTypes.any,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  didMount: PropTypes.func
 };
 CheckBoxEditor.defaultProps = {
   className: '',
   value: 'on:off',
   defaultValue: false,
-  onChange: undefined
+  onChange: undefined,
+  didMount: undefined
 };
 export default CheckBoxEditor;

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

@@ -23,6 +23,7 @@ export default (
         blurToSave: PropTypes.bool,
         beforeSaveCell: PropTypes.func,
         afterSaveCell: PropTypes.func,
+        onStartEdit: PropTypes.func,
         nonEditableRows: PropTypes.func,
         timeToCloseMessage: PropTypes.number,
         errorMessage: PropTypes.any
@@ -31,7 +32,7 @@ export default (
 
     constructor(props) {
       super(props);
-      EditingCell = props.cellEdit.editingCellFactory(_);
+      EditingCell = props.cellEdit.editingCellFactory(_, props.cellEdit.options.onStartEdit);
       this.startEditing = this.startEditing.bind(this);
       this.escapeEditing = this.escapeEditing.bind(this);
       this.completeEditing = this.completeEditing.bind(this);

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

@@ -5,9 +5,10 @@ import PropTypes from 'prop-types';
 
 class DateEditor extends Component {
   componentDidMount() {
-    const { defaultValue } = this.props;
+    const { defaultValue, didMount } = this.props;
     this.date.valueAsDate = new Date(defaultValue);
     this.date.focus();
+    if (didMount) didMount();
   }
 
   getValue() {
@@ -15,7 +16,7 @@ class DateEditor extends Component {
   }
 
   render() {
-    const { defaultValue, className, ...rest } = this.props;
+    const { defaultValue, didMount, className, ...rest } = this.props;
     const editorClass = cs('form-control editor edit-date', className);
     return (
       <input
@@ -33,10 +34,12 @@ DateEditor.propTypes = {
     PropTypes.string,
     PropTypes.object
   ]),
-  defaultValue: PropTypes.string
+  defaultValue: PropTypes.string,
+  didMount: PropTypes.func
 };
 DateEditor.defaultProps = {
   className: '',
-  defaultValue: ''
+  defaultValue: '',
+  didMount: undefined
 };
 export default DateEditor;

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

@@ -5,9 +5,10 @@ import PropTypes from 'prop-types';
 
 class DropDownEditor extends Component {
   componentDidMount() {
-    const { defaultValue } = this.props;
+    const { defaultValue, didMount } = this.props;
     this.select.value = defaultValue;
     this.select.focus();
+    if (didMount) didMount();
   }
 
   getValue() {
@@ -15,7 +16,7 @@ class DropDownEditor extends Component {
   }
 
   render() {
-    const { defaultValue, className, options, ...rest } = this.props;
+    const { defaultValue, didMount, className, options, ...rest } = this.props;
     const editorClass = cs('form-control editor edit-select', className);
 
     const attr = {
@@ -51,11 +52,13 @@ DropDownEditor.propTypes = {
       label: PropTypes.string,
       value: PropTypes.any
     }))
-  ]).isRequired
+  ]).isRequired,
+  didMount: PropTypes.func
 };
 DropDownEditor.defaultProps = {
   className: '',
   defaultValue: '',
-  style: {}
+  style: {},
+  didMount: undefined
 };
 export default DropDownEditor;

packages/react-bootstrap-table2-editor/src/editing-cell.js

@@ -14,7 +14,7 @@ import TextEditor from './text-editor';
 import EditorIndicator from './editor-indicator';
 import { TIME_TO_CLOSE_MESSAGE, EDITTYPE } from './const';
 
-export default _ =>
+export default (_, onStartEdit) =>
   class EditingCell extends Component {
     static propTypes = {
       row: PropTypes.object.isRequired,
@@ -151,6 +151,10 @@ export default _ =>
         onBlur: this.handleBlur
       };
 
+      if (onStartEdit) {
+        editorProps.didMount = () => onStartEdit(row, column, rowIndex, columnIndex);
+      }
+
       const isDefaultEditorDefined = _.isObject(column.editor);
 
       if (isDefaultEditorDefined) {

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 } = this.props;
+    const { defaultValue, didMount } = this.props;
     this.text.value = defaultValue;
     this.text.focus();
+    if (didMount) didMount();
   }
 
   getValue() {
@@ -15,7 +16,7 @@ class TextEditor extends Component {
   }
 
   render() {
-    const { defaultValue, className, ...rest } = this.props;
+    const { defaultValue, didMount, className, ...rest } = this.props;
     const editorClass = cs('form-control editor edit-text', className);
     return (
       <input
@@ -36,10 +37,12 @@ TextEditor.propTypes = {
   defaultValue: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number
-  ])
+  ]),
+  didMount: PropTypes.func
 };
 TextEditor.defaultProps = {
   className: null,
-  defaultValue: ''
+  defaultValue: '',
+  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 } = this.props;
+    const { defaultValue, didMount } = this.props;
     this.text.value = defaultValue;
     this.text.focus();
+    if (didMount) didMount();
   }
 
   getValue() {
@@ -27,7 +28,7 @@ class TextAreaEditor extends Component {
   }
 
   render() {
-    const { defaultValue, className, ...rest } = this.props;
+    const { defaultValue, didMount, className, ...rest } = this.props;
     const editorClass = cs('form-control editor edit-textarea', className);
     return (
       <textarea
@@ -50,11 +51,13 @@ TextAreaEditor.propTypes = {
     PropTypes.string,
     PropTypes.number
   ]),
-  onKeyDown: PropTypes.func
+  onKeyDown: PropTypes.func,
+  didMount: PropTypes.func
 };
 TextAreaEditor.defaultProps = {
   className: '',
   defaultValue: '',
-  onKeyDown: undefined
+  onKeyDown: undefined,
+  didMount: undefined
 };
 export default TextAreaEditor;

packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-hooks-table.js

@@ -41,6 +41,7 @@ const columns = [{
   columns={ columns }
   cellEdit={ cellEditFactory({
     mode: 'click',
+    onStartEdit: (row, column, rowIndex, columnIndex) => { console.log('start to edit!!!'); },
     beforeSaveCell: (oldValue, newValue, row, column) => { console.log('Before Saving Cell!!'); },
     afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); }
   }) }
@@ -55,6 +56,7 @@ export default () => (
       columns={ columns }
       cellEdit={ cellEditFactory({
         mode: 'click',
+        onStartEdit: (row, column, rowIndex, columnIndex) => { console.log('Start to edit!!!'); },
         beforeSaveCell: (oldValue, newValue, row, column) => { console.log('Before Saving Cell!!'); },
         afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); }
       }) }