timeline.tsx

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React from 'react';
import { faUsers, faEnvelope, faCheck, faCircleChevronDown, faCircleChevronUp, faCircleInfo } from '@fortawesome/free-solid-svg-icons';

interface Props {
    updateRecord: (data: any) => void;
    timelineData: any;
}

export default class Timeline extends React.Component<Props> {
    constructor(props: Props) {
        super(props);
        this.state = {
            timeline: {}
        }
    }
    updateStatus(data: any, Status: any) {
        data.isOpen = Status;
        this.props.updateRecord(data)
    }
    render() {
        const { timelineData } = this.props;
        return (

            <div className={'timelineInnerMain ' + (timelineData.titleMain === 'Approved' ? 'timeline-completed' : '')}>
                <div className="timelineIcon">{(timelineData.titleMain === 'Approved') ? <FontAwesomeIcon icon={faCheck} /> : timelineData.timelineIcon}</div>
                <div className='timelineContent'>
                    <div className="tabTitle">
                        <h3 className="timelineHeader">{timelineData.titleMain} <span onClick={() => { this.updateStatus(timelineData, !timelineData.isOpen) }}><FontAwesomeIcon icon={(timelineData.isOpen) ? faCircleChevronUp : faCircleChevronDown} /></span></h3>
                    </div>
                    <div className={'panel-collapse timeline-info ' + (timelineData.isOpen ? '' : 'hide')}>
                        <div className="timelineMember">
                            {(timelineData.titleMain !== 'Approved') ? <div className="timelineMemberUser">
                                <span><FontAwesomeIcon icon={faUsers} /></span>
                                <h4>{timelineData.tlMemberU}</h4>
                            </div> : <></>}
                            <div className="timelineMemberDetails">
                                <p>{timelineData.tMemberG}</p>
                                {(timelineData.tMemberEmail !== undefined && timelineData.tMemberEmail !== '') ? <span><FontAwesomeIcon icon={faEnvelope} /><p>{timelineData.tMemberEmail}</p></span> : <></>}
                            </div>
                        </div>
                        <div className="memberNotNotify">
                            {(timelineData.tinformation !== undefined && timelineData.tinformation !== '') ? (
                                <div className="memberNotNotifyHeader">
                                    <span><FontAwesomeIcon icon={faCircleInfo} /></span>
                                    <h4>{timelineData.tinformation}</h4>
                                </div>) : (<></>)
                            }

                            {(timelineData.tNotifyEmail !== undefined && timelineData.tNotifyEmail !== '') ? <span> <FontAwesomeIcon icon={faEnvelope} /><p>{timelineData.tNotifyEmail}</p></span> : <></>}
                        </div>
                    </div>
                </div>
            </div >
        );
    }
}