@wordpress/block-library/build/gallery/gallery.native.js

Block library for the WordPress editor.

"use strict";

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

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

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

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

var _lodash = require("lodash");

var _shared = require("./shared");

var _galleryStyles = _interopRequireDefault(require("./gallery-styles.scss"));

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

var _blockEditor = require("@wordpress/block-editor");

var _reactNativeBridge = require("@wordpress/react-native-bridge");

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

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

/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

/**
 * WordPress dependencies
 */
const TILE_SPACING = 8; // we must limit displayed columns since readable content max-width is 580px

const MAX_DISPLAYED_COLUMNS = 4;
const MAX_DISPLAYED_COLUMNS_NARROW = 2;

const Gallery = props => {
  const [isCaptionSelected, setIsCaptionSelected] = (0, _element.useState)(false);
  const [resizeObserver, sizes] = (0, _compose.useResizeObserver)();
  const [maxWidth, setMaxWidth] = (0, _element.useState)(0);
  (0, _element.useEffect)(_reactNativeBridge.mediaUploadSync, []);
  const {
    mediaPlaceholder,
    attributes,
    images,
    isNarrow,
    onBlur,
    insertBlocksAfter,
    clientId
  } = props;
  (0, _element.useEffect)(() => {
    const {
      width
    } = sizes || {};

    if (width) {
      setMaxWidth(width);
    }
  }, [sizes]);
  const {
    align,
    columns = (0, _shared.defaultColumnsNumber)(images.length)
  } = attributes;
  const displayedColumns = Math.min(columns, isNarrow ? MAX_DISPLAYED_COLUMNS_NARROW : MAX_DISPLAYED_COLUMNS);
  const innerBlocksProps = (0, _blockEditor.useInnerBlocksProps)({}, {
    contentResizeMode: 'stretch',
    allowedBlocks: ['core/image'],
    orientation: 'horizontal',
    renderAppender: false,
    numColumns: displayedColumns,
    marginHorizontal: TILE_SPACING,
    marginVertical: TILE_SPACING,
    __experimentalLayout: {
      type: 'default',
      alignments: []
    },
    gridProperties: {
      numColumns: displayedColumns
    },
    parentWidth: maxWidth + 2 * TILE_SPACING
  });

  const focusGalleryCaption = () => {
    if (!isCaptionSelected) {
      setIsCaptionSelected(true);
    }
  };

  const isFullWidth = align === _components.WIDE_ALIGNMENTS.alignments.full;
  return (0, _element.createElement)(_reactNative.View, {
    style: isFullWidth && _galleryStyles.default.fullWidth
  }, resizeObserver, (0, _element.createElement)(_reactNative.View, innerBlocksProps), (0, _element.createElement)(_reactNative.View, {
    style: [isFullWidth && _galleryStyles.default.fullWidth, _galleryStyles.default.galleryAppender]
  }, mediaPlaceholder), (0, _element.createElement)(_blockEditor.BlockCaption, {
    clientId: clientId,
    isSelected: isCaptionSelected,
    accessible: true,
    accessibilityLabelCreator: caption => (0, _lodash.isEmpty)(caption) ?
    /* translators: accessibility text. Empty gallery caption. */
    'Gallery caption. Empty' : (0, _i18n.sprintf)(
    /* translators: accessibility text. %s: gallery caption. */
    (0, _i18n.__)('Gallery caption. %s'), caption),
    onFocus: focusGalleryCaption,
    onBlur: onBlur // Always assign onBlur as props.
    ,
    insertBlocksAfter: insertBlocksAfter
  }));
};

exports.Gallery = Gallery;
var _default = Gallery;
exports.default = _default;
//# sourceMappingURL=gallery.native.js.map