@eslam-elmeniawy/react-native-common-components/lib/module/components/ImagePlaceholder/Image.js

Common `ReactNative` components packed in library for usage in projects.

"use strict";

// External imports.
import * as React from 'react';

// Types imports.

// Internal imports.
import styles from "./ImagePlaceholder.styles.js";
import Placeholder from "./Placeholder.js";
import Loading from "./Loading.js";

// Create fallback FastImage component ONCE at module level, not per-render
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const FallbackFastImage = /*#__PURE__*/React.forwardRef((imageProps, ref) => /*#__PURE__*/React.createElement('FastImage', {
  ...imageProps,
  ref
}));
FallbackFastImage.resizeMode = {
  contain: 'contain',
  stretch: 'stretch',
  center: 'center',
  cover: 'cover'
};
FallbackFastImage.priority = {
  low: 'low',
  normal: 'normal',
  high: 'high'
};
FallbackFastImage.cacheControl = {
  web: 'web',
  cacheOnly: 'cacheOnly',
  immutable: 'immutable'
};
let FastImage = null;
try {
  FastImage = require('@d11/react-native-fast-image').default;
} catch (error) {
  FastImage = null;
}
const FastImageLocal = FastImage || FallbackFastImage;
const Image = /*#__PURE__*/React.memo(props => {
  const {
    source,
    placeholder,
    vectorPlaceholder,
    resizeMode,
    priority,
    cache,
    loadingProps,
    theme,
    isLoading,
    isError,
    progress,
    progressSize,
    setLoadingState,
    setErrorState,
    setProgressState,
    setProgressSizeState
  } = props;
  let _resizeMode;
  switch (resizeMode) {
    case 'contain':
      _resizeMode = FastImageLocal?.resizeMode?.contain;
      break;
    case 'stretch':
      _resizeMode = FastImageLocal?.resizeMode?.stretch;
      break;
    case 'center':
      _resizeMode = FastImageLocal?.resizeMode?.center;
      break;
    default:
      _resizeMode = FastImageLocal?.resizeMode?.cover;
      break;
  }
  let _priority;
  switch (priority) {
    case 'low':
      _priority = FastImageLocal?.priority?.low;
      break;
    case 'high':
      _priority = FastImageLocal?.priority?.high;
      break;
    default:
      _priority = FastImageLocal?.priority?.normal;
      break;
  }
  let _cache;
  switch (cache) {
    case 'web':
      _cache = FastImageLocal?.cacheControl?.web;
      break;
    case 'cacheOnly':
      _cache = FastImageLocal?.cacheControl?.cacheOnly;
      break;
    default:
      _cache = FastImageLocal?.cacheControl?.immutable;
      break;
  }
  let _shouldDisplayLoading = isLoading;
  if (loadingProps?.showLoading === false) {
    _shouldDisplayLoading = false;
  }
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(Placeholder, {
      source: source,
      placeholder: placeholder,
      vectorPlaceholder: vectorPlaceholder,
      resizeMode: resizeMode,
      isLoading: isLoading,
      isError: isError,
      progress: progress,
      progressSize: progressSize
    }), Boolean(source) && !isError && /*#__PURE__*/_jsx(FastImageLocal, {
      style: styles.image,
      source: {
        uri: source,
        priority: _priority,
        cache: _cache
      },
      resizeMode: _resizeMode,
      onLoadStart: () => setLoadingState?.(true),
      onLoadEnd: () => setLoadingState?.(false),
      onError: () => setErrorState?.(true),
      onProgress: e => setProgressState?.(e.nativeEvent.total > 0 ? e.nativeEvent.loaded / e.nativeEvent.total : 0)
    }), _shouldDisplayLoading && /*#__PURE__*/_jsx(Loading, {
      loadingProps: loadingProps,
      theme: theme,
      setProgressSizeState: setProgressSizeState,
      progress: progress,
      progressSize: progressSize
    })]
  });
});
export default Image;
//# sourceMappingURL=Image.js.map