@wordpress/block-editor/build/components/block-list/block-list-item.native.js

Generic block editor.

"use strict";

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

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

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

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

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

var _data = require("@wordpress/data");

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

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

var _block = _interopRequireDefault(require("./block"));

var _insertionPoint = _interopRequireDefault(require("./insertion-point"));

var _blockListItemNative = _interopRequireDefault(require("./block-list-item.native.scss"));

var _store = require("../../store");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const stretchStyle = {
  flex: 1
};

class BlockListItem extends _element.Component {
  getMarginHorizontal() {
    const {
      blockAlignment,
      marginHorizontal,
      parentBlockAlignment,
      hasParents,
      blockName,
      parentBlockName,
      parentWidth,
      blockWidth
    } = this.props;
    const {
      isFullWidth,
      isWideWidth,
      isWider,
      isContainerRelated
    } = _components.alignmentHelpers;

    if (isFullWidth(blockAlignment)) {
      if (!hasParents) {
        return 0;
      }

      return marginHorizontal;
    }

    if (isWideWidth(blockAlignment)) {
      return marginHorizontal;
    }

    const screenWidth = Math.floor(_reactNative.Dimensions.get('window').width);

    if (isFullWidth(parentBlockAlignment) && !isWider(blockWidth, 'medium')) {
      if (isContainerRelated(blockName) || isWider(screenWidth, 'mobile')) {
        return marginHorizontal;
      }

      return marginHorizontal * 2;
    }

    if (isContainerRelated(parentBlockName) && !isContainerRelated(blockName)) {
      const isScreenWidthEqual = parentWidth === screenWidth;

      if (isScreenWidthEqual || isWider(screenWidth, 'mobile')) {
        return marginHorizontal * 2;
      }
    }

    return marginHorizontal;
  }

  getContentStyles(readableContentViewStyle) {
    const {
      blockAlignment,
      blockName,
      hasParents,
      parentBlockName
    } = this.props;
    const {
      isFullWidth,
      isContainerRelated
    } = _components.alignmentHelpers;
    return [readableContentViewStyle, isFullWidth(blockAlignment) && !hasParents && {
      width: _blockListItemNative.default.fullAlignment.width
    }, !blockAlignment && hasParents && !isContainerRelated(parentBlockName) && isContainerRelated(blockName) && {
      paddingHorizontal: _blockListItemNative.default.fullAlignmentPadding.paddingLeft
    }];
  }

  render() {
    const {
      blockAlignment,
      clientId,
      isReadOnly,
      shouldShowInsertionPointBefore,
      shouldShowInsertionPointAfter,
      contentResizeMode,
      shouldShowInnerBlockAppender,
      parentWidth,
      marginHorizontal,
      blockName,
      blockWidth,
      ...restProps
    } = this.props;
    const readableContentViewStyle = contentResizeMode === 'stretch' && stretchStyle;
    const {
      isContainerRelated
    } = _components.alignmentHelpers;

    if (!blockWidth) {
      return null;
    }

    return (0, _element.createElement)(_components.ReadableContentView, {
      align: blockAlignment,
      style: [readableContentViewStyle, isContainerRelated(blockName) && parentWidth && {
        maxWidth: parentWidth + 2 * marginHorizontal
      }]
    }, (0, _element.createElement)(_reactNative.View, {
      style: this.getContentStyles(readableContentViewStyle),
      pointerEvents: isReadOnly ? 'box-only' : 'auto'
    }, shouldShowInsertionPointBefore && (0, _element.createElement)(_insertionPoint.default, null), (0, _element.createElement)(_block.default, (0, _extends2.default)({
      key: clientId,
      showTitle: false,
      clientId: clientId,
      parentWidth: parentWidth
    }, restProps, {
      marginHorizontal: this.getMarginHorizontal(),
      blockWidth: blockWidth
    })), !shouldShowInnerBlockAppender() && shouldShowInsertionPointAfter && (0, _element.createElement)(_insertionPoint.default, null)));
  }

}

exports.BlockListItem = BlockListItem;

var _default = (0, _compose.compose)([(0, _data.withSelect)((select, {
  rootClientId,
  isStackedHorizontally,
  clientId
}) => {
  const {
    getBlockOrder,
    getBlockInsertionPoint,
    isBlockInsertionPointVisible,
    getSettings,
    getBlockParents,
    __unstableGetBlockWithoutInnerBlocks
  } = select(_store.store);
  const blockClientIds = getBlockOrder(rootClientId);
  const insertionPoint = getBlockInsertionPoint();
  const blockInsertionPointIsVisible = isBlockInsertionPointVisible();
  const shouldShowInsertionPointBefore = !isStackedHorizontally && blockInsertionPointIsVisible && insertionPoint.rootClientId === rootClientId && ( // if list is empty, show the insertion point (via the default appender)
  blockClientIds.length === 0 || // or if the insertion point is right before the denoted block
  blockClientIds[insertionPoint.index] === clientId);
  const shouldShowInsertionPointAfter = !isStackedHorizontally && blockInsertionPointIsVisible && insertionPoint.rootClientId === rootClientId && // if the insertion point is at the end of the list
  blockClientIds.length === insertionPoint.index && // and the denoted block is the last one on the list, show the indicator at the end of the block
  blockClientIds[insertionPoint.index - 1] === clientId;
  const isReadOnly = getSettings().readOnly;

  const block = __unstableGetBlockWithoutInnerBlocks(clientId);

  const {
    attributes,
    name
  } = block || {};
  const {
    align
  } = attributes || {};
  const parents = getBlockParents(clientId, true);
  const hasParents = !!parents.length;
  const parentBlock = hasParents ? __unstableGetBlockWithoutInnerBlocks(parents[0]) : {};
  const {
    align: parentBlockAlignment
  } = (parentBlock === null || parentBlock === void 0 ? void 0 : parentBlock.attributes) || {};
  const {
    name: parentBlockName
  } = parentBlock || {};
  return {
    shouldShowInsertionPointBefore,
    shouldShowInsertionPointAfter,
    isReadOnly,
    hasParents,
    blockAlignment: align,
    parentBlockAlignment,
    blockName: name,
    parentBlockName
  };
})])(BlockListItem);

exports.default = _default;
//# sourceMappingURL=block-list-item.native.js.map