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

components library for Janis app

import React from 'react';
import { StyleSheet, View } from 'react-native';
import BaseButton from '../../atoms/BaseButton';
import getButtonStyles from './utils/getButtonStyles';
import Loading from '../../atoms/Loading';
import Typography from '../../atoms/Typography';
import Icon from '../../atoms/Icon';
export const types = {
    main: 'main',
    secondary: 'secondary',
};
export const variant = {
    contained: 'contained',
    outlined: 'outlined',
    text: 'text',
};
export const color = {
    primary: 'primary',
    black: 'black',
    success: 'success',
    error: 'error',
    warning: 'warning',
    alert: 'alert',
};
export const iconPosition = {
    top: 'top',
    bottom: 'bottom',
    left: 'left',
    right: 'right',
};
const Button = ({ type = 'main', variant = 'contained', color = 'primary', iconPosition = 'left', isLoading = false, value = '', icon = null, disabled = false, style, iconStyle, textStyle, ...props }) => {
    if (!value && !icon) {
        return null;
    }
    const validDisabled = disabled || isLoading;
    const hasIconAndText = !!icon && !!value;
    const borderRadius = variant === 'text' ? 6 : 50;
    const buttonStyles = getButtonStyles({
        type,
        variant,
        color,
        iconPosition,
        isLoading,
        isDisabled: disabled,
        hasIconAndText,
    });
    const styles = StyleSheet.create(buttonStyles);
    const LoadingComponent = <Loading isLoading={isLoading} color={styles.loadingColor} size={24}/>;
    const WrapperComponent = (<View style={styles.direction}>
			{icon && <Icon name={icon} style={[styles.icon, iconStyle]} size={24}/>}
			{!!value && <Typography style={[styles.text, textStyle]}>{value}</Typography>}
		</View>);
    return (<BaseButton style={[styles.container, style]} pressedStyle={!validDisabled && styles.pressed} borderRadius={borderRadius} disabled={validDisabled} {...props}>
			{isLoading ? LoadingComponent : WrapperComponent}
		</BaseButton>);
};
export default Button;