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

sokratis

react-pencil

Object.defineProperty(exports, "__esModule", {

var _propTypes2 = _interopRequireDefault(_propTypes);

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;

  finishEdit: _propTypes2.default.func.isRequired,

  placeholder: _propTypes2.default.string,

  tabIndex: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),

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

    var selection = window.getSelection();

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

    _this.onBlur = _this.onBlur.bind(_this);

    _this.onKeyUp = _this.onKeyUp.bind(_this);

    _this.onChange = _this.onChange.bind(_this);

    value: function componentDidMount() {

    value: function componentDidUpdate() {

    value: function componentWillUnmount() {

        window.clearTimeout(this._delayedFocus);

        (0, _autosizeInput2.default)(this.refs.content);

        (0, _autosizeInput2.default)(this.content);

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

        moveCursorToEnd(_this2.refs.content);

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

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

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

          finishEdit = _props.finishEdit,

          rest = _objectWithoutProperties(_props, ['name', 'value', 'style', 'finishEdit']);

      return _react2.default.createElement('input', _extends({ type: 'text',

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

      if (document && typeof document.execCommand === 'function') {

        // Mimic input behavior when navigating to element with TAB key.

            document.execCommand('selectAll', false, null);

      moveCursorToEnd(this.refs.content);

      this.props.finishEdit(e.target.innerText);

    value: function ensureEmptyContent() {

          finishEdit = _props2.finishEdit,

          rest = _objectWithoutProperties(_props2, ['value', 'style', 'finishEdit']);

      return _react2.default.createElement('span', _extends({ ref: function ref(el) {

        dangerouslySetInnerHTML: { __html: value || null }

var ReactPencil = function (_Component3) {

    var _this7 = _possibleConstructorReturn(this, (ReactPencil.__proto__ || Object.getPrototypeOf(ReactPencil)).call(this, props));

    _this7.finishEdit = _this7.finishEdit.bind(_this7);

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

        this.props.onEditDone(name, newValue);

        this.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 ? ' ' + wrapperClassname : '') + (error ? ' error' : '') },

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

          _react2.default.createElement(Component, _extends({ ref: function ref(el) {

              return _this9.editable = el;

            } }, rest, { finishEdit: this.finishEdit })),

          pencil ? this.renderPencilButton() : null

        error ? this.renderError(error) : null

    onEditDone: _propTypes2.default.func,

  "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",

    "react": "^0.14.6 || 15.x.x || 16.x.x"

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

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

import autosizeInput from 'autosize-input';

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

    const range = document.createRange();

    const selection = window.getSelection();

    this.onBlur = this.onBlur.bind(this);

    this.onKeyUp = this.onKeyUp.bind(this);

    this.onChange = this.onChange.bind(this);

      window.clearTimeout(this._delayedFocus);

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

    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;

             ref={el => (this.content = el)}

    this.onFocus= this.onFocus.bind(this);

    this.onClick= this.onClick.bind(this);

    this.onKeyDown= this.onKeyDown.bind(this);

    if (document && typeof document.execCommand === 'function') {

      // Mimic input behavior when navigating to element with TAB key.

          document.execCommand('selectAll', false, null);

    this.props.finishEdit(e.target.innerText);

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

      <span ref={el => {this.content = el}}

      <span ref={el => (this.content = el)}

            dangerouslySetInnerHTML={{__html: value || null}}

    this.finishEdit = this.finishEdit.bind(this)

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

      this.props.onEditDone(name, newValue);

      this.editable.ensureEmptyContent();

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

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

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

    const Component = multiline ? Multiline : Singleline;

          <Component ref={el => (this.editable = el)} {...rest} finishEdit={this.finishEdit}/>

          {pencil ? this.renderPencilButton() : null}

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

		@@ -114,3 +114,3 @@ 'use strict';
		try {
		(0, _autosizeInput2.default)(this.refs.content);
		(0, _autosizeInput2.default)(this.content);
		} catch (ignore) {}
		@@ -124,3 +124,3 @@ }
		this._delayedFocus = window.setTimeout(function () {
		moveCursorToEnd(_this2.refs.content);
		moveCursorToEnd(_this2.content);
		_this2.content.focus();
		@@ -230,3 +230,3 @@ }, 110);
		this.selectAll();
		moveCursorToEnd(this.refs.content);
		moveCursorToEnd(this.content);
		}
		@@ -272,3 +272,3 @@ }, {
		return _react2.default.createElement('span', _extends({ ref: function ref(el) {
		_this6.content = el;
		return _this6.content = el;
		},
		@@ -354,2 +354,4 @@ contentEditable: 'true',
		value: function render() {
		var _this9 = this;

		var _props4 = this.props,
		@@ -370,3 +372,5 @@ multiline = _props4.multiline,
		{ className: 'input-field' },
		_react2.default.createElement(Component, _extends({ ref: el = this.editable = el }, rest, { finishEdit: this.finishEdit })),
		_react2.default.createElement(Component, _extends({ ref: function ref(el) {
		return _this9.editable = el;
		} }, rest, { finishEdit: this.finishEdit })),
		pencil ? this.renderPencilButton() : null
		@@ -373,0 +377,0 @@ ),

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

		@@ -72,3 +72,3 @@ import PropTypes from 'prop-types';
		try {
		autosizeInput(this.refs.content);
		autosizeInput(this.content);
		} catch (ignore) {}
		@@ -79,3 +79,3 @@ }
		this._delayedFocus = window.setTimeout(() => {
		moveCursorToEnd(this.refs.content);
		moveCursorToEnd(this.content);
		this.content.focus();
		@@ -159,3 +159,3 @@ }, 110);
		this.selectAll();
		moveCursorToEnd(this.refs.content);
		moveCursorToEnd(this.content);
		}
		@@ -189,3 +189,3 @@
		return (
		<span ref={el => {this.content = el}}
		<span ref={el => (this.content = el)}
		contentEditable='true'
		@@ -251,3 +251,3 @@ style={style}
		<div className='input-field'>
		<Component ref={el = (this.editable = el)} {...rest} finishEdit={this.finishEdit}/>
		<Component ref={el => (this.editable = el)} {...rest} finishEdit={this.finishEdit}/>
		{pencil ? this.renderPencilButton() : null}
		@@ -254,0 +254,0 @@ </div>

Improved metrics