@gechiui/block-editor/build/components/block-list-appender/index.js

Generic block editor.

"use strict";

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

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

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

var _lodash = require("lodash");

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

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

var _blocks = require("@gechiui/blocks");

var _defaultBlockAppender = _interopRequireDefault(require("../default-block-appender"));

var _buttonBlockAppender = _interopRequireDefault(require("../button-block-appender"));

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

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
function BlockListAppender(_ref) {
  let {
    blockClientIds,
    rootClientId,
    canInsertDefaultBlock,
    isLocked,
    renderAppender: CustomAppender,
    className,
    selectedBlockClientId,
    tagName: TagName = 'div'
  } = _ref;

  if (isLocked || CustomAppender === false) {
    return null;
  }

  let appender;

  if (CustomAppender) {
    // Prefer custom render prop if provided.
    appender = (0, _element.createElement)(CustomAppender, null);
  } else {
    const isDocumentAppender = !rootClientId;
    const isParentSelected = selectedBlockClientId === rootClientId;
    const isAnotherDefaultAppenderAlreadyDisplayed = selectedBlockClientId && !blockClientIds.includes(selectedBlockClientId);

    if (!isDocumentAppender && !isParentSelected && (!selectedBlockClientId || isAnotherDefaultAppenderAlreadyDisplayed)) {
      return null;
    }

    if (canInsertDefaultBlock) {
      // Render the default block appender when renderAppender has not been
      // provided and the context supports use of the default appender.
      appender = (0, _element.createElement)(_defaultBlockAppender.default, {
        rootClientId: rootClientId,
        lastBlockClientId: (0, _lodash.last)(blockClientIds)
      });
    } else {
      // Fallback in the case no renderAppender has been provided and the
      // default block can't be inserted.
      appender = (0, _element.createElement)(_buttonBlockAppender.default, {
        rootClientId: rootClientId,
        className: "block-list-appender__toggle"
      });
    }
  }

  return (0, _element.createElement)(TagName // A `tabIndex` is used on the wrapping `div` element in order to
  // force a focus event to occur when an appender `button` element
  // is clicked. In some browsers (Firefox, Safari), button clicks do
  // not emit a focus event, which could cause this event to propagate
  // unexpectedly. The `tabIndex` ensures that the interaction is
  // captured as a focus, without also adding an extra tab stop.
  //
  // See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
  , {
    tabIndex: -1,
    className: (0, _classnames.default)('block-list-appender gc-block', className) // The appender exists to let you add the first Paragraph before
    // any is inserted. To that end, this appender should visually be
    // presented as a block. That means theme CSS should style it as if
    // it were an empty paragraph block. That means a `gc-block` class to
    // ensure the width is correct, and a [data-block] attribute to ensure
    // the correct margin is applied, especially for classic themes which
    // have commonly targeted that attribute for margins.
    ,
    "data-block": true
  }, appender);
}

var _default = (0, _data.withSelect)((select, _ref2) => {
  let {
    rootClientId
  } = _ref2;
  const {
    getBlockOrder,
    canInsertBlockType,
    getTemplateLock,
    getSelectedBlockClientId
  } = select(_store.store);
  return {
    isLocked: !!getTemplateLock(rootClientId),
    blockClientIds: getBlockOrder(rootClientId),
    canInsertDefaultBlock: canInsertBlockType((0, _blocks.getDefaultBlockName)(), rootClientId),
    selectedBlockClientId: getSelectedBlockClientId()
  };
})(BlockListAppender);

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