ncore-ui-kit/src/components/notificationIndicator/index.tsx

import {
    type FC
} from "react";
import {
    View
} from "react-native";
import type INotificationIndicatorProps from "./type";
import stylesheet, {
    getNotificationIndicatorType,
    useStyles
} from "./stylesheet";
import {
    NCoreUIKitTheme
} from "../../core/hooks";
import type ITextProps from "../text/type";
import Loading from "../loading";
import Text from "../text";

const NotificationIndicator: FC<INotificationIndicatorProps> = ({
    floorBackgroundColor = "default",
    titleVariant = "labelSmallSize",
    spreadBehaviour = "baseline",
    isDisabled = false,
    type = "neutral",
    customTheme,
    titleStyle,
    isLoading,
    location,
    children,
    title,
    style,
    ...props
}) => {
    const {
        typography,
        radiuses,
        borders,
        colors,
        spaces
    } = NCoreUIKitTheme.useContext(customTheme);

    const currentType = getNotificationIndicatorType({
        type
    });

    const {
        indicatorContainer: indicatorContainerDynamicStyle,
        titleContainer: titleContainerDynamicStyle,
        container: containerDynamicStyle,
        loading: loadingDynamicStyle,
        overlay: overlayDynamicStyle,
        title: titleDynamicStyle
    } = useStyles({
        floorBackgroundColor,
        spreadBehaviour,
        currentType,
        isDisabled,
        isLoading,
        radiuses,
        borders,
        colors,
        spaces,
        type
    });

    const titleProps: ITextProps = {
        color: currentType.titleColor,
        variant: titleVariant
    };

    const fontSize = typography[titleProps.variant as keyof NCoreUIKit.Typography].fontSize;

    let baseLocation = location ? location : {
        bottom: undefined,
        left: undefined,
        right: 0,
        top: 2
    };

    if(!location && title) {
        baseLocation = {
            right: -fontSize / String(title).length,
            top: -fontSize / 2,
            bottom: undefined,
            left: undefined
        };
    }

    if (isDisabled || isLoading) {
        const stateType = type === "danger" ? "error" : type;

        titleProps.customColor = colors.system.state.content.disabled[stateType];
    }

    const renderTitle = () => {
        if (!title) {
            return null;
        }

        return <View
            style={[
                stylesheet.titleContainer,
                titleContainerDynamicStyle
            ]}
        >
            <Text
                variant="bodyMediumSize"
                style={[
                    titleStyle,
                    stylesheet.title,
                    titleDynamicStyle
                ]}
                {...titleProps}
            >
                {title}
            </Text>
            {renderOverlay()}
        </View>;
    };

    const renderIndicatorContainer = () => {
        if (isLoading) {
            return <Loading
                style={[
                    loadingDynamicStyle
                ]}
            />;
        }

        return <View
            style={[
                stylesheet.indicatorContainer,
                indicatorContainerDynamicStyle,
                baseLocation
            ]}
        >
            {renderTitle()}
        </View>;
    };

    const renderOverlay = () => {
        return <View
            style={[
                stylesheet.overlay,
                overlayDynamicStyle
            ]}
        />;
    };

    return <View
        {...props}
        style={[
            style,
            stylesheet.container,
            containerDynamicStyle
        ]}
    >
        {children}
        {renderIndicatorContainer()}
    </View>;
};
export default NotificationIndicator;