New List
by interstellarcg Updated: Nov 24, 2022
Guide Kit
export const FullStateHandler: React.FC<{ state: { loading: boolean; error: boolean | null; success: boolean; }; refreshTrigger?: any; loadingText?: string; errorText?: string; successText?: string; errorButtonText?: string; successButtonText?: string; onErrorButtonPress?: () => void; onSuccessButtonPress?: () => void; ShowErrorButton?: boolean; ShowSuccessButton?: boolean; hideAfterSuccess?: boolean; TimeToHideAfterSuccess?: number; lottieSize?: number; ErrorlottieSource?: any; SuccesslottieSource?: any; LottieProps?: { errorLottie: AnimatedLottieViewProps; successLottie: AnimatedLottieViewProps; loadingLottie: AnimatedLottieViewProps; }; useLottieForLoader?: boolean; LoadingLottieSource?: boolean; }> = ({ state, loadingText, errorText, successText, errorButtonText, successButtonText, onErrorButtonPress, onSuccessButtonPress, ShowErrorButton, ShowSuccessButton, hideAfterSuccess, TimeToHideAfterSuccess, refreshTrigger, lottieSize, ErrorlottieSource, SuccesslottieSource, LottieProps, useLottieForLoader, LoadingLottieSource, }) => { const colorScheme = useColorScheme(); const [visible, setVisible] = React.useState(true); React.useEffect(() => { if (state.success && hideAfterSuccess) { setTimeout(() => { setVisible(false); }, TimeToHideAfterSuccess); } }, [state, refreshTrigger]); const animation = useRef(null); return ( <> visible && ( <> {state.loading ? ( <> {useLottieForLoader ? ( <LottieView autoPlay loop={true} ref={animation} style={{ width: POD(lottieSize, windowWidth / 20), height: POD(lottieSize, windowWidth / 20), backgroundColor: "#eee", }} // Find more Lottie files at https://lottiefiles.com/featured source={require(POD( LoadingLottieSource, "../../assets/lottie/main-loader.json" ))} {...LottieProps?.loadingLottie} /> ) : ( <ActivityIndicator animating color={Colors[colorScheme].tint} size={sizes.indicator.sm} /> )} {loadingText} </> ) : state.error ? ( <> <StateViewText>{errorText}</StateViewText> <LottieView autoPlay loop={false} ref={animation} style={{ width: POD(lottieSize, windowWidth / 20), height: POD(lottieSize, windowWidth / 20), backgroundColor: "#eee", }} // Find more Lottie files at https://lottiefiles.com/featured source={require(POD( ErrorlottieSource, "../../assets/lottie/fail.json" ))} {...LottieProps?.errorLottie} /> {ShowErrorButton && ( <Button onPress={onErrorButtonPress}>{errorButtonText}</Button> )} </> ) : state.success ? ( <> <LottieView autoPlay loop={false} ref={animation} style={{ width: POD(lottieSize, windowWidth / 20), height: POD(lottieSize, windowWidth / 20), backgroundColor: "#eee", }} // Find more Lottie files at https://lottiefiles.com/featured source={require(POD( SuccesslottieSource, "../../assets/lottie/success_1.json" ))} {...LottieProps?.errorLottie} /> <StateViewText type="success">{successText}</StateViewText> {ShowSuccessButton && ( <Button onPress={onSuccessButtonPress}> {successButtonText} </Button> )} </> ) : ( <></> )} </> ) </> ); };