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() {

        global.clearTimeout(this._delayedFocus);

    value: function componentWillReceiveProps(_ref2) {

    value: function finishEdit(newValue) {

      var newValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';

        this.props.onEditDone(name, newValue);

        this.refs.editable.ensureEmptyContent();

    value: function renderPencilButton() {

      return _react2.default.createElement(

        { className: 'pencil-button', onClick: function onClick() {

        _react2.default.createElement('i', { className: 'pencil-icon' })

          wrapperClassname = _props4.wrapperClassname,

          onEditDone = _props4.onEditDone,

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

      var Component = multiline ? Multiline : Singleline;

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

        _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();

      global.clearTimeout(this._delayedFocus);

    this._delayedFocus = global.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;

    const {value, name, multiline} = this.props;

      this.props.onEditDone(name, newValue);

      this.refs.editable.ensureEmptyContent();

      <button className='pencil-button' onClick={() => this.focus()}>

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

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

    const Component = multiline ? Multiline : Singleline;

        {pencil ? this.renderPencilButton() : null}

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

		@@ -286,3 +286,4 @@ 'use strict';
		key: 'finishEdit',
		value: function finishEdit(newValue) {
		value: function finishEdit() {
		var newValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
		var _props3 = this.props,
		@@ -289,0 +290,0 @@ value = _props3.value,

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

		@@ -199,3 +199,3 @@ import React from 'react';

		finishEdit(newValue) {
		finishEdit(newValue = '') {
		const {value, name, multiline} = this.props;
		@@ -202,0 +202,0 @@ newValue = newValue.trim();

Improved metrics