Advertisement
Guest User

Untitled

a guest
Feb 11th, 2016
52
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.98 KB | None | 0 0
  1. import React, { Component, PropTypes } from 'react';
  2. import * as Colors from 'material-ui/lib/styles/colors';
  3. import CheckCircle from 'material-ui/lib/svg-icons/action/check-circle';
  4. import Info from 'material-ui/lib/svg-icons/action/info';
  5.  
  6. import JourneyService from '../../../services/JourneyService';
  7.  
  8. const aligner = {
  9. display: 'flex',
  10. alignItems: 'flex-start',
  11. flexDirection: 'column',
  12. justifyContent: 'center',
  13. minHeight: '50px',
  14. };
  15.  
  16. const Vert = ({ children }) =>
  17. <div style={aligner}>
  18. <div>
  19. {children}
  20. </div>
  21. </div>;
  22.  
  23. const ImportantText = ({ children }) =>
  24. <div style={{ fontSize: '120%' }}>
  25. {children}
  26. </div>;
  27.  
  28. const Stage = ({ msg, icon }) =>
  29. <div className="row" style={{ marginTop: '10px' }}>
  30. <div className="col-md-3" style={{ textAlign: 'right' }}>
  31. {icon}
  32. </div>
  33. <div className="col-md-9" >
  34. <Vert>
  35. <ImportantText>
  36. {msg}
  37. </ImportantText>
  38. </Vert>
  39. </div>
  40. </div>;
  41.  
  42. function renderStage(completed, text) {
  43. if (completed) {
  44. return (
  45. <Stage msg={text} icon={
  46. <CheckCircle style={{ fill: Colors.green400, height: '50px', width: '50px' }}/>
  47. }/>
  48. );
  49. }
  50.  
  51. return (
  52. <Stage msg={text} icon={
  53. <Info style={{ fill: Colors.orange400, height: '50px', width: '50px' }}/>
  54. }/>
  55. );
  56. }
  57.  
  58. class Journey extends Component {
  59.  
  60. static propTypes = {
  61. params: PropTypes.shape({
  62. custId: PropTypes.string,
  63. }),
  64. };
  65.  
  66. constructor() {
  67. super();
  68. this.state = {
  69. stages: [],
  70. };
  71. }
  72.  
  73. async componentDidMount() {
  74. const { stages } = await JourneyService.getJourney(this.props.params.custId);
  75. /* eslint-disable react/no-did-mount-set-state */
  76. this.setState({ stages });
  77. /* eslint-enable react/no-did-mount-set-state */
  78. }
  79.  
  80. render() {
  81. return (
  82. <div className="container-fluid" style={{ margin: '5%' }}>
  83. {this.state.stages.map(stage => renderStage(stage.completed, stage.stageName))}
  84. </div>
  85. );
  86. }
  87. }
  88.  
  89. export default Journey;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement