`Element` parameter of Steps now can be plain DOM element #14

Original file line number	Diff line number	Diff line change
Expand Up		@@ -97,15 +97,15 @@ const steps = [
		intro: 'test 2',
		},
		{
	element: '.selector3',
	element: document.querySelectorAll('.selector3')[0],
		intro: 'test 3',
		},
		];
		```

		\| Name \| Description \| Type \| Required \|
		\| --- \| --- \| :---: \| :---: \|
	\| `element` \| CSS selector to use for the step. \| String \| \|
	\| `element` \| CSS selector to use for the step or DOM element \| String or DOM element \| \|
		\| `intro` \| The tooltip text. \| String \| ✅ \|
		\| `position` \| Position of the tooltip. \| String \| \|
		\| `tooltipClass` \| CSS class of the tooltip. \| String \| \|
Expand Down

10 changes: 8 additions & 2 deletions src/components/Steps/index.js

Show comments View file Open in desktop

Original file line number	Diff line number	Diff line change
Expand Up		@@ -18,7 +18,7 @@ export default class Steps extends Component {
		initialStep: PropTypes.number.isRequired,
		steps: PropTypes.arrayOf(
		PropTypes.shape({
	element: PropTypes.string,
	element: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Element)]),
		intro: PropTypes.string.isRequired,
		position: introJsPropTypes.tooltipPosition,
		tooltipClass: PropTypes.string,
Expand Down Expand Up		@@ -204,7 +204,13 @@ export default class Steps extends Component {
		* @param {number} stepIndex - The index of the step to update.
		*/
		updateStepElement = stepIndex => {
	const element = document.querySelector(this.introJs._options.steps[stepIndex].element);
	let element;

	if (typeof this.introJs._options.steps[stepIndex].element === 'string') {
	element = document.querySelector(this.introJs._options.steps[stepIndex].element);
	} else {
	element = this.introJs._options.steps[stepIndex].element;
	}

		if (element) {
		this.introJs._introItems[stepIndex].element = element;
Expand Down

20 changes: 19 additions & 1 deletion src/components/Steps/index.test.js

Show comments View file Open in desktop

Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,6 +15,10 @@ const steps = [
		element: '.test',
		intro: 'test',
		},
	{
	element: document.createElement('div'),
	intro: 'test',
	},
		];

		describe('Steps', () => {
Expand Down Expand Up		@@ -313,7 +317,7 @@ describe('Steps', () => {
		expect(wrapper.instance().introJs._introItems[0].element).not.toEqual(expect.any(HTMLDivElement));
		});

	test('should update the element if it does exist when calling updateStepElement()', () => {
	test('should update the element if it does exist when calling updateStepElement() for selector', () => {
		const wrapper = shallow(<Steps initialStep={0} steps={steps} onExit={() => {}} />, {
		lifecycleExperimental: true,
		});
Expand All		@@ -327,4 +331,18 @@ describe('Steps', () => {

		expect(wrapper.instance().introJs._introItems[0].element).toEqual(expect.any(HTMLDivElement));
		});

	test('should update the element if it does exist when calling updateStepElement() for DOM element', () => {
	const wrapper = shallow(<Steps initialStep={0} steps={steps} onExit={() => {}} />, {
	lifecycleExperimental: true,
	});
	wrapper.setProps({ enabled: true });

	const div = document.createElement('div');
	document.body.appendChild(div);

	wrapper.instance().updateStepElement(0);

	expect(wrapper.instance().introJs._introItems[0].element).toEqual(expect.any(HTMLDivElement));
	});
		});

Navigation Menu