stream-chat-react-native-core/lib/module/components/Attachment/GalleryImage.js

The official React Native and Expo components for Stream Chat, a service for building chat applications

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MemoizedGalleryImage = exports.LoadableGalleryImage = exports.GalleryImageWithContext = exports.GalleryImage = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _ComponentsContext = require("../../contexts/componentsContext/ComponentsContext");
var _useLoadingImage2 = require("../../hooks/useLoadingImage");
var _useStableCallback = require("../../hooks/useStableCallback");
var _utils = require("../../utils/utils");
var _jsxRuntime = require("react/jsx-runtime");
var _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Attachment/GalleryImage.tsx";
var _excluded = ["accessibilityLabel", "ImageComponent", "uri", "style"];
var GalleryImageWithContext = props => {
  var _props$accessibilityL = props.accessibilityLabel,
    accessibilityLabel = _props$accessibilityL === void 0 ? 'Gallery Image' : _props$accessibilityL,
    _props$ImageComponent = props.ImageComponent,
    ImageComponent = _props$ImageComponent === void 0 ? _reactNative.Image : _props$ImageComponent,
    uri = props.uri,
    style = props.style,
    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
  if (!(0, _utils.isLocalUrl)(uri)) {
    return (0, _jsxRuntime.jsx)(ImageComponent, {
      ...rest,
      accessibilityLabel: accessibilityLabel,
      style: [styles.image, style],
      source: {
        uri: (0, _utils.makeImageCompatibleUrl)(uri)
      }
    });
  }
  return (0, _jsxRuntime.jsx)(_reactNative.Image, {
    ...rest,
    accessibilityLabel: accessibilityLabel,
    style: [styles.image, style],
    source: {
      uri: (0, _utils.makeImageCompatibleUrl)(uri)
    }
  });
};
exports.GalleryImageWithContext = GalleryImageWithContext;
var MemoizedGalleryImage = exports.MemoizedGalleryImage = _react.default.memo(GalleryImageWithContext, (prevProps, nextProps) => (0, _utils.getUrlWithoutParams)(prevProps.uri) === (0, _utils.getUrlWithoutParams)(nextProps.uri));
var GalleryImage = props => {
  var _useComponentsContext = (0, _ComponentsContext.useComponentsContext)(),
    ImageComponent = _useComponentsContext.ImageComponent;
  return (0, _jsxRuntime.jsx)(MemoizedGalleryImage, {
    ImageComponent: ImageComponent,
    ...props
  });
};
exports.GalleryImage = GalleryImage;
var LoadableGalleryImage = ({
  accessibilityLabel = 'Gallery Image',
  children,
  containerStyle,
  imageStyle,
  localId,
  resizeMode,
  uri
}) => {
  var _useComponentsContext2 = (0, _ComponentsContext.useComponentsContext)(),
    AttachmentUploadIndicator = _useComponentsContext2.AttachmentUploadIndicator,
    ImageLoadingFailedIndicator = _useComponentsContext2.ImageLoadingFailedIndicator,
    ImageLoadingIndicator = _useComponentsContext2.ImageLoadingIndicator;
  var _useLoadingImage = (0, _useLoadingImage2.useLoadingImage)(),
    isLoadingImage = _useLoadingImage.isLoadingImage,
    isLoadingImageError = _useLoadingImage.isLoadingImageError,
    onReloadImage = _useLoadingImage.onReloadImage,
    setLoadingImage = _useLoadingImage.setLoadingImage,
    setLoadingImageError = _useLoadingImage.setLoadingImageError;
  var onLoadStart = (0, _useStableCallback.useStableCallback)(() => {
    setLoadingImageError(false);
    setLoadingImage(true);
  });
  var onLoad = (0, _useStableCallback.useStableCallback)(() => {
    setTimeout(() => {
      setLoadingImage(false);
      setLoadingImageError(false);
    }, 0);
  });
  var onError = (0, _useStableCallback.useStableCallback)(({
    nativeEvent: {
      error
    }
  }) => {
    console.warn(error);
    setLoadingImage(false);
    setLoadingImageError(true);
  });
  return (0, _jsxRuntime.jsx)(_reactNative.View, {
    style: [styles.image, containerStyle],
    children: isLoadingImageError ? (0, _jsxRuntime.jsx)(ImageLoadingFailedIndicator, {
      onReloadImage: onReloadImage
    }) : (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [(0, _jsxRuntime.jsx)(GalleryImage, {
        accessibilityLabel: accessibilityLabel,
        onError: onError,
        onLoad: onLoad,
        onLoadStart: onLoadStart,
        resizeMode: resizeMode,
        style: imageStyle,
        uri: uri
      }), children, isLoadingImage ? (0, _jsxRuntime.jsx)(ImageLoadingIndicator, {}) : null, (0, _jsxRuntime.jsx)(AttachmentUploadIndicator, {
        localId: localId,
        sourceUrl: uri,
        variant: "overlay"
      })]
    })
  });
};
exports.LoadableGalleryImage = LoadableGalleryImage;
var styles = _reactNative.StyleSheet.create({
  image: {
    flex: 1
  }
});
//# sourceMappingURL=GalleryImage.js.map