mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-11 23:00:20 +08:00
d689c7b855
* feat: remove locale-provider * chore: fix lint * Empty-Commit * test: remove test * Revert "test: remove test" This reverts commit 4f6b59883f6bf078f21a10898ef913c9e2adb913. * chore: 阶段性兼容 * fix lint * fix: fix lint * fix: add index * docs: update docs * docs: update * docs: update * docs: update
130 lines
3.5 KiB
TypeScript
130 lines
3.5 KiB
TypeScript
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/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,
|
|
} = props;
|
|
|
|
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 = (
|
|
<div className={`${prefixCls}-header`}>
|
|
<div className={`${prefixCls}-title`}>{title}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
let descriptionNode: ReactNode;
|
|
if (description) {
|
|
descriptionNode = <div className={`${prefixCls}-description`}>{description}</div>;
|
|
}
|
|
|
|
let coverNode: ReactNode;
|
|
if (cover) {
|
|
coverNode = <div className={`${prefixCls}-cover`}>{cover}</div>;
|
|
}
|
|
|
|
const mergedSlickNode =
|
|
(typeof stepRender === 'function' && stepRender(current, total)) ||
|
|
[...Array.from({ length: total }).keys()].map((stepItem, index) => (
|
|
<span
|
|
key={stepItem}
|
|
className={classNames(
|
|
index === current && `${prefixCls}-slider-active`,
|
|
`${prefixCls}-slider`,
|
|
)}
|
|
/>
|
|
));
|
|
const slickNode: ReactNode = total > 1 ? mergedSlickNode : null;
|
|
|
|
const mainBtnType = type === 'primary' ? 'default' : 'primary';
|
|
const secondaryBtnProps: ButtonProps = {
|
|
type: 'default',
|
|
ghost: type === 'primary',
|
|
};
|
|
|
|
return (
|
|
<LocaleReceiver componentName="Tour" defaultLocale={defaultLocale.Tour}>
|
|
{(contextLocale) => (
|
|
<>
|
|
<CloseOutlined className={`${prefixCls}-close`} onClick={onClose} />
|
|
{coverNode}
|
|
{headerNode}
|
|
{descriptionNode}
|
|
<div className={`${prefixCls}-footer`}>
|
|
<div className={`${prefixCls}-sliders`}>{slickNode}</div>
|
|
<div className={`${prefixCls}-buttons`}>
|
|
{current !== 0 ? (
|
|
<Button
|
|
{...secondaryBtnProps}
|
|
{...prevButtonProps}
|
|
onClick={prevBtnClick}
|
|
size="small"
|
|
className={classNames(`${prefixCls}-prev-btn`, prevButtonProps?.className)}
|
|
>
|
|
{prevButtonProps?.children ?? contextLocale.Previous}
|
|
</Button>
|
|
) : null}
|
|
<Button
|
|
type={mainBtnType}
|
|
{...nextButtonProps}
|
|
onClick={nextBtnClick}
|
|
size="small"
|
|
className={classNames(`${prefixCls}-next-btn`, nextButtonProps?.className)}
|
|
>
|
|
{nextButtonProps?.children ??
|
|
(isLastStep ? contextLocale.Finish : contextLocale.Next)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</LocaleReceiver>
|
|
);
|
|
};
|
|
|
|
export default panelRender;
|