@wordpress/block-editor/build/components/block-list/zoom-out-separator.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ZoomOutSeparator = ZoomOutSeparator;
var _clsx = _interopRequireDefault(require("clsx"));
var _components = require("@wordpress/components");
var _compose = require("@wordpress/compose");
var _data = require("@wordpress/data");
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _store = require("../../store");
var _lockUnlock = require("../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function ZoomOutSeparator({
  clientId,
  rootClientId = '',
  position = 'top'
}) {
  const [isDraggedOver, setIsDraggedOver] = (0, _element.useState)(false);
  const {
    sectionRootClientId,
    sectionClientIds,
    insertionPoint,
    blockInsertionPointVisible,
    blockInsertionPoint,
    blocksBeingDragged
  } = (0, _data.useSelect)(select => {
    const {
      getInsertionPoint,
      getBlockOrder,
      getSectionRootClientId,
      isBlockInsertionPointVisible,
      getBlockInsertionPoint,
      getDraggedBlockClientIds
    } = (0, _lockUnlock.unlock)(select(_store.store));
    const root = getSectionRootClientId();
    const sectionRootClientIds = getBlockOrder(root);
    return {
      sectionRootClientId: root,
      sectionClientIds: sectionRootClientIds,
      blockOrder: getBlockOrder(root),
      insertionPoint: getInsertionPoint(),
      blockInsertionPoint: getBlockInsertionPoint(),
      blockInsertionPointVisible: isBlockInsertionPointVisible(),
      blocksBeingDragged: getDraggedBlockClientIds()
    };
  }, []);
  const isReducedMotion = (0, _compose.useReducedMotion)();
  if (!clientId) {
    return;
  }
  let isVisible = false;
  const isSectionBlock = rootClientId === sectionRootClientId && sectionClientIds && sectionClientIds.includes(clientId);
  if (!isSectionBlock) {
    return null;
  }
  const hasTopInsertionPoint = insertionPoint?.index === 0 && clientId === sectionClientIds[insertionPoint.index];
  const hasBottomInsertionPoint = insertionPoint && insertionPoint.hasOwnProperty('index') && clientId === sectionClientIds[insertionPoint.index - 1];

  // We want to show the zoom out separator in either of these conditions:
  // 1. If the inserter has an insertion index set
  // 2. We are dragging a pattern over an insertion point
  if (position === 'top') {
    isVisible = hasTopInsertionPoint || blockInsertionPointVisible && blockInsertionPoint.index === 0 && clientId === sectionClientIds[blockInsertionPoint.index];
  }
  if (position === 'bottom') {
    isVisible = hasBottomInsertionPoint || blockInsertionPointVisible && clientId === sectionClientIds[blockInsertionPoint.index - 1];
  }
  const blockBeingDraggedClientId = blocksBeingDragged[0];
  const isCurrentBlockBeingDragged = blocksBeingDragged.includes(clientId);
  const blockBeingDraggedIndex = sectionClientIds.indexOf(blockBeingDraggedClientId);
  const blockBeingDraggedPreviousSiblingClientId = blockBeingDraggedIndex > 0 ? sectionClientIds[blockBeingDraggedIndex - 1] : null;
  const isCurrentBlockPreviousSiblingOfBlockBeingDragged = blockBeingDraggedPreviousSiblingClientId === clientId;

  // The separators are visually top/bottom of the block, but in actual fact
  // the "top" separator is the "bottom" separator of the previous block.
  // Therefore, this logic hides the separator if the current block is being dragged
  // or if the current block is the previous sibling of the block being dragged.
  if (isCurrentBlockBeingDragged || isCurrentBlockPreviousSiblingOfBlockBeingDragged) {
    isVisible = false;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__unstableAnimatePresence, {
    children: isVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__unstableMotion.div, {
      initial: {
        height: 0
      },
      animate: {
        // Use a height equal to that of the zoom out frame size.
        height: 'calc(1 * var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale)'
      },
      exit: {
        height: 0
      },
      transition: {
        type: 'tween',
        duration: isReducedMotion ? 0 : 0.2,
        ease: [0.6, 0, 0.4, 1]
      },
      className: (0, _clsx.default)('block-editor-block-list__zoom-out-separator', {
        'is-dragged-over': isDraggedOver
      }),
      "data-is-insertion-point": "true",
      onDragOver: () => setIsDraggedOver(true),
      onDragLeave: () => setIsDraggedOver(false),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__unstableMotion.div, {
        initial: {
          opacity: 0
        },
        animate: {
          opacity: 1
        },
        exit: {
          opacity: 0,
          transition: {
            delay: -0.125
          }
        },
        transition: {
          ease: 'linear',
          duration: 0.1,
          delay: 0.125
        },
        children: (0, _i18n.__)('Drop pattern.')
      })
    })
  });
}
//# sourceMappingURL=zoom-out-separator.js.map