Advertisement
Guest User

Untitled

a guest
Sep 18th, 2019
193
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.87 KB | None | 0 0
  1. import React, { Component } from 'react';
  2.  
  3. class Event extends Component {
  4. constructor(props) {
  5. super(props);
  6. this.state = { des:false, titleHov: false };
  7. }
  8. showDescription = ( ) => {
  9. if ( this.state.des == true ) {
  10. this.setState({
  11. des:false
  12. });
  13. } else {
  14. this.setState({
  15. des:true
  16. });
  17. }
  18. }
  19. onMouseEnter = () => {
  20. this.setState({
  21. titleHov:true
  22. });
  23. }
  24. onMouseLeave = () => {
  25. this.setState({
  26. titleHov:false
  27. });
  28. }
  29. render() {
  30. var eve = this.props.eve;
  31. var des;
  32. var tUp = '△';
  33. var tDown = '▽';
  34. var AtriangleCLS = 'Atriangle';
  35.  
  36.  
  37. if (this.state.des == true) {
  38. AtriangleCLS = 'Atriangle titleHover';
  39. des = (
  40. <div>
  41. <div className = 'eTitle titleHover'
  42. onClick = {this.showDescription}
  43. onMouseEnter={this.onMouseEnter}
  44. onMouseLeave={this.onMouseLeave} >
  45. {eve.title} - {eve.date}
  46. <span className = {AtriangleCLS} > {tUp} </span>
  47. </div>
  48. <div className = "eDescription" >
  49. Start Time: {eve.st} - End Time: {eve.et} <br />
  50. {eve.description}
  51. </div>
  52. </div>
  53. );
  54. } else {
  55. var titleCLS = '';
  56. if (this.state.titleHov == true) {
  57. titleCLS = 'eTitle titleHover';
  58. AtriangleCLS = 'Atriangle titleHover';
  59. } else {
  60. titleCLS = 'eTitle nottitleHover';
  61. AtriangleCLS = 'Atriangle nottitleHover';
  62. }
  63.  
  64.  
  65. des = (
  66. <div className = {titleCLS} onClick = {this.showDescription} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} >
  67. {eve.title} - {eve.date}
  68. <span className = {AtriangleCLS} > {tDown} </span>
  69. </div>
  70. );
  71. }
  72. return (
  73. <li>
  74. {des}
  75. </li>
  76. );
  77. }
  78. }
  79.  
  80. export default Event;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement