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
66 lines (65 loc) • 3.13 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { View, Animated } from 'react-native';
export default function Shimmer({ width = '100%', height = 20, borderRadius = 4, style, }) {
const shimmerValue = React.useRef(new Animated.Value(0)).current;
React.useEffect(() => {
const shimmerAnimation = Animated.loop(Animated.sequence([
Animated.timing(shimmerValue, {
toValue: 1,
duration: 1000,
useNativeDriver: true,
}),
Animated.timing(shimmerValue, {
toValue: 0,
duration: 1000,
useNativeDriver: true,
}),
]));
shimmerAnimation.start();
return () => shimmerAnimation.stop();
}, [shimmerValue]);
const opacity = shimmerValue.interpolate({
inputRange: [0, 1],
outputRange: [0.3, 0.8],
});
return (_jsx(Animated.View, { style: [
{
width,
height,
borderRadius,
backgroundColor: '#E5E7EB',
opacity,
},
style,
] }));
}
export function ShimmerButton({ style, ...props }) {
return (_jsx(Shimmer, { width: "100%", height: 48, borderRadius: 8, style: { backgroundColor: '#D1D5DB', ...style }, ...props }));
}
export function ShimmerText({ width = '80%', style, ...props }) {
return (_jsx(Shimmer, { width: width, height: 16, borderRadius: 4, style: { backgroundColor: '#E5E7EB', ...style }, ...props }));
}
export function ShimmerCard({ style, ...props }) {
return (_jsxs(View, { style: {
backgroundColor: 'white',
borderRadius: 8,
padding: 16,
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.1,
shadowRadius: 2,
elevation: 2,
...style,
}, children: [_jsx(ShimmerText, { width: "60%", style: { marginBottom: 8 } }), _jsx(ShimmerText, { width: "40%", style: { marginBottom: 12 } }), _jsx(ShimmerButton, {})] }));
}
export const BankGridShimmer = () => (_jsx(View, { style: { padding: 16 }, children: _jsx(View, { style: {
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',
}, children: Array.from({ length: 12 }).map((_, index) => (_jsxs(View, { style: {
width: '30%',
marginBottom: 16,
alignItems: 'center',
}, children: [_jsx(Shimmer, { width: 60, height: 60, borderRadius: 8 }), _jsx(Shimmer, { width: "80%", height: 12, style: { marginTop: 8 } })] }, index))) }) }));
export const PaymentFormShimmer = () => (_jsxs(View, { style: { padding: 16 }, children: [_jsx(Shimmer, { width: "60%", height: 24, style: { marginBottom: 16 } }), _jsx(Shimmer, { width: "100%", height: 48, borderRadius: 8, style: { marginBottom: 12 } }), _jsx(Shimmer, { width: "40%", height: 16, style: { marginBottom: 24 } }), _jsx(Shimmer, { width: "100%", height: 48, borderRadius: 8 })] }));