Hide the Beacon for centered steps or disableBeacon

- remove unnecessary null checks - fix Overlay typo
gilbarbara · May 21, 2024 · 8fc34df · 8fc34df
1 parent 7327b2c
commit 8fc34df
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/src/components/Overlay.tsx b/src/components/Overlay.tsx
@@ -224,9 +224,9 @@ export default class JoyrideOverlay extends React.Component<OverlayProps, State>
 
     // Hack for Safari bug with mix-blend-mode with z-index
     if (getBrowser() === 'safari') {
-      const { mixBlendMode, zIndex, ...safarOverlay } = overlayStyles;
+      const { mixBlendMode, zIndex, ...safariOverlay } = overlayStyles;
 
-      spotlight = <div style={{ ...safarOverlay }}>{spotlight}</div>;
+      spotlight = <div style={{ ...safariOverlay }}>{spotlight}</div>;
       delete overlayStyles.backgroundColor;
     }
 

diff --git a/src/styles.ts b/src/styles.ts
@@ -34,9 +34,10 @@ const spotlight = {
 
 export default function getStyles(props: Props, step: StepMerged) {
   const { floaterProps, styles } = props;
-  const mergedFloaterProps = deepmerge(step?.floaterProps ?? {}, floaterProps ?? {});
-  const mergedStyles = deepmerge(styles ?? {}, step?.styles ?? {});
+  const mergedFloaterProps = deepmerge(step.floaterProps ?? {}, floaterProps ?? {});
+  const mergedStyles = deepmerge(styles ?? {}, step.styles ?? {});
   const options = deepmerge(defaultOptions, mergedStyles.options || {}) satisfies StylesOptions;
+  const hideBeacon = step.placement === 'center' || step.disableBeacon;
   let { width } = options;
 
   if (window.innerWidth > 480) {
@@ -63,7 +64,7 @@ export default function getStyles(props: Props, step: StepMerged) {
   const defaultStyles = {
     beacon: {
       ...buttonBase,
-      display: 'inline-block',
+      display: hideBeacon ? 'none' : 'inline-block',
       height: options.beaconSize,
       position: 'relative',
       width: options.beaconSize,