"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _classnames = _interopRequireDefault(require("classnames"));

var _constants = require("../../constants");

var _Button = _interopRequireDefault(require("../Button"));

var _Input = _interopRequireDefault(require("../Input"));

var _Tooltip = _interopRequireDefault(require("../Tooltip"));

var _Translate = _interopRequireDefault(require("../Translate"));

var _enUS = _interopRequireDefault(require("./locale/en-US"));

// Copyright 1999-2020. Plesk International GmbH. All rights reserved.

/* eslint-disable react/no-deprecated */

/**
 * This component allows users to edit a short text "in place" — in other words, straight in the interface, without
 * opening additional dialog windows. If a text is large enough that it doesn't fit on a single line, you should
 * give users a different way of editing the text.
 * @since 1.8.3
 */
class InPlaceEdit extends _react.Component {
  constructor(...args) {
    super(...args);
    (0, _defineProperty2.default)(this, "state", {
      editing: false,
      draft: ''
    });
    (0, _defineProperty2.default)(this, "handleEdit", () => {
      this.setState(({
        editing
      }) => ({
        editing: !editing,
        draft: editing ? '' : this.props.value
      }));
    });
    (0, _defineProperty2.default)(this, "handleEditKey", event => {
      if (event.key === 'Escape') {
        this.handleEdit();
      } else if (event.key === 'Enter') {
        this.handleEditOk();
      }
    });
    (0, _defineProperty2.default)(this, "handleChange", event => {
      this.setState({
        draft: event.target.value
      });
    });
    (0, _defineProperty2.default)(this, "handleEditOk", () => {
      this.props.onChange(this.state.draft);
      this.handleEdit();
    });
  }

  render() {
    const {
      draft,
      editing
    } = this.state;
    const {
      baseClassName,
      className,
      onChange,
      value,
      ...props
    } = this.props;
    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
      className: (0, _classnames.default)(baseClassName, className)
    }, props), editing ? /*#__PURE__*/_react.default.createElement("div", {
      className: "".concat(baseClassName, "__edit")
    }, /*#__PURE__*/_react.default.createElement(_Input.default, {
      className: "".concat(baseClassName, "__edit-input"),
      value: draft,
      onChange: this.handleChange,
      onKeyDown: this.handleEditKey,
      autoFocus: true
    }), /*#__PURE__*/_react.default.createElement("div", {
      className: "".concat(baseClassName, "__edit-actions")
    }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
      title: /*#__PURE__*/_react.default.createElement(_Translate.default, {
        content: "InPlaceEdit.okButtonHint",
        fallback: _enUS.default.okButtonHint
      })
    }, /*#__PURE__*/_react.default.createElement(_Button.default, {
      ghost: true,
      className: (0, _classnames.default)("".concat(baseClassName, "__control-button"), "".concat(baseClassName, "__control-button--ok")),
      icon: "check-mark",
      onClick: this.handleEditOk
    })), /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
      title: /*#__PURE__*/_react.default.createElement(_Translate.default, {
        content: "InPlaceEdit.cancelButtonHint",
        fallback: _enUS.default.cancelButtonHint
      })
    }, /*#__PURE__*/_react.default.createElement(_Button.default, {
      ghost: true,
      className: (0, _classnames.default)("".concat(baseClassName, "__control-button"), "".concat(baseClassName, "__control-button--cancel")),
      icon: "cross-mark",
      onClick: this.handleEdit
    })))) : value, onChange && !editing && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
      title: /*#__PURE__*/_react.default.createElement(_Translate.default, {
        content: "InPlaceEdit.editButtonHint",
        fallback: _enUS.default.editButtonHint
      })
    }, /*#__PURE__*/_react.default.createElement(_Button.default, {
      ghost: true,
      className: (0, _classnames.default)("".concat(baseClassName, "__control-button"), "".concat(baseClassName, "__control-button--edit")),
      onClick: this.handleEdit,
      icon: {
        name: 'pencil',
        className: "".concat(baseClassName, "__control-button-icon")
      }
    })));
  }

}

InPlaceEdit.propTypes = {
  /**
   * Value of the component.
   * @since 1.8.3
   */
  value: _propTypes.default.node,

  /**
   * Event handler of value change with inline editing form.
   * @since 1.8.3
   */
  onChange: _propTypes.default.func,

  /**
   * @ignore
   */
  className: _propTypes.default.string,

  /**
   * @ignore
   */
  baseClassName: _propTypes.default.string
};
InPlaceEdit.defaultProps = {
  value: null,
  onChange: null,
  className: null,
  baseClassName: "".concat(_constants.CLS_PREFIX, "in-place-edit")
};
var _default = InPlaceEdit;
exports.default = _default;