import cx from 'classnames' ; import type CSS from 'csstype' ; import React from 'react' ; import { useTheme } from '../../providers' ; import { rgba } from '../../utils' ; import { Box , BoxProps } from '../layout' ; type BadgeStatusType = 'normal' | 'success' | 'error' | 'warning' ; export interface BadgeProps { /**
     * 外观
     */ shape ? : 'pill' | 'dot' | 'badge' ; /**
     * 状态
     */ status ? : BadgeStatusType ; /** 文字颜色 */ color ? : CSS . Property . Color ; /** 背景色 */ bg ? : CSS . Property . Color ; className ? : string ; style ? : React . CSSProperties ; children ? : React . ReactNode ; } function getColorToken ( status ) { const map = { normal : 'colors.primary.50' , success : 'colors.green.50' , error : 'colors.red.50' , warning : 'colors.yellow.50' , } ; return map [ status ] ; } export function useBadge ( props ) { const { shape = 'badge' , status = 'normal' , className , ... htmlProps } = props ; const { getValue } = useTheme ( ) ; let boxProps ; if ( shape === 'pill' ) { boxProps = { display : 'inline-block' , borderRadius : '10px' , height : '20px' , lineHeight : '20px' , px : 'm' , bg : 'red.50' , color : '#FFF' , fontSize : 'body' , } as BoxProps ; } else if ( shape === 'dot' ) { boxProps = { display : 'inline-block' , size : '6px' , borderRadius : '6px' , bg : 'red.50' , } as BoxProps ; } else { const color = getColorToken ( status ) ; const bg = rgba ( getValue ( color ) , 0.1 ) ; boxProps = { display : 'inline-block' , borderRadius : 's' , px : 'm' , height : '22px' , lineHeight : '22px' , color , bg , fontSize : 'body' , } as BoxProps ; } const clazz = cx ( { 'rex-badge' : true , [ `rex-badge-${ shape }` ] : true , [ `rex-${ status }` ] : shape === 'badge' && status , } , className ) ; return { boxProps , htmlProps : { ... htmlProps , className : clazz , } , } ; } export const Badge = React . forwardRef < HTMLSpanElement , BadgeProps > ( ( props , ref ) => { const { boxProps , htmlProps } = useBadge ( props ) ; return < Box as = "span" ref = { ref } { ... boxProps } { ... htmlProps } />; } ) ;