Skip to content

Commit 4e861e2

Browse files
GokulSNathGokulSNath
committed
changed props name and stepClick handle function params
1 parent 8e5bb9a commit 4e861e2

5 files changed

Lines changed: 51 additions & 70 deletions

File tree

‎src/bubble/bubble.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,29 +6,28 @@ import styles from './styles.module.scss';
66
const Bubble: FC<IBubbleProps> = (props) => {
77
const {
88
step,
9-
enableStepClick,
109
renderAdornment,
1110
index,
12-
currentActiveStepIndexVal,
13-
handleStepClick,
11+
currentStepIndex,
12+
handleStepClick = null,
1413
getBubbleStyles,
1514
getActiveBubbleStyles,
1615
getInActiveBubbleStyles
1716
} = props;
1817
return (
1918
<div
2019
className={`${styles.eachBubble}
21-
${enableStepClick && styles.cursorPointer}
22-
${index === currentActiveStepIndexVal && styles.activeStepBubble}
23-
${step.status === STEP_STATUSES.UNVISITED && currentActiveStepIndexVal !== index && styles.inactiveStepBubble}
20+
${handleStepClick && styles.cursorPointer}
21+
${index === currentStepIndex && styles.activeStepBubble}
22+
${step.status === STEP_STATUSES.UNVISITED && currentStepIndex !== index && styles.inactiveStepBubble}
2423
`}
2524
style={{
2625
...((getBubbleStyles && getBubbleStyles(step, index)) || {}),
27-
...((index === currentActiveStepIndexVal && getActiveBubbleStyles && getActiveBubbleStyles(step, index)) || {}),
28-
...((step.status === STEP_STATUSES.UNVISITED && currentActiveStepIndexVal !== index
26+
...((index === currentStepIndex && getActiveBubbleStyles && getActiveBubbleStyles(step, index)) || {}),
27+
...((step.status === STEP_STATUSES.UNVISITED && currentStepIndex !== index
2928
&& getInActiveBubbleStyles && getInActiveBubbleStyles(step, index)) || {})
3029
}}
31-
onClick={(): void => handleStepClick(index)}
30+
onClick={(): void | null => handleStepClick && handleStepClick()}
3231
role="presentation"
3332
data-testId="stepper-bubble"
3433
>

‎src/bubble/types.d.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,10 @@ import { IStep } from "../stepper-component/types";
33

44
export interface IBubbleProps {
55
step: IStep,
6-
enableStepClick: boolean,
76
renderAdornment?(step: IStep, index: number): ReactElement,
87
index: number,
9-
currentActiveStepIndexVal?: number,
10-
handleStepClick(index: number): void,
8+
currentStepIndex?: number,
9+
handleStepClick(): void,
1110
getBubbleStyles?(step: IStep, index: number): object,
1211
getActiveBubbleStyles?(step: IStep, index: number): object,
1312
getInActiveBubbleStyles?(step: IStep, index: number): object,

‎src/stepper-component/stepperComponent.tsx‎

Lines changed: 35 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
11
import React, { useState, useEffect, ReactElement, FC } from 'react';
2-
import styles from './styles.module.scss';
2+
import classes from './styles.module.scss';
33
import { IStep, IStepperProps } from './types';
44
import Bubble from '../bubble';
55
import { LABEL_POSITION } from '../constants';
66

77
const Stepper: FC<IStepperProps> = (props) => {
88
const {
99
steps,
10-
currentActiveStepIndex,
11-
enableStepClick = false,
10+
currentStepIndex,
1211
onStepClick,
13-
renderAdornment,
14-
stylesOverride = {},
12+
renderBubble,
13+
styles = {},
1514
labelPosition = LABEL_POSITION.RIGHT
1615
} = props;
1716

@@ -25,80 +24,66 @@ const Stepper: FC<IStepperProps> = (props) => {
2524
getBubbleStyles,
2625
getActiveBubbleStyles,
2726
getInActiveBubbleStyles
28-
} = stylesOverride;
29-
30-
const [currentActiveStepIndexVal, setCurrentActiveStepIndexVal] = useState<number>(0);
31-
32-
useEffect(() => {
33-
setCurrentActiveStepIndexVal((currentActiveStepIndex ?? 0) as number);
34-
}, [currentActiveStepIndex]);
35-
36-
const handleStepClick = (stepIndex: number): void => {
37-
if (enableStepClick) {
38-
if (onStepClick) onStepClick(stepIndex);
39-
else setCurrentActiveStepIndexVal(stepIndex);
40-
}
41-
}
27+
} = styles;
4228

4329
return (
44-
<div className={styles.stepperContainer}>
45-
{steps?.map((step: IStep, index: number): ReactElement => (
46-
<div key={index} className={styles.eachStep} data-testId="stepper-steps">
47-
<div className={styles.bubbleLineWrapper}>
30+
<div className={classes.stepperContainer}>
31+
{steps?.map((step: IStep, stepIndex: number): ReactElement => (
32+
<div key={stepIndex} className={classes.eachStep} data-testId="stepper-steps">
33+
<div className={classes.bubbleLineWrapper}>
4834
<Bubble
4935
step={step}
50-
index={index}
51-
enableStepClick={enableStepClick}
52-
currentActiveStepIndexVal= {currentActiveStepIndexVal}
53-
handleStepClick={handleStepClick}
54-
renderAdornment={renderAdornment}
36+
index={stepIndex}
37+
currentStepIndex= {currentStepIndex}
38+
handleStepClick={(): void => onStepClick && onStepClick(step, stepIndex)}
39+
renderAdornment={renderBubble}
5540
getBubbleStyles={getBubbleStyles}
5641
getActiveBubbleStyles={getActiveBubbleStyles}
5742
getInActiveBubbleStyles={getInActiveBubbleStyles}
5843
/>
59-
<div className={`${styles.labelContainer} ${styles[`labelContainer__${labelPosition || LABEL_POSITION.RIGHT}`]}`}>
44+
<div className={`${classes.labelContainer} ${classes[`labelContainer__${labelPosition || LABEL_POSITION.RIGHT}`]}`}>
6045
{step?.label && (
6146
<span
62-
className={`${styles.labelTitle}
63-
${enableStepClick && styles.cursorPointer}
64-
${index === currentActiveStepIndexVal && styles.activeLabelTitle}`}
47+
className={`${classes.labelTitle}
48+
${onStepClick && classes.cursorPointer}
49+
${stepIndex === currentStepIndex && classes.activeLabelTitle}`}
6550
style={{
66-
...((getLabelTitleStyles && getLabelTitleStyles(step, index)) || {}),
67-
...((index === currentActiveStepIndexVal && getActiveLabelTitleStyles && getActiveLabelTitleStyles(step, index)) || {})
51+
...((getLabelTitleStyles && getLabelTitleStyles(step, stepIndex)) || {}),
52+
...((stepIndex === currentStepIndex && getActiveLabelTitleStyles && getActiveLabelTitleStyles(step, stepIndex)) || {})
6853
}}
69-
onClick={(): void => handleStepClick(index)}
54+
onClick={(): void => onStepClick && onStepClick(step, stepIndex)}
7055
role="presentation"
71-
data-testId={`stepper-label-${index}`}
56+
data-testId={`stepper-label-${stepIndex}`}
7257
>
7358
{step.label}
7459
</span>
7560
)}
7661
{step?.description && (
7762
<span
78-
className={`${styles.labelDescription}
79-
${enableStepClick && styles.cursorPointer}
80-
${index === currentActiveStepIndexVal && styles.activeLabelDescription}`}
63+
className={`${classes.labelDescription}
64+
${onStepClick && classes.cursorPointer}
65+
${stepIndex === currentStepIndex && classes.activeLabelDescription}`}
8166
style={{
82-
...((getLabelDescriptionStyles && getLabelDescriptionStyles(step, index)) || {}),
83-
...((index === currentActiveStepIndexVal &&
84-
getActiveLabelDescriptionStyles && getActiveLabelDescriptionStyles(step, index)) || {})
67+
...((getLabelDescriptionStyles && getLabelDescriptionStyles(step, stepIndex)) || {}),
68+
...((stepIndex === currentStepIndex &&
69+
getActiveLabelDescriptionStyles && getActiveLabelDescriptionStyles(step, stepIndex)) || {})
8570
}}
86-
onClick={(): void => handleStepClick(index)}
71+
onClick={(): void => onStepClick && onStepClick(step, stepIndex)}
8772
role="presentation"
88-
data-testId={`stepper-desc-${index}`}
73+
data-testId={`stepper-desc-${stepIndex}`}
8974
>
9075
{step.description}
9176
</span>
9277
)}
9378
</div>
94-
{index < steps?.length - 1 && (
79+
{stepIndex < steps?.length - 1 && (
9580
<div
96-
className={`${styles.lineSeparator}
97-
${index > currentActiveStepIndexVal - 1 && styles.inactiveStepLineSeparator}`}
81+
className={`${classes.lineSeparator}
82+
${currentStepIndex && stepIndex > currentStepIndex - 1 && classes.inactiveStepLineSeparator}`}
9883
style={{
99-
...((getLineSeparatorStyles && getLineSeparatorStyles(step, index)) || {}),
100-
...((index > currentActiveStepIndexVal - 1
101-
&& getInactiveLineSeparatorStyles && getInactiveLineSeparatorStyles(step, index)) || {})
84+
...((getLineSeparatorStyles && getLineSeparatorStyles(step, stepIndex)) || {}),
85+
...(( currentStepIndex && stepIndex > currentStepIndex - 1
86+
&& getInactiveLineSeparatorStyles && getInactiveLineSeparatorStyles(step, stepIndex)) || {})
10287
}}
10388
/>
10489
)}

‎src/stepper-component/types.ts‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,14 @@ export interface IStep {
88

99
export interface IStepperProps {
1010
steps: IStep[],
11-
currentActiveStepIndex?: number,
12-
onStepClick?(stepIndex: number): void,
13-
enableStepClick?: boolean,
14-
renderAdornment?(step: IStep, index: number): ReactElement,
15-
stylesOverride?: IStylesOverride,
11+
currentStepIndex?: number,
12+
onStepClick?(step: IStep, stepIndex: number): void,
13+
renderBubble?(step: IStep, stepIndex: number): ReactElement,
14+
styles?: IStylesOverride,
1615
labelPosition?: LABEL_POSITION.LEFT | LABEL_POSITION.RIGHT
1716
}
1817

19-
export type IStyleFunction = (step: IStep, index: number) => object
18+
export type IStyleFunction = (step: IStep, stepIndex: number) => object
2019

2120
export interface IStylesOverride {
2221
getLabelDescriptionStyles?: IStyleFunction,

‎src/stories/StepperComponent.stories.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,7 @@ VerticalStepper.args = {
3232
label: 'Step 4',
3333
description: 'The quick brown fox jumps over the lazy dog'
3434
}],
35-
currentActiveStepIndex: 2,
36-
enableStepClick: true,
35+
currentStepIndex: 2,
3736
// onStepClick: (stepIndex: number) => console.log("🚀 ~ file: StepperComponent.stories.tsx:37 ~ stepIndex", stepIndex)
3837
// renderAdornment: (step, index) => {},
3938
// labelPosition: 'right'

0 commit comments

Comments
 (0)