A React component that allows single and multiline in-place edits. 

sokratis

react-pencil

Object.defineProperty(exports, "__esModule", {

var _react2 = _interopRequireDefault(_react);

var _autosizeInput = require('autosize-input');

var _autosizeInput2 = _interopRequireDefault(_autosizeInput);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

var Component = _react2.default.Component,

    PropTypes = _react2.default.PropTypes;

  tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

  if (el && el.tagName.toLowerCase().match(/input|textarea/)) {

    var selection = window.getSelection();

    var _this = _possibleConstructorReturn(this, (Singleline.__proto__ || Object.getPrototypeOf(Singleline)).call(this));

    value: function componentDidMount() {

    value: function componentDidUpdate() {

    value: function componentWillUnmount() {

        window.clearTimeout(this._delayedFocus);

    value: function componentWillReceiveProps(_ref2) {

      return _react2.default.createElement(

          wrapperClassname = _props4.wrapperClassname,

          onEditDone = _props4.onEditDone,

          rest = _objectWithoutProperties(_props4, ['multiline', 'pencil', 'error', 'wrapperClassname', 'onEditDone']);

      var Component = multiline ? Multiline : Singleline;

        { className: 'react-pencil' + (wrapperClassname ? ' ' + wrapperClassname : '') + (error ? ' error' : '') },

        _react2.default.createElement(Component, _extends({ ref: 'editable' }, rest, { finishEdit: this.finishEdit.bind(this) })),

        pencil ? this.renderPencilButton() : null,

          _react2.default.createElement(Component, _extends({ ref: 'editable' }, rest, { finishEdit: this.finishEdit.bind(this) })),

          pencil ? this.renderPencilButton() : null

        error ? this.renderError(error) : null

  "description": "A React component that allows single and multiline in-place edits.",

    "test": "echo \"Error: no test specified\" && exit 1",

    "prebuild": "rm -f dist/react-pencil.js",

    "build": "babel src/react-pencil.jsx --out-file dist/react-pencil.js",

    "postbuild": "rm -f example/index.js; webpack example/index.jsx example/index.js",

    "url": "https://github.com/SokratisVidros/react-pencil.git"

    "babel-plugin-transform-object-rest-spread": "6.8.0",

    "url": "https://github.com/SokratisVidros/react-pencil/issues"

  "homepage": "https://github.com/SokratisVidros/react-pencil",

import autosizeInput from 'autosize-input';

    const range = document.createRange();

    const selection = window.getSelection();

      window.clearTimeout(this._delayedFocus);

    this._delayedFocus = window.setTimeout(() => {

      moveCursorToEnd(this.refs.content);

    if (e.keyCode === 27 || e.keyCode === 13) {

    this.props.finishEdit(this.state.value);

    this.setState({value: e.target.value});

    const {name, value, style, finishEdit, ...rest} = this.props;

    return <span className='error-msg'>{error}</span>

    return <div className='error-msg'>{error}</div>

    const {multiline, pencil, error, wrapperClassname, onEditDone, ...rest} = this.props;

    const Component = multiline ? Multiline : Singleline;

        {pencil ? this.renderPencilButton() : null}

          {pencil ? this.renderPencilButton() : null}

        {error ? this.renderError(error) : null}

		{
		"name": "react-pencil",
		"version": "1.0.5",
		"version": "1.0.6",
		"description": "A React component that allows single and multiline in-place edits.",
		@@ -5,0 +5,0 @@ "main": "dist/react-pencil.js",

		@@ -319,3 +319,3 @@ 'use strict';
		return _react2.default.createElement(
		'span',
		'div',
		{ className: 'error-msg' },
		@@ -340,4 +340,8 @@ error
		{ className: 'react-pencil' + (wrapperClassname ? ' ' + wrapperClassname : '') + (error ? ' error' : '') },
		_react2.default.createElement(Component, _extends({ ref: 'editable' }, rest, { finishEdit: this.finishEdit.bind(this) })),
		pencil ? this.renderPencilButton() : null,
		_react2.default.createElement(
		'div',
		{ className: 'input-field' },
		_react2.default.createElement(Component, _extends({ ref: 'editable' }, rest, { finishEdit: this.finishEdit.bind(this) })),
		pencil ? this.renderPencilButton() : null
		),
		error ? this.renderError(error) : null
		@@ -344,0 +348,0 @@ );

		@@ -220,3 +220,3 @@ import React from 'react';
		renderError(error) {
		return <span className='error-msg'>{error}</span>
		return <div className='error-msg'>{error}</div>
		}
		@@ -229,4 +229,6 @@
		<div className={`react-pencil${wrapperClassname ? ' ' + wrapperClassname : ''}${error ? ' error' : ''}`}>
		<Component ref='editable' {...rest} finishEdit={this.finishEdit.bind(this)}/>
		{pencil ? this.renderPencilButton() : null}
		<div className='input-field'>
		<Component ref='editable' {...rest} finishEdit={this.finishEdit.bind(this)}/>
		{pencil ? this.renderPencilButton() : null}
		</div>
		{error ? this.renderError(error) : null}
		@@ -233,0 +235,0 @@ </div>

Improved metrics