Skip to content

Commit 17059c4

Browse files
GokulSNathGokulSNath
committed
changed style customization props
1 parent 084be9c commit 17059c4

7 files changed

Lines changed: 63 additions & 55 deletions

File tree

‎src/bubble/bubble.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
import React, { FC } from "react";
22
import type { IBubbleProps } from "./types";
3+
import { Elements } from "../constants";
34
import whiteTick from '../assets/white-tick.svg';
45
import { STEP_STATUSES } from '../constants';
56
import styles from './styles.module.scss';
7+
68
const Bubble: FC<IBubbleProps> = (props) => {
79
const {
810
step,
911
renderAdornment,
1012
index,
1113
currentStepIndex,
1214
handleStepClick = null,
13-
getBubbleStyles,
14-
getActiveBubbleStyles,
15-
getInActiveBubbleStyles
15+
getStyles
1616
} = props;
17+
1718
return (
1819
<div
1920
className={`${styles.eachBubble}
@@ -22,10 +23,10 @@ const Bubble: FC<IBubbleProps> = (props) => {
2223
${step.status === STEP_STATUSES.UNVISITED && currentStepIndex !== index && styles.inactiveStepBubble}
2324
`}
2425
style={{
25-
...((getBubbleStyles && getBubbleStyles(step, index)) || {}),
26-
...((index === currentStepIndex && getActiveBubbleStyles && getActiveBubbleStyles(step, index)) || {}),
26+
...((getStyles(Elements.Bubble)) || {}),
27+
...((index === currentStepIndex && getStyles(Elements.ActiveBubble)) || {}),
2728
...((step.status === STEP_STATUSES.UNVISITED && currentStepIndex !== index
28-
&& getInActiveBubbleStyles && getInActiveBubbleStyles(step, index)) || {})
29+
&& getStyles(Elements.InActiveBubble)) || {})
2930
}}
3031
onClick={(): void | null => handleStepClick && handleStepClick()}
3132
role="presentation"

‎src/bubble/types.d.ts‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import { ReactElement } from "react";
2-
import { IStep, IStyleFunction } from "../stepper-component/types";
2+
import { IStep } from "../stepper-component/types";
3+
import { Elements } from "../constants";
34

45
export type IBubbleProps = {
5-
step: IStep,
6-
renderAdornment?(step: IStep, index: number): ReactElement,
7-
index: number,
8-
currentStepIndex?: number,
9-
handleStepClick(): void,
10-
getBubbleStyles?: IStyleFunction,
11-
getActiveBubbleStyles?: IStyleFunction,
12-
getInActiveBubbleStyles?: IStyleFunction
6+
step: IStep,
7+
renderAdornment?(step: IStep, index: number): ReactElement,
8+
index: number,
9+
currentStepIndex?: number,
10+
handleStepClick(): void,
11+
getStyles(element: Elements): object
1312
}

‎src/constants.ts‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,16 @@ export enum STEP_STATUSES {
77
export enum LABEL_POSITION {
88
LEFT = 'left',
99
RIGHT = 'right'
10-
}
10+
}
11+
12+
export enum Elements {
13+
LabelDescription = "LabelDescription",
14+
LabelTitle = "LabelTitle",
15+
ActiveLabelTitle = "ActiveLabelTitle",
16+
ActiveLabelDescription = "ActiveLabelDescription",
17+
LineSeparator = "LineSeparator",
18+
InactiveLineSeparator = "InactiveLineSeparator",
19+
Bubble = "Bubble",
20+
ActiveBubble = "ActiveBubble",
21+
InActiveBubble = "InActiveBubble"
22+
}

‎src/stepper-component/stepperComponent.tsx‎

Lines changed: 17 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import React, { useState, useEffect, ReactElement, FC } from 'react';
1+
import React, { ReactElement, FC } from 'react';
22
import classes from './styles.module.scss';
3-
import type { IStep, IStepperProps } from './types';
3+
import { IStep, IStepperProps } from './types';
44
import Bubble from '../bubble';
5-
import { LABEL_POSITION } from '../constants';
5+
import { LABEL_POSITION, Elements } from '../constants';
66

