taro/src/_health/base/status_indicator.tsx

import { View } from '@tarojs/components'
import './status_indicator.scss'
import { rpxToPx } from '@/utils/tools'
import { MainColorType } from '@/context/themes/color'


export enum StatusType {
    normal = 'normal',
    ing = 'ing',
    img = 'img',
    console = 'console',
    big = 'big'
}
export default function StatusIndicator(props: {
    type: StatusType,
    color: string,
    text?: string,
    children?: any,
    fontColor?: string,
    fontSize?: number
    defaultSpace?: boolean,
    space?: number
}) {

    function indicator() {
        switch (props.type) {
            case StatusType.normal:
                return <View style={{
                    width: rpxToPx(14),
                    height: rpxToPx(14),
                    borderRadius: rpxToPx(7),
                    backgroundColor: props.color
                }} />
            case StatusType.ing:
                return <View className='indicator_circle'
                    style={{ borderColor: props.color }}
                >
                    <View className='indicator_point' style={{ backgroundColor: props.color }} />
                </View>
            case StatusType.img:
                return <View style={{
                    width: rpxToPx(26),
                    height: rpxToPx(26),
                    borderRadius: rpxToPx(13),
                    backgroundColor: props.color,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                }}>
                    {
                        props.children
                    }
                </View>
            case StatusType.console:
                return <View style={{
                    width: rpxToPx(32),
                    height: rpxToPx(32),
                    borderRadius: rpxToPx(16),
                    backgroundColor: props.color,
                    marginTop: rpxToPx(2),
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                }}>
                    {
                        props.children
                    }
                </View>
            case StatusType.big:
                return <View style={{
                    width: rpxToPx(32),
                    height: rpxToPx(32),
                    borderRadius: rpxToPx(16),
                    backgroundColor: props.color,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                }}>
                    {
                        props.children
                    }
                </View>
        }
        return <View />
    }

    function marginLeft() {
        if (props.type == StatusType.console || props.type == StatusType.big) return rpxToPx(24)
        if (props.defaultSpace) return rpxToPx(12)
        if (props.space) return props.space
        return rpxToPx(6)
    }

    return <View style={{
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',

    }}>
        <View style={{
            width: (props.type == StatusType.console || props.type == StatusType.big) ? rpxToPx(32) : rpxToPx(26),
            height: (props.type == StatusType.console || props.type == StatusType.big) ? rpxToPx(32) : rpxToPx(26),
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',

        }}>
            {
                indicator()
            }
        </View>

        {
            props.text && <View className='h20' style={{
                color: props.fontColor ? props.fontColor : MainColorType.g01,
                fontSize: props.fontSize ? props.fontSize : rpxToPx(20),
                marginLeft: marginLeft()
            }}>{props.text}</View>
        }
    </View>
}