@wordpress/components/build-module/guide/index.js

UI components for WordPress.

import { createElement } from "@wordpress/element";

/**
 * External dependencies
 */
import classnames from 'classnames';
/**
 * WordPress dependencies
 */

import { useState, useEffect, Children } from '@wordpress/element';
import deprecated from '@wordpress/deprecated';
import { __ } from '@wordpress/i18n';
/**
 * Internal dependencies
 */

import Modal from '../modal';
import KeyboardShortcuts from '../keyboard-shortcuts';
import Button from '../button';
import PageControl from './page-control';
import FinishButton from './finish-button';
export default function Guide({
  children,
  className,
  contentLabel,
  finishButtonText,
  onFinish,
  pages = []
}) {
  const [currentPage, setCurrentPage] = useState(0);
  useEffect(() => {
    if (Children.count(children)) {
      deprecated('Passing children to <Guide>', {
        since: '5.5',
        alternative: 'the `pages` prop'
      });
    }
  }, [children]);

  if (Children.count(children)) {
    pages = Children.map(children, child => ({
      content: child
    }));
  }

  const canGoBack = currentPage > 0;
  const canGoForward = currentPage < pages.length - 1;

  const goBack = () => {
    if (canGoBack) {
      setCurrentPage(currentPage - 1);
    }
  };

  const goForward = () => {
    if (canGoForward) {
      setCurrentPage(currentPage + 1);
    }
  };

  if (pages.length === 0) {
    return null;
  }

  return createElement(Modal, {
    className: classnames('components-guide', className),
    contentLabel: contentLabel,
    onRequestClose: onFinish
  }, createElement(KeyboardShortcuts, {
    key: currentPage,
    shortcuts: {
      left: goBack,
      right: goForward
    }
  }), createElement("div", {
    className: "components-guide__container"
  }, createElement("div", {
    className: "components-guide__page"
  }, pages[currentPage].image, pages.length > 1 && createElement(PageControl, {
    currentPage: currentPage,
    numberOfPages: pages.length,
    setCurrentPage: setCurrentPage
  }), pages[currentPage].content, !canGoForward && createElement(FinishButton, {
    className: "components-guide__inline-finish-button",
    onClick: onFinish
  }, finishButtonText || __('Finish'))), createElement("div", {
    className: "components-guide__footer"
  }, canGoBack && createElement(Button, {
    className: "components-guide__back-button",
    onClick: goBack
  }, __('Previous')), canGoForward && createElement(Button, {
    className: "components-guide__forward-button",
    onClick: goForward
  }, __('Next')), !canGoForward && createElement(FinishButton, {
    className: "components-guide__finish-button",
    onClick: onFinish
  }, finishButtonText || __('Finish')))));
}
//# sourceMappingURL=index.js.map