3 * Copyright 2016 RIFT.IO Inc
5 * Licensed under the Apache License, Version 2.0 (the "License");
6 * you may not use this file except in compliance with the License.
7 * You may obtain a copy of the License at
9 * http://www.apache.org/licenses/LICENSE-2.0
11 * Unless required by applicable law or agreed to in writing, software
12 * distributed under the License is distributed on an "AS IS" BASIS,
13 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 * See the License for the specific language governing permissions and
15 * limitations under the License.
18 import './catalogCard.scss';
19 import 'style/common.scss';
20 import React, {Component} from 'react';
21 import Utils from 'utils/utils.js'
22 export default class CatalogCard extends Component {
26 this.state.isExpanded = false;
29 document.querySelector('body').removeEventListener('click', this.hideIt);
30 if(e.target.parentElement.classList.contains('CatalogCard-info--expanded') || e.target.classList.contains('CatalogCard-info--expanded')) {
37 handleImageError = (e) => {
38 console.log('Bad logo path, using default');
39 e.target.src = require('style/img/catalog-default.svg');
41 toggleDetailsDisplay = (e) => {
43 let isExpanded = this.state.isExpanded;
46 document.querySelector('body').addEventListener('click', this.hideIt);
52 detailsHTML = (descriptor) => {
55 <dd className="details">
56 <div className="details-section">
57 <div className="details-section-title">
62 descriptor['constituent-vnfd'] &&
63 (descriptor['constituent-vnfd'].length > 0)
65 descriptor['constituent-vnfd'] && descriptor['constituent-vnfd'].map(function(v,i) {
67 <div key={i} className="details-section-item">
69 onError={self.handleImageError}
70 src={Utils.cleanImageDataURI(descriptor.logo, 'vnfd', descriptor.id)}
79 <div className="details-section">
80 <div className="details-section-title">
86 (descriptor['vld'].length > 0)
88 descriptor['vld'] && descriptor['vld'].map(function(v,i) {
90 <div key={i} className="details-section-item">
98 <div className="details-section">
99 <div className="details-section-title">
104 descriptor['vnffgd'] &&
105 (descriptor['vnffgd'].length > 0)
107 descriptor['vnffgd'] && descriptor['vnffgd'].map(function(v,i) {
109 <div key={i} className="details-section-item">
120 componentWillUnmount() {
121 document.querySelector('body').removeEventListener('click', this.hideIt);
124 let {className, descriptor, isActive, isOpen, onCloseCard,...props} = this.props;
125 let openTool = isOpen ? null : <span className="oi CatalogCard-button" data-glyph={isActive ? "circle-x" : "arrow-circle-right"} onClick={isActive ? onCloseCard : props.onPreviewDescriptor(descriptor)}></span>
126 className = "CatalogCard " + buildClass(this.props);
128 <div className={className} onClick={props.onClick} onDoubleClick={props.onDoubleClick}>
129 <img className="CatalogCard-thumbnail" onError={this.handleImageError} src={Utils.cleanImageDataURI(descriptor.logo, 'nsd', descriptor.id)} />
130 <div className="CatalogCard-body">
131 <div className="CatalogCard-header">
132 <div className="CatalogCard-name">
135 <div className="CatalogCard-subtitle">
136 {descriptor['short-name']}
138 <div className="CatalogCard-subtitle">
139 {descriptor['vendor']} / {descriptor['version']}
142 <div className="CatalogCard-description">
143 {descriptor['description']}
145 <dl className={"CatalogCard-info " + (this.state.isExpanded ? "CatalogCard-info--expanded" : "")} onClick={this.toggleDetailsDisplay}>
147 <dd>{descriptor['constituent-vnfd'] && descriptor['constituent-vnfd'].length || 0}</dd>
149 <dd>{descriptor['vld'] && descriptor['vld'].length || 0}</dd>
151 <dd>{descriptor['vnffgd'] && descriptor['vnffgd'].length || 0}</dd>
152 <dd className="arrow-black--down"></dd>
153 {this.detailsHTML(descriptor)}
161 CatalogCard.defaultProps = {
166 function buildClass(props) {
168 if(props.isSelected) {
169 className += ' CatalogCard-is-selected';
172 className += ' CatalogCard-is-active';
177 function cardHandler(element) {
178 this.handleEvent = function(e) {