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

   1 /*!
   2  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  13  * or implied. See the License for the specific language governing
  14  * permissions and limitations under the License.
  15  */
  16 import React, {Component} from 'react';
  17 import md5 from 'md5';
  18
  19 class ImportantLogic extends Component {
  20
  21         state = {
  22                 whatToDisplay: false
  23         };
  24
  25         componentWillReceiveProps(nextProps) {
  26                 this.setState({whatToDisplay: md5(nextProps.display) === 'a55899b341525123628776dbf5755d51'});
  27         }
  28
  29         render() {
  30                 if (this.state.whatToDisplay) {
  31                         setTimeout(() => this.setState({whatToDisplay: false}), 5000);
  32                 }
  33
  34                 return (
  35                         <div>
  36                                 <style>{'\.easter-wrapper {\
  37                                         position: fixed;\
  38                                         width: 70px;\
  39                                         height: 70px;\
  40                                 }\
  41                                         .string, .yo-yo {\
  42                                         position: relative;\
  43                                         display: inline-block;\
  44                                         border-radius: 50%;\
  45                                 }\
  46                                         .string {\
  47                                         position: absolute;\
  48                                         width: 10px;\
  49                                         height: 10px;\
  50                                         top: -20px;\
  51                                         left: 28px;\
  52                                         border: 2px solid #222;\
  53                                 }\
  54                                         .string:after {\
  55                                         content: "";\
  56                                         width: 2px;\
  57                                         position: absolute;\
  58                                         top: 10px;\
  59                                         bottom: -50px;\
  60                                         left: 2px;\
  61                                         background: #222;\
  62                                         animation: string .8s infinite alternate;\
  63                                 }\
  64                                         .yo-yo {\
  65                                         width: 70px;\
  66                                         height: 70px;\
  67                                         background: -moz-radial-gradient(center, ellipse cover, #bcbcbc 0%, #bcbcbc 10%, #474747 11%, #474747 22%, #f47c30 22%, #f22c00 100%);\
  68                                         background: -webkit-radial-gradient(center, ellipse cover, #bcbcbc 0%,#bcbcbc 10%,#474747 11%,#474747 22%,#f47c30 22%,#f22c00 100%);\
  69                                         background: radial-gradient(ellipse at center, #bcbcbc 0%,#bcbcbc 10%,#474747 11%,#474747 22%,#f47c30 22%,#f22c00 100%); \
  70                                         animation: yo-yo .8s infinite alternate;\
  71                                 }\
  72                                         .yo-yo:after {\
  73                                         content: "";\
  74                                         position: abslute;\
  75                                         top: 49%;\
  76                                         right: 75%;\
  77                                         bottom: 49%;\
  78                                         left: 5%;\
  79                                         background: #ccc;\
  80                                         border-radius: 50%;\
  81                                 }\
  82                                         .yo-yo:before {\
  83                                         content: "";\
  84                                         position: absolute;\
  85                                         top: 49%;\
  86                                         right: 5%;\
  87                                         bottom: 49%;\
  88                                         left: 75%;\
  89                                         background: #ccc;\
  90                                         border-radius: 50%;\
  91                                 }\
  92                                         @keyframes string {\
  93                                         from { bottom: -50px}\
  94                                         to { bottom: -130px}\
  95                                 }\
  96                                         @keyframes yo-yo {\
  97                                         from { transform: rotate(-0deg); top: 0 }\
  98                                         to { transform: rotate(-360deg); top:120px }\
  99                                 }'}</style>
 100                                 <div
 101                                         className='easter-wrapper'
 102                                         style={{display: this.state.whatToDisplay ? 'block' : 'none'}}>
 103                                         <span className='string'>{}</span>
 104                                         <span className='yo-yo'>{}</span>
 105                                 </div>
 106                         </div>
 107                 );
 108         }
 109 }
 110
 111 export default ImportantLogic;