I am trying to implement StepindIcator in my application. How can I display sub labels (custom labels) with the Step Labels . there is renderLabel() for this I guess ,but I am not able to use that . I am able to print Steps Labels ,current position and stepCount dynamically.But I am facing problem in implementing "custom label" for each steps
below is the array that I have to display .
_activityName -As a Steps Labels
stepCount= lenght of array
currentPosition: currentStepPosition.length (count of _activityStatus("I"))
Now I have to display custom steps below the Steps lebels .
("_maxHoldTime" I have to display with _activityName in 2 lines )
for example
FXL_ACT1
_maxHoldTime: "60"
currentNextActivity: Array(3)
0:
__typename: "CurrentNextActivity"
_activityName: "FXL_ACT1"
_activityStatus: "I"
_maxHoldTime: "60"
_userName: "tecnotree"
1:
__typename: "CurrentNextActivity"
_activityName: "FXL_ACT2"
_activityStatus: "I"
_maxHoldTime: "60"
_userName: "tecnotree"
__proto__: Object
2:
__typename: "CurrentNextActivity"
_activityName: "FXL_ACT3"
_activityStatus: "N"
_maxHoldTime: "120"
_userName: null
StepsVaue:[],
Steplabels:[],
currentStepPosition:[]
// here I am pssing currentNextActivity array in StepsVaue .
StepsVaue = workFlowDetails.currentNextActivity;
Steplabels = StepsVaue.map(StepsVaue => {
return StepsVaue._activityName;
});
currentStepPosition = StepsVaue.filter((item) => {
return item._activityStatus === "I"
});
<StepIndicator
customStyles={stepIndicatorStyles}
currentPosition={currentStepPosition.length}
stepCount={Steplabels.length}
labels={Steplabels}
renderLabel={}
direction="vertical"
/>
Thanks