@wordpress/block-editor/build-module/components/list-view/branch.js

Generic block editor.

// packages/block-editor/src/components/list-view/branch.js
import {
  __experimentalTreeGridRow as TreeGridRow,
  __experimentalTreeGridCell as TreeGridCell
} from "@wordpress/components";
import { memo, useRef } from "@wordpress/element";
import { AsyncModeProvider, useSelect } from "@wordpress/data";
import { Appender } from "./appender";
import ListViewBlock from "./block";
import { useListViewContext } from "./context";
import { getDragDisplacementValues, isClientIdSelected } from "./utils";
import { store as blockEditorStore } from "../../store";
import useBlockDisplayInformation from "../use-block-display-information";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function countBlocks(block, expandedState, draggedClientIds, isExpandedByDefault) {
  const isDragged = draggedClientIds?.includes(block.clientId);
  if (isDragged) {
    return 0;
  }
  const isExpanded = expandedState[block.clientId] ?? isExpandedByDefault;
  if (isExpanded) {
    return 1 + block.innerBlocks.reduce(
      countReducer(
        expandedState,
        draggedClientIds,
        isExpandedByDefault
      ),
      0
    );
  }
  return 1;
}
var countReducer = (expandedState, draggedClientIds, isExpandedByDefault) => (count, block) => {
  const isDragged = draggedClientIds?.includes(block.clientId);
  if (isDragged) {
    return count;
  }
  const isExpanded = expandedState[block.clientId] ?? isExpandedByDefault;
  if (isExpanded && block.innerBlocks.length > 0) {
    return count + countBlocks(
      block,
      expandedState,
      draggedClientIds,
      isExpandedByDefault
    );
  }
  return count + 1;
};
var noop = () => {
};
function ListViewBranch(props) {
  const {
    blocks,
    selectBlock = noop,
    showBlockMovers,
    selectedClientIds,
    level = 1,
    path = "",
    isBranchSelected = false,
    listPosition = 0,
    fixedListWindow,
    isExpanded,
    parentId,
    shouldShowInnerBlocks = true,
    isSyncedBranch = false,
    showAppender: showAppenderProp = true
  } = props;
  const parentBlockInformation = useBlockDisplayInformation(parentId);
  const syncedBranch = isSyncedBranch || !!parentBlockInformation?.isSynced;
  const canParentExpand = useSelect(
    (select) => {
      if (!parentId) {
        return true;
      }
      return select(blockEditorStore).canEditBlock(parentId);
    },
    [parentId]
  );
  const {
    blockDropPosition,
    blockDropTargetIndex,
    firstDraggedBlockIndex,
    blockIndexes,
    expandedState,
    draggedClientIds
  } = useListViewContext();
  const nextPositionRef = useRef();
  if (!canParentExpand) {
    return null;
  }
  const showAppender = showAppenderProp && level === 1;
  const filteredBlocks = blocks.filter(Boolean);
  const blockCount = filteredBlocks.length;
  const rowCount = showAppender ? blockCount + 1 : blockCount;
  nextPositionRef.current = listPosition;
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    filteredBlocks.map((block, index) => {
      const { clientId, innerBlocks } = block;
      if (index > 0) {
        nextPositionRef.current += countBlocks(
          filteredBlocks[index - 1],
          expandedState,
          draggedClientIds,
          isExpanded
        );
      }
      const isDragged = !!draggedClientIds?.includes(clientId);
      const { displacement, isAfterDraggedBlocks, isNesting } = getDragDisplacementValues({
        blockIndexes,
        blockDropTargetIndex,
        blockDropPosition,
        clientId,
        firstDraggedBlockIndex,
        isDragged
      });
      const { itemInView } = fixedListWindow;
      const blockInView = itemInView(nextPositionRef.current);
      const position = index + 1;
      const updatedPath = path.length > 0 ? `${path}_${position}` : `${position}`;
      const hasNestedBlocks = !!innerBlocks?.length;
      const shouldExpand = hasNestedBlocks && shouldShowInnerBlocks ? expandedState[clientId] ?? isExpanded : void 0;
      const isSelected = isClientIdSelected(
        clientId,
        selectedClientIds
      );
      const isSelectedBranch = isBranchSelected || isSelected && hasNestedBlocks;
      const showBlock = isDragged || blockInView || isSelected && clientId === selectedClientIds[0] || index === 0 || index === blockCount - 1;
      return /* @__PURE__ */ jsxs(AsyncModeProvider, { value: !isSelected, children: [
        showBlock && /* @__PURE__ */ jsx(
          ListViewBlock,
          {
            block,
            selectBlock,
            isSelected,
            isBranchSelected: isSelectedBranch,
            isDragged,
            level,
            position,
            rowCount,
            siblingBlockCount: blockCount,
            showBlockMovers,
            path: updatedPath,
            isExpanded: isDragged ? false : shouldExpand,
            listPosition: nextPositionRef.current,
            selectedClientIds,
            isSyncedBranch: syncedBranch,
            displacement,
            isAfterDraggedBlocks,
            isNesting
          }
        ),
        !showBlock && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { className: "block-editor-list-view-placeholder" }) }),
        hasNestedBlocks && shouldExpand && !isDragged && /* @__PURE__ */ jsx(
          ListViewBranch,
          {
            parentId: clientId,
            blocks: innerBlocks,
            selectBlock,
            showBlockMovers,
            level: level + 1,
            path: updatedPath,
            listPosition: nextPositionRef.current + 1,
            fixedListWindow,
            isBranchSelected: isSelectedBranch,
            selectedClientIds,
            isExpanded,
            isSyncedBranch: syncedBranch
          }
        )
      ] }, clientId);
    }),
    showAppender && /* @__PURE__ */ jsx(
      TreeGridRow,
      {
        level,
        setSize: rowCount,
        positionInSet: rowCount,
        isExpanded: true,
        children: /* @__PURE__ */ jsx(TreeGridCell, { children: (treeGridCellProps) => /* @__PURE__ */ jsx(
          Appender,
          {
            clientId: parentId,
            nestingLevel: level,
            blockCount,
            ...treeGridCellProps
          }
        ) })
      }
    )
  ] });
}
var branch_default = memo(ListViewBranch);
export {
  branch_default as default
};
//# sourceMappingURL=branch.js.map