@wordpress/block-library/build/page-list/edit.js

Block library for the WordPress editor.

"use strict";

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

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

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

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

var _blockEditor = require("@wordpress/block-editor");

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

var _i18n = require("@wordpress/i18n");

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

var _coreData = require("@wordpress/core-data");

var _convertToLinksModal = _interopRequireDefault(require("./convert-to-links-modal"));

var _icons = require("../navigation-link/icons");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
// We only show the edit option when page count is <= MAX_PAGE_COUNT
// Performance of Navigation Links is not good past this value.
const MAX_PAGE_COUNT = 100;

function PageListEdit(_ref) {
  var _context$style;

  let {
    context,
    clientId
  } = _ref;
  const {
    pagesByParentId,
    totalPages,
    hasResolvedPages
  } = usePageData();
  const isNavigationChild = ('showSubmenuIcon' in context);
  const allowConvertToLinks = isNavigationChild && totalPages <= MAX_PAGE_COUNT;
  const [isOpen, setOpen] = (0, _element.useState)(false);

  const openModal = () => setOpen(true);

  const closeModal = () => setOpen(false);

  const blockProps = (0, _blockEditor.useBlockProps)({
    className: (0, _classnames.default)('wp-block-page-list', {
      'has-text-color': !!context.textColor,
      [(0, _blockEditor.getColorClassName)('color', context.textColor)]: !!context.textColor,
      'has-background': !!context.backgroundColor,
      [(0, _blockEditor.getColorClassName)('background-color', context.backgroundColor)]: !!context.backgroundColor
    }),
    style: { ...((_context$style = context.style) === null || _context$style === void 0 ? void 0 : _context$style.color)
    }
  });
  return (0, _element.createElement)(_element.Fragment, null, allowConvertToLinks && (0, _element.createElement)(_blockEditor.BlockControls, {
    group: "other"
  }, (0, _element.createElement)(_components.ToolbarButton, {
    title: (0, _i18n.__)('Edit'),
    onClick: openModal
  }, (0, _i18n.__)('Edit'))), allowConvertToLinks && isOpen && (0, _element.createElement)(_convertToLinksModal.default, {
    onClose: closeModal,
    clientId: clientId
  }), !hasResolvedPages && (0, _element.createElement)("div", blockProps, (0, _element.createElement)(_components.Spinner, null)), hasResolvedPages && totalPages === null && (0, _element.createElement)("div", blockProps, (0, _element.createElement)(_components.Notice, {
    status: 'warning',
    isDismissible: false
  }, (0, _i18n.__)('Page List: Cannot retrieve Pages.'))), totalPages === 0 && (0, _element.createElement)("div", blockProps, (0, _element.createElement)(_components.Notice, {
    status: 'info',
    isDismissible: false
  }, (0, _i18n.__)('Page List: Cannot retrieve Pages.'))), totalPages > 0 && (0, _element.createElement)("ul", blockProps, (0, _element.createElement)(PageItems, {
    context: context,
    pagesByParentId: pagesByParentId
  })));
}

function useFrontPageId() {
  return (0, _data.useSelect)(select => {
    const canReadSettings = select(_coreData.store).canUser('read', 'settings');

    if (!canReadSettings) {
      return undefined;
    }

    const site = select(_coreData.store).getEntityRecord('root', 'site');
    return (site === null || site === void 0 ? void 0 : site.show_on_front) === 'page' && (site === null || site === void 0 ? void 0 : site.page_on_front);
  }, []);
}

function usePageData() {
  const {
    records: pages,
    hasResolved: hasResolvedPages
  } = (0, _coreData.useEntityRecords)('postType', 'page', {
    orderby: 'menu_order',
    order: 'asc',
    _fields: ['id', 'link', 'parent', 'title', 'menu_order'],
    per_page: -1,
    context: 'view'
  });
  return (0, _element.useMemo)(() => {
    var _pages$length;

    // TODO: Once the REST API supports passing multiple values to
    // 'orderby', this can be removed.
    // https://core.trac.wordpress.org/ticket/39037
    const sortedPages = [...(pages !== null && pages !== void 0 ? pages : [])].sort((a, b) => {
      if (a.menu_order === b.menu_order) {
        return a.title.rendered.localeCompare(b.title.rendered);
      }

      return a.menu_order - b.menu_order;
    });
    const pagesByParentId = sortedPages.reduce((accumulator, page) => {
      const {
        parent
      } = page;

      if (accumulator.has(parent)) {
        accumulator.get(parent).push(page);
      } else {
        accumulator.set(parent, [page]);
      }

      return accumulator;
    }, new Map());
    return {
      pagesByParentId,
      hasResolvedPages,
      totalPages: (_pages$length = pages === null || pages === void 0 ? void 0 : pages.length) !== null && _pages$length !== void 0 ? _pages$length : null
    };
  }, [pages, hasResolvedPages]);
}

const PageItems = (0, _element.memo)(function PageItems(_ref2) {
  let {
    context,
    pagesByParentId,
    parentId = 0,
    depth = 0
  } = _ref2;
  const pages = pagesByParentId.get(parentId);
  const frontPageId = useFrontPageId();

  if (!(pages !== null && pages !== void 0 && pages.length)) {
    return [];
  }

  return pages.map(page => {
    var _page$title, _page$title2;

    const hasChildren = pagesByParentId.has(page.id);
    const isNavigationChild = ('showSubmenuIcon' in context);
    return (0, _element.createElement)("li", {
      key: page.id,
      className: (0, _classnames.default)('wp-block-pages-list__item', {
        'has-child': hasChildren,
        'wp-block-navigation-item': isNavigationChild,
        'open-on-click': context.openSubmenusOnClick,
        'open-on-hover-click': !context.openSubmenusOnClick && context.showSubmenuIcon,
        'menu-item-home': page.id === frontPageId
      })
    }, hasChildren && context.openSubmenusOnClick ? (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)("button", {
      className: "wp-block-navigation-item__content wp-block-navigation-submenu__toggle",
      "aria-expanded": "false"
    }, (_page$title = page.title) === null || _page$title === void 0 ? void 0 : _page$title.rendered), (0, _element.createElement)("span", {
      className: "wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"
    }, (0, _element.createElement)(_icons.ItemSubmenuIcon, null))) : (0, _element.createElement)("a", {
      className: (0, _classnames.default)('wp-block-pages-list__item__link', {
        'wp-block-navigation-item__content': isNavigationChild
      }),
      href: page.link
    }, (_page$title2 = page.title) === null || _page$title2 === void 0 ? void 0 : _page$title2.rendered), hasChildren && (0, _element.createElement)(_element.Fragment, null, !context.openSubmenusOnClick && context.showSubmenuIcon && (0, _element.createElement)("button", {
      className: "wp-block-navigation-item__content wp-block-navigation-submenu__toggle wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon",
      "aria-expanded": "false"
    }, (0, _element.createElement)(_icons.ItemSubmenuIcon, null)), (0, _element.createElement)("ul", {
      className: (0, _classnames.default)('submenu-container', {
        'wp-block-navigation__submenu-container': isNavigationChild
      })
    }, (0, _element.createElement)(PageItems, {
      context: context,
      pagesByParentId: pagesByParentId,
      parentId: page.id,
      depth: depth + 1
    }))));
  });
});
//# sourceMappingURL=edit.js.map