steps-bar.jsx
2.35 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
/**
* External dependencies
*/
import React from 'react';
/**
* WordPress dependencies
*/
const { __ } = wp.i18n;
export default ({ currentStep, smushData }) => {
const getStepClass = (step) => {
const stepClass = 'smush-wizard-bar-step';
if (!smushData.isPro) {
return stepClass + ' disabled';
}
if (step > currentStep) {
return stepClass;
}
return (
stepClass +
(step === currentStep ? ' current' : ' sui-tooltip done')
);
};
const getStepNumber = (step) => {
return currentStep > step ? (
<span className="sui-icon-check" aria-hidden="true"></span>
) : (
step
);
};
const steps = [
{ number: 1, title: __('Server Type', 'wp-smushit') },
{ number: 2, title: __('Add Rules', 'wp-smushit') },
{ number: 3, title: __('Finish Setup', 'wp-smushit') },
];
return (
<div className="sui-sidenav">
<span className="smush-wizard-bar-subtitle">
{__('Setup', 'wp-smushit')}
</span>
<div className="smush-sidenav-title">
<h4>{__('Local WebP', 'wp-smushit')}</h4>
{!smushData.isPro && (
<span className="sui-tag sui-tag-pro">
{__('Pro', 'wp-smushit')}
</span>
)}
</div>
<div className="smush-wizard-steps-container">
<svg
className="smush-svg-mobile"
focusable="false"
aria-hidden="true"
>
<line
x1="0"
x2="50%"
stroke={1 !== currentStep ? '#1ABC9C' : '#E6E6E6'}
/>
<line
x1="50%"
x2="100%"
stroke={3 === currentStep ? '#1ABC9C' : '#E6E6E6'}
/>
</svg>
<ul>
{steps.map((step) => (
<React.Fragment key={step.number}>
<li
className={getStepClass(step.number)}
data-tooltip={__(
'This stage is already completed.',
'wp-smushit'
)}
>
<div className="smush-wizard-bar-step-number">
{getStepNumber(step.number)}
</div>
{step.title}
</li>
{3 !== step.number && (
<svg
data={step.number}
data2={currentStep}
className="smush-svg-desktop"
focusable="false"
aria-hidden="true"
>
<line
y1="0"
y2="40px"
stroke={
step.number < currentStep
? '#1ABC9C'
: '#E6E6E6'
}
/>
</svg>
)}
</React.Fragment>
))}
</ul>
</div>
</div>
);
};