@wordpress/components/build-module/mobile/image/index.native.js

UI components for WordPress.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@wordpress/element";

/**
 * External dependencies
 */
import { Image, Text, View } from 'react-native';
/**
 * WordPress dependencies
 */

import { __ } from '@wordpress/i18n';
import { Icon } from '@wordpress/components';
import { image as icon } from '@wordpress/icons';
import { usePreferredColorSchemeStyle } from '@wordpress/compose';
import { useEffect, useState } from '@wordpress/element';
/**
 * Internal dependencies
 */

import { getImageWithFocalPointStyles } from './utils';
import styles from './style.scss';
import SvgIconRetry from './icon-retry';
import ImageEditingButton from './image-editing-button';
const ICON_TYPE = {
  PLACEHOLDER: 'placeholder',
  RETRY: 'retry',
  UPLOAD: 'upload'
};
export const IMAGE_DEFAULT_FOCAL_POINT = {
  x: 0.5,
  y: 0.5
};

const ImageComponent = ({
  align,
  alt,
  editButton = true,
  focalPoint,
  height: imageHeight,
  highlightSelected = true,
  isSelected,
  isUploadFailed,
  isUploadInProgress,
  mediaPickerOptions,
  onImageDataLoad,
  onSelectMediaUploadOption,
  openMediaOptions,
  resizeMode,
  retryMessage,
  retryIcon,
  url,
  shapeStyle,
  style,
  width: imageWidth
}) => {
  var _styles$wide, _styles$wide2, _styles$wide3;

  const [imageData, setImageData] = useState(null);
  const [containerSize, setContainerSize] = useState(null);
  useEffect(() => {
    let isCurrent = true;

    if (url) {
      Image.getSize(url, (imgWidth, imgHeight) => {
        if (!isCurrent) {
          return;
        }

        const metaData = {
          aspectRatio: imgWidth / imgHeight,
          width: imgWidth,
          height: imgHeight
        };
        setImageData(metaData);

        if (onImageDataLoad) {
          onImageDataLoad(metaData);
        }
      });
    }

    return () => isCurrent = false;
  }, [url]);

  const onContainerLayout = event => {
    const {
      height,
      width
    } = event.nativeEvent.layout;

    if (width !== 0 && height !== 0 && ((containerSize === null || containerSize === void 0 ? void 0 : containerSize.width) !== width || (containerSize === null || containerSize === void 0 ? void 0 : containerSize.height) !== height)) {
      setContainerSize({
        width,
        height
      });
    }
  };

  const getIcon = iconType => {
    let iconStyle;

    switch (iconType) {
      case ICON_TYPE.RETRY:
        return createElement(Icon, _extends({
          icon: retryIcon || SvgIconRetry
        }, styles.iconRetry));

      case ICON_TYPE.PLACEHOLDER:
        iconStyle = iconPlaceholderStyles;
        break;

      case ICON_TYPE.UPLOAD:
        iconStyle = iconUploadStyles;
        break;
    }

    return createElement(Icon, _extends({
      icon: icon
    }, iconStyle));
  };

  const iconPlaceholderStyles = usePreferredColorSchemeStyle(styles.iconPlaceholder, styles.iconPlaceholderDark);
  const iconUploadStyles = usePreferredColorSchemeStyle(styles.iconUpload, styles.iconUploadDark);
  const placeholderStyles = [usePreferredColorSchemeStyle(styles.imageContainerUpload, styles.imageContainerUploadDark), focalPoint && styles.imageContainerUploadWithFocalpoint, imageHeight && {
    height: imageHeight
  }];
  const customWidth = (imageData === null || imageData === void 0 ? void 0 : imageData.width) < (containerSize === null || containerSize === void 0 ? void 0 : containerSize.width) ? imageData === null || imageData === void 0 ? void 0 : imageData.width : (_styles$wide = styles.wide) === null || _styles$wide === void 0 ? void 0 : _styles$wide.width;
  const imageContainerStyles = [styles.imageContent, {
    width: imageWidth === ((_styles$wide2 = styles.wide) === null || _styles$wide2 === void 0 ? void 0 : _styles$wide2.width) || imageData && imageWidth > 0 && imageWidth < (containerSize === null || containerSize === void 0 ? void 0 : containerSize.width) ? imageWidth : customWidth
  }, resizeMode && {
    width: (_styles$wide3 = styles.wide) === null || _styles$wide3 === void 0 ? void 0 : _styles$wide3.width
  }, focalPoint && styles.focalPointContainer];
  const imageStyles = [{
    opacity: isUploadInProgress ? 0.3 : 1,
    height: containerSize === null || containerSize === void 0 ? void 0 : containerSize.height
  }, focalPoint && styles.focalPoint, focalPoint && getImageWithFocalPointStyles(focalPoint, containerSize, imageData), !focalPoint && imageData && containerSize && {
    height: (imageData === null || imageData === void 0 ? void 0 : imageData.width) > (containerSize === null || containerSize === void 0 ? void 0 : containerSize.width) ? (containerSize === null || containerSize === void 0 ? void 0 : containerSize.width) / (imageData === null || imageData === void 0 ? void 0 : imageData.aspectRatio) : undefined
  }, imageHeight && {
    height: imageHeight
  }, shapeStyle];
  return createElement(View, {
    style: [styles.container, // only set alignItems if an image exists because alignItems causes the placeholder
    // to disappear when an aligned image can't be downloaded
    // https://github.com/wordpress-mobile/gutenberg-mobile/issues/1592
    imageData && align && {
      alignItems: align
    }, style],
    onLayout: onContainerLayout
  }, createElement(View, {
    accessible: true,
    disabled: !isSelected,
    accessibilityLabel: alt,
    accessibilityHint: __('Double tap and hold to edit'),
    accessibilityRole: 'imagebutton',
    key: url,
    style: imageContainerStyles
  }, isSelected && highlightSelected && !(isUploadInProgress || isUploadFailed) && createElement(View, {
    style: [styles.imageBorder, {
      height: containerSize === null || containerSize === void 0 ? void 0 : containerSize.height
    }]
  }), !imageData ? createElement(View, {
    style: placeholderStyles
  }, createElement(View, {
    style: styles.imageUploadingIconContainer
  }, getIcon(ICON_TYPE.UPLOAD))) : createElement(View, {
    style: focalPoint && styles.focalPointContent
  }, createElement(Image, _extends({}, !resizeMode && {
    aspectRatio: imageData === null || imageData === void 0 ? void 0 : imageData.aspectRatio
  }, {
    style: imageStyles,
    source: {
      uri: url
    }
  }, !focalPoint && {
    resizeMethod: 'scale'
  }, {
    resizeMode: resizeMode
  }))), isUploadFailed && retryMessage && createElement(View, {
    style: [styles.imageContainer, styles.retryContainer]
  }, createElement(View, {
    style: [styles.retryIcon, retryIcon && styles.customRetryIcon]
  }, getIcon(ICON_TYPE.RETRY)), createElement(Text, {
    style: styles.uploadFailedText
  }, retryMessage))), editButton && isSelected && !isUploadInProgress && createElement(ImageEditingButton, {
    onSelectMediaUploadOption: onSelectMediaUploadOption,
    openMediaOptions: openMediaOptions,
    url: !isUploadFailed && imageData && url,
    pickerOptions: mediaPickerOptions
  }));
};

export default ImageComponent;
//# sourceMappingURL=index.native.js.map