function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

import React from 'react';
import PropTypes from 'prop-types';
import { omit } from 'lodash';
import { Input } from "./..";
/**
 * @category controls
 * @component editable-textfield
 * @variations collab-ui-react
 */

var EditableTextfield =
/*#__PURE__*/
function (_React$PureComponent) {
  _inheritsLoose(EditableTextfield, _React$PureComponent);

  function EditableTextfield() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
    _this.state = {
      isEditing: false,
      inputText: _this.props.inputText
    };

    _this.componentDidUpdate = function () {
      if (_this.state.isEditing && _this.editText) {
        _this.editText.focus();
      }
    };

    _this.handleDoneEditing = function (value) {
      var handleDoneEditing = _this.props.handleDoneEditing;

      _this.setState({
        isEditing: false,
        inputText: value
      });

      if (handleDoneEditing) {
        handleDoneEditing(value);
      }
    };

    _this.handleClick = function () {
      var disabled = _this.props.disabled;

      if (disabled) {
        return;
      } else {
        _this.setState({
          isEditing: true
        });
      }
    };

    _this.handleKey = function (e) {
      var disabled = _this.props.disabled;
      e.stopPropagation();
      e.preventDefault();

      if (disabled) {
        return;
      } else {
        _this.setState({
          isEditing: true
        });
      }
    };

    _this.handleDoneKeyDown = function (e) {
      if (e.keyCode === 27) {
        _this.setState({
          isEditing: false
        });
      } else if (e.keyCode === 13) {
        _this.handleDoneEditing(e.target.value);
      }
    };

    return _this;
  }

  var _proto = EditableTextfield.prototype;

  _proto.render = function render() {
    var _this2 = this;

    var _this$props = this.props,
        className = _this$props.className,
        props = _objectWithoutProperties(_this$props, ["className"]);

    var _this$state = this.state,
        isEditing = _this$state.isEditing,
        inputText = _this$state.inputText;
    var otherProps = omit(_extends({}, props), ['disabled', 'handleDoneEditing', 'inputText']);
    return React.createElement("div", null, isEditing && React.createElement(Input, _extends({
      className: 'cui-editable-textfield' + ' cui-editable-textfield__editing' + ("" + (className && " " + className || '')),
      inputRef: function inputRef(input) {
        _this2.editText = input;
      },
      defaultValue: inputText,
      onDoneEditing: this.handleDoneEditing,
      onKeyDown: this.handleDoneKeyDown
    }, otherProps)), !isEditing && React.createElement("span", {
      role: "button",
      tabIndex: 0,
      className: 'cui-editable-textfield' + ' cui-editable-textfield__span' + ("" + (className && " " + className || '')),
      onClick: this.handleClick,
      onKeyPress: this.handleKey
    }, inputText));
  };

  return EditableTextfield;
}(React.PureComponent);

EditableTextfield.displayName = 'EditableTextfield';
EditableTextfield.propTypes = {
  /**
   * css class names
   */
  className: PropTypes.string,

  /**
   * optional disable
   */
  disabled: PropTypes.bool,

  /**
   * optional function for blur
   */
  handleDoneEditing: PropTypes.func,

  /**
   * text to be shown
   */
  inputText: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
};
EditableTextfield.defaultProps = {
  className: '',
  disabled: false,
  handleDoneEditing: null,
  inputText: ''
};
export default EditableTextfield;
/**
* @name Default EditableTextfield
* @description default
*
* @category controls
* @component editable-textfield
* @section default
*
* @js

export default class PlaygroundComponent extends React.Component {
  valueChange = (value) => {
    newValue = value;
  }

  render() {
    return (
      <div>
        <div className="docui-example docui-example--spacing" style={{padding: '16px'}}>
          <EditableTextfield inputText='Hello World' handleDoneEditing={(value) => console.log(value)}/>
        </div>
        <div className='cui--dark docs-example--dark' style={{padding: '16px'}}>
          <EditableTextfield inputText='Hello Dark World'/>
        </div>
    </div>
    );
  }
}

**/