openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx

   1 import React, {Component} from 'react';
   2 import md5 from 'md5';
   3
   4 class ImportantLogic extends Component {
   5
   6         state = {
   7                 whatToDisplay: false
   8         };
   9
  10         componentWillReceiveProps(nextProps) {
  11                 this.setState({whatToDisplay: md5(nextProps.display) === 'a55899b341525123628776dbf5755d51'});
  12         }
  13
  14         render() {
  15                 if (this.state.whatToDisplay) {
  16                         setTimeout(() => this.setState({whatToDisplay: false}), 5000);
  17                 }
  18
  19                 return (
  20                         <div>
  21                                 <style>{'\.easter-wrapper {\
  22                                         position: fixed;\
  23                                         width: 70px;\
  24                                         height: 70px;\
  25                                 }\
  26                                         .string, .yo-yo {\
  27                                         position: relative;\
  28                                         display: inline-block;\
  29                                         border-radius: 50%;\
  30                                 }\
  31                                         .string {\
  32                                         position: absolute;\
  33                                         width: 10px;\
  34                                         height: 10px;\
  35                                         top: -20px;\
  36                                         left: 28px;\
  37                                         border: 2px solid #222;\
  38                                 }\
  39                                         .string:after {\
  40                                         content: "";\
  41                                         width: 2px;\
  42                                         position: absolute;\
  43                                         top: 10px;\
  44                                         bottom: -50px;\
  45                                         left: 2px;\
  46                                         background: #222;\
  47                                         animation: string .8s infinite alternate;\
  48                                 }\
  49                                         .yo-yo {\
  50                                         width: 70px;\
  51                                         height: 70px;\
  52                                         background: -moz-radial-gradient(center, ellipse cover, #bcbcbc 0%, #bcbcbc 10%, #474747 11%, #474747 22%, #f47c30 22%, #f22c00 100%);\
  53                                         background: -webkit-radial-gradient(center, ellipse cover, #bcbcbc 0%,#bcbcbc 10%,#474747 11%,#474747 22%,#f47c30 22%,#f22c00 100%);\
  54                                         background: radial-gradient(ellipse at center, #bcbcbc 0%,#bcbcbc 10%,#474747 11%,#474747 22%,#f47c30 22%,#f22c00 100%); \
  55                                         animation: yo-yo .8s infinite alternate;\
  56                                 }\
  57                                         .yo-yo:after {\
  58                                         content: "";\
  59                                         position: abslute;\
  60                                         top: 49%;\
  61                                         right: 75%;\
  62                                         bottom: 49%;\
  63                                         left: 5%;\
  64                                         background: #ccc;\
  65                                         border-radius: 50%;\
  66                                 }\
  67                                         .yo-yo:before {\
  68                                         content: "";\
  69                                         position: absolute;\
  70                                         top: 49%;\
  71                                         right: 5%;\
  72                                         bottom: 49%;\
  73                                         left: 75%;\
  74                                         background: #ccc;\
  75                                         border-radius: 50%;\
  76                                 }\
  77                                         @keyframes string {\
  78                                         from { bottom: -50px}\
  79                                         to { bottom: -130px}\
  80                                 }\
  81                                         @keyframes yo-yo {\
  82                                         from { transform: rotate(-0deg); top: 0 }\
  83                                         to { transform: rotate(-360deg); top:120px }\
  84                                 }'}</style>
  85                                 <div
  86                                         className='easter-wrapper'
  87                                         style={{display: this.state.whatToDisplay ? 'block' : 'none'}}>
  88                                         <span className='string'>{}</span>
  89                                         <span className='yo-yo'>{}</span>
  90                                 </div>
  91                         </div>
  92                 );
  93         }
  94 }
  95
  96 export default ImportantLogic;