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

UI components for GeChiUI.

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

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

import { useState, useEffect, Children } from '@gechiui/element';
import deprecated from '@gechiui/deprecated';
import { __ } from '@gechiui/i18n';
import { LEFT, RIGHT } from '@gechiui/keycodes';
/**
 * Internal dependencies
 */

import Modal from '../modal';
import Button from '../button';
import PageControl from './page-control';
import FinishButton from './finish-button';
export default function Guide(_ref) {
  let {
    children,
    className,
    contentLabel,
    finishButtonText,
    onFinish,
    pages = []
  } = _ref;
  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,
    onKeyDown: event => {
      if (event.keyCode === LEFT) {
        goBack();
      } else if (event.keyCode === 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 || __('完成'))), createElement("div", {
    className: "components-guide__footer"
  }, canGoBack && createElement(Button, {
    className: "components-guide__back-button",
    onClick: goBack
  }, __('上一步')), canGoForward && createElement(Button, {
    className: "components-guide__forward-button",
    onClick: goForward
  }, __('下一步')), !canGoForward && createElement(FinishButton, {
    className: "components-guide__finish-button",
    onClick: onFinish
  }, finishButtonText || __('完成')))));
}
//# sourceMappingURL=index.js.map