import React from 'react'; import type { ReactNode } from 'react'; import classNames from 'classnames'; import CloseOutlined from '@ant-design/icons/CloseOutlined'; import type { TourStepProps } from './interface'; import LocaleReceiver from '../locale-provider/LocaleReceiver'; import Button from '../button'; import type { ButtonProps } from '../button'; import defaultLocale from '../locale/en_US'; const panelRender = ( props: TourStepProps, current: number, type: TourStepProps['type'], ): ReactNode => { const { prefixCls, total = 1, title, onClose, onPrev, onNext, onFinish, cover, description, nextButtonProps, prevButtonProps, stepRender, type: stepType, arrow, className, } = props; const mergedType = typeof stepType !== 'undefined' ? stepType : type; const isLastStep = current === total - 1; const prevBtnClick = () => { onPrev?.(); if (typeof prevButtonProps?.onClick === 'function') { prevButtonProps?.onClick(); } }; const nextBtnClick = () => { if (isLastStep) { onFinish?.(); } else { onNext?.(); } if (typeof nextButtonProps?.onClick === 'function') { nextButtonProps?.onClick(); } }; let headerNode: ReactNode; if (title) { headerNode = (
{title}
); } let descriptionNode: ReactNode; if (description) { descriptionNode =
{description}
; } let coverNode: ReactNode; if (cover) { coverNode =
{cover}
; } const mergedSlickNode = (typeof stepRender === 'function' && stepRender(current, total)) || [...Array.from({ length: total }).keys()].map((stepItem, index) => ( )); const slickNode: ReactNode = total > 1 ? mergedSlickNode : null; const mainBtnType = mergedType === 'primary' ? 'default' : 'primary'; const secondaryBtnProps: ButtonProps = { type: 'default', ghost: mergedType === 'primary', }; return ( {(contextLocale) => (
{arrow &&
}
{coverNode} {headerNode} {descriptionNode}
{slickNode}
{current !== 0 ? ( ) : null}
)} ); }; export default panelRender;