Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix support of floaterProps.getPopper #926

Closed
wants to merge 2 commits into from
Closed

Fix support of floaterProps.getPopper #926

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1ad28cb
Fix support of floaterProps.getPopper
andreash82 Jul 22, 2023
2983ec9
add version of standard test spec which covers Joyride/Step.setPopper…
andreash82 Jul 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 7 additions & 2 deletions src/components/Step.js
View file
Open in desktop
Expand Up @@ -44,6 +44,7 @@ export default class JoyrideStep extends React.Component {
disableScrollParentFix: PropTypes.bool,
event: PropTypes.string,
floaterProps: PropTypes.shape({
getPopper: PropTypes.func,
options: PropTypes.object,
styles: PropTypes.object,
wrapperOptions: PropTypes.object,
Expand Down Expand Up @@ -245,7 +246,7 @@ export default class JoyrideStep extends React.Component {
};

setPopper = (popper, type) => {
const { action, setPopper, update } = this.props;
const { action, setPopper, update, step } = this.props;

if (type === 'wrapper') {
this.beaconPopper = popper;
Expand All @@ -255,6 +256,10 @@ export default class JoyrideStep extends React.Component {

setPopper(popper, type);

if (step.floaterProps && typeof step.floaterProps.getPopper === 'function') {
step.floaterProps.getPopper(popper, type);
}

if (this.beaconPopper && this.tooltipPopper) {
update({
action: action === ACTIONS.CLOSE ? ACTIONS.CLOSE : action,
Expand Down Expand Up @@ -289,6 +294,7 @@ export default class JoyrideStep extends React.Component {
/>
</Portal>
<Floater
{...step.floaterProps}
component={
<Tooltip
continuous={continuous}
Expand All @@ -307,7 +313,6 @@ export default class JoyrideStep extends React.Component {
open={this.open}
placement={step.placement}
target={step.target}
{...step.floaterProps}
>
<Beacon
beaconComponent={step.beaconComponent}
Expand Down
141 changes: 141 additions & 0 deletions test/__fixtures__/WithFloaterGetPopper.js
View file
Open in desktop
@@ -0,0 +1,141 @@
import React from 'react';
import PropTypes from 'prop-types';
import Joyride, { STATUS } from '../../src/index';

import tourSteps from './steps';

const filteredSteps = tourSteps
.filter((d, i) => i !== 3)
.map(d => {
if (d.target === '.mission button') {
d.target = '.mission h2';
}

return d;
});

export default class WithFloaterGetPopper extends React.Component {
constructor(props) {
super(props);

const steps = [...filteredSteps];

if (props.withCentered) {
steps.push({
target: 'body',
placement: 'center',
content: "Let's begin our journey",
textAlign: 'center',
});
}

this.state = {
run: false,
steps,
};
}

static propTypes = {
callback: PropTypes.func.isRequired,
};

handleClickStart = () => {
this.setState({
run: true,
});
};

handleJoyrideCallback = data => {
const { callback } = this.props;
const { status } = data;

if ([STATUS.FINISHED, STATUS.SKIPPED].includes(status)) {
this.setState({ run: false });
}

callback(data);
};

render() {
const { run, steps } = this.state;
const { floaterProps } = this.props;

return (
<div className="demo">
<Joyride
run={run}
steps={steps}
continuous
scrollToFirstStep
showSkipButton={true}
callback={this.handleJoyrideCallback}
floaterProps={floaterProps}
/>
<main>
<div className="hero">
<div className="container">
<div className="hero__content">
<h1>
<span>Create walkthroughs and guided tours for your ReactJS apps.</span>
</h1>
<button className="hero__start" onClick={this.handleClickStart} type="button">
Let's Go!
</button>
</div>
</div>
</div>
<div className="demo__section projects">
<div className="container">
<h2>
<span>Projects</span>
</h2>
<div className="list">
<div>
<img
src="http://placehold.it/800x600/ff0044/ffffff?txtsize=50&text=ASBESTOS"
alt="ASBESTOS"
/>
</div>
<div>
<img
src="http://placehold.it/800x600/00ff44/ffffff?txtsize=50&text=GROW"
alt="GROW"
/>
</div>
<div>
<img
src="http://placehold.it/800x600/333/ffffff?txtsize=50&text=∂Vo∑"
alt="∂Vo∑"
/>
</div>
</div>
</div>
</div>

<div className="demo__section mission">
<div className="container">
<h2>
<span>Mission</span>
</h2>
</div>
</div>
<div className="demo__section about">
<div className="container">
<h2>
<span>About</span>
</h2>
</div>
</div>
</main>
<footer className="demo__footer">
<div className="container">
<button type="button">
<span />
</button>
JOYRIDE
</div>
</footer>
</div>
);
}
}
166 changes: 166 additions & 0 deletions test/tours/__snapshots__/with-floater-get-popper.spec.js.snap
View file
Open in desktop
@@ -0,0 +1,166 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Joyride > With floaterProps.getPopper should be able to click STEP 1 Beacon 1`] = `
{
"action": "update",
"controlled": false,
"index": 0,
"lifecycle": "tooltip",
"size": 5,
"status": "running",
}
`;

exports[`Joyride > With floaterProps.getPopper should be able to click STEP 1 Primary button 1`] = `
{
"action": "next",
"controlled": false,
"index": 1,
"lifecycle": "init",
"size": 5,
"status": "running",
}
`;

exports[`Joyride > With floaterProps.getPopper should be able to click STEP 2 Primary button 1`] = `
{
"action": "next",
"controlled": false,
"index": 2,
"lifecycle": "init",
"size": 5,
"status": "running",
}
`;

exports[`Joyride > With floaterProps.getPopper should be able to click STEP 2 Primary button AGAIN 1`] = `
{
"action": "next",
"controlled": false,
"index": 2,
"lifecycle": "init",
"size": 5,
"status": "running",
}
`;

exports[`Joyride > With floaterProps.getPopper should be able to click STEP 3 Back button 1`] = `
{
"action": "prev",
"controlled": false,
"index": 1,
"lifecycle": "init",
"size": 5,
"status": "running",
}
`;

exports[`Joyride > With floaterProps.getPopper should be able to click STEP 3 Primary button 1`] = `
{
"action": "next",
"controlled": false,
"index": 3,
"lifecycle": "init",
"size": 5,
"status": "running",
}
`;

exports[`Joyride > With floaterProps.getPopper should be able to click STEP 4 Primary button 1`] = `
{
"action": "update",
"controlled": false,
"index": 4,
"lifecycle": "tooltip",
"size": 5,
"status": "running",
}
`;

exports[`Joyride > With floaterProps.getPopper should be able to click STEP 5 Primary button 1`] = `
{
"action": "stop",
"controlled": false,
"index": 0,
"lifecycle": "init",
"size": 5,
"status": "paused",
}
`;

exports[`Joyride > With floaterProps.getPopper should be able to start the tour 1`] = `
{
"action": "start",
"controlled": false,
"index": 0,
"lifecycle": "init",
"size": 5,
"status": "running",
}
`;

exports[`Joyride > With floaterProps.getPopper should have ended the tour 1`] = `
{
"action": "stop",
"controlled": false,
"index": 0,
"lifecycle": "init",
"size": 5,
"status": "paused",
}
`;

exports[`Joyride > With floaterProps.getPopper should have initiated the Joyride 1`] = `
{
"action": "init",
"controlled": false,
"index": 0,
"lifecycle": "init",
"size": 5,
"status": "ready",
}
`;

exports[`Joyride > With floaterProps.getPopper should have rendered the STEP 3 Tooltip 1`] = `
{
"action": "update",
"controlled": false,
"index": 2,
"lifecycle": "tooltip",
"size": 5,
"status": "running",
}
`;

exports[`Joyride > With floaterProps.getPopper should have rendered the STEP 3 Tooltip AGAIN 1`] = `
{
"action": "update",
"controlled": false,
"index": 2,
"lifecycle": "tooltip",
"size": 5,
"status": "running",
}
`;

exports[`Joyride > With floaterProps.getPopper should have rendered the STEP 4 Tooltip 1`] = `
{
"action": "update",
"controlled": false,
"index": 3,
"lifecycle": "tooltip",
"size": 5,
"status": "running",
}
`;

exports[`Joyride > With floaterProps.getPopper should have rendered the STEP 5 Tooltip 1`] = `
{
"action": "update",
"controlled": false,
"index": 4,
"lifecycle": "ready",
"size": 5,
"status": "running",
}
`;