Alert.js 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  1. "use strict";
  2. "use client";
  3. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
  4. var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
  5. Object.defineProperty(exports, "__esModule", {
  6. value: true
  7. });
  8. exports.default = void 0;
  9. var React = _interopRequireWildcard(require("react"));
  10. var _CheckCircleFilled = _interopRequireDefault(require("@ant-design/icons/CheckCircleFilled"));
  11. var _CloseCircleFilled = _interopRequireDefault(require("@ant-design/icons/CloseCircleFilled"));
  12. var _CloseOutlined = _interopRequireDefault(require("@ant-design/icons/CloseOutlined"));
  13. var _ExclamationCircleFilled = _interopRequireDefault(require("@ant-design/icons/ExclamationCircleFilled"));
  14. var _InfoCircleFilled = _interopRequireDefault(require("@ant-design/icons/InfoCircleFilled"));
  15. var _classnames = _interopRequireDefault(require("classnames"));
  16. var _rcMotion = _interopRequireDefault(require("rc-motion"));
  17. var _pickAttrs = _interopRequireDefault(require("rc-util/lib/pickAttrs"));
  18. var _ref = require("rc-util/lib/ref");
  19. var _reactNode = require("../_util/reactNode");
  20. var _warning = require("../_util/warning");
  21. var _context = require("../config-provider/context");
  22. var _style = _interopRequireDefault(require("./style"));
  23. var __rest = void 0 && (void 0).__rest || function (s, e) {
  24. var t = {};
  25. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  26. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  27. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  28. }
  29. return t;
  30. };
  31. const iconMapFilled = {
  32. success: _CheckCircleFilled.default,
  33. info: _InfoCircleFilled.default,
  34. error: _CloseCircleFilled.default,
  35. warning: _ExclamationCircleFilled.default
  36. };
  37. const IconNode = props => {
  38. const {
  39. icon,
  40. prefixCls,
  41. type
  42. } = props;
  43. const iconType = iconMapFilled[type] || null;
  44. if (icon) {
  45. return (0, _reactNode.replaceElement)(icon, /*#__PURE__*/React.createElement("span", {
  46. className: `${prefixCls}-icon`
  47. }, icon), () => ({
  48. className: (0, _classnames.default)(`${prefixCls}-icon`, icon.props.className)
  49. }));
  50. }
  51. return /*#__PURE__*/React.createElement(iconType, {
  52. className: `${prefixCls}-icon`
  53. });
  54. };
  55. const CloseIconNode = props => {
  56. const {
  57. isClosable,
  58. prefixCls,
  59. closeIcon,
  60. handleClose,
  61. ariaProps
  62. } = props;
  63. const mergedCloseIcon = closeIcon === true || closeIcon === undefined ? /*#__PURE__*/React.createElement(_CloseOutlined.default, null) : closeIcon;
  64. return isClosable ? (/*#__PURE__*/React.createElement("button", Object.assign({
  65. type: "button",
  66. onClick: handleClose,
  67. className: `${prefixCls}-close-icon`,
  68. tabIndex: 0
  69. }, ariaProps), mergedCloseIcon)) : null;
  70. };
  71. const Alert = /*#__PURE__*/React.forwardRef((props, ref) => {
  72. const {
  73. description,
  74. prefixCls: customizePrefixCls,
  75. message,
  76. banner,
  77. className,
  78. rootClassName,
  79. style,
  80. onMouseEnter,
  81. onMouseLeave,
  82. onClick,
  83. afterClose,
  84. showIcon,
  85. closable,
  86. closeText,
  87. closeIcon,
  88. action,
  89. id
  90. } = props,
  91. otherProps = __rest(props, ["description", "prefixCls", "message", "banner", "className", "rootClassName", "style", "onMouseEnter", "onMouseLeave", "onClick", "afterClose", "showIcon", "closable", "closeText", "closeIcon", "action", "id"]);
  92. const [closed, setClosed] = React.useState(false);
  93. if (process.env.NODE_ENV !== 'production') {
  94. const warning = (0, _warning.devUseWarning)('Alert');
  95. warning.deprecated(!closeText, 'closeText', 'closable.closeIcon');
  96. }
  97. const internalRef = React.useRef(null);
  98. React.useImperativeHandle(ref, () => ({
  99. nativeElement: internalRef.current
  100. }));
  101. const {
  102. getPrefixCls,
  103. direction,
  104. closable: contextClosable,
  105. closeIcon: contextCloseIcon,
  106. className: contextClassName,
  107. style: contextStyle
  108. } = (0, _context.useComponentConfig)('alert');
  109. const prefixCls = getPrefixCls('alert', customizePrefixCls);
  110. const [wrapCSSVar, hashId, cssVarCls] = (0, _style.default)(prefixCls);
  111. const handleClose = e => {
  112. var _a;
  113. setClosed(true);
  114. (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props, e);
  115. };
  116. const type = React.useMemo(() => {
  117. if (props.type !== undefined) {
  118. return props.type;
  119. }
  120. // banner mode defaults to 'warning'
  121. return banner ? 'warning' : 'info';
  122. }, [props.type, banner]);
  123. // closeable when closeText or closeIcon is assigned
  124. const isClosable = React.useMemo(() => {
  125. if (typeof closable === 'object' && closable.closeIcon) return true;
  126. if (closeText) {
  127. return true;
  128. }
  129. if (typeof closable === 'boolean') {
  130. return closable;
  131. }
  132. // should be true when closeIcon is 0 or ''
  133. if (closeIcon !== false && closeIcon !== null && closeIcon !== undefined) {
  134. return true;
  135. }
  136. return !!contextClosable;
  137. }, [closeText, closeIcon, closable, contextClosable]);
  138. // banner mode defaults to Icon
  139. const isShowIcon = banner && showIcon === undefined ? true : showIcon;
  140. const alertCls = (0, _classnames.default)(prefixCls, `${prefixCls}-${type}`, {
  141. [`${prefixCls}-with-description`]: !!description,
  142. [`${prefixCls}-no-icon`]: !isShowIcon,
  143. [`${prefixCls}-banner`]: !!banner,
  144. [`${prefixCls}-rtl`]: direction === 'rtl'
  145. }, contextClassName, className, rootClassName, cssVarCls, hashId);
  146. const restProps = (0, _pickAttrs.default)(otherProps, {
  147. aria: true,
  148. data: true
  149. });
  150. const mergedCloseIcon = React.useMemo(() => {
  151. if (typeof closable === 'object' && closable.closeIcon) {
  152. return closable.closeIcon;
  153. }
  154. if (closeText) {
  155. return closeText;
  156. }
  157. if (closeIcon !== undefined) {
  158. return closeIcon;
  159. }
  160. if (typeof contextClosable === 'object' && contextClosable.closeIcon) {
  161. return contextClosable.closeIcon;
  162. }
  163. return contextCloseIcon;
  164. }, [closeIcon, closable, closeText, contextCloseIcon]);
  165. const mergedAriaProps = React.useMemo(() => {
  166. const merged = closable !== null && closable !== void 0 ? closable : contextClosable;
  167. if (typeof merged === 'object') {
  168. const {
  169. closeIcon: _
  170. } = merged,
  171. ariaProps = __rest(merged, ["closeIcon"]);
  172. return ariaProps;
  173. }
  174. return {};
  175. }, [closable, contextClosable]);
  176. return wrapCSSVar(/*#__PURE__*/React.createElement(_rcMotion.default, {
  177. visible: !closed,
  178. motionName: `${prefixCls}-motion`,
  179. motionAppear: false,
  180. motionEnter: false,
  181. onLeaveStart: node => ({
  182. maxHeight: node.offsetHeight
  183. }),
  184. onLeaveEnd: afterClose
  185. }, ({
  186. className: motionClassName,
  187. style: motionStyle
  188. }, setRef) => (/*#__PURE__*/React.createElement("div", Object.assign({
  189. id: id,
  190. ref: (0, _ref.composeRef)(internalRef, setRef),
  191. "data-show": !closed,
  192. className: (0, _classnames.default)(alertCls, motionClassName),
  193. style: Object.assign(Object.assign(Object.assign({}, contextStyle), style), motionStyle),
  194. onMouseEnter: onMouseEnter,
  195. onMouseLeave: onMouseLeave,
  196. onClick: onClick,
  197. role: "alert"
  198. }, restProps), isShowIcon ? (/*#__PURE__*/React.createElement(IconNode, {
  199. description: description,
  200. icon: props.icon,
  201. prefixCls: prefixCls,
  202. type: type
  203. })) : null, /*#__PURE__*/React.createElement("div", {
  204. className: `${prefixCls}-content`
  205. }, message ? /*#__PURE__*/React.createElement("div", {
  206. className: `${prefixCls}-message`
  207. }, message) : null, description ? /*#__PURE__*/React.createElement("div", {
  208. className: `${prefixCls}-description`
  209. }, description) : null), action ? /*#__PURE__*/React.createElement("div", {
  210. className: `${prefixCls}-action`
  211. }, action) : null, /*#__PURE__*/React.createElement(CloseIconNode, {
  212. isClosable: isClosable,
  213. prefixCls: prefixCls,
  214. closeIcon: mergedCloseIcon,
  215. handleClose: handleClose,
  216. ariaProps: mergedAriaProps
  217. })))));
  218. });
  219. if (process.env.NODE_ENV !== 'production') {
  220. Alert.displayName = 'Alert';
  221. }
  222. var _default = exports.default = Alert;