@naarni/design-system
Version:
Naarni React Native Design System for EV Fleet Apps
47 lines (46 loc) • 2.05 kB
JavaScript
import React, { memo } from 'react';
import { TouchableOpacity, Text, ActivityIndicator, View } from 'react-native';
import { useButtonStyles } from './styles';
/**
* Button component for Naarni Design System
*
* @example
* <Button variant="primary" size="large">Click Me</Button>
*
* @param {ButtonProps} props - Button properties
* @returns {JSX.Element}
*/
const ButtonComponent = ({ variant = 'primary', size = 'medium', loading = false, disabled = false, fullWidth = false, style, textStyle, icon, iconPosition = 'left', onPress, onLongPress, activeOpacity = 0.8, children, loadingText, accessibilityLabel, accessibilityHint, testID, }) => {
const { getButtonStyle, getTextStyle, getIconContainerStyle, getLoadingIndicatorColor, } = useButtonStyles();
const renderContent = () => {
if (loading) {
return (<>
<ActivityIndicator color={getLoadingIndicatorColor(variant)}/>
{loadingText && (<Text style={[
getTextStyle(variant, size, disabled, false, iconPosition),
textStyle
]}>
{loadingText}
</Text>)}
</>);
}
return (<>
{icon && iconPosition === 'left' && (<View style={getIconContainerStyle('left')}>
{icon}
</View>)}
<Text style={[
getTextStyle(variant, size, disabled, !!icon, iconPosition),
textStyle
]}>
{children}
</Text>
{icon && iconPosition === 'right' && (<View style={getIconContainerStyle('right')}>
{icon}
</View>)}
</>);
};
return (<TouchableOpacity style={[getButtonStyle(variant, size, disabled, fullWidth), style]} disabled={disabled || loading} onPress={onPress} onLongPress={onLongPress} activeOpacity={activeOpacity} accessibilityLabel={accessibilityLabel} accessibilityHint={accessibilityHint} testID={testID}>
{renderContent()}
</TouchableOpacity>);
};
export const Button = memo(ButtonComponent);