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

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.IMAGE_DEFAULT_FOCAL_POINT = void 0;

var _element = require("@wordpress/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _reactNative = require("react-native");

var _i18n = require("@wordpress/i18n");

var _components = require("@wordpress/components");

var _icons = require("@wordpress/icons");

var _compose = require("@wordpress/compose");

var _utils = require("./utils");

var _style = _interopRequireDefault(require("./style.scss"));

var _iconRetry = _interopRequireDefault(require("./icon-retry"));

var _imageEditingButton = _interopRequireDefault(require("./image-editing-button"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const ICON_TYPE = {
  PLACEHOLDER: 'placeholder',
  RETRY: 'retry',
  UPLOAD: 'upload'
};
const IMAGE_DEFAULT_FOCAL_POINT = {
  x: 0.5,
  y: 0.5
};
exports.IMAGE_DEFAULT_FOCAL_POINT = IMAGE_DEFAULT_FOCAL_POINT;

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] = (0, _element.useState)(null);
  const [containerSize, setContainerSize] = (0, _element.useState)(null);
  (0, _element.useEffect)(() => {
    let isCurrent = true;

    if (url) {
      _reactNative.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 (0, _element.createElement)(_components.Icon, (0, _extends2.default)({
          icon: retryIcon || _iconRetry.default
        }, _style.default.iconRetry));

      case ICON_TYPE.PLACEHOLDER:
        iconStyle = iconPlaceholderStyles;
        break;

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

    return (0, _element.createElement)(_components.Icon, (0, _extends2.default)({
      icon: _icons.image
    }, iconStyle));
  };

  const iconPlaceholderStyles = (0, _compose.usePreferredColorSchemeStyle)(_style.default.iconPlaceholder, _style.default.iconPlaceholderDark);
  const iconUploadStyles = (0, _compose.usePreferredColorSchemeStyle)(_style.default.iconUpload, _style.default.iconUploadDark);
  const placeholderStyles = [(0, _compose.usePreferredColorSchemeStyle)(_style.default.imageContainerUpload, _style.default.imageContainerUploadDark), focalPoint && _style.default.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 = _style.default.wide) === null || _styles$wide === void 0 ? void 0 : _styles$wide.width;
  const imageContainerStyles = [_style.default.imageContent, {
    width: imageWidth === ((_styles$wide2 = _style.default.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 = _style.default.wide) === null || _styles$wide3 === void 0 ? void 0 : _styles$wide3.width
  }, focalPoint && _style.default.focalPointContainer];
  const imageStyles = [{
    opacity: isUploadInProgress ? 0.3 : 1,
    height: containerSize === null || containerSize === void 0 ? void 0 : containerSize.height
  }, focalPoint && _style.default.focalPoint, focalPoint && (0, _utils.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 (0, _element.createElement)(_reactNative.View, {
    style: [_style.default.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
  }, (0, _element.createElement)(_reactNative.View, {
    accessible: true,
    disabled: !isSelected,
    accessibilityLabel: alt,
    accessibilityHint: (0, _i18n.__)('Double tap and hold to edit'),
    accessibilityRole: 'imagebutton',
    key: url,
    style: imageContainerStyles
  }, isSelected && highlightSelected && !(isUploadInProgress || isUploadFailed) && (0, _element.createElement)(_reactNative.View, {
    style: [_style.default.imageBorder, {
      height: containerSize === null || containerSize === void 0 ? void 0 : containerSize.height
    }]
  }), !imageData ? (0, _element.createElement)(_reactNative.View, {
    style: placeholderStyles
  }, (0, _element.createElement)(_reactNative.View, {
    style: _style.default.imageUploadingIconContainer
  }, getIcon(ICON_TYPE.UPLOAD))) : (0, _element.createElement)(_reactNative.View, {
    style: focalPoint && _style.default.focalPointContent
  }, (0, _element.createElement)(_reactNative.Image, (0, _extends2.default)({}, !resizeMode && {
    aspectRatio: imageData === null || imageData === void 0 ? void 0 : imageData.aspectRatio
  }, {
    style: imageStyles,
    source: {
      uri: url
    }
  }, !focalPoint && {
    resizeMethod: 'scale'
  }, {
    resizeMode: resizeMode
  }))), isUploadFailed && retryMessage && (0, _element.createElement)(_reactNative.View, {
    style: [_style.default.imageContainer, _style.default.retryContainer]
  }, (0, _element.createElement)(_reactNative.View, {
    style: [_style.default.retryIcon, retryIcon && _style.default.customRetryIcon]
  }, getIcon(ICON_TYPE.RETRY)), (0, _element.createElement)(_reactNative.Text, {
    style: _style.default.uploadFailedText
  }, retryMessage))), editButton && isSelected && !isUploadInProgress && (0, _element.createElement)(_imageEditingButton.default, {
    onSelectMediaUploadOption: onSelectMediaUploadOption,
    openMediaOptions: openMediaOptions,
    url: !isUploadFailed && imageData && url,
    pickerOptions: mediaPickerOptions
  }));
};

var _default = ImageComponent;
exports.default = _default;
//# sourceMappingURL=index.native.js.map