lowcode-engine/packages/editor-skeleton/es/components/TopPlugin/index.js

import _Balloon from "@alifd/next/es/balloon";
import _Dialog from "@alifd/next/es/dialog";
import _extends from "@babel/runtime/helpers/extends";
import _Badge from "@alifd/next/es/badge";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React, { PureComponent, Fragment } from 'react';
import TopIcon from '../TopIcon';
import './index.scss';

var TopPlugin = /*#__PURE__*/function (_PureComponent) {
  _inheritsLoose(TopPlugin, _PureComponent);

  function TopPlugin(_props, context) {
    var _this;

    _this = _PureComponent.call(this, _props, context) || this;

    _this.handleShow = function () {
      var _this$props = _this.props,
          disabled = _this$props.disabled,
          config = _this$props.config,
          onClick = _this$props.onClick;
      var addonKey = config && config.addonKey;
      if (disabled || !addonKey) return; //考虑到弹窗情况，延时发送消息

      setTimeout(function () {
        return _this.appHelper.emit(addonKey + ".addon.activate");
      }, 0);

      _this.handleOpen();

      onClick && onClick();
    };

    _this.handleClose = function () {
      var addonKey = _this.props.config && _this.props.config.addonKey;
      var currentAddon = _this.appHelper.addons && _this.appHelper.addons[addonKey];

      if (currentAddon) {
        _this.utils.transformToPromise(currentAddon.close()).then(function () {
          _this.setState({
            dialogVisible: false
          });
        });
      }
    };

    _this.handleOpen = function () {
      // todo dialog类型的插件初始时拿不动插件实例
      _this.setState({
        dialogVisible: true
      });
    };

    _this.renderIcon = function (clickCallback) {
      var _this$props2 = _this.props,
          active = _this$props2.active,
          disabled = _this$props2.disabled,
          dotted = _this$props2.dotted,
          locked = _this$props2.locked,
          config = _this$props2.config,
          _onClick = _this$props2.onClick;

      var _ref = config || {},
          pluginKey = _ref.pluginKey,
          props = _ref.props;

      var _ref2 = props || {},
          icon = _ref2.icon,
          title = _ref2.title;

      var node = React.createElement(TopIcon, {
        className: "lowcode-top-addon " + pluginKey,
        active: active,
        disabled: disabled,
        locked: locked,
        icon: icon,
        title: title,
        onClick: function onClick() {
          if (disabled) return; //考虑到弹窗情况，延时发送消息

          setTimeout(function () {
            return _this.appHelper.emit(pluginKey + ".addon.activate");
          }, 0);
          clickCallback && clickCallback();
          _onClick && _onClick();
        }
      });
      return dotted ? React.createElement(_Badge, {
        dot: true
      }, node) : node;
    };

    _this.state = {
      dialogVisible: false
    };
    return _this;
  }

  var _proto = TopPlugin.prototype;

  _proto.componentDidMount = function componentDidMount() {
    var config = this.props.config;
    var pluginKey = config && config.pluginKey; // const appHelper = this.appHelper;
    // if (appHelper && addonKey) {
    //   appHelper.on(`${addonKey}.dialog.show`, this.handleShow);
    //   appHelper.on(`${addonKey}.dialog.close`, this.handleClose);
    // }
  };

  _proto.componentWillUnmount = function componentWillUnmount() {// const { config } = this.props;
    // const addonKey = config && config.addonKey;
    // const appHelper = this.appHelper;
    // if (appHelper && addonKey) {
    //   appHelper.off(`${addonKey}.dialog.show`, this.handleShow);
    //   appHelper.off(`${addonKey}.dialog.close`, this.handleClose);
    // }
  };

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

    var _this$props3 = this.props,
        active = _this$props3.active,
        dotted = _this$props3.dotted,
        locked = _this$props3.locked,
        disabled = _this$props3.disabled,
        config = _this$props3.config,
        editor = _this$props3.editor,
        Comp = _this$props3.pluginClass;

    var _ref3 = config || {},
        pluginKey = _ref3.pluginKey,
        pluginProps = _ref3.pluginProps,
        props = _ref3.props,
        type = _ref3.type;

    var _ref4 = props || {},
        _onClick2 = _ref4.onClick,
        title = _ref4.title;

    var dialogVisible = this.state.dialogVisible;
    if (!pluginKey || !type || !Comp) return null;
    var node = React.createElement(Comp, _extends({
      active: active,
      locked: locked,
      disabled: disabled,
      config: config,
      onClick: function onClick() {
        _onClick2 && _onClick2.call(null, editor);
      }
    }, pluginProps));

    switch (type) {
      case 'LinkIcon':
        return React.createElement("a", props.linkProps, this.renderIcon(function () {
          _onClick2 && _onClick2.call(null, editor);
        }));

      case 'Icon':
        return this.renderIcon(function () {
          _onClick2 && _onClick2.call(null, editor);
        });

      case 'DialogIcon':
        return React.createElement(Fragment, null, this.renderIcon(function () {
          _onClick2 && _onClick2.call(null, editor);

          _this2.handleOpen();
        }), React.createElement(_Dialog, _extends({
          onOk: function onOk() {
            editor.emit(pluginKey + ".dialog.onOk");

            _this2.handleClose();
          },
          onCancel: this.handleClose,
          onClose: this.handleClose,
          title: title
        }, props.dialogProps, {
          visible: dialogVisible
        }), node));

      case 'BalloonIcon':
        return React.createElement(_Balloon, _extends({
          trigger: this.renderIcon(function () {
            _onClick2 && _onClick2.call(null, editor);
          }),
          triggerType: ['click', 'hover']
        }, props.balloonProps), node);

      case 'Custom':
        return dotted ? React.createElement(_Badge, {
          dot: true
        }, node) : node;

      default:
        return null;
    }
  };

  return TopPlugin;
}(PureComponent);

TopPlugin.displayName = 'lowcodeTopPlugin';
TopPlugin.defaultProps = {
  active: false,
  config: {},
  disabled: false,
  dotted: false,
  locked: false,
  onClick: function onClick() {}
};
export { TopPlugin as default };