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

A React Native component for interactive 360-degree product views

"use strict";

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