zips-react-native-sdk-test
Version:
Lightweight ZIPS Payment Gateway SDK for React Native - Complete payment solution with ZApp wallet payments and Access Bank integration
104 lines (103 loc) • 3.77 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { TouchableOpacity, Text, ActivityIndicator, View, } from 'react-native';
const buttonVariants = {
default: {
backgroundColor: '#007AFF',
borderColor: '#007AFF',
textColor: '#FFFFFF',
},
outlined: {
backgroundColor: 'transparent',
borderColor: '#007AFF',
textColor: '#007AFF',
},
ghost: {
backgroundColor: 'transparent',
borderColor: 'transparent',
textColor: '#007AFF',
},
success: {
backgroundColor: '#10B981',
borderColor: '#10B981',
textColor: '#FFFFFF',
},
danger: {
backgroundColor: '#EF4444',
borderColor: '#EF4444',
textColor: '#FFFFFF',
},
warning: {
backgroundColor: '#F59E0B',
borderColor: '#F59E0B',
textColor: '#FFFFFF',
},
};
const buttonSizes = {
small: {
paddingVertical: 8,
paddingHorizontal: 16,
minHeight: 36,
fontSize: 14,
borderRadius: 8,
},
medium: {
paddingVertical: 12,
paddingHorizontal: 20,
minHeight: 44,
fontSize: 16,
borderRadius: 10,
},
large: {
paddingVertical: 16,
paddingHorizontal: 24,
minHeight: 52,
fontSize: 18,
borderRadius: 12,
},
};
export const Button = ({ onPress, title, children, variant = 'default', size = 'medium', disabled = false, loading = false, fullWidth = false, style, textStyle, icon, iconPosition = 'left', }) => {
const variantStyle = buttonVariants[variant];
const sizeStyle = buttonSizes[size];
const buttonStyle = {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
borderWidth: 2,
backgroundColor: variantStyle.backgroundColor,
borderColor: variantStyle.borderColor,
paddingVertical: sizeStyle.paddingVertical,
paddingHorizontal: sizeStyle.paddingHorizontal,
minHeight: sizeStyle.minHeight,
borderRadius: sizeStyle.borderRadius,
width: fullWidth ? '100%' : 'auto',
...(disabled && {
opacity: 0.6,
backgroundColor: '#9CA3AF',
borderColor: '#9CA3AF',
}),
...style,
};
const textStyleFinal = {
fontSize: sizeStyle.fontSize,
fontWeight: '600',
color: variantStyle.textColor,
textAlign: 'center',
...(disabled && { color: '#6B7280' }),
...textStyle,
};
const isDisabled = disabled || loading;
return (_jsxs(TouchableOpacity, { style: buttonStyle, onPress: onPress, disabled: isDisabled, activeOpacity: 0.8, accessibilityRole: "button", accessibilityState: { disabled: isDisabled }, children: [loading && (_jsx(ActivityIndicator, { size: "small", color: textStyleFinal.color, style: { marginRight: title || children ? 8 : 0 } })), !loading && icon && iconPosition === 'left' && (_jsx(View, { style: { marginRight: title || children ? 8 : 0 }, children: icon })), (title || children) && (_jsx(Text, { style: textStyleFinal, numberOfLines: 1, children: children || title })), !loading && icon && iconPosition === 'right' && (_jsx(View, { style: { marginLeft: title || children ? 8 : 0 }, children: icon }))] }));
};
// Preset button components for common use cases
export function PrimaryButton(props) {
return _jsx(Button, { variant: "default", ...props });
}
export function SecondaryButton(props) {
return _jsx(Button, { variant: "outlined", ...props });
}
export function SuccessButton(props) {
return _jsx(Button, { variant: "success", ...props });
}
export function DangerButton(props) {
return _jsx(Button, { variant: "danger", ...props });
}