From 975d0f7ad8e672278ac46aa7a5e841821e5f14d6 Mon Sep 17 00:00:00 2001 From: bovage Date: Sat, 8 Apr 2023 12:31:38 +0100 Subject: [PATCH 1/2] feat: add lastStepNextButton props to TourProvider,issue #549 --- packages/tour/components/Navigation.tsx | 16 +++++++++++++++- packages/tour/components/PopoverContent.tsx | 2 ++ packages/tour/types.tsx | 2 ++ 3 files changed, 19 insertions(+), 1 deletion(-) diff --git a/packages/tour/components/Navigation.tsx b/packages/tour/components/Navigation.tsx index f72eed9..45e8f53 100644 --- a/packages/tour/components/Navigation.tsx +++ b/packages/tour/components/Navigation.tsx @@ -15,6 +15,7 @@ const Navigation: React.FC = ({ setIsOpen, nextButton, prevButton, + lastStepNextButton, disableDots, hideDots, hideButtons, @@ -24,6 +25,7 @@ const Navigation: React.FC = ({ }) => { const stepsLength = steps.length const getStyles = stylesMatcher(styles) + const isLastStep = currentStep === steps.length - 1 const Button: React.FC> = ({ onClick, @@ -114,7 +116,18 @@ const Navigation: React.FC = ({ ) : null} {!hideButtons ? ( - nextButton && typeof nextButton === 'function' ? ( + isLastStep && + lastStepNextButton && + typeof lastStepNextButton === 'function' ? ( + lastStepNextButton({ + Button, + setCurrentStep, + currentStep, + stepsLength, + setIsOpen, + steps, + }) + ) : nextButton && typeof nextButton === 'function' ? ( nextButton({ Button, setCurrentStep, @@ -142,6 +155,7 @@ export type NavigationProps = BaseProps & { disableDots?: boolean nextButton?: (props: BtnFnProps) => ReactNode | null prevButton?: (props: BtnFnProps) => ReactNode | null + lastStepNextButton?: (props: BtnFnProps) => ReactNode | null setIsOpen: Dispatch> hideButtons?: boolean hideDots?: boolean diff --git a/packages/tour/components/PopoverContent.tsx b/packages/tour/components/PopoverContent.tsx index b7b03d9..4a57c63 100644 --- a/packages/tour/components/PopoverContent.tsx +++ b/packages/tour/components/PopoverContent.tsx @@ -17,6 +17,7 @@ const PopoverContent: React.FC = ({ setIsOpen, nextButton, prevButton, + lastStepNextButton, disableDotsNavigation, rtl, showPrevNextButtons = true, @@ -88,6 +89,7 @@ const PopoverContent: React.FC = ({ aria-hidden={!accessibilityOptions?.showNavigationScreenReaders} nextButton={nextButton} prevButton={prevButton} + lastStepNextButton={lastStepNextButton} disableDots={disableDotsNavigation} hideButtons={!showPrevNextButtons} hideDots={!showDots} diff --git a/packages/tour/types.tsx b/packages/tour/types.tsx index ea110c2..251f272 100644 --- a/packages/tour/types.tsx +++ b/packages/tour/types.tsx @@ -27,6 +27,7 @@ type SharedProps = KeyboardHandler & { clipId?: string nextButton?: (props: BtnFnProps) => ReactNode | null prevButton?: (props: BtnFnProps) => ReactNode | null + lastStepNextButton?: (props: BtnFnProps) => ReactNode | null afterOpen?: (target: Element | null) => void beforeClose?: (target: Element | null) => void onClickMask?: (clickProps: ClickProps) => void @@ -68,6 +69,7 @@ export type PopoverContentProps = { showDots?: boolean nextButton?: (props: BtnFnProps) => ReactNode | null prevButton?: (props: BtnFnProps) => ReactNode | null + lastStepNextButton?: (props: BtnFnProps) => ReactNode | null disableDotsNavigation?: boolean rtl?: boolean meta?: string From 5a8f91ea643285b9f065720603fc6f175c83c654 Mon Sep 17 00:00:00 2001 From: bovage Date: Sat, 8 Apr 2023 13:12:28 +0100 Subject: [PATCH 2/2] docs: add info about the lastStepNextButton prop in readme & website demo --- apps/web/components/config.tsx | 5 +++++ apps/web/pages/index.tsx | 10 ++++++++++ packages/tour/README.md | 11 +++++++++-- 3 files changed, 24 insertions(+), 2 deletions(-) diff --git a/apps/web/components/config.tsx b/apps/web/components/config.tsx index 6b608c5..fb4dfac 100644 --- a/apps/web/components/config.tsx +++ b/apps/web/components/config.tsx @@ -161,6 +161,11 @@ const tourConfig: StepType[] = [ highlightedSelectors: ['.modaaals-modal'], mutationObservables: ['#portaaal'], }, + { + selector: '[data-tour="open_modal"]', + content: + "You can also customize the next button in the last step and make it do what you want. Notice the Done button here, it'll close the tour.", + }, ] const tourConfigAlt: StepType[] = [ diff --git a/apps/web/pages/index.tsx b/apps/web/pages/index.tsx index c099106..6940c1c 100644 --- a/apps/web/pages/index.tsx +++ b/apps/web/pages/index.tsx @@ -5,12 +5,21 @@ import { isMobile } from 'react-device-detect' import Home from '../components/Home' import Portal from '../components/Portal' import { tourConfig, tourConfigAlt } from '../components/config' +import { Button } from '../components/Button' function App() { const disableBody = (target: Element | HTMLElement) => disableBodyScroll(target) const enableBody = (target: Element | HTMLElement) => enableBodyScroll(target) + const closeButton = (props) => { + const { setIsOpen } = props + const clickHandler = () => { + setIsOpen(false) + } + return + } + return ( <> @@ -353,6 +353,8 @@ default: `reactour__mask` ### `prevButton?: (props: BtnFnProps) => void` +### `lastStepNextButton?: (props: BtnFnProps) => void` +
Type details @@ -374,7 +376,11 @@ type NavButtonProps = {
-Helper functions to customize the _Next_ and _Prev_ buttons inside _Popover_, with useful parameters. It is possible to use the base `Button` and customize the props. +Helper functions to: +- customize the _Next_ and _Prev_ buttons inside _Popover_ +- customize the _Next_ button of last step inside _Popover, with useful parameters + +It is possible to use the base `Button` and customize the props. ### `afterOpen?: (target: Element | null) => void` @@ -618,6 +624,7 @@ type PopoverContentProps = { showBadge?: boolean nextButton?: (props: BtnFnProps) => void prevButton?: (props: BtnFnProps) => void + lastStepNextButton?: (props: BtnFnProps) => void disableDotsNavigation?: boolean rtl?: boolean }