@gechiui/block-editor/build/components/block-content-overlay/index.js

Generic block editor.

"use strict";

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

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

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

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

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

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

var _classnames = _interopRequireDefault(require("classnames"));

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */

/**
 * External dependencies
 */
function BlockContentOverlay(_ref) {
  let {
    clientId,
    tagName: TagName = 'div',
    wrapperProps,
    className
  } = _ref;
  const baseClassName = 'block-editor-block-content-overlay';
  const [isOverlayActive, setIsOverlayActive] = (0, _element.useState)(true);
  const [isHovered, setIsHovered] = (0, _element.useState)(false);
  const {
    isParentSelected,
    hasChildSelected,
    isDraggingBlocks,
    isParentHighlighted
  } = (0, _data.useSelect)(select => {
    const {
      isBlockSelected,
      hasSelectedInnerBlock,
      isDraggingBlocks: _isDraggingBlocks,
      isBlockHighlighted
    } = select(_store.store);
    return {
      isParentSelected: isBlockSelected(clientId),
      hasChildSelected: hasSelectedInnerBlock(clientId, true),
      isDraggingBlocks: _isDraggingBlocks(),
      isParentHighlighted: isBlockHighlighted(clientId)
    };
  }, [clientId]);
  const classes = (0, _classnames.default)(baseClassName, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.className, className, {
    'overlay-active': isOverlayActive,
    'parent-highlighted': isParentHighlighted,
    'is-dragging-blocks': isDraggingBlocks
  });
  (0, _element.useEffect)(() => {
    // Reenable when blocks are not in use.
    if (!isParentSelected && !hasChildSelected && !isOverlayActive) {
      setIsOverlayActive(true);
    } // Disable if parent selected by another means (such as list view).
    // We check hover to ensure the overlay click interaction is not taking place.
    // Trying to click the overlay will select the parent block via its 'focusin'
    // listener on the wrapper, so if the block is selected while hovered we will
    // let the mouseup disable the overlay instead.


    if (isParentSelected && !isHovered && isOverlayActive) {
      setIsOverlayActive(false);
    } // Ensure overlay is disabled if a child block is selected.


    if (hasChildSelected && isOverlayActive) {
      setIsOverlayActive(false);
    }
  }, [isParentSelected, hasChildSelected, isOverlayActive, isHovered]); // Disabled because the overlay div doesn't actually have a role or functionality
  // as far as the a11y is concerned. We're just catching the first click so that
  // the block can be selected without interacting with its contents.

  /* eslint-disable jsx-a11y/no-static-element-interactions */

  return (0, _element.createElement)(TagName, (0, _extends2.default)({}, wrapperProps, {
    className: classes,
    onMouseEnter: () => setIsHovered(true),
    onMouseLeave: () => setIsHovered(false),
    onMouseUp: isOverlayActive ? () => setIsOverlayActive(false) : undefined
  }), wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.children);
}
/* eslint-enable jsx-a11y/no-static-element-interactions */
//# sourceMappingURL=index.js.map