Skip to content

Commit e0e7711

Browse files
GokulSNathGokulSNath
committed
started with customisation
1 parent 8d10866 commit e0e7711

9 files changed

Lines changed: 105 additions & 60 deletions

File tree

‎src/bubble/bubble.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React, {ReactElement} from "react";
2+
import { IBubbleProps } from "./types";
3+
import whiteTick from '../assets/white-tick.svg';
4+
import { STEP_STATUSES } from './constants';
5+
import styles from './styles';
6+
const Bubble = (props: IBubbleProps): ReactElement => {
7+
const { step, enableStepClick, renderAdornment, index, currentActiveStepIndexVal, handleStepClick } = props;
8+
return (
9+
<div
10+
style={{...styles.eachBubble,
11+
...((enableStepClick && styles.cursorPointer) || {}),
12+
...((index === currentActiveStepIndexVal) && styles.activeStepBubble || {}),
13+
...((step.status === STEP_STATUSES.UNVISITED && currentActiveStepIndexVal !== index) && styles.inactiveStepBubble || {})
14+
}}
15+
onClick={(): void => handleStepClick(index)}
16+
role="presentation"
17+
>
18+
{(renderAdornment && renderAdornment(step, index))
19+
|| (
20+
<>
21+
{step?.status === STEP_STATUSES.COMPLETED && (
22+
<img
23+
src={whiteTick}
24+
style={styles.whiteTickImg}
25+
alt=""
26+
/>)
27+
|| index + 1}
28+
</>
29+
)}
30+
</div>
31+
);
32+
};
33+
34+
export default Bubble;

src/stepper-component/constants.ts renamed to src/bubble/constants.ts

File renamed without changes.

‎src/bubble/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import Bubble from "./bubble";
2+
3+
export default Bubble;

‎src/bubble/styles.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
const styles = {
2+
eachBubble: {
3+
borderRadius: '50%',
4+
height: '24px',
5+
width: '24px',
6+
background: '#312ec0',
7+
color: 'white',
8+
display: 'flex',
9+
alignItems: 'center',
10+
justifyContent: 'center',
11+
overflow: 'visible',
12+
fontWeight: '400',
13+
fontSize: '12px',
14+
lineHeight: '16px',
15+
border: '7px solid'
16+
},
17+
activeStepBubble: {
18+
border: '7px solid #CBCBEF'
19+
},
20+
inactiveStepBubble: {
21+
opacity: 0.4
22+
},
23+
cursorPointer: {
24+
cursor: 'pointer'
25+
},
26+
whiteTickImg: {
27+
objectFit: 'cover',
28+
width: '10px',
29+
height: '8px'
30+
}
31+
} as const;
32+
33+
export default styles;

‎src/bubble/types.d.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { ReactElement } from "react";
2+
import { IStep } from "../stepper-component/types";
3+
4+
export interface IBubbleProps {
5+
step: IStep,
6+
enableStepClick: boolean,
7+
renderAdornment?(step: IStep, index: number): ReactElement,
8+
index: number,
9+
currentActiveStepIndexVal: number,
10+
handleStepClick(index: number): void
11+
}

‎src/stepper-component/stepperComponent.tsx‎

Lines changed: 15 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,37 @@
11
import React, { useState, useEffect, ReactElement } from 'react';
22
import styles from './styles';
3-
import { Istep, IstepperProps } from './types';
4-
import whiteTick from '../assets/white-tick.svg';
5-
import { STEP_STATUSES } from './constants';
3+
import { IStep, IStepperProps } from './types';
4+
import Bubble from '../bubble';
65

