ming-demo3/lib/components/meta/TitleTips.js

mdf metaui web

"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 _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

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

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

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

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

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

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

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

var _baseui = require("@mdf/baseui");

var _reactDom = require("react-dom");

var _carousel = _interopRequireDefault(require("../basic/carousel"));

var _SvgIcon = _interopRequireDefault(require("@mdf/metaui-web/lib/components/common/SvgIcon"));

var TitleTips = function (_Component) {
  (0, _inherits2["default"])(TitleTips, _Component);

  function TitleTips(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, TitleTips);
    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(TitleTips).call(this, props));
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleCancel", function (e) {
      _this.setState({
        showIndex: -1
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "showModal", function (index) {
      _this.setState({
        showIndex: index
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleBodyClick", function (e) {
      if (_this.contains(_this.refs.spanelem, e.target) || _this.contains(_this.refs.ielem, e.target)) return;
      if (e.target && cb.dom((0, _reactDom.findDOMNode)(e.target)).parents('.ant-title-tips-popover').length) return;
      document.body.removeEventListener('click', _this.handleBodyClick);
      var popoverVisible = _this.state.popoverVisible;
      popoverVisible = popoverVisible.map(function (v) {
        return false;
      });

      _this.setState({
        popoverVisible: popoverVisible
      });
    });

    var _popoverVisible = _this.props.config.length ? _this.props.config.map(function (v) {
      return false;
    }) : [];

    _this.state = {
      showIndex: null,
      popoverVisible: _popoverVisible
    };
    return _this;
  }

  (0, _createClass2["default"])(TitleTips, [{
    key: "handleEnter",
    value: function handleEnter() {
      this.setState({
        "icon": 'wenhaolveguo'
      });
    }
  }, {
    key: "handelChange",
    value: function handelChange(visible) {
      if (!visible) {
        this.setState({
          "icon": 'wenhaomoren'
        });
      }
    }
  }, {
    key: "handelPopoverClick",
    value: function handelPopoverClick(index, e) {
      e.nativeEvent.stopImmediatePropagation();
      e.nativeEvent.stopPropagation();
      var popoverVisible = this.state.popoverVisible;
      popoverVisible[index] = !popoverVisible[index];
      this.state.popoverVisible = popoverVisible;
      this.setState({});
    }
  }, {
    key: "getPopover",
    value: function getPopover(value, index) {
      var _this2 = this;

      var popoverConfig = {
        placement: 'bottom',
        overlayClassName: value.overlayClassName,
        title: value.title,
        arrowPointAtCenter: true,
        autoAdjustOverflow: false,
        mouseEnterDelay: 0.1
      };
      return value.trigger == 'hover' ? _react["default"].createElement("strong", null, _react["default"].createElement("span", {
        className: "title-adds"
      }, value.config.title), _react["default"].createElement(_baseui.Popover, (0, _extends2["default"])({}, popoverConfig, {
        content: _react["default"].createElement(_carousel["default"], {
          config: value.config
        }),
        onMouseEnter: function onMouseEnter() {
          return _this2.handleEnter(index);
        },
        onVisibleChange: function onVisibleChange() {
          return _this2.handelChange;
        },
        trigger: "hover"
      }), _react["default"].createElement("i", {
        className: "anticon icon-" + value.icon
      }))) : _react["default"].createElement("strong", null, _react["default"].createElement(_baseui.Popover, (0, _extends2["default"])({}, popoverConfig, {
        visible: this.state.popoverVisible[index],
        content: _react["default"].createElement(_carousel["default"], {
          config: value.config
        })
      }), _react["default"].createElement("span", {
        ref: "spanelem",
        className: "title-adds",
        onClick: function onClick(e) {
          return _this2.handelPopoverClick(index, e);
        }
      }, value.config.title)), _react["default"].createElement("i", {
        ref: "ielem",
        onClick: function onClick(e) {
          return _this2.handelPopoverClick(index, e);
        },
        className: "anticon icon-" + value.icon
      }));
    }
  }, {
    key: "contains",
    value: function contains(elem, target) {
      if (elem === target) return true;
      if (!elem || !elem.children || !elem.children.length) return false;

      for (var i = 0, len = elem.children.length; i < len; i++) {
        if (this.contains(elem.children[i], target)) return true;
      }

      return false;
    }
  }, {
    key: "getModel",
    value: function getModel(value, index) {
      var _this3 = this;

      return _react["default"].createElement("span", null, value.trigger === 'hover' ? _react["default"].createElement(_SvgIcon["default"], {
        type: value.icon,
        style: {
          'cursor': 'pointer'
        },
        onClick: function onClick() {
          return _this3.showModal(index);
        }
      }) : _react["default"].createElement(_SvgIcon["default"], {
        type: value.icon,
        style: {
          'cursor': 'pointer'
        },
        onMouseEnter: function onMouseEnter() {
          return _this3.showModal(index);
        }
      }), _react["default"].createElement(_baseui.Modal, {
        title: "Basic Modal",
        visible: this.state.showIndex == index,
        onOk: this.handleCancel,
        onCancel: this.handleCancel
      }, _react["default"].createElement(_carousel["default"], {
        config: value.config
      })));
    }
  }, {
    key: "render",
    value: function render() {
      var _this4 = this;

      document.body.addEventListener('click', this.handleBodyClick);
      var config = this.props.config;
      if (!config.length) return null;
      return _react["default"].createElement("span", {
        className: "titleType"
      }, config.map(function (value, index) {
        return value.type === 'popover' ? _this4.getPopover(value, index) : _this4.getModel(value, index);
      }));
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {}
  }]);
  return TitleTips;
}(_react.Component);

exports["default"] = TitleTips;
//# sourceMappingURL=TitleTips.js.map