knk/lib/components/basic/view/ajax_tip_popover.js

react components based on react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
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 _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _antd = require("antd");
var _api = require("../../../common/api");
var _tool = require("../../../common/tool");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/**
 * 异步弹窗提示控件
 */
var AjaxTipPopover = /*#__PURE__*/function (_Component) {
  (0, _inherits2.default)(AjaxTipPopover, _Component);
  var _super = (0, _createSuper2.default)(AjaxTipPopover);
  function AjaxTipPopover() {
    var _this;
    (0, _classCallCheck2.default)(this, AjaxTipPopover);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _super.call.apply(_super, [this].concat(args));
    _this.state = {
      loading: false,
      popoverData: {} // 提示弹窗数据
    };
    // 查询展示信息
    _this.getData = function () {
      var _this$props = _this.props,
        apiPath = _this$props.apiPath,
        apiData = _this$props.apiData,
        apiMethod = _this$props.apiMethod;
      if (!apiPath) return;
      _this.setState({
        loading: true
      });
      (0, _api.fetch)(apiPath, apiData, apiMethod).then(function (data) {
        _this.setState({
          loading: false,
          popoverData: data.data || {}
        });
      }).catch(function (err) {
        _tool.log.error(err);
        _this.setState({
          loading: true
        });
        _antd.message.error('获取失败:' + err.message);
      });
    };
    return _this;
  }
  (0, _createClass2.default)(AjaxTipPopover, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.getData();
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
        iconStyle = _this$props2.iconStyle,
        iconProps = _this$props2.iconProps,
        popoverProps = _this$props2.popoverProps,
        titleFieldName = _this$props2.titleFieldName,
        contentFieldName = _this$props2.contentFieldName;
      var _this$state = this.state,
        popoverData = _this$state.popoverData,
        loading = _this$state.loading;
      return /*#__PURE__*/_react.default.createElement(_antd.Spin, {
        spinning: loading
      },
      // 判断有值才显示
      popoverData[titleFieldName] && popoverData[contentFieldName] ? /*#__PURE__*/_react.default.createElement(_antd.Popover, (0, _extends2.default)({}, popoverProps, {
        title: popoverData[titleFieldName] || '',
        content: /*#__PURE__*/_react.default.createElement("div", {
          dangerouslySetInnerHTML: {
            __html: popoverData[contentFieldName] ? (0, _tool.HTMLDecode)(popoverData[contentFieldName]) : ''
          }
        })
      }), /*#__PURE__*/_react.default.createElement(_antd.Icon, (0, _extends2.default)({}, iconProps, {
        style: iconStyle
      }))) : null);
    }
  }]);
  return AjaxTipPopover;
}(_react.Component);
AjaxTipPopover.defaultProps = {
  apiData: {},
  popoverProps: {
    trigger: "click",
    placement: "top"
  },
  iconProps: {
    type: 'question-circle',
    theme: 'filled'
  },
  iconStyle: {
    fontSize: '20px',
    color: '#1890ff'
  },
  titleFieldName: 'consultTitle',
  contentFieldName: 'guideDetail'
};
AjaxTipPopover.propTypes = {
  apiPath: _propTypes.default.string.isRequired,
  // API接口
  apiData: _propTypes.default.object,
  // api请求附加的数据
  apiMethod: _propTypes.default.string,
  // api请求method
  titleFieldName: _propTypes.default.string,
  // 提示标题字段名称
  contentFieldName: _propTypes.default.string,
  // 提示内容字段名称
  popoverProps: _propTypes.default.object,
  // 提示组件props
  iconProps: _propTypes.default.object,
  // 图标Porps
  iconStyle: _propTypes.default.object // 图标样式
};
var _default = exports.default = AjaxTipPopover;