7-
const Stepper = (props: IstepperProps): ReactElement => {
8-
const { steps, currentActiveStepIndex, onStepClick, enableStepClick = false } = props;
6+
const Stepper = (props: IStepperProps): ReactElement => {
7+
const { steps, currentActiveStepIndex, onStepClick, enableStepClick = false, renderAdornment } = props;
98

10-
const [currentActiveStepIndexVal, setCurrentActiveStepIndexVal] = useState<number>()
9+
const [currentActiveStepIndexVal, setCurrentActiveStepIndexVal] = useState<number>();
1110

1211
useEffect(() => {
1312
setCurrentActiveStepIndexVal(currentActiveStepIndex ?? 0);
1413
}, [currentActiveStepIndex]);
1514

1615
const handleStepClick = (stepIndex: number): void => {
1716
if (enableStepClick) {
18-
if (onStepClick !== undefined ) onStepClick(stepIndex);
17+
if (onStepClick) onStepClick(stepIndex);
1918
else setCurrentActiveStepIndexVal(stepIndex);
2019
}
2120
}
2221

2322
return (
2423
<div style={styles.stepperContainer}>
25-
{steps?.map((step: Istep, index: number): ReactElement => (
24+
{steps?.map((step: IStep, index: number): ReactElement => (
2625
<div key={index} style={styles.eachStep}>
2726
<div style={styles.bubbleLineWrapper}>
28-
<div
29-
style={{...styles.eachBubble,
30-
...((enableStepClick && styles.cursorPointer) || {}),
31-
...((index === currentActiveStepIndexVal) && styles.activeStepBubble || {}),
32-
...((step.status === STEP_STATUSES.UNVISITED && currentActiveStepIndexVal !== index) && styles.inactiveStepBubble || {})
33-
}}
34-
onClick={(): void => handleStepClick(index)}
35-
role="presentation"
36-
>
37-
{step?.status === STEP_STATUSES.COMPLETED && (
38-
<img
39-
src={whiteTick}
40-
style={styles.whiteTickImg}
41-
alt=""
42-
/>
43-
)
44-
|| index + 1}
45-
</div>
27+
<Bubble
28+
step={step}
29+
index={index}
30+
enableStepClick={enableStepClick}
31+
currentActiveStepIndexVal= {currentActiveStepIndexVal}
32+
handleStepClick={handleStepClick}
33+
renderAdornment={renderAdornment}
34+
/>
4635
<div style={styles.eachLabel}>
4736
{step?.label && (
4837
<span

‎src/stepper-component/styles.ts‎

Lines changed: 1 addition & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -12,40 +12,11 @@ const styles = {
1212
stepSection: {
1313
display: 'flex'
1414
},
15-
eachBubble: {
16-
borderRadius: '50%',
17-
height: '24px',
18-
width: '24px',
19-
background: '#312ec0',
20-
color: 'white',
21-
display: 'flex',
22-
alignItems: 'center',
23-
justifyContent: 'center',
24-
overflow: 'visible',
25-
fontWeight: '400',
26-
fontSize: '12px',
27-
lineHeight: '16px',
28-
border: '7px solid'
29-
},
30-
activeStepBubble: {
31-
border: '7px solid #CBCBEF'
32-
},
33-
inactiveStepBubble: {
34-
opacity: 0.4
35-
},
36-
cursorPointer: {
37-
cursor: 'pointer'
38-
},
39-
whiteTickImg: {
40-
objectFit: 'cover',
41-
width: '10px',
42-
height: '8px'
43-
},
4415
eachStep: {
4516
display: 'flex',
4617
flexDirection: 'column',
4718
position: 'relative'
48-
19+
4920
},
5021
bubbleLineWrapper: {
5122
display: 'flex',

‎src/stepper-component/types.ts‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
1-
export interface Istep {
1+
import { ReactElement } from "react"
2+
3+
export interface IStep {
24
label: string,
35
description?: string,
46
status: string
57
}
68

7-
export interface IstepperProps {
8-
steps: Istep[],
9+
export interface IStepperProps {
10+
steps: IStep[],
911
currentActiveStepIndex: number,
1012
onStepClick?(stepIndex: number): void,
11-
enableStepClick: boolean
13+
enableStepClick?: boolean,
14+
renderAdornment?(step: IStep, index: number): ReactElement
1215
}

‎src/stories/StepperComponent.stories.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,4 +35,5 @@ LoggedIn.args = {
3535
currentActiveStepIndex: 2,
3636
enableStepClick: true,
3737
// onStepClick: (stepIndex: number) => console.log("🚀 ~ file: StepperComponent.stories.tsx:37 ~ stepIndex", stepIndex)
38+
// renderAdornment: (step, index) => {}
3839
};

0 commit comments

Comments
 (0)