77
const Stepper: FC<IStepperProps> = (props) => {
88
const {
@@ -14,17 +14,13 @@ const Stepper: FC<IStepperProps> = (props) => {
1414
labelPosition = LABEL_POSITION.RIGHT
1515
} = props;
1616

17-
const {
18-
getLabelDescriptionStyles,
19-
getLabelTitleStyles,
20-
getActiveLabelTitleStyles,
21-
getActiveLabelDescriptionStyles,
22-
getLineSeparatorStyles,
23-
getInactiveLineSeparatorStyles,
24-
getBubbleStyles,
25-
getActiveBubbleStyles,
26-
getInActiveBubbleStyles
27-
} = styles;
17+
const getStyles = (element: Elements, step: IStep, index: number): object => {
18+
const getElementStyle = styles[element];
19+
if (getElementStyle) {
20+
return getElementStyle(step, index);
21+
}
22+
return {};
23+
};
2824

2925
return (
3026
<div className={classes.stepperContainer}>
@@ -37,9 +33,7 @@ const Stepper: FC<IStepperProps> = (props) => {
3733
currentStepIndex= {currentStepIndex}
3834
handleStepClick={(): void => onStepClick && onStepClick(step, stepIndex)}
3935
renderAdornment={renderBubble}
40-
getBubbleStyles={getBubbleStyles}
41-
getActiveBubbleStyles={getActiveBubbleStyles}
42-
getInActiveBubbleStyles={getInActiveBubbleStyles}
36+
getStyles={(element: Elements): object => getStyles(element, step, stepIndex)}
4337
/>
4438
<div className={`${classes.labelContainer} ${classes[`labelContainer__${labelPosition || LABEL_POSITION.RIGHT}`]}`}>
4539
{step?.label && (
@@ -48,8 +42,8 @@ const Stepper: FC<IStepperProps> = (props) => {
4842
${onStepClick && classes.cursorPointer}
4943
${stepIndex === currentStepIndex && classes.activeLabelTitle}`}
5044
style={{
51-
...((getLabelTitleStyles && getLabelTitleStyles(step, stepIndex)) || {}),
52-
...((stepIndex === currentStepIndex && getActiveLabelTitleStyles && getActiveLabelTitleStyles(step, stepIndex)) || {})
45+
...((getStyles(Elements.LabelTitle, step, stepIndex)) || {}),
46+
...((stepIndex === currentStepIndex && getStyles(Elements.ActiveLabelTitle, step, stepIndex)) || {})
5347
}}
5448
onClick={(): void => onStepClick && onStepClick(step, stepIndex)}
5549
role="presentation"
@@ -64,9 +58,9 @@ const Stepper: FC<IStepperProps> = (props) => {
6458
${onStepClick && classes.cursorPointer}
6559
${stepIndex === currentStepIndex && classes.activeLabelDescription}`}
6660
style={{
67-
...((getLabelDescriptionStyles && getLabelDescriptionStyles(step, stepIndex)) || {}),
61+
...((getStyles(Elements.LabelDescription, step, stepIndex)) || {}),
6862
...((stepIndex === currentStepIndex &&
69-
getActiveLabelDescriptionStyles && getActiveLabelDescriptionStyles(step, stepIndex)) || {})
63+
getStyles(Elements.ActiveLabelDescription, step, stepIndex)) || {})
7064
}}
7165
onClick={(): void => onStepClick && onStepClick(step, stepIndex)}
7266
role="presentation"
@@ -81,9 +75,9 @@ const Stepper: FC<IStepperProps> = (props) => {
8175
className={`${classes.lineSeparator}
8276
${stepIndex > currentStepIndex - 1 && classes.inactiveStepLineSeparator}`}
8377
style={{
84-
...((getLineSeparatorStyles && getLineSeparatorStyles(step, stepIndex)) || {}),
78+
...((getStyles(Elements.LineSeparator, step, stepIndex)) || {}),
8579
...((stepIndex > currentStepIndex - 1
86-
&& getInactiveLineSeparatorStyles && getInactiveLineSeparatorStyles(step, stepIndex)) || {})
80+
&& getStyles(Elements.InactiveLineSeparator, step, stepIndex)) || {})
8781
}}
8882
/>
8983
)}

‎src/stepper-component/types.d.ts‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { ReactElement } from "react"
22
import { LABEL_POSITION } from "../constants"
3+
import { Elements } from "../constants"
4+
35
export type IStep = {
46
label: string,
57
description?: string,
@@ -11,20 +13,8 @@ export type IStepperProps = {
1113
currentStepIndex?: number,
1214
onStepClick?(step: IStep, stepIndex: number): void,
1315
renderBubble?(step: IStep, stepIndex: number): ReactElement,
14-
styles?: IStylesOverride,
16+
styles?: { [key in Elements]: IStyleFunction },
1517
labelPosition?: LABEL_POSITION.LEFT | LABEL_POSITION.RIGHT
1618
}
1719

1820
export type IStyleFunction = (step: IStep, stepIndex: number) => object
19-
20-
export type IStylesOverride = {
21-
getLabelDescriptionStyles?: IStyleFunction,
22-
getLabelTitleStyles?: IStyleFunction,
23-
getActiveLabelDescriptionStyles?: IStyleFunction,
24-
getActiveLabelTitleStyles?: IStyleFunction,
25-
getLineSeparatorStyles?: IStyleFunction,
26-
getInactiveLineSeparatorStyles?: IStyleFunction,
27-
getBubbleStyles?: IStyleFunction,
28-
getActiveBubbleStyles?: IStyleFunction,
29-
getInActiveBubbleStyles?: IStyleFunction,
30-
}

‎src/stories/StepperComponent.stories.tsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import { ComponentStory, ComponentMeta } from '@storybook/react';
33
import Stepper from '../stepper-component';
4+
import { IStep } from '../stepper-component/types';
45

56
export default {
67
title: 'Example/Stepper',
@@ -34,6 +35,17 @@ VerticalStepper.args = {
3435
}],
3536
currentStepIndex: 2,
3637
// onStepClick: (stepIndex: number) => console.log("🚀 ~ file: StepperComponent.stories.tsx:37 ~ stepIndex", stepIndex)
37-
// renderAdornment: (step, index) => {},
38-
// labelPosition: 'right'
38+
// renderBubble: (step, index) => (<></>),
39+
// labelPosition: 'right',
40+
// styles: {
41+
// Bubble: () => ({ background: 'yellow'}),
42+
// LineSeparator: (step: IStep, index: number) => (index === 2 ? { borderRight: '1px solid red' } : {}),
43+
// InactiveLineSeparator: (step: IStep, index: number) => (index === 2 ? { borderRight: '1px dashed red' } : {}),
44+
// LabelTitle: () => ({ background: 'red'}),
45+
// ActiveLabelTitle: () => ({ background: 'green'}),
46+
// LabelDescription: () => ({ background: 'red'}),
47+
// ActiveLabelDescription: () => ({ background: 'green'}),
48+
// ActiveBubble: () => ({ background: 'orange'}),
49+
// InActiveBubble: () => ({ background: 'grey'})
50+
// }
3951
};

‎tsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"compilerOptions": {
3-
"jsx": "react-jsx",
3+
"jsx": "react",
44
"noImplicitAny": true,
55
"outDir": "build/types",
66
"module": "esnext",

0 commit comments

Comments
 (0)