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 export default class CatalogCard extends Component {
25 this.state.isExpanded = false;
28 document.querySelector('body').removeEventListener('click', this.hideIt);
29 if(e.target.parentElement.classList.contains('CatalogCard-info--expanded') || e.target.classList.contains('CatalogCard-info--expanded')) {
36 handleImageError = (e) => {
37 console.log('Bad logo path, using default');
38 e.target.src = require('style/img/catalog-default.svg');
40 toggleDetailsDisplay = (e) => {
42 let isExpanded = this.state.isExpanded;
45 document.querySelector('body').addEventListener('click', this.hideIt);
51 detailsHTML = (descriptor) => {
54 <dd className="details">
55 <div className="details-section">
56 <div className="details-section-title">
61 descriptor['constituent-vnfd'] &&
62 (descriptor['constituent-vnfd'].length > 0)
64 descriptor['constituent-vnfd'] && descriptor['constituent-vnfd'].map(function(v,i) {
66 <div key={i} className="details-section-item">
68 onError={self.handleImageError}
69 src={cleanDataURI(descriptor.logo, 'vnfd', descriptor.id)}
78 <div className="details-section">
79 <div className="details-section-title">
85 (descriptor['vld'].length > 0)
87 descriptor['vld'] && descriptor['vld'].map(function(v,i) {
89 <div key={i} className="details-section-item">
97 <div className="details-section">
98 <div className="details-section-title">
103 descriptor['vnffgd'] &&
104 (descriptor['vnffgd'].length > 0)
106 descriptor['vnffgd'] && descriptor['vnffgd'].map(function(v,i) {
108 <div key={i} className="details-section-item">
119 componentWillUnmount() {
120 document.querySelector('body').removeEventListener('click', this.hideIt);
123 let {className, descriptor, isActive, isOpen, onCloseCard,...props} = this.props;
124 let openTool = isOpen ? null : <span className="oi CatalogCard-button" data-glyph={isActive ? "circle-x" : "arrow-circle-right"} onClick={isActive ? onCloseCard : props.onPreviewDescriptor(descriptor)}></span>
125 className = "CatalogCard " + buildClass(this.props);
127 <div className={className} onClick={props.onClick} onDoubleClick={props.onDoubleClick}>
128 <img className="CatalogCard-thumbnail" onError={this.handleImageError} src={cleanDataURI(descriptor.logo, 'nsd', descriptor.id)} />
129 <div className="CatalogCard-body">
130 <div className="CatalogCard-header">
131 <div className="CatalogCard-name">
134 <div className="CatalogCard-subtitle">
135 {descriptor['short-name']}
137 <div className="CatalogCard-subtitle">
138 {descriptor['vendor']} / {descriptor['version']}
141 <div className="CatalogCard-description">
142 {descriptor['description']}
144 <dl className={"CatalogCard-info " + (this.state.isExpanded ? "CatalogCard-info--expanded" : "")} onClick={this.toggleDetailsDisplay}>
146 <dd>{descriptor['constituent-vnfd'] && descriptor['constituent-vnfd'].length || 0}</dd>
148 <dd>{descriptor['vld'] && descriptor['vld'].length || 0}</dd>
150 <dd>{descriptor['vnffgd'] && descriptor['vnffgd'].length || 0}</dd>
151 <dd className="arrow-black--down"></dd>
152 {this.detailsHTML(descriptor)}
160 CatalogCard.defaultProps = {
165 function buildClass(props) {
167 if(props.isSelected) {
168 className += ' CatalogCard-is-selected';
171 className += ' CatalogCard-is-active';
176 function cardHandler(element) {
177 this.handleEvent = function(e) {
182 function cleanDataURI(imageString, type, id) {
183 if (/\bbase64\b/g.test(imageString)) {
185 } else if (/<\?xml\b/g.test(imageString)) {
186 const imgStr = imageString.substring(imageString.indexOf('<?xml'));
187 return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(imgStr);
188 } else if (/\.(svg|png|gif|jpeg|jpg)$/.test(imageString)) {
189 return '/composer/assets/logos/' + type + '/' + id + '/' + imageString;
190 // return require('../images/logos/' + imageString);
192 if(type == 'nsd' || type == 'vnfd') {
193 return require('style/img/catalog-'+type+'-default.svg');
195 return require('style/img/catalog-default.svg');