knk
Version:
react components based on react
123 lines (122 loc) • 3.93 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
/**
* 异步弹窗提示控件
*/
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Spin, message, Popover, Icon } from 'antd';
import { fetch } from '../../../common/api';
import { log, HTMLDecode } from '../../../common/tool';
var AjaxTipPopover = /*#__PURE__*/function (_Component) {
_inherits(AjaxTipPopover, _Component);
var _super = _createSuper(AjaxTipPopover);
function AjaxTipPopover() {
var _this;
_classCallCheck(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
});
fetch(apiPath, apiData, apiMethod).then(function (data) {
_this.setState({
loading: false,
popoverData: data.data || {}
});
}).catch(function (err) {
log.error(err);
_this.setState({
loading: true
});
message.error('获取失败:' + err.message);
});
};
return _this;
}
_createClass(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.createElement(Spin, {
spinning: loading
},
// 判断有值才显示
popoverData[titleFieldName] && popoverData[contentFieldName] ? /*#__PURE__*/React.createElement(Popover, _extends({}, popoverProps, {
title: popoverData[titleFieldName] || '',
content: /*#__PURE__*/React.createElement("div", {
dangerouslySetInnerHTML: {
__html: popoverData[contentFieldName] ? HTMLDecode(popoverData[contentFieldName]) : ''
}
})
}), /*#__PURE__*/React.createElement(Icon, _extends({}, iconProps, {
style: iconStyle
}))) : null);
}
}]);
return AjaxTipPopover;
}(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.string.isRequired,
// API接口
apiData: PropTypes.object,
// api请求附加的数据
apiMethod: PropTypes.string,
// api请求method
titleFieldName: PropTypes.string,
// 提示标题字段名称
contentFieldName: PropTypes.string,
// 提示内容字段名称
popoverProps: PropTypes.object,
// 提示组件props
iconProps: PropTypes.object,
// 图标Porps
iconStyle: PropTypes.object // 图标样式
};
export default AjaxTipPopover;