fk-react-ui-components/components/Timeline/milestone.js

Step 1 : Create a file in [ Seeds / Plants / Trees ] <br> Step 2 : It should export an Object with component name and story Component [Refer other components] <br> Step 3 : Story Component should return a react component <br> Step 3 : Created file should

import React from "react";
import PropTypes from 'prop-types';
import { FlexCell} from "../Layout";
import {Progress, ProgressBar} from "./styles/Timeline";
import {TlHeader, TlBody, Tlfooter} from "./styles/Timeline";

export default class MileStones extends React.Component {
    shouldComponentUpdate(){
        return false;
    }
    render(){
        const children = this.props.children;
        return(
            <FlexCell className={"milestone "+ this.props.status}>
                {
                    React.Children.map(children,(node,i)=>{
                        if (node.type === TlHeader ){
                            return node;
                        }
                        if (node.type === TlBody){
                            return(
                                <div>
                                    <Progress className={"progress "+this.props.progressBar.borderType} borderColor = {this.props.progressBar.color}>
                                        <ProgressBar className="progress-bar" styles={this.props.progressBar}></ProgressBar>
                                    </Progress>
                                    {node}
                                </div>
                            )
                        }
                        if (node.type === Tlfooter){
                            return node;
                        }
                    })
                }
            </FlexCell>
        )
    }
}
MileStones.propTypes = {
    children: PropTypes.node.isRequired,
    status:PropTypes.string,
    progressBar:PropTypes.object,
    borderColor:PropTypes.string
};