openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VSPOverlay.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 from 'react';
  17 import PropTypes from 'prop-types';
  18 import i18n from 'nfvo-utils/i18n/i18n.js';
  19 import {migrationStatusMapper} from './OnboardingCatalogConstants.js';
  20
  21 const VSPOverlay = ({VSPList, onSelectVSP, onSeeMore, onMigrate}) => (
  22         <div className='vsp-overlay-wrapper' onClick={(e) => {
  23                 e.stopPropagation();
  24                 e.preventDefault();
  25         }}>
  26                 <div className='vsp-overlay-arrow'></div>
  27                 <div className='vsp-overlay'>
  28                         <div className='vsp-overlay-title'>{i18n('Recently Edited')}</div>
  29                         <div className='vsp-overlay-list'>
  30                                 {VSPList.slice(0, 5).map(vsp => <div key={vsp.id} className='vsp-overlay-detail' onClick={() => {
  31                                         if (vsp.isOldVersion && vsp.isOldVersion === migrationStatusMapper.OLD_VERSION) {
  32                                                 onMigrate({
  33                                                         softwareProduct: vsp
  34                                                 });
  35                                         } else {
  36                                                 onSelectVSP(vsp);
  37                                         }
  38                                 }
  39                                 }>{i18n(vsp.name)}</div>)}
  40                         </div>
  41                         {VSPList.length > 5 && <div className='vsp-overlay-see-more' onClick={onSeeMore}>{i18n('See More')}</div>}
  42                 </div>
  43         </div>
  44 );
  45
  46 VSPOverlay.PropTypes = {
  47         VSPList: PropTypes.array,
  48         onSelectVSP: PropTypes.func
  49 };
  50
  51 export default VSPOverlay;