How to implement custom label in StepIndicator in

2020-02-16 03:38发布

问题:

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