@garlicbed/react-native-slide360/lib/module/ImagePlaceholder.component.js

A React Native component for interactive 360-degree product views

"use strict";

import { useState } from 'react';
import { ActivityIndicator, Image, Pressable, StyleSheet, View, Text } from 'react-native';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const FallbackComponent = () => /*#__PURE__*/_jsx(View, {
  style: styles.failedToLoad,
  children: /*#__PURE__*/_jsx(Text, {
    children: "Failed to load the image"
  })
});
const ImagePlaceholder = ({
  source,
  height,
  onPressImage,
  disabled,
  imageStyle = {},
  fallbackComponent = /*#__PURE__*/_jsx(FallbackComponent, {})
}) => {
  const [isLoading, setIsLoading] = useState(true);
  const [isFailed, setIsFailed] = useState(false);
  const onLoadEnd = () => setIsLoading(false);
  const onError = () => {
    // Giving a time to breath
    setTimeout(() => {
      setIsFailed(true);
    }, 500);
  };
  if (!source) {
    return /*#__PURE__*/_jsx(View, {
      style: {
        height
      },
      children: /*#__PURE__*/_jsx(ActivityIndicator, {
        size: "large",
        style: styles.loader
      })
    });
  }
  const handleOnPressImage = () => onPressImage?.({
    source,
    isLoading,
    isFailed
  });
  const imageSlideStyles = [styles.imageContainer, imageStyle, {
    height: '100%',
    width: 'auto'
  }];
  return /*#__PURE__*/_jsxs(Pressable, {
    onPress: handleOnPressImage,
    disabled: disabled,
    children: [/*#__PURE__*/_jsx(ActivityIndicator, {
      size: "large",
      hidesWhenStopped: true,
      animating: isLoading,
      style: styles.loader
    }), isFailed ? fallbackComponent : /*#__PURE__*/_jsx(Image, {
      source: source,
      style: imageSlideStyles,
      onError: onError,
      onLoadEnd: onLoadEnd
    })]
  });
};
const styles = StyleSheet.create({
  loader: {
    position: 'absolute',
    zIndex: 2,
    alignSelf: 'center',
    top: '40%'
  },
  imageContainer: {
    resizeMode: 'contain'
  },
  failedToLoad: {
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center'
  }
});
export default ImagePlaceholder;
//# sourceMappingURL=ImagePlaceholder.component.js.map