Elementor Website Builder – more than just a page builder / 3.8.0-beta1

Elementor Website Builder – more than just a page builder v3.8.0-beta1

elementor / app / modules / onboarding / assets / js / components / progress-bar / progress-bar-item.js

progress-bar-item.js in Elementor Website Builder – more than just a page builder 3.8.0-beta1, at app/modules/onboarding/assets/js/components/progress-bar/progress-bar-item.js

37 lines 1.2 KB

Raw Download Zip

1	import { useContext } from 'react';
2	import { OnboardingContext } from '../../context/context';
3
4	export default function ProgressBarItem( props ) {
5	const { state } = useContext( OnboardingContext ),
6	stepCompleted = 'completed' === state.steps[ props.id ],
7	stepSkipped = 'skipped' === state.steps[ props.id ];
8
9	let itemClasses = 'e-onboarding__progress-bar-item';
10
11	if ( props.id === state.currentStep ) {
12	itemClasses += ' e-onboarding__progress-bar-item--active';
13	} else if ( stepCompleted ) {
14	itemClasses += ' e-onboarding__progress-bar-item--completed';
15	} else if ( stepSkipped ) {
16	itemClasses += ' e-onboarding__progress-bar-item--skipped';
17	}
18
19	return (
20	// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
21	<div onClick={ props.onClick } className={ itemClasses }>
22	<div className="e-onboarding__progress-bar-item-icon">
23	{ stepCompleted ? <i className="eicon-check" /> : props.index + 1 }
24	</div>
25	{ props.title }
26	</div>
27	);
28	}
29
30	ProgressBarItem.propTypes = {
31	index: PropTypes.number.isRequired,
32	id: PropTypes.string.isRequired,
33	title: PropTypes.string.isRequired,
34	route: PropTypes.string,
35	onClick: PropTypes.func,
36	};
37