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

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

import _Icon from "@alifd/next/es/icon";
import _Input from "@alifd/next/es/input";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import './EditableTabPane.scss';

var EditableTabPane = /*#__PURE__*/function (_Component) {
  _inheritsLoose(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.createElement("div", {
        className: "editable-tab-wrapper-edit"
      }, /*#__PURE__*/React.createElement(_Input, {
        ref: function ref(node) {
          return _this2.input = node;
        },
        size: "small",
        defaultValue: tabTitle,
        onKeyDown: this.onKeyDown,
        onBlur: this.onBlur
      }));
    }

    return /*#__PURE__*/React.createElement("div", {
      className: "editable-tab-wrapper"
    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
      className: "tab-label",
      onDoubleClick: this.onDblClick
    }, tabTitle), isEditModel && closeable ? /*#__PURE__*/React.createElement(_Icon, {
      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;
}(Component);

EditableTabPane.propTypes = {
  /**
   * 默认标题
   */
  defaultTitle: PropTypes.string,

  /**
   * 是否可关闭
   * */
  closeable: PropTypes.bool,

  /**
   * 关闭回调
   */
  onClose: PropTypes.func,

  /**
   * 修改名称回调
   */
  onChange: PropTypes.func,

  /**
   * 是否编辑模式
   */
  isEditModel: PropTypes.bool
};
export default EditableTabPane;