ant-design/components/badge/index.tsx
lijianan 2490d43eab
feat: Badge support classNames & styles (#43245)
* feat: Badge support classNames & styles

* update docs

* fix

* fix

* fix

* Update components/badge/index.en-US.md

---------

Co-authored-by: MadCcc <1075746765@qq.com>
2023-06-29 10:40:56 +08:00

271 lines
7.9 KiB
TypeScript

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<HTMLSpanElement>
> & {
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<PresetColorKey>;
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<HTMLSpanElement, BadgeProps> = (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<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,
},
}));
// 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,
);
// <Badge status="success" />
if (!children && hasStatus) {
const statusTextColor = mergedStyle.color;
return wrapSSR(
<span {...restProps} className={badgeClassName} style={{ ...styles?.root, ...mergedStyle }}>
<span className={statusCls} style={{ ...styles?.indicator, ...statusStyle }} />
{text && (
<span style={{ color: statusTextColor }} className={`${prefixCls}-status-text`}>
{text}
</span>
)}
</span>,
);
}
return wrapSSR(
<span ref={ref} {...restProps} className={badgeClassName} style={styles?.root}>
{children}
<CSSMotion
visible={!isHidden}
motionName={`${prefixCls}-zoom`}
motionAppear={false}
motionDeadline={1000}
>
{({ 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 (
<ScrollNumber
prefixCls={scrollNumberPrefixCls}
show={!isHidden}
motionClassName={motionClassName}
className={scrollNumberCls}
count={displayCount}
title={titleNode}
style={scrollNumberStyle}
key="scrollNumber"
ref={scrollNumberRef}
>
{displayNode}
</ScrollNumber>
);
}}
</CSSMotion>
{statusTextNode}
</span>,
);
};
const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(InternalBadge) as CompoundedComponent;
Badge.Ribbon = Ribbon;
if (process.env.NODE_ENV !== 'production') {
Badge.displayName = 'Badge';
}
export default Badge;