updated component visibility prop nesting on main RGT component

EitanElbaz · Jun 27, 2023 · 6360d09 · 6360d09
1 parent 386b031
commit 6360d09
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/src/ReactGrandTour.tsx b/src/ReactGrandTour.tsx
@@ -55,7 +55,11 @@ const ReactGrandTour: React.FC<Props> = ({
     disableCloseOnBackdropClick = false,
     stylingOverrides = emptyStyles,
     keyboardShortcuts,
-    componentVisibility = emptyVisibility,
+    hideCloseButton,
+    hideCurrentStepLabel,
+    hideNextStepButton,
+    hidePreviousStepButton,
+    hideStepButtons,
 }) => {
     const [open, setOpen] = useState(defaultOpen);
     const [currentIndex, setCurrentIndex] = useState(openAt);
@@ -172,6 +176,7 @@ const ReactGrandTour: React.FC<Props> = ({
         };
     }, [onKeyUp]);
 
+    console.log(steps[currentIndex]);
     return (
         <ReactGrandTourContext.Provider
             value={{
@@ -191,7 +196,11 @@ const ReactGrandTour: React.FC<Props> = ({
                     <style>{styles(stylingOverrides)}</style>{' '}
                     <div className="__react-grand-tour__overlay" onClick={onBackdropClosed} />
                     <Step
-                        {...componentVisibility}
+                        hideCloseButton={hideCloseButton}
+                        hideCurrentStepLabel={hideCurrentStepLabel}
+                        hideNextStepButton={hideNextStepButton}
+                        hidePreviousStepButton={hidePreviousStepButton}
+                        hideStepButtons={hideStepButtons}
                         {...steps[currentIndex]}
                         content={steps[currentIndex].content}
                         component={steps[currentIndex].component}

diff --git a/src/types.ts b/src/types.ts
@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, ReactNode } from 'react';
 
-export type ReactGrandTourProps = {
+export type ReactGrandTourProps = ComponentVisibility & {
     open?: boolean;
     onOpen?: () => void;
     onClose?: (reason: ReactGrandTourCloseReason) => void;
@@ -14,8 +14,6 @@ export type ReactGrandTourProps = {
     disableCloseOnBackdropClick?: boolean;
     stylingOverrides?: ReactGrandTourStylingOverrides;
     keyboardShortcuts?: ReactGrandTourShortcuts;
-
-    componentVisibility?: ComponentVisibility;
 };
 
 export type ComponentVisibility = {
@@ -113,7 +111,7 @@ export type ReactGrandTourContextType = {
     goBack: () => void;
 };
 
-export type ReactGrandTourStep = {
+export type ReactGrandTourStep = ComponentVisibility & {
     content: ReactNode;
     /**
      * Use the `component` prop if you want to customise the content of the step.