diff --git a/src/ReactGrandTour.tsx b/src/ReactGrandTour.tsx index 80417e8..d3f5b94 100644 --- a/src/ReactGrandTour.tsx +++ b/src/ReactGrandTour.tsx @@ -2,6 +2,7 @@ import React, { useMemo, useCallback, useState, PropsWithChildren, useEffect } f import styles from './styles'; import { ComponentOverrides, + ComponentVisibility, ReactGrandTourCloseReason, ReactGrandTourProps, ReactGrandTourStep, @@ -28,6 +29,9 @@ const defaultShortcuts = { prevStep: ['ArrowLeft'], }; +const emptyStyles = {}; +const emptyVisibility = {}; + const ReactGrandTour: React.FC = ({ children, open: defaultOpen = false, @@ -49,8 +53,9 @@ const ReactGrandTour: React.FC = ({ disableCloseOnEscape = false, disableCloseBtn = false, disableCloseOnBackdropClick = false, - stylingOverrides = {}, + stylingOverrides = emptyStyles, keyboardShortcuts, + componentVisibility = emptyVisibility, }) => { const [open, setOpen] = useState(defaultOpen); const [currentIndex, setCurrentIndex] = useState(openAt); @@ -187,6 +192,7 @@ const ReactGrandTour: React.FC = ({
(
{arrow} - {currentStepLabel} - {closeButton} + {!hideCurrentStepLabel && currentStepLabel} + {!hideCloseButton && closeButton} {content}
- {previousStepButton} - {stepButtonWrapper} - {nextStepButton} + {!hidePreviousStepButton && previousStepButton} + {!hideStepButtons && stepButtonWrapper} + {!hideNextStepButton && nextStepButton}
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index a4dbd2e..1b8e7e8 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -1,19 +1,25 @@ import React, { useMemo } from 'react'; import FadeIn from './FadeIn'; -import { ArrowDirection, ComponentOverrides, ReactGrandTourProps } from '../types'; +import { + ArrowDirection, + ComponentOverrides, + ComponentVisibility, + ReactGrandTourProps, +} from '../types'; import CloseButton from './CloseButton'; import { isSafari } from '../lib'; -export type ModalProps = Partial & { - arrowDirection: ArrowDirection; - stepIndex: number; - changeStep: (index: number) => void; - allSteps: number[]; - close: ReactGrandTourProps['onClose']; - renderedContent: any; - scrollToElement: () => void; - track: boolean; -}; +export type ModalProps = Partial & + ComponentVisibility & { + arrowDirection: ArrowDirection; + stepIndex: number; + changeStep: (index: number) => void; + allSteps: number[]; + close: ReactGrandTourProps['onClose']; + renderedContent: any; + scrollToElement: () => void; + track: boolean; + }; const Modal = ({ arrowDirection, @@ -32,6 +38,12 @@ const Modal = ({ stepButtonWrapper: StepButtonWrapper, stepButton: StepButton, track, + + hideCloseButton, + hideCurrentStepLabel, + hideNextStepButton, + hidePreviousStepButton, + hideStepButtons, }: ModalProps) => { const arrow = useMemo(() => , [Arrow, arrowDirection]); const currentStepLabel = useMemo( @@ -114,6 +126,12 @@ const Modal = ({ stepButtonWrapper, stepIndex, stepButtonComponent: StepButton, + + hideCloseButton, + hideCurrentStepLabel, + hideNextStepButton, + hidePreviousStepButton, + hideStepButtons, }} />
diff --git a/src/components/Step/Step.tsx b/src/components/Step/Step.tsx index f5d5f2d..f226396 100644 --- a/src/components/Step/Step.tsx +++ b/src/components/Step/Step.tsx @@ -1,12 +1,18 @@ import React, { useMemo, useState, useEffect } from 'react'; import { useCallback } from 'react'; -import { ComponentOverrides, ReactGrandTourProps, ReactGrandTourStep } from '../../types'; +import { + ComponentOverrides, + ComponentVisibility, + ReactGrandTourProps, + ReactGrandTourStep, +} from '../../types'; import Highlight from '../Highlight'; import Modal from '../Modal'; import { getArrowDirection } from '../../lib'; import StepPositioner from './StepPostioner'; type Props = Partial & + ComponentVisibility & ComponentOverrides & { stepIndex: number; changeStep: (index: number) => void; @@ -36,6 +42,12 @@ const Step = React.memo( track = false, trackFrequency = 10, preferredModalPosition = 'auto', + + hideCloseButton, + hideCurrentStepLabel, + hideNextStepButton, + hidePreviousStepButton, + hideStepButtons, }: Omit & { element: Element; anchorElement?: Element; @@ -105,6 +117,12 @@ const Step = React.memo( stepButtonWrapper, arrow, dialogWrapper, + + hideCloseButton, + hideCurrentStepLabel, + hideNextStepButton, + hidePreviousStepButton, + hideStepButtons, }} /> diff --git a/src/types.ts b/src/types.ts index 84e56e5..c86c64d 100644 --- a/src/types.ts +++ b/src/types.ts @@ -14,6 +14,16 @@ export type ReactGrandTourProps = { disableCloseOnBackdropClick?: boolean; stylingOverrides?: ReactGrandTourStylingOverrides; keyboardShortcuts?: ReactGrandTourShortcuts; + + componentVisibility?: ComponentVisibility; +}; + +export type ComponentVisibility = { + hideCloseButton?: boolean; + hideCurrentStepLabel?: boolean; + hideNextStepButton?: boolean; + hidePreviousStepButton?: boolean; + hideStepButtons?: boolean; }; export type ReactGrandTourStylingOverrides = { @@ -197,7 +207,7 @@ export type StepButtonWrapperProps = { skipTo: (step: number) => void; }; export type ArrowProps = { direction: ArrowDirection }; -export type DialogWrapperProps = { +export type DialogWrapperProps = ComponentVisibility & { [key in keyof Omit< ComponentOverrides, 'dialogWrapper' | 'stepButton' | 'contentWrapper'