From 896af2d7b02af388ca6ae2135743ad878f40ae5c Mon Sep 17 00:00:00 2001 From: malhindi Date: Tue, 24 Apr 2018 14:56:08 +0200 Subject: [PATCH 1/4] Add input id and event props --- README.md | 9 +++++++-- dist/main.bundle.js | 8 +++++--- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 61b09db..fa27162 100644 --- a/README.md +++ b/README.md @@ -29,6 +29,8 @@ _* Required_ | onFocus | function | Callback for text focusing. Parameter(s): `text` | onFocusOut | function | Callback for focus leaving editor. Parameter(s): `text` +| inputId | string | Id for the input + # Example ```javascript @@ -44,12 +46,14 @@ class App extends React.Component { this._handleFocusOut = this._handleFocusOut.bind(this); } - _handleFocus(text) { + _handleFocus(text, id, event) { console.log('Focused with text: ' + text); + console.log('Input id: ' + id); } - _handleFocusOut(text) { + _handleFocusOut(text, id, event) { console.log('Left editor with text: ' + text); + console.log('Input id: ' + id); } render() { @@ -57,6 +61,7 @@ class App extends React.Component { Date: Tue, 24 Apr 2018 17:47:50 +0200 Subject: [PATCH 2/4] fix README file --- README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/README.md b/README.md index fa27162..6a828df 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,6 @@ _* Required_ | inputBorderWidth | string | Border width for the input in editing mode | onFocus | function | Callback for text focusing. Parameter(s): `text` | onFocusOut | function | Callback for focus leaving editor. Parameter(s): `text` - | inputId | string | Id for the input From b864d6a764c0cedeeeabd967bbee11d76646e959 Mon Sep 17 00:00:00 2001 From: ALHINDI Date: Sun, 20 May 2018 15:41:51 +0200 Subject: [PATCH 3/4] Add input id, label id to the propTypes and pass the event to _handleFocus fucntion --- README.md | 14 +- dist/main.bundle.js | 8 +- package-lock.json | 5311 +++++++++++++++++++++++++++++++++++++++++++ src/main.jsx | 10 +- 4 files changed, 5331 insertions(+), 12 deletions(-) create mode 100644 package-lock.json diff --git a/README.md b/README.md index 6a828df..84fd8ed 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,7 @@ _* Required_ | text (*)| string | Text to be displayed on both the label and initially in the editor | | isEditing | bool | Flags whether the label should be in editor mode | labelClassName | string | Class name for the text styling +| labelId | string | Id for the label | labelFontSize | string | Font size for the text | labelFontWeight | string | Font weight for the text | inputMaxLength | number | Max length for the input in editing mode @@ -25,17 +26,17 @@ _* Required_ | inputFontSize | string | Font size for the input in editing mode | inputFontWeight | string | Font weight for the input in editing mode | inputClassName | string | Class name for the input editor's styling +| inputId | string | Id for the input | inputBorderWidth | string | Border width for the input in editing mode | onFocus | function | Callback for text focusing. Parameter(s): `text` | onFocusOut | function | Callback for focus leaving editor. Parameter(s): `text` -| inputId | string | Id for the input # Example ```javascript import React from 'react'; import ReactDOM from 'react-dom'; -import EditableLabel from 'react-inline-edit'; +import EditableLabel from 'react-inline-editing'; class App extends React.Component { constructor(props){ @@ -45,20 +46,21 @@ class App extends React.Component { this._handleFocusOut = this._handleFocusOut.bind(this); } - _handleFocus(text, id, event) { + _handleFocus(text, event) { console.log('Focused with text: ' + text); - console.log('Input id: ' + id); + console.log('Label id: ' + event.target.id); } - _handleFocusOut(text, id, event) { + _handleFocusOut(text, event) { console.log('Left editor with text: ' + text); - console.log('Input id: ' + id); + console.log('Input id: ' + event.target.id); } render() { return
{ this.textInput = input; }} value={this.state.text} onChange={this._handleChange} @@ -63,6 +64,7 @@ export default class EditableLabel extends React.Component { return
} } diff --git a/dist/main.bundle.js b/dist/main.bundle.js index 3f75924..e33cbd2 100644 --- a/dist/main.bundle.js +++ b/dist/main.bundle.js @@ -483,7 +483,8 @@ var EditableLabel = function (_React$Component) { _this.state = { isEditing: _this.props.isEditing || false, - text: _this.props.text || "" + text: _this.props.text || "", + isTextarea: _this.props.isTextarea || false }; _this._handleFocus = _this._handleFocus.bind(_this); @@ -521,6 +522,34 @@ var EditableLabel = function (_React$Component) { var _this2 = this; if (this.state.isEditing) { + if (this.state.isTextarea) { + return _react2.default.createElement( + 'div', + null, + _react2.default.createElement('textarea', { + className: this.props.inputClassName, + id: this.props.inputId, + ref: function ref(input) { + _this2.textInput = input; + }, + value: this.state.text, + onChange: this._handleChange, + onBlur: this._handleFocus, + style: { + width: this.props.inputWidth, + height: this.props.inputHeight, + fontSize: this.props.inputFontSize, + fontWeight: this.props.inputFontWeight, + borderWidth: this.props.inputBorderWidth + + }, + cols: this.props.textareaCols, + placeholder: this.props.inputPlaceHolder, + tabIndex: this.props.inputTabIndex, + autoFocus: true }) + ); + } + return _react2.default.createElement( 'div', null, @@ -575,6 +604,7 @@ exports.default = EditableLabel; EditableLabel.propTypes = { text: _propTypes2.default.string.isRequired, isEditing: _propTypes2.default.bool, + isTextarea: _propTypes2.default.bool, labelClassName: _propTypes2.default.string, labelId: _propTypes2.default.string, @@ -592,6 +622,8 @@ EditableLabel.propTypes = { inputId: _propTypes2.default.string, inputBorderWidth: _propTypes2.default.string, + textareaCols: _propTypes2.default.number, + onFocus: _propTypes2.default.func, onFocusOut: _propTypes2.default.func }; diff --git a/src/main.jsx b/src/main.jsx index d1fa16f..14a2c33 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -6,68 +6,94 @@ export default class EditableLabel extends React.Component { super(props); this.state = { - isEditing: this.props.isEditing || false, - text: this.props.text || "", + isEditing: this.props.isEditing || false, + text: this.props.text || "", + isTextarea: this.props.isTextarea || false }; - + this._handleFocus = this._handleFocus.bind(this); this._handleChange = this._handleChange.bind(this); } - + _handleFocus(event) { - if(this.state.isEditing) { - if(typeof this.props.onFocusOut === 'function') { - this.props.onFocusOut(this.state.text, event); + if (this.state.isEditing) { + if (typeof this.props.onFocusOut === 'function') { + this.props.onFocusOut(this.state.text, event); } } else { - if(typeof this.props.onFocus === 'function') { - this.props.onFocus(this.state.text, event); + if (typeof this.props.onFocus === 'function') { + this.props.onFocus(this.state.text, event); } } - - this.setState({ - isEditing: !this.state.isEditing, + + this.setState({ + isEditing: !this.state.isEditing, }); } - + _handleChange() { - this.setState({ - text: this.textInput.value, + this.setState({ + text: this.textInput.value, }); } render() { - if(this.state.isEditing) { - return
- + +
+ } + + return
+ { this.textInput = input; }} - value={this.state.text} + value={this.state.text} onChange={this._handleChange} onBlur={this._handleFocus} - style={{ - width: this.props.inputWidth, + style={{ + width: this.props.inputWidth, height: this.props.inputHeight, fontSize: this.props.inputFontSize, fontWeight: this.props.inputFontWeight, borderWidth: this.props.inputBorderWidth, - + }} maxLength={this.props.inputMaxLength} placeholder={this.props.inputPlaceHolder} tabIndex={this.props.inputTabIndex} - autoFocus/> -
+ autoFocus /> +
} - + return