PurePanel.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import { createVNode as _createVNode } from "vue";
  3. import { computed, defineComponent } from 'vue';
  4. import useStyle from './style';
  5. import useConfigInject from '../config-provider/hooks/useConfigInject';
  6. import Notice from '../vc-notification/Notice';
  7. import classNames from '../_util/classNames';
  8. import LoadingOutlined from "@ant-design/icons-vue/es/icons/LoadingOutlined";
  9. import ExclamationCircleFilled from "@ant-design/icons-vue/es/icons/ExclamationCircleFilled";
  10. import CloseCircleFilled from "@ant-design/icons-vue/es/icons/CloseCircleFilled";
  11. import CheckCircleFilled from "@ant-design/icons-vue/es/icons/CheckCircleFilled";
  12. import InfoCircleFilled from "@ant-design/icons-vue/es/icons/InfoCircleFilled";
  13. import CloseOutlined from "@ant-design/icons-vue/es/icons/CloseOutlined";
  14. import { renderHelper } from '../_util/util';
  15. export function getCloseIcon(prefixCls, closeIcon) {
  16. return closeIcon || _createVNode("span", {
  17. "class": `${prefixCls}-close-x`
  18. }, [_createVNode(CloseOutlined, {
  19. "class": `${prefixCls}-close-icon`
  20. }, null)]);
  21. }
  22. export const TypeIcon = {
  23. info: _createVNode(InfoCircleFilled, null, null),
  24. success: _createVNode(CheckCircleFilled, null, null),
  25. error: _createVNode(CloseCircleFilled, null, null),
  26. warning: _createVNode(ExclamationCircleFilled, null, null),
  27. loading: _createVNode(LoadingOutlined, null, null)
  28. };
  29. const typeToIcon = {
  30. success: CheckCircleFilled,
  31. info: InfoCircleFilled,
  32. error: CloseCircleFilled,
  33. warning: ExclamationCircleFilled
  34. };
  35. export function PureContent(_ref) {
  36. let {
  37. prefixCls,
  38. icon,
  39. type,
  40. message,
  41. description,
  42. btn
  43. } = _ref;
  44. let iconNode = null;
  45. if (icon) {
  46. iconNode = _createVNode("span", {
  47. "class": `${prefixCls}-icon`
  48. }, [renderHelper(icon)]);
  49. } else if (type) {
  50. const Icon = typeToIcon[type];
  51. iconNode = _createVNode(Icon, {
  52. "class": `${prefixCls}-icon ${prefixCls}-icon-${type}`
  53. }, null);
  54. }
  55. return _createVNode("div", {
  56. "class": classNames({
  57. [`${prefixCls}-with-icon`]: iconNode
  58. }),
  59. "role": "alert"
  60. }, [iconNode, _createVNode("div", {
  61. "class": `${prefixCls}-message`
  62. }, [message]), _createVNode("div", {
  63. "class": `${prefixCls}-description`
  64. }, [description]), btn && _createVNode("div", {
  65. "class": `${prefixCls}-btn`
  66. }, [btn])]);
  67. }
  68. /** @private Internal Component. Do not use in your production. */
  69. export default defineComponent({
  70. name: 'PurePanel',
  71. inheritAttrs: false,
  72. props: ['prefixCls', 'icon', 'type', 'message', 'description', 'btn', 'closeIcon'],
  73. setup(props) {
  74. const {
  75. getPrefixCls
  76. } = useConfigInject('notification', props);
  77. const prefixCls = computed(() => props.prefixCls || getPrefixCls('notification'));
  78. const noticePrefixCls = computed(() => `${prefixCls.value}-notice`);
  79. const [, hashId] = useStyle(prefixCls);
  80. return () => {
  81. return _createVNode(Notice, _objectSpread(_objectSpread({}, props), {}, {
  82. "prefixCls": prefixCls.value,
  83. "class": classNames(hashId.value, `${noticePrefixCls.value}-pure-panel`),
  84. "noticeKey": "pure",
  85. "duration": null,
  86. "closable": props.closable,
  87. "closeIcon": getCloseIcon(prefixCls.value, props.closeIcon)
  88. }), {
  89. default: () => [_createVNode(PureContent, {
  90. "prefixCls": noticePrefixCls.value,
  91. "icon": props.icon,
  92. "type": props.type,
  93. "message": props.message,
  94. "description": props.description,
  95. "btn": props.btn
  96. }, null)]
  97. });
  98. };
  99. }
  100. });