src/utils/SpinnerContainer.jsx

   1 /*
   2  * ============LICENSE_START=======================================================
   3  * org.onap.aai
   4  * ================================================================================
   5  * Copyright © 2017-2018 AT&T Intellectual Property. All rights reserved.
   6  * Copyright © 2017-2018 Amdocs
   7  * ================================================================================
   8  * Licensed under the Apache License, Version 2.0 (the "License");
   9  * you may not use this file except in compliance with the License.
  10  * You may obtain a copy of the License at
  11  *
  12  *       http://www.apache.org/licenses/LICENSE-2.0
  13  *
  14  * Unless required by applicable law or agreed to in writing, software
  15  * distributed under the License is distributed on an "AS IS" BASIS,
  16  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  17  * See the License for the specific language governing permissions and
  18  * limitations under the License.
  19  * ============LICENSE_END=========================================================
  20  */
  21 import React, { Component } from 'react';
  22 import { ClipLoader } from 'react-spinners';
  23 import {COLOR_BLUE} from 'utils/GlobalConstants.js';
  24
  25 class SpinnerContainer extends Component {
  26   render() {
  27     // if loading, show content as busy (ex: grey out)
  28     const spinnerContentClass = this.props.loading ? 'spinner-content' : '';
  29     return (
  30       <div className='spinner-container'>
  31         <div className='spinner'>
  32           <ClipLoader color={COLOR_BLUE} loading={this.props.loading} />
  33         </div>
  34         <div className={spinnerContentClass}>
  35           {this.props.children}
  36         </div>
  37       </div>
  38     );
  39   }
  40 }
  41 export default SpinnerContainer;
  42
  43 SpinnerContainer.propTypes = {
  44   loading: React.PropTypes.bool
  45 };
  46
  47 SpinnerContainer.defaultProps = {
  48   loading: false
  49 };