react-pencil - npm Package Compare versions

Comparing version 1.0.7 to 1.0.8

dist/react-pencil.js

@@ -78,2 +78,5 @@ 'use strict';
     _this.state = { value: value };
+    _this.onBlur = _this.onBlur.bind(_this);
+    _this.onKeyUp = _this.onKeyUp.bind(_this);
+    _this.onChange = _this.onChange.bind(_this);
     return _this;
@@ -122,3 +125,3 @@ }
         moveCursorToEnd(_this2.refs.content);
-        _this2.refs.content.focus();
+        _this2.content.focus();
       }, 110);
@@ -129,3 +132,3 @@ }
     value: function blur() {
-      this.refs.content.blur();
+      this.content.blur();
     }
@@ -152,2 +155,4 @@ }, {
     value: function render() {
+      var _this3 = this;
+
       var _props = this.props,
@@ -161,3 +166,5 @@ name = _props.name,
       return _react2.default.createElement('input', _extends({ type: 'text',
-        ref: 'content',
+        ref: function ref(el) {
+          return _this3.content = el;
+        },
         name: name,
@@ -167,5 +174,5 @@ autoComplete: 'off',
         style: style,
-        onBlur: this.onBlur.bind(this),
-        onKeyUp: this.onKeyUp.bind(this),
-        onChange: this.onChange.bind(this)
+        onBlur: this.onBlur,
+        onKeyUp: this.onKeyUp,
+        onChange: this.onChange
       }, rest));
@@ -186,6 +193,12 @@ }
 
-  function Multiline() {
+  function Multiline(props) {
     _classCallCheck(this, Multiline);
 
-    return _possibleConstructorReturn(this, (Multiline.__proto__ || Object.getPrototypeOf(Multiline)).apply(this, arguments));
+    var _this4 = _possibleConstructorReturn(this, (Multiline.__proto__ || Object.getPrototypeOf(Multiline)).call(this, props));
+
+    _this4.onFocus = _this4.onFocus.bind(_this4);
+    _this4.onBlur = _this4.onBlur.bind(_this4);
+    _this4.onClick = _this4.onClick.bind(_this4);
+    _this4.onKeyDown = _this4.onKeyDown.bind(_this4);
+    return _this4;
   }
@@ -197,3 +210,3 @@
       this._wasClicked = true;
-      this.refs.content.focus();
+      this.content.focus();
     }
@@ -203,3 +216,3 @@ }, {
     value: function blur() {
-      this.refs.content.blur();
+      this.content.blur();
     }
@@ -209,3 +222,3 @@ }, {
     value: function selectAll() {
-      var _this4 = this;
+      var _this5 = this;
 
@@ -215,3 +228,3 @@ if (document && typeof document.execCommand === 'function') {
         setTimeout(function () {
-          if (!_this4._wasClicked) {
+          if (!_this5._wasClicked) {
             document.execCommand('selectAll', false, null);
@@ -252,3 +265,3 @@ }
       if (!this.props.value) {
-        this.refs.contentinnerHTML = '';
+        this.content.innerHTML = '';
       }
@@ -259,2 +272,4 @@ }
     value: function render() {
+      var _this6 = this;
+
       var _props2 = this.props,
@@ -266,9 +281,11 @@ value = _props2.value,
 
-      return _react2.default.createElement('span', _extends({ ref: 'content',
+      return _react2.default.createElement('span', _extends({ ref: function ref(el) {
+          _this6.content = el;
+        },
         contentEditable: 'true',
         style: style,
-        onFocus: this.onFocus.bind(this),
-        onBlur: this.onBlur.bind(this),
-        onClick: this.onClick.bind(this),
-        onKeyDown: this.onKeyDown.bind(this),
+        onFocus: this.onFocus,
+        onBlur: this.onBlur,
+        onClick: this.onClick,
+        onKeyDown: this.onKeyDown,
         dangerouslySetInnerHTML: { __html: value || null }
@@ -290,6 +307,9 @@ }, rest));
 
-  function ReactPencil() {
+  function ReactPencil(props) {
     _classCallCheck(this, ReactPencil);
 
-    return _possibleConstructorReturn(this, (ReactPencil.__proto__ || Object.getPrototypeOf(ReactPencil)).apply(this, arguments));
+    var _this7 = _possibleConstructorReturn(this, (ReactPencil.__proto__ || Object.getPrototypeOf(ReactPencil)).call(this, props));
+
+    _this7.finishEdit = _this7.finishEdit.bind(_this7);
+    return _this7;
   }
@@ -300,3 +320,3 @@
     value: function focus() {
-      this.refs.editable.focus();
+      this.editable.focus();
     }
@@ -318,3 +338,3 @@ }, {
       if (multiline) {
-        this.refs.editable.ensureEmptyContent();
+        this.editable.ensureEmptyContent();
       }
@@ -325,3 +345,3 @@ }
     value: function renderPencilButton() {
-      var _this6 = this;
+      var _this8 = this;
 
@@ -331,3 +351,3 @@ return _react2.default.createElement(
         { className: 'pencil-button', onClick: function onClick() {
-            return _this6.focus();
+            return _this8.focus();
           } },
@@ -364,3 +384,3 @@ _react2.default.createElement('i', { className: 'pencil-icon' })
           { className: 'input-field' },
-          _react2.default.createElement(Component, _extends({ ref: 'editable' }, rest, { finishEdit: this.finishEdit.bind(this) })),
+          _react2.default.createElement(Component, _extends({ ref: el = this.editable = el }, rest, { finishEdit: this.finishEdit })),
           pencil ? this.renderPencilButton() : null
@@ -367,0 +387,0 @@ ),

package.json

 {
   "name": "react-pencil",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "A React component that allows single and multiline in-place edits.",
@@ -33,9 +33,9 @@ "main": "dist/react-pencil.js",
     "babel-preset-react": "6.5.0",
-    "prop-types": "^15.5.10",
-    "react": "~15.2.1",
-    "react-dom": "~15.2.1",
+    "prop-types": "^15.6.0",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
     "webpack": "1.13.1"
   },
   "peerDependencies": {
-    "react": "^0.14.6 || 15.x.x"
+    "react": "^0.14.6 || 15.x.x || 16.x.x"
   },
@@ -42,0 +42,0 @@ "author": "Sokratis Vidros",

src/react-pencil.jsx

@@ -45,2 +45,5 @@ import PropTypes from 'prop-types';
     this.state = {value};
+    this.onBlur = this.onBlur.bind(this);
+    this.onKeyUp = this.onKeyUp.bind(this);
+    this.onChange = this.onChange.bind(this);
   }
@@ -77,3 +80,3 @@
       moveCursorToEnd(this.refs.content);
-      this.refs.content.focus();
+      this.content.focus();
     }, 110);
@@ -83,3 +86,3 @@ }
   blur() {
-    this.refs.content.blur();
+    this.content.blur();
   }
@@ -105,3 +108,3 @@
       <input type='text'
-             ref='content'
+             ref={el => (this.content = el)}
              name={name}
@@ -111,5 +114,5 @@ autoComplete='off'
              style={style}
-             onBlur={this.onBlur.bind(this)}
-             onKeyUp={this.onKeyUp.bind(this)}
-             onChange={this.onChange.bind(this)}
+             onBlur={this.onBlur}
+             onKeyUp={this.onKeyUp}
+             onChange={this.onChange}
              {...rest}
@@ -129,9 +132,17 @@ />
 
+  constructor(props) {
+    super(props);
+    this.onFocus= this.onFocus.bind(this);
+    this.onBlur= this.onBlur.bind(this);
+    this.onClick= this.onClick.bind(this);
+    this.onKeyDown= this.onKeyDown.bind(this);
+  }
+
   focus() {
     this._wasClicked = true;
-    this.refs.content.focus();
+    this.content.focus();
   }
 
   blur() {
-    this.refs.content.blur();
+    this.content.blur();
   }
@@ -174,3 +185,3 @@
     if (!this.props.value) {
-      this.refs.contentinnerHTML = '';
+      this.content.innerHTML = '';
     }
@@ -182,9 +193,9 @@ }
     return (
-      <span ref='content'
+      <span ref={el => {this.content = el}}
             contentEditable='true'
             style={style}
-            onFocus={this.onFocus.bind(this)}
-            onBlur={this.onBlur.bind(this)}
-            onClick={this.onClick.bind(this)}
-            onKeyDown={this.onKeyDown.bind(this)}
+            onFocus={this.onFocus}
+            onBlur={this.onBlur}
+            onClick={this.onClick}
+            onKeyDown={this.onKeyDown}
             dangerouslySetInnerHTML={{__html: value || null}}
@@ -205,5 +216,9 @@ {...rest}
 class ReactPencil extends Component {
+  constructor(props) {
+    super(props);
+    this.finishEdit = this.finishEdit.bind(this)
+  }
 
   focus() {
-    this.refs.editable.focus();
+    this.editable.focus();
   }
@@ -219,3 +234,3 @@
     if (multiline) {
-      this.refs.editable.ensureEmptyContent();
+      this.editable.ensureEmptyContent();
     }
@@ -242,3 +257,3 @@ }
         <div className='input-field'>
-          <Component ref='editable' {...rest} finishEdit={this.finishEdit.bind(this)}/>
+          <Component ref={el = (this.editable = el)} {...rest} finishEdit={this.finishEdit}/>
           {pencil ? this.renderPencilButton() : null}
@@ -245,0 +260,0 @@ </div>

No alert changes

Worsened metrics

Total package byte prevSize

773940

decreased by-3.09%

Number of package files

11

decreased by-8.33%

Lines of code

19800

decreased by-2.93%

No dependency changes