index.js 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  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 React = _react;
  11. var _classnames = _interopRequireDefault(require("classnames"));
  12. var _rcMotion = _interopRequireDefault(require("rc-motion"));
  13. var _colors = require("../_util/colors");
  14. var _reactNode = require("../_util/reactNode");
  15. var _configProvider = require("../config-provider");
  16. var _Ribbon = _interopRequireDefault(require("./Ribbon"));
  17. var _ScrollNumber = _interopRequireDefault(require("./ScrollNumber"));
  18. var _style = _interopRequireDefault(require("./style"));
  19. var __rest = void 0 && (void 0).__rest || function (s, e) {
  20. var t = {};
  21. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  22. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  23. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  24. }
  25. return t;
  26. };
  27. const InternalBadge = /*#__PURE__*/React.forwardRef((props, ref) => {
  28. var _a, _b, _c, _d, _e;
  29. const {
  30. prefixCls: customizePrefixCls,
  31. scrollNumberPrefixCls: customizeScrollNumberPrefixCls,
  32. children,
  33. status,
  34. text,
  35. color,
  36. count = null,
  37. overflowCount = 99,
  38. dot = false,
  39. size = 'default',
  40. title,
  41. offset,
  42. style,
  43. className,
  44. rootClassName,
  45. classNames,
  46. styles,
  47. showZero = false
  48. } = props,
  49. restProps = __rest(props, ["prefixCls", "scrollNumberPrefixCls", "children", "status", "text", "color", "count", "overflowCount", "dot", "size", "title", "offset", "style", "className", "rootClassName", "classNames", "styles", "showZero"]);
  50. const {
  51. getPrefixCls,
  52. direction,
  53. badge
  54. } = React.useContext(_configProvider.ConfigContext);
  55. const prefixCls = getPrefixCls('badge', customizePrefixCls);
  56. const [wrapCSSVar, hashId, cssVarCls] = (0, _style.default)(prefixCls);
  57. // ================================ Misc ================================
  58. const numberedDisplayCount = count > overflowCount ? `${overflowCount}+` : count;
  59. const isZero = numberedDisplayCount === '0' || numberedDisplayCount === 0 || text === '0' || text === 0;
  60. const ignoreCount = count === null || isZero && !showZero;
  61. const hasStatus = (status !== null && status !== undefined || color !== null && color !== undefined) && ignoreCount;
  62. const hasStatusValue = status !== null && status !== undefined || !isZero;
  63. const showAsDot = dot && !isZero;
  64. const mergedCount = showAsDot ? '' : numberedDisplayCount;
  65. const isHidden = (0, _react.useMemo)(() => {
  66. const isEmpty = (mergedCount === null || mergedCount === undefined || mergedCount === '') && (text === undefined || text === null || text === '');
  67. return (isEmpty || isZero && !showZero) && !showAsDot;
  68. }, [mergedCount, isZero, showZero, showAsDot, text]);
  69. // Count should be cache in case hidden change it
  70. const countRef = (0, _react.useRef)(count);
  71. if (!isHidden) {
  72. countRef.current = count;
  73. }
  74. const livingCount = countRef.current;
  75. // We need cache count since remove motion should not change count display
  76. const displayCountRef = (0, _react.useRef)(mergedCount);
  77. if (!isHidden) {
  78. displayCountRef.current = mergedCount;
  79. }
  80. const displayCount = displayCountRef.current;
  81. // We will cache the dot status to avoid shaking on leaved motion
  82. const isDotRef = (0, _react.useRef)(showAsDot);
  83. if (!isHidden) {
  84. isDotRef.current = showAsDot;
  85. }
  86. // =============================== Styles ===============================
  87. const mergedStyle = (0, _react.useMemo)(() => {
  88. if (!offset) {
  89. return Object.assign(Object.assign({}, badge === null || badge === void 0 ? void 0 : badge.style), style);
  90. }
  91. const offsetStyle = {
  92. marginTop: offset[1]
  93. };
  94. if (direction === 'rtl') {
  95. offsetStyle.left = parseInt(offset[0], 10);
  96. } else {
  97. offsetStyle.right = -parseInt(offset[0], 10);
  98. }
  99. return Object.assign(Object.assign(Object.assign({}, offsetStyle), badge === null || badge === void 0 ? void 0 : badge.style), style);
  100. }, [direction, offset, style, badge === null || badge === void 0 ? void 0 : badge.style]);
  101. // =============================== Render ===============================
  102. // >>> Title
  103. const titleNode = title !== null && title !== void 0 ? title : typeof livingCount === 'string' || typeof livingCount === 'number' ? livingCount : undefined;
  104. // >>> Status Text
  105. const showStatusTextNode = !isHidden && (text === 0 ? showZero : !!text && text !== true);
  106. const statusTextNode = !showStatusTextNode ? null : (/*#__PURE__*/React.createElement("span", {
  107. className: `${prefixCls}-status-text`
  108. }, text));
  109. // >>> Display Component
  110. const displayNode = !livingCount || typeof livingCount !== 'object' ? undefined : (0, _reactNode.cloneElement)(livingCount, oriProps => ({
  111. style: Object.assign(Object.assign({}, mergedStyle), oriProps.style)
  112. }));
  113. // InternalColor
  114. const isInternalColor = (0, _colors.isPresetColor)(color, false);
  115. // Shared styles
  116. const statusCls = (0, _classnames.default)(classNames === null || classNames === void 0 ? void 0 : classNames.indicator, (_a = badge === null || badge === void 0 ? void 0 : badge.classNames) === null || _a === void 0 ? void 0 : _a.indicator, {
  117. [`${prefixCls}-status-dot`]: hasStatus,
  118. [`${prefixCls}-status-${status}`]: !!status,
  119. [`${prefixCls}-color-${color}`]: isInternalColor
  120. });
  121. const statusStyle = {};
  122. if (color && !isInternalColor) {
  123. statusStyle.color = color;
  124. statusStyle.background = color;
  125. }
  126. const badgeClassName = (0, _classnames.default)(prefixCls, {
  127. [`${prefixCls}-status`]: hasStatus,
  128. [`${prefixCls}-not-a-wrapper`]: !children,
  129. [`${prefixCls}-rtl`]: direction === 'rtl'
  130. }, className, rootClassName, badge === null || badge === void 0 ? void 0 : badge.className, (_b = badge === null || badge === void 0 ? void 0 : badge.classNames) === null || _b === void 0 ? void 0 : _b.root, classNames === null || classNames === void 0 ? void 0 : classNames.root, hashId, cssVarCls);
  131. // <Badge status="success" />
  132. if (!children && hasStatus && (text || hasStatusValue || !ignoreCount)) {
  133. const statusTextColor = mergedStyle.color;
  134. return wrapCSSVar(/*#__PURE__*/React.createElement("span", Object.assign({}, restProps, {
  135. className: badgeClassName,
  136. style: Object.assign(Object.assign(Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.root), (_c = badge === null || badge === void 0 ? void 0 : badge.styles) === null || _c === void 0 ? void 0 : _c.root), mergedStyle)
  137. }), /*#__PURE__*/React.createElement("span", {
  138. className: statusCls,
  139. style: Object.assign(Object.assign(Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.indicator), (_d = badge === null || badge === void 0 ? void 0 : badge.styles) === null || _d === void 0 ? void 0 : _d.indicator), statusStyle)
  140. }), showStatusTextNode && (/*#__PURE__*/React.createElement("span", {
  141. style: {
  142. color: statusTextColor
  143. },
  144. className: `${prefixCls}-status-text`
  145. }, text))));
  146. }
  147. return wrapCSSVar(/*#__PURE__*/React.createElement("span", Object.assign({
  148. ref: ref
  149. }, restProps, {
  150. className: badgeClassName,
  151. style: Object.assign(Object.assign({}, (_e = badge === null || badge === void 0 ? void 0 : badge.styles) === null || _e === void 0 ? void 0 : _e.root), styles === null || styles === void 0 ? void 0 : styles.root)
  152. }), children, /*#__PURE__*/React.createElement(_rcMotion.default, {
  153. visible: !isHidden,
  154. motionName: `${prefixCls}-zoom`,
  155. motionAppear: false,
  156. motionDeadline: 1000
  157. }, ({
  158. className: motionClassName
  159. }) => {
  160. var _a, _b;
  161. const scrollNumberPrefixCls = getPrefixCls('scroll-number', customizeScrollNumberPrefixCls);
  162. const isDot = isDotRef.current;
  163. const scrollNumberCls = (0, _classnames.default)(classNames === null || classNames === void 0 ? void 0 : classNames.indicator, (_a = badge === null || badge === void 0 ? void 0 : badge.classNames) === null || _a === void 0 ? void 0 : _a.indicator, {
  164. [`${prefixCls}-dot`]: isDot,
  165. [`${prefixCls}-count`]: !isDot,
  166. [`${prefixCls}-count-sm`]: size === 'small',
  167. [`${prefixCls}-multiple-words`]: !isDot && displayCount && displayCount.toString().length > 1,
  168. [`${prefixCls}-status-${status}`]: !!status,
  169. [`${prefixCls}-color-${color}`]: isInternalColor
  170. });
  171. let scrollNumberStyle = Object.assign(Object.assign(Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.indicator), (_b = badge === null || badge === void 0 ? void 0 : badge.styles) === null || _b === void 0 ? void 0 : _b.indicator), mergedStyle);
  172. if (color && !isInternalColor) {
  173. scrollNumberStyle = scrollNumberStyle || {};
  174. scrollNumberStyle.background = color;
  175. }
  176. return /*#__PURE__*/React.createElement(_ScrollNumber.default, {
  177. prefixCls: scrollNumberPrefixCls,
  178. show: !isHidden,
  179. motionClassName: motionClassName,
  180. className: scrollNumberCls,
  181. count: displayCount,
  182. title: titleNode,
  183. style: scrollNumberStyle,
  184. key: "scrollNumber"
  185. }, displayNode);
  186. }), statusTextNode));
  187. });
  188. const Badge = InternalBadge;
  189. Badge.Ribbon = _Ribbon.default;
  190. if (process.env.NODE_ENV !== 'production') {
  191. Badge.displayName = 'Badge';
  192. }
  193. var _default = exports.default = Badge;