import classnames from 'classnames'; import CSSMotion from 'rc-motion'; import * as React from 'react'; import { useMemo, useRef } from 'react'; import type { PresetStatusColorType } from '../_util/colors'; import { isPresetColor } from '../_util/colors'; import { cloneElement } from '../_util/reactNode'; import type { LiteralUnion } from '../_util/type'; import { ConfigContext } from '../config-provider'; import type { PresetColorKey } from '../theme/internal'; import Ribbon from './Ribbon'; import ScrollNumber from './ScrollNumber'; import useStyle from './style'; export type { ScrollNumberProps } from './ScrollNumber'; type CompoundedComponent = React.ForwardRefExoticComponent< BadgeProps & React.RefAttributes > & { Ribbon: typeof Ribbon; }; export interface BadgeProps { /** Number to show in badge */ count?: React.ReactNode; showZero?: boolean; /** Max count to show */ overflowCount?: number; /** Whether to show red dot without number */ dot?: boolean; style?: React.CSSProperties; prefixCls?: string; scrollNumberPrefixCls?: string; className?: string; rootClassName?: string; status?: PresetStatusColorType; color?: LiteralUnion; text?: React.ReactNode; size?: 'default' | 'small'; offset?: [number | string, number | string]; title?: string; children?: React.ReactNode; classNames?: { root?: string; indicator?: string; }; styles?: { root?: React.CSSProperties; indicator?: React.CSSProperties; }; } const InternalBadge: React.ForwardRefRenderFunction = (props, ref) => { const { prefixCls: customizePrefixCls, scrollNumberPrefixCls: customizeScrollNumberPrefixCls, children, status, text, color, count = null, overflowCount = 99, dot = false, size = 'default', title, offset, style, className, rootClassName, classNames, styles, showZero = false, ...restProps } = props; const { getPrefixCls, direction } = React.useContext(ConfigContext); const prefixCls = getPrefixCls('badge', customizePrefixCls); // Style const [wrapSSR, hashId] = useStyle(prefixCls); // ================================ Misc ================================ const numberedDisplayCount = ( (count as number) > (overflowCount as number) ? `${overflowCount}+` : count ) as string | number | null; const isZero = numberedDisplayCount === '0' || numberedDisplayCount === 0; const ignoreCount = count === null || (isZero && !showZero); const hasStatus = ((status !== null && status !== undefined) || (color !== null && color !== undefined)) && ignoreCount; const showAsDot = dot && !isZero; const mergedCount = showAsDot ? '' : numberedDisplayCount; const isHidden = useMemo(() => { const isEmpty = mergedCount === null || mergedCount === undefined || mergedCount === ''; return (isEmpty || (isZero && !showZero)) && !showAsDot; }, [mergedCount, isZero, showZero, showAsDot]); // Count should be cache in case hidden change it const countRef = useRef(count); if (!isHidden) { countRef.current = count; } const livingCount = countRef.current; // We need cache count since remove motion should not change count display const displayCountRef = useRef(mergedCount); if (!isHidden) { displayCountRef.current = mergedCount; } const displayCount = displayCountRef.current; // We will cache the dot status to avoid shaking on leaved motion const isDotRef = useRef(showAsDot); if (!isHidden) { isDotRef.current = showAsDot; } // =============================== Styles =============================== const mergedStyle = useMemo(() => { if (!offset) { return { ...style }; } const offsetStyle: React.CSSProperties = { marginTop: offset[1] }; if (direction === 'rtl') { offsetStyle.left = parseInt(offset[0] as string, 10); } else { offsetStyle.right = -parseInt(offset[0] as string, 10); } return { ...offsetStyle, ...style, }; }, [direction, offset, style]); // =============================== Render =============================== // >>> Title const titleNode = title ?? (typeof livingCount === 'string' || typeof livingCount === 'number' ? livingCount : undefined); // >>> Status Text const statusTextNode = isHidden || !text ? null : {text}; // >>> Display Component const displayNode = !livingCount || typeof livingCount !== 'object' ? undefined : cloneElement(livingCount, (oriProps) => ({ style: { ...mergedStyle, ...oriProps.style, }, })); // InternalColor const isInternalColor = isPresetColor(color, false); // Shared styles const statusCls = classnames(classNames?.indicator, { [`${prefixCls}-status-dot`]: hasStatus, [`${prefixCls}-status-${status}`]: !!status, [`${prefixCls}-color-${color}`]: isInternalColor, }); const statusStyle: React.CSSProperties = {}; if (color && !isInternalColor) { statusStyle.color = color; statusStyle.background = color; } const badgeClassName = classnames( prefixCls, { [`${prefixCls}-status`]: hasStatus, [`${prefixCls}-not-a-wrapper`]: !children, [`${prefixCls}-rtl`]: direction === 'rtl', }, className, rootClassName, classNames?.root, hashId, ); // if (!children && hasStatus) { const statusTextColor = mergedStyle.color; return wrapSSR( {text && ( {text} )} , ); } return wrapSSR( {children} {({ className: motionClassName, ref: scrollNumberRef }) => { const scrollNumberPrefixCls = getPrefixCls( 'scroll-number', customizeScrollNumberPrefixCls, ); const isDot = isDotRef.current; const scrollNumberCls = classnames(classNames?.indicator, { [`${prefixCls}-dot`]: isDot, [`${prefixCls}-count`]: !isDot, [`${prefixCls}-count-sm`]: size === 'small', [`${prefixCls}-multiple-words`]: !isDot && displayCount && displayCount.toString().length > 1, [`${prefixCls}-status-${status}`]: !!status, [`${prefixCls}-color-${color}`]: isInternalColor, }); let scrollNumberStyle: React.CSSProperties = { ...styles?.indicator, ...mergedStyle }; if (color && !isInternalColor) { scrollNumberStyle = scrollNumberStyle || {}; scrollNumberStyle.background = color; } return ( {displayNode} ); }} {statusTextNode} , ); }; const Badge = React.forwardRef(InternalBadge) as CompoundedComponent; Badge.Ribbon = Ribbon; if (process.env.NODE_ENV !== 'production') { Badge.displayName = 'Badge'; } export default Badge;