diff --git a/src/TableEditColumn.js b/src/TableEditColumn.js index 282dfc291..632e09e75 100644 --- a/src/TableEditColumn.js +++ b/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,30 @@ class TableEditColumn extends Component { } } + getInputRef = userRef => ref => { + this.inputRef = ref; + if (typeof userRef === 'string') { + throw new Error('Ref must be a function'); + } + if (Util.isFunction(userRef)) { + userRef(ref); + } + } + + getHandleKeyPress = userHandler => e => { + this.handleKeyPress(e); + if (Util.isFunction(userHandler)) { + userHandler(e); + } + } + + getHandleBlur = userHandler => e => { + this.handleBlur(e); + if (Util.isFunction(userHandler)) { + userHandler(e); + } + } + render() { const { editable, @@ -170,15 +194,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;