@riil-frontend/component-page-creater/lib/components/edit-layout/EditableTabPane.js

page creater components,include components list,component attribute panel and page canvas

"use strict";

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

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

exports.__esModule = true;
exports["default"] = void 0;

var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));

var _input = _interopRequireDefault(require("@alifd/next/lib/input"));

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

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

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

require("./EditableTabPane.scss");

var EditableTabPane = /*#__PURE__*/function (_Component) {
  (0, _inheritsLoose2["default"])(EditableTabPane, _Component);

  function EditableTabPane(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();
      }

      if (keyCode === 13) {
        _this.onBlur(e);
      }
    };

    _this.onBlur = function (e) {
      _this.setState({
        editable: false //   tabTitle: e.target.value,

      });

      _this.props.onChange && _this.props.onChange(e.target.value);
    };

    _this.onDblClick = function () {
      if (!_this.props.isEditModel) {
        return;
      }

      _this.setState({
        editable: true
      }, function () {
        _this.input && _this.input.focus();
      });
    };

    _this.state = {
      tabTitle: props.defaultTitle,
      editable: false
    };
    return _this;
  }

  EditableTabPane.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.defaultTitle !== prevState.tabTitle) {
      return {
        tabTitle: nextProps.defaultTitle
      };
    } else {
      return null;
    }
  };

  var _proto = EditableTabPane.prototype;

  _proto.componentDidUpdate = function componentDidUpdate(preProp, preState) {
    if (preState.editable || preProp.isNewTab) {
      this.input && this.input.focus();
    }
  };

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

    var _this$state = this.state,
        tabTitle = _this$state.tabTitle,
        editable = _this$state.editable;
    var _this$props = this.props,
        isEditModel = _this$props.isEditModel,
        closeable = _this$props.closeable,
        isNewTab = _this$props.isNewTab;

    if (editable || isNewTab) {
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "editable-tab-wrapper-edit"
      }, /*#__PURE__*/_react["default"].createElement(_input["default"], {
        ref: function ref(node) {
          return _this2.input = node;
        },
        size: "small",
        defaultValue: tabTitle,
        onKeyDown: this.onKeyDown,
        onBlur: this.onBlur
      }));
    }

    return /*#__PURE__*/_react["default"].createElement("div", {
      className: "editable-tab-wrapper"
    }, /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("span", {
      className: "tab-label",
      onDoubleClick: this.onDblClick
    }, tabTitle), isEditModel && closeable ? /*#__PURE__*/_react["default"].createElement(_icon["default"], {
      type: "close",
      title: "\u5220\u9664\u9875\u7B7E",
      size: "medium",
      className: "tabs-tab-close",
      onClick: function onClick(e) {
        e.stopPropagation();
        _this2.props.onClose && _this2.props.onClose();
      }
    }) : null));
  };

  return EditableTabPane;
}(_react.Component);

EditableTabPane.propTypes = {
  /**
   * 默认标题
   */
  defaultTitle: _propTypes["default"].string,

  /**
   * 是否可关闭
   * */
  closeable: _propTypes["default"].bool,

  /**
   * 关闭回调
   */
  onClose: _propTypes["default"].func,

  /**
   * 修改名称回调
   */
  onChange: _propTypes["default"].func,

  /**
   * 是否编辑模式
   */
  isEditModel: _propTypes["default"].bool
};
var _default = EditableTabPane;
exports["default"] = _default;