mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-15 17:31:25 +08:00
243 lines
7.0 KiB
TypeScript
243 lines
7.0 KiB
TypeScript
import classNames from 'classnames';
|
|
import CSSMotion from 'rc-motion';
|
|
import * as React from 'react';
|
|
import { useMemo, useRef } from 'react';
|
|
import { ConfigContext } from '../config-provider';
|
|
import type { PresetColorType, PresetStatusColorType } from '../_util/colors';
|
|
import { cloneElement } from '../_util/reactNode';
|
|
import type { LiteralUnion } from '../_util/type';
|
|
import Ribbon from './Ribbon';
|
|
import ScrollNumber from './ScrollNumber';
|
|
import useStyle from './style';
|
|
import { isPresetColor } from './utils';
|
|
|
|
export type { ScrollNumberProps } from './ScrollNumber';
|
|
|
|
type CompoundedComponent = React.FC<BadgeProps> & {
|
|
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;
|
|
status?: PresetStatusColorType;
|
|
color?: LiteralUnion<PresetColorType>;
|
|
text?: React.ReactNode;
|
|
size?: 'default' | 'small';
|
|
offset?: [number | string, number | string];
|
|
title?: string;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
const Badge: CompoundedComponent = ({
|
|
prefixCls: customizePrefixCls,
|
|
scrollNumberPrefixCls: customizeScrollNumberPrefixCls,
|
|
children,
|
|
status,
|
|
text,
|
|
color,
|
|
count = null,
|
|
overflowCount = 99,
|
|
dot = false,
|
|
size = 'default',
|
|
title,
|
|
offset,
|
|
style,
|
|
className,
|
|
showZero = false,
|
|
...restProps
|
|
}) => {
|
|
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<React.CSSProperties>(() => {
|
|
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 : <span className={`${prefixCls}-status-text`}>{text}</span>;
|
|
|
|
// >>> Display Component
|
|
const displayNode =
|
|
!livingCount || typeof livingCount !== 'object'
|
|
? undefined
|
|
: cloneElement(livingCount, (oriProps) => ({
|
|
style: {
|
|
...mergedStyle,
|
|
...oriProps.style,
|
|
},
|
|
}));
|
|
|
|
// Shared styles
|
|
const statusCls = classNames({
|
|
[`${prefixCls}-status-dot`]: hasStatus,
|
|
[`${prefixCls}-status-${status}`]: !!status,
|
|
[`${prefixCls}-status-${color}`]: isPresetColor(color),
|
|
});
|
|
|
|
const statusStyle: React.CSSProperties = {};
|
|
if (color && !isPresetColor(color)) {
|
|
statusStyle.color = color;
|
|
statusStyle.background = color;
|
|
}
|
|
|
|
const badgeClassName = classNames(
|
|
prefixCls,
|
|
{
|
|
[`${prefixCls}-status`]: hasStatus,
|
|
[`${prefixCls}-not-a-wrapper`]: !children,
|
|
[`${prefixCls}-rtl`]: direction === 'rtl',
|
|
},
|
|
className,
|
|
);
|
|
|
|
// <Badge status="success" />
|
|
if (!children && hasStatus) {
|
|
const statusTextColor = mergedStyle.color;
|
|
return wrapSSR(
|
|
<span {...restProps} className={classNames(badgeClassName, hashId)} style={mergedStyle}>
|
|
<span className={statusCls} style={statusStyle} />
|
|
{text && (
|
|
<span style={{ color: statusTextColor }} className={`${prefixCls}-status-text`}>
|
|
{text}
|
|
</span>
|
|
)}
|
|
</span>,
|
|
);
|
|
}
|
|
|
|
// <Badge status="success" count={<Icon type="xxx" />}></Badge>
|
|
return wrapSSR(
|
|
<span {...restProps} className={classNames(badgeClassName, hashId)}>
|
|
{children}
|
|
<CSSMotion
|
|
visible={!isHidden}
|
|
motionName={`${prefixCls}-zoom`}
|
|
motionAppear={false}
|
|
motionDeadline={1000}
|
|
>
|
|
{({ className: motionClassName }) => {
|
|
const scrollNumberPrefixCls = getPrefixCls(
|
|
'scroll-number',
|
|
customizeScrollNumberPrefixCls,
|
|
);
|
|
|
|
const isDot = isDotRef.current;
|
|
|
|
const scrollNumberCls = classNames({
|
|
[`${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}-status-${color}`]: isPresetColor(color),
|
|
});
|
|
|
|
let scrollNumberStyle: React.CSSProperties = { ...mergedStyle };
|
|
if (color && !isPresetColor(color)) {
|
|
scrollNumberStyle = scrollNumberStyle || {};
|
|
scrollNumberStyle.background = color;
|
|
}
|
|
|
|
return (
|
|
<ScrollNumber
|
|
prefixCls={scrollNumberPrefixCls}
|
|
show={!isHidden}
|
|
motionClassName={motionClassName}
|
|
className={scrollNumberCls}
|
|
count={displayCount}
|
|
title={titleNode}
|
|
style={scrollNumberStyle}
|
|
key="scrollNumber"
|
|
>
|
|
{displayNode}
|
|
</ScrollNumber>
|
|
);
|
|
}}
|
|
</CSSMotion>
|
|
{statusTextNode}
|
|
</span>,
|
|
);
|
|
};
|
|
|
|
Badge.Ribbon = Ribbon;
|
|
|
|
export default Badge;
|