"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _react = require("react");
var EditablePane = /*#__PURE__*/function (_Component) {
  (0, _inheritsLoose2["default"])(EditablePane, _Component);
  function EditablePane(props) {
    var _this;
    _this = _Component.call(this, props) || this;
    _this.onKeyDown = function (e) {
      var keyCode = e.keyCode;
      // Stop bubble up the events of keyUp, keyDown, keyLeft, and keyRight
      if (keyCode > 36 && keyCode < 41) {
        e.stopPropagation();
      }
    };
    _this.onBlur = function (e) {
      _this.setState({
        // editable: false,
        // editable: true,
        cellTitle: e.target.value
      });
      _this.props.fn(e.target.value);
    };
    _this.onDblClick = function () {
      _this.setState({
        editable: true
      });
    };
    _this.state = {
      cellTitle: props.defaultTitle,
      kinds: props.kinds,
      editable: true
    };
    return _this;
  }

  // eslint-disable-next-line react/no-deprecated
  var _proto = EditablePane.prototype;
  _proto.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
    if (nextProps.defaultTitle !== this.state.cellTitle) {
      this.setState({
        cellTitle: nextProps.defaultTitle
      });
    }
  };
  _proto.render = function render() {
    var _this$state = this.state,
      cellTitle = _this$state.cellTitle,
      editable = _this$state.editable,
      kinds = _this$state.kinds;
    if (kinds === "1") {
      if (editable) {
        return /*#__PURE__*/React.createElement(_input["default"], {
          autoFocus: true,
          defaultValue: cellTitle,
          onKeyDown: this.onKeyDown,
          onBlur: this.onBlur
        });
      }
      return /*#__PURE__*/React.createElement("span", {
        onDoubleClick: this.onDblClick
      }, cellTitle);
    } else {
      if (editable) {
        return /*#__PURE__*/React.createElement(_input["default"], {
          innerAfter: "%",
          autoFocus: true,
          defaultValue: cellTitle,
          onKeyDown: this.onKeyDown,
          onBlur: this.onBlur
        });
      }
      return /*#__PURE__*/React.createElement("span", {
        onDoubleClick: this.onDblClick
      }, cellTitle);
    }
  };
  return EditablePane;
}(_react.Component);
exports["default"] = EditablePane;