@janiscommerce/ui-native/dist/components/molecules/Button/utils/getButtonStyles/index.js

components library for Janis app

import { moderateScale, scaledForDevice } from '../../../../../scale';
import { palette } from '../../../../../theme/palette';
import { colorConfig, styleConfig } from './utils/styleConfigs';
import { validTypes, validVariants, validIconPositions, verticalHeights } from './utils/constants';
import { defaultColor, defaultIconPosition, defaultType, defaultVariant, } from './utils/defaultValues';
const containerStyle = ({ isDisabled, isLoading, color, variant, type, iconPosition, }) => {
    const selectedColor = palette[color] || palette[defaultColor];
    const { main, disabled } = colorConfig(selectedColor);
    const { container } = styleConfig;
    const validType = validTypes.includes(type) ? type : defaultType;
    const validVariant = validVariants.includes(variant) ? variant : defaultVariant;
    const mainBgColor = main.background[validVariant];
    const mainBorderColor = main.border[validVariant];
    const disabledBgColor = disabled.background[validVariant];
    const disabledBorderColor = disabled.border[validType][validVariant];
    const containerHeight = container.height[validType];
    // validation of height
    const hasVerticalHeight = verticalHeights.includes(iconPosition);
    return {
        borderWidth: 1,
        borderColor: isDisabled || isLoading ? disabledBorderColor : mainBorderColor,
        backgroundColor: isDisabled || isLoading ? disabledBgColor : mainBgColor,
        paddingHorizontal: scaledForDevice(type === 'main' ? 12 : 8, moderateScale),
        ...(hasVerticalHeight && { paddingVertical: scaledForDevice(10, moderateScale) }),
        ...(!hasVerticalHeight && {
            height: variant !== 'text' ? containerHeight : scaledForDevice(35, moderateScale),
        }),
    };
};
const pressedStyle = ({ variant, color }) => {
    const selectedColor = palette[color] || palette[defaultColor];
    const { pressed } = colorConfig(selectedColor);
    const validVariant = validVariants.includes(variant) ? variant : defaultVariant;
    return {
        borderColor: pressed.border[validVariant],
        backgroundColor: pressed.background[validVariant],
    };
};
const directionWrapperStyle = ({ iconPosition }) => {
    const { directionWrapper } = styleConfig;
    const flexCenter = directionWrapper.center;
    const validIconPosition = validIconPositions.includes(iconPosition)
        ? iconPosition
        : defaultIconPosition;
    const flexDirection = directionWrapper.flexDirection[validIconPosition];
    return {
        ...flexCenter,
        flexDirection,
    };
};
const baseTextStyle = ({ isDisabled, type, variant, color, isLoading }) => {
    const selectedColor = palette[color] || palette[defaultColor];
    const { main, disabled } = colorConfig(selectedColor);
    const { text: textStyle } = styleConfig;
    const validType = validTypes.includes(type) ? type : defaultType;
    const validVariant = validVariants.includes(variant) ? variant : defaultVariant;
    const mainTextColor = main.text[validType][validVariant];
    const disabledTextColor = disabled.text[validType][validVariant];
    return {
        ...textStyle,
        color: isDisabled || isLoading ? disabledTextColor : mainTextColor,
    };
};
const textStyle = (params) => ({
    ...baseTextStyle(params),
    fontSize: scaledForDevice(14, moderateScale),
});
const iconStyle = (params) => {
    const { hasIconAndText, iconPosition } = params;
    const { icon } = styleConfig;
    return {
        ...baseTextStyle(params),
        ...((!!hasIconAndText && icon.margin[iconPosition]) || {}),
    };
};
const getButtonStyles = (params) => ({
    container: containerStyle(params),
    pressed: pressedStyle(params),
    direction: directionWrapperStyle(params),
    text: textStyle(params),
    icon: iconStyle(params),
    loadingColor: palette.primary.main,
});
export default getButtonStyles;