component visibility logic

EitanElbaz · Jun 27, 2023 · 7c7ff77 · 7c7ff77
1 parent 5aaf4e8
commit 7c7ff77
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 19 deletions.
diff --git 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<Props> = ({
     children,
     open: defaultOpen = false,
@@ -49,8 +53,9 @@ const ReactGrandTour: React.FC<Props> = ({
     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<Props> = ({
                     <div className="__react-grand-tour__overlay" onClick={onBackdropClosed} />
                     <Step
                         {...steps[currentIndex]}
+                        {...componentVisibility}
                         content={steps[currentIndex].content}
                         component={steps[currentIndex].component}
                         selector={steps[currentIndex].selector}

diff --git a/src/components/DialogWrapper.tsx b/src/components/DialogWrapper.tsx
@@ -9,17 +9,23 @@ const DialogWrapper = ({
     previousStepButton,
     stepButtonWrapper,
     nextStepButton,
+
+    hideCloseButton,
+    hideCurrentStepLabel,
+    hideNextStepButton,
+    hidePreviousStepButton,
+    hideStepButtons,
 }: DialogWrapperProps) => (
     <div className="__react-grand-tour__modal">
         <div className="__react-grand-tour__modal-content">
             {arrow}
-            {currentStepLabel}
-            {closeButton}
+            {!hideCurrentStepLabel && currentStepLabel}
+            {!hideCloseButton && closeButton}
             {content}
             <div className="__react-grand-tour__page-selector">
-                {previousStepButton}
-                {stepButtonWrapper}
-                {nextStepButton}
+                {!hidePreviousStepButton && previousStepButton}
+                {!hideStepButtons && stepButtonWrapper}
+                {!hideNextStepButton && nextStepButton}
             </div>
         </div>
     </div>

diff --git 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<ComponentOverrides> & {
-    arrowDirection: ArrowDirection;
-    stepIndex: number;
-    changeStep: (index: number) => void;
-    allSteps: number[];
-    close: ReactGrandTourProps['onClose'];
-    renderedContent: any;
-    scrollToElement: () => void;
-    track: boolean;
-};
+export type ModalProps = Partial<ComponentOverrides> &
+    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 direction={arrowDirection} />, [Arrow, arrowDirection]);
     const currentStepLabel = useMemo(
@@ -114,6 +126,12 @@ const Modal = ({
                             stepButtonWrapper,
                             stepIndex,
                             stepButtonComponent: StepButton,
+
+                            hideCloseButton,
+                            hideCurrentStepLabel,
+                            hideNextStepButton,
+                            hidePreviousStepButton,
+                            hideStepButtons,
                         }}
                     />
                 </div>

diff --git 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<ReactGrandTourStep> &
+    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<Props, 'contentWrapper'> & {
         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
@@ -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'