Closed Shubham-luv2code closed 4 years ago
I already saw https://github.com/stephane-monnot/react-vertical-timeline/issues/17. But this doesn't seem to be working. Tried your given dummy function too
I tried it, it works as expected. Could you provide a full example ?
`
import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component';
import React from "react";
import StaticWorkflow from "./StaticWorkflow.json";
export default class RequestTimeline extends React.Component {
constructor(props) {
super();
this.state = {
apiRes: StaticWorkflow
}
// this.iconOnClick = this.iconOnClick.bind(this)
this.renderTimelineElements = this.renderTimelineElements.bind(this)
this.getIconClass = this.getIconClass.bind(this)
}
// iconOnClick(e) {
// this.setState({ showIcons: true })
// }
getIconClass(val) {
var iconClass = '';
switch (val) {
case 'initialize':
iconClass = "fa fa-3x fa-hourglass-start"
break;
case 'progress':
iconClass = "fa fa-3x fa-caret-square-o-down"
break;
case 'email':
iconClass = "fa fa-3x fa-envelope"
break;
case 'end':
iconClass = "fa fa-3x fa-hourglass-end"
break;
default:
iconClass = "fa fa-3x fa-caret-square-o-down"
break;
}
return iconClass;
}
renderTimelineElements() {
const { apiRes } = this.state;
apiRes.StaticWorkflowRes.forEach((element, ind) => {
if (element.reqType === this.props.reqTypeId) {
element.steps.map((eleMap, ind) => {
var iconClass = this.getIconClass(eleMap.stepType);
return (
<VerticalTimelineElement
key={ind}
className="vertical-timeline-element"
date={`Step ${ind + 1}`}
iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
icon={<i className={iconClass}></i>}
>
<div>
<h3 className="vertical-timeline-element-title">{eleMap.titleVal}</h3>
<h4 className="vertical-timeline-element-subtitle">{eleMap.subtitleVal}</h4>
<p>{eleMap.stepDesc}</p>
</div>
</VerticalTimelineElement>
)
})
}
});
}
render() {
return (
<VerticalTimeline animate={true}>
{this.renderTimelineElements()}
</VerticalTimeline>
)
}
}`
StaticWorkflow.json for sample response
{ "StaticWorkflowRes": [ { "reqType": "Sample Request", "steps": [ { "titleVal": "Request Creation", "subtitleVal": "A New Request Would be created as a first step", "stepDesc": "To create a new request, user has to fill all the details required on the App as required", "stepType": "initialize" }, { "titleVal": "Request Submission", "subtitleVal": "A New Request will be submitted", "stepDesc": "Ticket details will be generated once the details are filled correctly and same will be stored in database", "stepType": "progress" }, { "titleVal": "Email Generation", "subtitleVal": "Email triggered to authorised recipients", "stepDesc": "An Email with the associated ticket details will be sent out to requested parties", "stepType": "email" }, { "titleVal": "Updating Request", "subtitleVal": "Details Can Be Edited", "stepDesc": "Any Submitted Details Can be edited before the batch process these details and file uploads to servers", "stepType": "progress" }, { "titleVal": "Request Processed", "subtitleVal": "File is uploaded successfully", "stepDesc": "Flow of the request ends once file is uploaded successfully on TMS servers", "stepType": "end" } ] } ] }
I keep the global css in my local workspace. I already tried with multiple hardcoded VerticalTimelineElement and it works fine but not with map function
Did you try to put a console.log of iconClass ?
If it's not a bug, please use stackoverflow for help.
iconClass works fine. I tried debugging the value of iconClass even I hardcoded/removed iconClass too. But doesn't seem to be working
I tried :
And I can see class props in source code :
Inside map :
It works as expected.