2023-02-07 23:36:52 +08:00
|
|
|
import type { ReactNode } from 'react';
|
|
|
|
import React from 'react';
|
2024-01-29 11:01:30 +08:00
|
|
|
import CloseOutlined from '@ant-design/icons/CloseOutlined';
|
|
|
|
import classNames from 'classnames';
|
|
|
|
|
|
|
|
import useClosable from '../_util/hooks/useClosable';
|
2022-11-02 16:25:28 +08:00
|
|
|
import type { ButtonProps } from '../button';
|
2023-02-07 23:36:52 +08:00
|
|
|
import Button from '../button';
|
2023-03-21 13:08:43 +08:00
|
|
|
import { useLocale } from '../locale';
|
2023-04-19 13:13:50 +08:00
|
|
|
import defaultLocale from '../locale/en_US';
|
2023-02-07 23:36:52 +08:00
|
|
|
import type { TourStepProps } from './interface';
|
2022-11-02 16:25:28 +08:00
|
|
|
|
2023-02-13 10:21:45 +08:00
|
|
|
function isValidNode(node: ReactNode): boolean {
|
|
|
|
return node !== undefined && node !== null;
|
|
|
|
}
|
|
|
|
|
2023-02-13 14:30:08 +08:00
|
|
|
interface TourPanelProps {
|
|
|
|
stepProps: TourStepProps;
|
|
|
|
current: number;
|
|
|
|
type: TourStepProps['type'];
|
|
|
|
indicatorsRender?: TourStepProps['indicatorsRender'];
|
2023-08-21 17:02:31 +08:00
|
|
|
closeIcon?: ReactNode;
|
2023-02-13 14:30:08 +08:00
|
|
|
}
|
|
|
|
|
2023-08-21 17:02:31 +08:00
|
|
|
// Due to the independent design of Panel, it will be too coupled to put in rc-tour,
|
|
|
|
// so a set of Panel logic is implemented separately in antd.
|
2024-01-29 11:01:30 +08:00
|
|
|
const TourPanel: React.FC<TourPanelProps> = (props) => {
|
|
|
|
const { stepProps, current, type, closeIcon, indicatorsRender } = props;
|
2022-11-02 16:25:28 +08:00
|
|
|
const {
|
|
|
|
prefixCls,
|
|
|
|
total = 1,
|
|
|
|
title,
|
|
|
|
onClose,
|
|
|
|
onPrev,
|
|
|
|
onNext,
|
|
|
|
onFinish,
|
|
|
|
cover,
|
|
|
|
description,
|
|
|
|
nextButtonProps,
|
|
|
|
prevButtonProps,
|
2022-12-19 11:34:36 +08:00
|
|
|
type: stepType,
|
2023-08-21 17:02:31 +08:00
|
|
|
closeIcon: stepCloseIcon,
|
2023-02-13 14:30:08 +08:00
|
|
|
} = stepProps;
|
2022-11-02 16:25:28 +08:00
|
|
|
|
2023-04-19 13:13:50 +08:00
|
|
|
const mergedType = stepType ?? type;
|
2023-02-13 10:21:45 +08:00
|
|
|
|
2023-08-21 17:02:31 +08:00
|
|
|
const mergedCloseIcon = stepCloseIcon ?? closeIcon;
|
2024-01-29 11:01:30 +08:00
|
|
|
|
2023-08-21 17:02:31 +08:00
|
|
|
const mergedClosable = mergedCloseIcon !== false && mergedCloseIcon !== null;
|
|
|
|
|
|
|
|
const [closable, mergedDisplayCloseIcon] = useClosable(
|
|
|
|
mergedClosable,
|
|
|
|
mergedCloseIcon,
|
|
|
|
(icon) => (
|
|
|
|
<span onClick={onClose} aria-label="Close" className={`${prefixCls}-close`}>
|
|
|
|
{icon}
|
|
|
|
</span>
|
|
|
|
),
|
|
|
|
<CloseOutlined className={`${prefixCls}-close-icon`} />,
|
|
|
|
true,
|
|
|
|
);
|
|
|
|
|
2022-11-02 16:25:28 +08:00
|
|
|
const isLastStep = current === total - 1;
|
|
|
|
|
|
|
|
const prevBtnClick = () => {
|
|
|
|
onPrev?.();
|
2023-02-13 10:21:45 +08:00
|
|
|
prevButtonProps?.onClick?.();
|
2022-11-02 16:25:28 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
const nextBtnClick = () => {
|
|
|
|
if (isLastStep) {
|
|
|
|
onFinish?.();
|
2022-11-02 21:54:55 +08:00
|
|
|
} else {
|
|
|
|
onNext?.();
|
2022-11-02 16:25:28 +08:00
|
|
|
}
|
2023-02-13 10:21:45 +08:00
|
|
|
nextButtonProps?.onClick?.();
|
2022-11-02 16:25:28 +08:00
|
|
|
};
|
|
|
|
|
2023-02-13 10:21:45 +08:00
|
|
|
const headerNode = isValidNode(title) ? (
|
|
|
|
<div className={`${prefixCls}-header`}>
|
|
|
|
<div className={`${prefixCls}-title`}>{title}</div>
|
|
|
|
</div>
|
|
|
|
) : null;
|
2022-11-02 16:25:28 +08:00
|
|
|
|
2023-02-13 10:21:45 +08:00
|
|
|
const descriptionNode = isValidNode(description) ? (
|
|
|
|
<div className={`${prefixCls}-description`}>{description}</div>
|
|
|
|
) : null;
|
2022-11-02 16:25:28 +08:00
|
|
|
|
2023-02-13 10:21:45 +08:00
|
|
|
const coverNode = isValidNode(cover) ? <div className={`${prefixCls}-cover`}>{cover}</div> : null;
|
2022-11-02 16:25:28 +08:00
|
|
|
|
2023-02-13 10:21:45 +08:00
|
|
|
let mergeIndicatorNode: ReactNode;
|
|
|
|
|
|
|
|
if (indicatorsRender) {
|
|
|
|
mergeIndicatorNode = indicatorsRender(current, total);
|
|
|
|
} else {
|
|
|
|
mergeIndicatorNode = [...Array.from({ length: total }).keys()].map<ReactNode>(
|
|
|
|
(stepItem, index) => (
|
|
|
|
<span
|
|
|
|
key={stepItem}
|
|
|
|
className={classNames(
|
|
|
|
index === current && `${prefixCls}-indicator-active`,
|
|
|
|
`${prefixCls}-indicator`,
|
|
|
|
)}
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
);
|
|
|
|
}
|
2022-11-02 16:25:28 +08:00
|
|
|
|
2022-12-19 11:34:36 +08:00
|
|
|
const mainBtnType = mergedType === 'primary' ? 'default' : 'primary';
|
2023-02-13 10:21:45 +08:00
|
|
|
|
2022-11-02 16:25:28 +08:00
|
|
|
const secondaryBtnProps: ButtonProps = {
|
|
|
|
type: 'default',
|
2022-12-19 11:34:36 +08:00
|
|
|
ghost: mergedType === 'primary',
|
2022-11-02 16:25:28 +08:00
|
|
|
};
|
|
|
|
|
2023-02-24 10:51:59 +08:00
|
|
|
const [contextLocale] = useLocale('Tour', defaultLocale.Tour);
|
2023-02-22 18:18:26 +08:00
|
|
|
|
2022-11-02 16:25:28 +08:00
|
|
|
return (
|
2023-09-26 13:42:43 +08:00
|
|
|
<div className={`${prefixCls}-content`}>
|
2023-02-22 18:18:26 +08:00
|
|
|
<div className={`${prefixCls}-inner`}>
|
2023-08-21 17:02:31 +08:00
|
|
|
{closable && mergedDisplayCloseIcon}
|
2023-02-22 18:18:26 +08:00
|
|
|
{coverNode}
|
|
|
|
{headerNode}
|
|
|
|
{descriptionNode}
|
|
|
|
<div className={`${prefixCls}-footer`}>
|
|
|
|
{total > 1 && <div className={`${prefixCls}-indicators`}>{mergeIndicatorNode}</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>
|
2022-11-02 16:25:28 +08:00
|
|
|
</div>
|
2022-12-19 11:34:36 +08:00
|
|
|
</div>
|
2023-02-22 18:18:26 +08:00
|
|
|
</div>
|
|
|
|
</div>
|
2022-11-02 16:25:28 +08:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2023-02-13 14:30:08 +08:00
|
|
|
export default TourPanel;
|