@gechiui/block-editor/build/components/list-view/block.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 _classnames = _interopRequireDefault(require("classnames"));

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

var _icons = require("@gechiui/icons");

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

var _leaf = _interopRequireDefault(require("./leaf"));

var _button = require("../block-mover/button");

var _blockContents = _interopRequireDefault(require("./block-contents"));

var _blockSettingsDropdown = _interopRequireDefault(require("../block-settings-menu/block-settings-dropdown"));

var _context = require("./context");

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

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
function ListViewBlock(_ref) {
  let {
    block,
    isDragged,
    isSelected,
    isBranchSelected,
    selectBlock,
    position,
    level,
    rowCount,
    siblingBlockCount,
    showBlockMovers,
    path,
    isExpanded
  } = _ref;
  const cellRef = (0, _element.useRef)(null);
  const [isHovered, setIsHovered] = (0, _element.useState)(false);
  const {
    clientId
  } = block;
  const {
    toggleBlockHighlight
  } = (0, _data.useDispatch)(_store.store);
  const {
    __experimentalFeatures: withExperimentalFeatures,
    __experimentalPersistentListViewFeatures: withExperimentalPersistentListViewFeatures,
    __experimentalHideContainerBlockActions: hideContainerBlockActions,
    isTreeGridMounted,
    expand,
    collapse
  } = (0, _context.useListViewContext)();
  const hasSiblings = siblingBlockCount > 0;
  const hasRenderedMovers = showBlockMovers && hasSiblings;
  const moverCellClassName = (0, _classnames.default)('block-editor-list-view-block__mover-cell', {
    'is-visible': isHovered || isSelected
  });
  const listViewBlockSettingsClassName = (0, _classnames.default)('block-editor-list-view-block__menu-cell', {
    'is-visible': isHovered || isSelected
  }); // If ListView has experimental features related to the Persistent List View,
  // only focus the selected list item on mount; otherwise the list would always
  // try to steal the focus from the editor canvas.

  (0, _element.useEffect)(() => {
    if (withExperimentalPersistentListViewFeatures && !isTreeGridMounted && isSelected) {
      cellRef.current.focus();
    }
  }, []);
  const highlightBlock = withExperimentalPersistentListViewFeatures ? toggleBlockHighlight : () => {};
  const onMouseEnter = (0, _element.useCallback)(() => {
    setIsHovered(true);
    highlightBlock(clientId, true);
  }, [clientId, setIsHovered, highlightBlock]);
  const onMouseLeave = (0, _element.useCallback)(() => {
    setIsHovered(false);
    highlightBlock(clientId, false);
  }, [clientId, setIsHovered, highlightBlock]);
  const selectEditorBlock = (0, _element.useCallback)(event => {
    event.stopPropagation();
    selectBlock(clientId);
  }, [clientId, selectBlock]);
  const toggleExpanded = (0, _element.useCallback)(event => {
    event.stopPropagation();

    if (isExpanded === true) {
      collapse(clientId);
    } else if (isExpanded === false) {
      expand(clientId);
    }
  }, [clientId, expand, collapse, isExpanded]);
  const showBlockActions = withExperimentalFeatures && ( //hide actions for blocks like core/widget-areas
  !hideContainerBlockActions || hideContainerBlockActions && level > 1);
  const hideBlockActions = withExperimentalFeatures && !showBlockActions;
  let colSpan;

  if (hasRenderedMovers) {
    colSpan = 2;
  } else if (hideBlockActions) {
    colSpan = 3;
  }

  const classes = (0, _classnames.default)({
    'is-selected': isSelected,
    'is-branch-selected': withExperimentalPersistentListViewFeatures && isBranchSelected,
    'is-dragging': isDragged,
    'has-single-cell': hideBlockActions
  });
  return (0, _element.createElement)(_leaf.default, {
    className: classes,
    onMouseEnter: onMouseEnter,
    onMouseLeave: onMouseLeave,
    onFocus: onMouseEnter,
    onBlur: onMouseLeave,
    level: level,
    position: position,
    rowCount: rowCount,
    path: path,
    id: `list-view-block-${clientId}`,
    "data-block": clientId,
    isExpanded: isExpanded
  }, (0, _element.createElement)(_components.__experimentalTreeGridCell, {
    className: "block-editor-list-view-block__contents-cell",
    colSpan: colSpan,
    ref: cellRef
  }, _ref2 => {
    let {
      ref,
      tabIndex,
      onFocus
    } = _ref2;
    return (0, _element.createElement)("div", {
      className: "block-editor-list-view-block__contents-container"
    }, (0, _element.createElement)(_blockContents.default, {
      block: block,
      onClick: selectEditorBlock,
      onToggleExpanded: toggleExpanded,
      isSelected: isSelected,
      position: position,
      siblingBlockCount: siblingBlockCount,
      level: level,
      ref: ref,
      tabIndex: tabIndex,
      onFocus: onFocus
    }));
  }), hasRenderedMovers && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.__experimentalTreeGridCell, {
    className: moverCellClassName,
    withoutGridItem: true
  }, (0, _element.createElement)(_components.__experimentalTreeGridItem, null, _ref3 => {
    let {
      ref,
      tabIndex,
      onFocus
    } = _ref3;
    return (0, _element.createElement)(_button.BlockMoverUpButton, {
      orientation: "vertical",
      clientIds: [clientId],
      ref: ref,
      tabIndex: tabIndex,
      onFocus: onFocus
    });
  }), (0, _element.createElement)(_components.__experimentalTreeGridItem, null, _ref4 => {
    let {
      ref,
      tabIndex,
      onFocus
    } = _ref4;
    return (0, _element.createElement)(_button.BlockMoverDownButton, {
      orientation: "vertical",
      clientIds: [clientId],
      ref: ref,
      tabIndex: tabIndex,
      onFocus: onFocus
    });
  }))), showBlockActions && (0, _element.createElement)(_components.__experimentalTreeGridCell, {
    className: listViewBlockSettingsClassName
  }, _ref5 => {
    let {
      ref,
      tabIndex,
      onFocus
    } = _ref5;
    return (0, _element.createElement)(_blockSettingsDropdown.default, {
      clientIds: [clientId],
      icon: _icons.moreVertical,
      toggleProps: {
        ref,
        className: 'block-editor-list-view-block__menu',
        tabIndex,
        onFocus
      },
      disableOpenOnArrowDown: true,
      __experimentalSelectBlock: selectEditorBlock
    });
  }));
}

var _default = (0, _element.memo)(ListViewBlock);

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