react-sane-contenteditable - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

lib/index.js

@@ -19,2 +19,4 @@ 'use strict';
 
+var _lodash = require('lodash');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,2 +32,12 @@
 
+var propTypes = {
+  content: _propTypes2.default.string,
+  editable: _propTypes2.default.bool,
+  maxLength: _propTypes2.default.number,
+  mode: _propTypes2.default.oneOf(['plaintext', 'html']),
+  multiLine: _propTypes2.default.bool,
+  onChange: _propTypes2.default.func,
+  tagName: _propTypes2.default.string
+};
+
 var ContentEditable = function (_Component) {
@@ -47,3 +59,3 @@ _inherits(ContentEditable, _Component);
       var method = _this.getInnerMethod();
-      var value = _this.refs.element[method];
+      var value = _this._element[method];
 
@@ -70,3 +82,3 @@ _this.props.onChange(ev, value);
       var method = _this.getInnerMethod();
-      var value = _this.refs.element[method];
+      var value = _this._element[method];
 
@@ -90,3 +102,3 @@ // keyCode 13 === return key
       var method = this.getInnerMethod();
-      return nextProps.content !== this.refs.element[method];
+      return nextProps.content !== this._element[method];
     }
@@ -109,3 +121,3 @@ }, {
       // replace encoded spaces
-      var value = this.refs.element[method].replace(/ /g, ' ');
+      var value = this._element[method].replace(/ /g, ' ');
 
@@ -127,2 +139,4 @@ if (multiLine) {
     value: function render() {
+      var _this2 = this;
+
       var _props2 = this.props,
@@ -134,4 +148,6 @@ Element = _props2.tagName,
 
-      return _react2.default.createElement(Element, _extends({}, props, {
-        ref: 'element',
+      return _react2.default.createElement(Element, _extends({}, (0, _lodash.omit)(props, Object.keys(propTypes)), {
+        ref: function ref(c) {
+          _this2._element = c;
+        },
         style: _extends({ whiteSpace: 'pre-wrap' }, props.style),
@@ -151,11 +167,3 @@ contentEditable: editable,
 
-ContentEditable.propTypes = {
-  content: _propTypes2.default.string,
-  editable: _propTypes2.default.bool,
-  maxLength: _propTypes2.default.number,
-  mode: _propTypes2.default.oneOf(['plaintext', 'html']),
-  multiLine: _propTypes2.default.bool,
-  onChange: _propTypes2.default.func,
-  tagName: _propTypes2.default.string
-};
+ContentEditable.propTypes = propTypes;
 ContentEditable.defaultProps = {
@@ -162,0 +170,0 @@ editable: true,

package.json

 {
   "name": "react-sane-contenteditable",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "React component with sane defaults to make any element contentEditable",
@@ -16,2 +16,3 @@ "main": "lib/index.js",
   "dependencies": {
+    "lodash": "^4.17.4",
     "prop-types": "^15.6.0",
@@ -18,0 +19,0 @@ "react": "^15.4.2"

src/react-sane-contenteditable.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { omit } from 'lodash';
 
+const propTypes = {
+  content: PropTypes.string,
+  editable: PropTypes.bool,
+  maxLength: PropTypes.number,
+  mode: PropTypes.oneOf(['plaintext', 'html']),
+  multiLine: PropTypes.bool,
+  onChange: PropTypes.func,
+  tagName: PropTypes.string,
+}
+
 export default class ContentEditable extends Component {
-  static propTypes = {
-    content: PropTypes.string,
-    editable: PropTypes.bool,
-    maxLength: PropTypes.number,
-    mode: PropTypes.oneOf(['plaintext', 'html']),
-    multiLine: PropTypes.bool,
-    onChange: PropTypes.func,
-    tagName: PropTypes.string,
-  }
+  static propTypes = propTypes;
 
@@ -25,3 +28,3 @@ static defaultProps = {
     const method = this.getInnerMethod();
-    return nextProps.content !== this.refs.element[method];
+    return nextProps.content !== this._element[method];
   }
@@ -36,3 +39,3 @@
     const method = this.getInnerMethod();
-    const value = this.refs.element[method];
+    const value = this._element[method];
 
@@ -46,5 +49,5 @@ this.props.onChange(ev, value);
     const method = this.getInnerMethod();
-    
+
     // replace encoded spaces
-    let value = this.refs.element[method].replace(/ /g, ' ');
+    let value = this._element[method].replace(/ /g, ' ');
 
@@ -84,3 +87,3 @@ if (multiLine) {
     const method = this.getInnerMethod();
-    const value = this.refs.element[method];
+    const value = this._element[method];
 
@@ -104,4 +107,4 @@ // keyCode 13 === return key
       <Element
-        {...props}
-        ref="element"
+        {...omit(props, Object.keys(propTypes))}
+        ref={c => { this._element = c; }}
         style={{ whiteSpace: 'pre-wrap', ...props.style }}
@@ -108,0 +111,0 @@ contentEditable={editable}

No alert changes

Improved metrics

Total package byte prevSize

81850

increased by0.32%

Lines of code

253

increased by2.85%

Worsened metrics

Dependency count

3

increased by50%

Dependency changes

• + Addedlodash@^4.17.4

• + Addedlodash@4.17.21(transitive)