Skip to content

Commit fe6d9b6

Browse files
tumms2021389tumms2021389
committed
refactor: stepper code & styles
1 parent 585fbf6 commit fe6d9b6

File tree

2 files changed

+30
-87
lines changed

2 files changed

+30
-87
lines changed

‎packages/react-sdk-components/src/components/infra/MultiStep/MultiStep.css‎

Lines changed: 14 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -79,22 +79,26 @@ mat-horizontal-stepper {
7979

8080
.psdk-vertical-step-icon {
8181
margin-right: 12px;
82-
background-color: var(--stepper-completed-bg-color);
83-
color: var(--app-text-color);
8482
border-radius: 50%;
8583
height: 24px;
8684
width: 24px;
8785
position: relative;
8886
}
8987

90-
.psdk-vertical-step-icon-future {
91-
margin-right: 12px;
88+
.success .psdk-vertical-step-icon {
89+
background-color: var(--stepper-completed-bg-color);
90+
color: var(--app-text-color);
91+
}
92+
93+
.future .psdk-vertical-step-icon {
9294
color: var(--app-neutral-color);
9395
border: 1px solid var(--app-neutral-color);
94-
border-radius: 50%;
95-
height: 24px;
96-
width: 24px;
97-
position: relative;
96+
}
97+
98+
.current .psdk-vertical-step-icon {
99+
background-color: var(--app-primary-color);
100+
color: var(--app-text-color);
101+
flex-shrink: 0;
98102
}
99103

100104
.psdk-vertical-step-icon-content {
@@ -104,17 +108,6 @@ mat-horizontal-stepper {
104108
transform: translate(-50%, -50%);
105109
}
106110

107-
.psdk-vertical-step-icon-selected {
108-
margin-right: 12px;
109-
background-color: var(--app-primary-color);
110-
color: var(--app-text-color);
111-
border-radius: 50%;
112-
height: 24px;
113-
width: 24px;
114-
flex-shrink: 0;
115-
position: relative;
116-
}
117-
118111
.psdk-vertical-step-label {
119112
color: var(--step-label-color);
120113
display: inline-block;
@@ -127,16 +120,8 @@ mat-horizontal-stepper {
127120
font-weight: 500;
128121
}
129122

130-
.psdk-vertical-step-label-selected {
123+
.current .psdk-vertical-step-label {
131124
color: rgba(0, 0, 0, 0.87);
132-
display: inline-block;
133-
white-space: nowrap;
134-
overflow: hidden;
135-
text-overflow: ellipsis;
136-
min-width: 50px;
137-
vertical-align: middle;
138-
font-size: 14px;
139-
font-weight: 500;
140125
}
141126

142127
.psdk-vertical-step-body {
@@ -222,11 +207,8 @@ mat-horizontal-stepper {
222207
white-space: initial;
223208
}
224209

225-
.psdk-horizontal-step-label-selected {
210+
.current .psdk-horizontal-step-label {
226211
color: var(--text-primary-color);
227-
font-size: 14px;
228-
font-weight: 500;
229-
white-space: initial;
230212
margin-left: 8px;
231213
}
232214

‎packages/react-sdk-components/src/components/infra/MultiStep/MultiStep.tsx‎

Lines changed: 16 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -27,66 +27,27 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
2727
currentStep = arNavigationSteps[lastActiveStepIndex >= 0 ? lastActiveStepIndex : 0];
2828
}
2929

30-
// const svgCurrent = Utils.getImageSrc("circle-solid", Utils.getSDKStaticConentUrl());
31-
// const svgNotCurrent = Utils.getImageSrc("circle-solid", Utils.getSDKStaticConentUrl());
32-
33-
function _getVIconClass(status): string {
34-
if (status === 'current') {
35-
return 'psdk-vertical-step-icon-selected';
36-
} else if (status === 'future') {
37-
return 'psdk-vertical-step-icon-future';
38-
}
39-
40-
return 'psdk-vertical-step-icon';
41-
}
42-
43-
function _getVLabelClass(status): string {
44-
if (status === 'current') {
45-
return 'psdk-vertical-step-label-selected';
46-
}
47-
48-
return 'psdk-vertical-step-label';
49-
}
50-
5130
function _getVBodyClass(index: number): string {
52-
if (index < arNavigationSteps.length - 1) {
53-
return 'psdk-vertical-step-body psdk-vertical-step-line';
54-
}
31+
const baseClass = 'psdk-vertical-step-body';
32+
const isNotLastStep = index < arNavigationSteps.length - 1;
5533

56-
return 'psdk-vertical-step-body';
57-
}
58-
59-
function _getHLabelClass(step): string {
60-
if (step.ID === currentStep?.ID) {
61-
return 'psdk-horizontal-step-label-selected';
62-
}
63-
64-
return 'psdk-horizontal-step-label';
34+
return isNotLastStep ? `${baseClass} psdk-vertical-step-line` : baseClass;
6535
}
6636

6737
function _getAutoFlexClass(currentStep): string {
6838
const currentStepIndex = arNavigationSteps.findIndex(step => step.ID === currentStep?.ID);
69-
const len = arNavigationSteps.length;
70-
71-
console.log('Current Step Index:', currentStep, arNavigationSteps.length - 2);
72-
73-
if (currentStepIndex === arNavigationSteps.length - 2 && arNavigationSteps[len - 1].visited_status === 'current') {
74-
return 'flex-auto';
75-
}
76-
77-
if (currentStep.visited_status === 'current') {
78-
return 'flex-auto';
79-
}
39+
const totalSteps = arNavigationSteps.length;
40+
const lastStep = arNavigationSteps[totalSteps - 1];
8041

81-
if (currentStep.visited_status === 'current') {
82-
return 'flex-auto';
83-
}
42+
// Apply flex-auto class if current step is active OR if current step is second-to-last and the last step is active
43+
const isCurrentStepActive = currentStep.visited_status === 'current';
44+
const isSecondToLastWithActiveLastStep = currentStepIndex === totalSteps - 2 && lastStep?.visited_status === 'current';
8445

85-
return '';
46+
return isCurrentStepActive || isSecondToLastWithActiveLastStep ? 'flex-auto' : '';
8647
}
8748

88-
function _showHLine(index: number): boolean {
89-
return index < arNavigationSteps.length - 1;
49+
function isLastStep(index: number): boolean {
50+
return index === arNavigationSteps.length - 1;
9051
}
9152

9253
function buttonPress(sAction: string, sButtonType: string) {
@@ -101,13 +62,13 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
10162
return (
10263
<React.Fragment key={mainStep.actionID}>
10364
<div className='psdk-vertical-step'>
104-
<div className='psdk-vertical-step-header'>
105-
<div className={_getVIconClass(mainStep.visited_status)}>
65+
<div className={`psdk-vertical-step-header ${mainStep.visited_status}`}>
66+
<div className={`psdk-vertical-step-icon`}>
10667
<div className='psdk-vertical-step-icon-content'>
10768
<span>{index + 1}</span>
10869
</div>
10970
</div>
110-
<div className={_getVLabelClass(mainStep.visited_status)}>{mainStep.visited_status === 'current' && mainStep.name}</div>
71+
<div className='psdk-vertical-step-label'>{mainStep.visited_status === 'current' && mainStep.name}</div>
11172
</div>
11273
<div className={_getVBodyClass(index)}>
11374
{mainStep?.steps && (
@@ -161,9 +122,9 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
161122
<span>{index + 1}</span>
162123
</div>
163124
</div>
164-
<div className={_getHLabelClass(mainStep)}>{mainStep.visited_status === 'current' && mainStep.name}</div>
125+
<div className='psdk-horizontal-step-label'>{mainStep.visited_status === 'current' && mainStep.name}</div>
165126
</div>
166-
{_showHLine(index) && <div className={`psdk-horizontal-step-line ${_getAutoFlexClass(mainStep)}`} />}
127+
{!isLastStep(index) && <div className={`psdk-horizontal-step-line ${_getAutoFlexClass(mainStep)}`} />}
167128
</React.Fragment>
168129
);
169130
})}

0 commit comments

Comments
 (0)