@brightlayer-ui/react-native-progress-icons/ProgressIcon.js

React Native progress icons for Brightlayer UI applications

import React from 'react';
import color from 'color';
import { StyleSheet, Text, View } from 'react-native';
const useStyles = (props) => {
    const { labelSize, size = 24, labelColor } = props;
    return StyleSheet.create({
        progressIcon: {
            position: 'relative',
            justifyContent: 'center',
            alignItems: 'center',
        },
        progressIconLabel: {
            display: 'flex',
            textAlign: 'center',
            zIndex: 2,
            fontSize: labelSize || size / 4,
            color: labelColor || '#424e54',
        },
        centered: {
            fontWeight: '600',
            position: 'absolute',
            width: size,
            height: size,
            lineHeight: size,
            textShadowColor: color(props.labelColor).isDark() ? 'white' : 'black',
            textShadowOffset: {
                width: 0,
                height: 0,
            },
            textShadowRadius: size / 16,
        },
    });
};
/**
 * [Progress Icon ](https://github.com/etn-ccis/blui-progress-icons/tree/master/react-native)
 *
 * @param props ProgressIconProps
 * @returns A wrapper around a progress icon for handling label positioning
 */
export const ProgressIcon = (props) => {
    const { showPercentLabel, labelPosition = 'center', children, percent, styles = {} } = props;
    const defaultStyles = useStyles(props);
    const getFlexDirection = () => {
        switch (labelPosition) {
            case 'left':
                return 'row';
            case 'right':
                return 'row-reverse';
            case 'top':
                return 'column';
            case 'bottom':
                return 'column-reverse';
            case 'center':
            default:
                return 'row';
        }
    };
    const isCentered = () => labelPosition === 'center';
    return (React.createElement(View, { style: [
            {
                flexDirection: getFlexDirection(),
            },
            defaultStyles.progressIcon,
            styles.progressIcon,
        ] },
        showPercentLabel && (React.createElement(Text, { style: [
                defaultStyles.progressIconLabel,
                styles.progressIconLabel,
                isCentered() ? defaultStyles.centered : {},
                isCentered() ? styles.centered : {},
            ] },
            percent,
            "%")),
        children));
};