ant-design/components/tour/index.tsx
2023-02-07 23:36:52 +08:00

69 lines
1.8 KiB
TypeScript

import RCTour from '@rc-component/tour';
import classNames from 'classnames';
import React, { useContext } from 'react';
import type { ConfigConsumerProps } from '../config-provider';
import { ConfigContext } from '../config-provider';
import theme from '../theme';
import getPlacements from '../_util/placements';
import type { TourProps, TourStepProps } from './interface';
import panelRender from './panelRender';
import PurePanel from './PurePanel';
import useStyle from './style';
const Tour: React.FC<TourProps> & { _InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel } = (
props,
) => {
const {
prefixCls: customizePrefixCls,
steps,
current,
type,
rootClassName,
indicatorsRender,
...restProps
} = props;
const { getPrefixCls, direction } = useContext<ConfigConsumerProps>(ConfigContext);
const prefixCls = getPrefixCls('tour', customizePrefixCls);
const [wrapSSR, hashId] = useStyle(prefixCls);
const { token } = theme.useToken();
const builtinPlacements = getPlacements({
arrowPointAtCenter: true,
autoAdjustOverflow: true,
offset: token.marginXXS,
arrowWidth: token.sizePopupArrow,
});
const customClassName = classNames(
{
[`${prefixCls}-rtl`]: direction === 'rtl',
},
hashId,
rootClassName,
);
const mergedRenderPanel = (stepProps: TourStepProps, stepCurrent: number) =>
panelRender(stepProps, stepCurrent, type, indicatorsRender);
return wrapSSR(
<RCTour
{...restProps}
rootClassName={customClassName}
prefixCls={prefixCls}
steps={steps}
current={current}
animated
renderPanel={mergedRenderPanel}
builtinPlacements={builtinPlacements}
/>,
);
};
if (process.env.NODE_ENV !== 'production') {
Tour.displayName = 'Tour';
}
Tour._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
export default Tour;