index.js 8.9 KB

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