From ad7dbedb71be24ad5f354455951cdd26d53a564e Mon Sep 17 00:00:00 2001 From: Manish Phatak Date: Wed, 11 Oct 2023 17:34:21 -0700 Subject: [PATCH 1/3] Allow spotlight styles to be updated from outside When is used as third party lib in host react applications, there are several instances where you might need a more finer control on how things are displayed. This change allows developers to manipulate spotlight style if they want according to their needs. In our case, we are using with react-pdf to create highlighted section in the pdf. So we need finer control over the spotlight CSS being displayed in our app. --- src/components/Overlay.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Overlay.tsx b/src/components/Overlay.tsx index cb922281..e744d758 100644 --- a/src/components/Overlay.tsx +++ b/src/components/Overlay.tsx @@ -109,7 +109,6 @@ export default class JoyrideOverlay extends React.Component const top = getElementPosition(element, spotlightPadding, disableScrollParentFix); return { - ...(isLegacy() ? styles.spotlightLegacy : styles.spotlight), height: Math.round((elementRect?.height ?? 0) + spotlightPadding * 2), left: Math.round((elementRect?.left ?? 0) - spotlightPadding), opacity: showSpotlight ? 1 : 0, @@ -118,6 +117,7 @@ export default class JoyrideOverlay extends React.Component top, transition: 'opacity 0.2s', width: Math.round((elementRect?.width ?? 0) + spotlightPadding * 2), + ...(isLegacy() ? styles.spotlightLegacy : styles.spotlight), } satisfies React.CSSProperties; } From bdae51cd8a7e157cfbdbe7f6e5697c11d18b7366 Mon Sep 17 00:00:00 2001 From: Manish Phatak Date: Fri, 13 Oct 2023 01:00:38 -0700 Subject: [PATCH 2/3] Update Overlay.tsx --- src/components/Overlay.tsx | 48 ++++++++++++++++++++++++++++++++++---- 1 file changed, 43 insertions(+), 5 deletions(-) diff --git a/src/components/Overlay.tsx b/src/components/Overlay.tsx index e744d758..f9811207 100644 --- a/src/components/Overlay.tsx +++ b/src/components/Overlay.tsx @@ -106,18 +106,56 @@ export default class JoyrideOverlay extends React.Component const element = getElement(target); const elementRect = getClientRect(element); const isFixedTarget = hasPosition(element); - const top = getElementPosition(element, spotlightPadding, disableScrollParentFix); + + let overridenHeight; + + if (styles.spotlight.height) { + overridenHeight = + typeof styles.spotlight.height === 'number' + ? styles.spotlight.height + : Number(parseInt(styles.spotlight.height, 10)); + } + + let overridenWidth; + + if (styles.spotlight.width) { + overridenWidth = + typeof styles.spotlight.width === 'number' + ? styles.spotlight.width + : Number(parseInt(styles.spotlight.width, 10)); + } + + let overridenLeft; + + if (styles.spotlight.left) { + overridenLeft = + typeof styles.spotlight.left === 'number' + ? styles.spotlight.left + : Number(parseInt(styles.spotlight.left, 10)); + } + + let overridenTop; + + if (styles.spotlight.top) { + overridenTop = + typeof styles.spotlight.top === 'number' + ? styles.spotlight.top + : Number(parseInt(styles.spotlight.top, 10)); + } + + const top = + overridenTop ?? getElementPosition(element, spotlightPadding, disableScrollParentFix); return { - height: Math.round((elementRect?.height ?? 0) + spotlightPadding * 2), - left: Math.round((elementRect?.left ?? 0) - spotlightPadding), + ...(isLegacy() ? styles.spotlightLegacy : styles.spotlight), + height: Math.round((overridenHeight ?? elementRect?.height ?? 0) + spotlightPadding * 2), + left: Math.round((overridenLeft ?? elementRect?.left ?? 0) - spotlightPadding), opacity: showSpotlight ? 1 : 0, pointerEvents: spotlightClicks ? 'none' : 'auto', position: isFixedTarget ? 'fixed' : 'absolute', top, transition: 'opacity 0.2s', - width: Math.round((elementRect?.width ?? 0) + spotlightPadding * 2), - ...(isLegacy() ? styles.spotlightLegacy : styles.spotlight), + width: overridenWidth || Math.round((elementRect?.width ?? 0) + spotlightPadding * 2), } satisfies React.CSSProperties; } From bdbc629579407f445eb3cd748b676de15e397cde Mon Sep 17 00:00:00 2001 From: Manish Phatak Date: Fri, 13 Oct 2023 08:55:12 -0700 Subject: [PATCH 3/3] Update Overlay.tsx --- src/components/Overlay.tsx | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/Overlay.tsx b/src/components/Overlay.tsx index f9811207..a8a97073 100644 --- a/src/components/Overlay.tsx +++ b/src/components/Overlay.tsx @@ -107,55 +107,55 @@ export default class JoyrideOverlay extends React.Component const elementRect = getClientRect(element); const isFixedTarget = hasPosition(element); - let overridenHeight; + let overriddenHeight; if (styles.spotlight.height) { - overridenHeight = + overriddenHeight = typeof styles.spotlight.height === 'number' ? styles.spotlight.height : Number(parseInt(styles.spotlight.height, 10)); } - let overridenWidth; + let overriddenWidth; if (styles.spotlight.width) { - overridenWidth = + overriddenWidth = typeof styles.spotlight.width === 'number' ? styles.spotlight.width : Number(parseInt(styles.spotlight.width, 10)); } - let overridenLeft; + let overriddenLeft; if (styles.spotlight.left) { - overridenLeft = + overriddenLeft = typeof styles.spotlight.left === 'number' ? styles.spotlight.left : Number(parseInt(styles.spotlight.left, 10)); } - let overridenTop; + let overriddenTop; if (styles.spotlight.top) { - overridenTop = + overriddenTop = typeof styles.spotlight.top === 'number' ? styles.spotlight.top : Number(parseInt(styles.spotlight.top, 10)); } const top = - overridenTop ?? getElementPosition(element, spotlightPadding, disableScrollParentFix); + overriddenTop ?? getElementPosition(element, spotlightPadding, disableScrollParentFix); return { ...(isLegacy() ? styles.spotlightLegacy : styles.spotlight), - height: Math.round((overridenHeight ?? elementRect?.height ?? 0) + spotlightPadding * 2), - left: Math.round((overridenLeft ?? elementRect?.left ?? 0) - spotlightPadding), + height: Math.round((overriddenHeight ?? elementRect?.height ?? 0) + spotlightPadding * 2), + left: Math.round((overriddenLeft ?? elementRect?.left ?? 0) - spotlightPadding), opacity: showSpotlight ? 1 : 0, pointerEvents: spotlightClicks ? 'none' : 'auto', position: isFixedTarget ? 'fixed' : 'absolute', top, transition: 'opacity 0.2s', - width: overridenWidth || Math.round((elementRect?.width ?? 0) + spotlightPadding * 2), + width: overriddenWidth || Math.round((elementRect?.width ?? 0) + spotlightPadding * 2), } satisfies React.CSSProperties; }