Merge branch 'jspaine-v4.0.0-dev' into v4.0.0-dev

Author: AllenFang

examples/js/advance/edit-type-table.js

@@ -1,4 +1,5 @@
 /* eslint max-len: 0 */
+/* eslint no-console: 0 */
 import React from 'react';
 import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
 
@@ -66,10 +67,17 @@ export default class EditTypeTable extends React.Component {
   }
 
   render() {
+    // custom attributes on editor
+    const attrs = {
+      rows: 10,
+      onKeyDown: function() {
+        console.log('keydown event trigger');
+      }
+    };
     return (
       <BootstrapTable data={ jobs } cellEdit={ cellEditProp }>
         <TableHeaderColumn dataField='id' isKey={ true }>Job ID</TableHeaderColumn>
-        <TableHeaderColumn dataField='name' editable={ { type: 'textarea' } }>Job Name</TableHeaderColumn>
+        <TableHeaderColumn dataField='name' editable={ { type: 'textarea', attrs: attrs } }>Job Name</TableHeaderColumn>
         <TableHeaderColumn dataField='type1' dataFormat={ this.formatType } editable={ { type: 'select', options: { values: jobTypes } } }>Job Type1</TableHeaderColumn>
         <TableHeaderColumn dataField='type2' editable={ { type: 'select', options: { values: this.jobTypes } } }>Job Type2</TableHeaderColumn>
         <TableHeaderColumn dataField='active' editable={ { type: 'checkbox', options: { values: 'Y:N' } } }>Active</TableHeaderColumn>

src/TableEditColumn.js

@@ -148,8 +148,8 @@ class TableEditColumn extends Component {
   }
 
   focusInEditor() {
-    if (Util.isFunction(this.refs.inputRef.focus)) {
-      this.refs.inputRef.focus();
+    if (this.inputRef && Util.isFunction(this.inputRef.focus)) {
+      this.inputRef.focus();
     }
   }
 
@@ -159,6 +159,29 @@ class TableEditColumn extends Component {
     }
   }
 
+  getInputRef = userRef => ref => {
+    this.inputRef = ref;
+    if (Util.isFunction(userRef)) {
+      userRef(ref);
+    } else if (typeof userRef === 'string') {
+      throw new Error('Ref must be a function');
+    }
+  }
+
+  getHandleKeyPress = customHandler => e => {
+    this.handleKeyPress(e);
+    if (Util.isFunction(customHandler)) {
+      customHandler(e);
+    }
+  }
+
+  getHandleBlur = customHandler => e => {
+    this.handleBlur(e);
+    if (Util.isFunction(customHandler)) {
+      customHandler(e);
+    }
+  }
+
   render() {
     const {
       editable,
@@ -170,15 +193,22 @@ class TableEditColumn extends Component {
     } = this.props;
     const { shakeEditor } = this.state;
     const attr = {
-      ref: 'inputRef',
-      onKeyDown: this.handleKeyPress,
-      onBlur: this.handleBlur
+      ...editable.attrs,
+      ref: this.getInputRef(editable.attrs && editable.attrs.ref),
+      onKeyDown: this.getHandleKeyPress(editable.attrs && editable.attrs.onKeyDown),
+      onBlur: this.getHandleBlur(editable.attrs && editable.attrs.onBlur)
     };
     let style = { position: 'relative' };
     let { fieldValue } = this.props;
     let { className } = this.state;
-    // put placeholder if exist
-    editable.placeholder && (attr.placeholder = editable.placeholder);
+
+    if (editable.placeholder) {
+      attr.placeholder = editable.placeholder;
+      /* eslint-disable no-console */
+      console.warn(
+        'Setting editable.placeholder is deprecated. Use editable.attrs to set input attributes');
+      /* eslint-enable no-console */
+    }
 
     const editorClass = classSet({ 'animated': shakeEditor, 'shake': shakeEditor });
     fieldValue = fieldValue === 0 ? '0' : fieldValue;