/*
*
* Copyright 2016 RIFT.IO Inc
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/
import './catalogCard.scss';
import 'style/common.scss';
import React, {Component} from 'react';
export default class CatalogCard extends Component {
constructor(props) {
super(props);
this.state = {};
this.state.isExpanded = false;
}
hideIt = (e) => {
document.querySelector('body').removeEventListener('click', this.hideIt);
if(e.target.parentElement.classList.contains('CatalogCard-info--expanded') || e.target.classList.contains('CatalogCard-info--expanded')) {
e.stopPropagation();
}
this.setState({
isExpanded: false
});
}
handleImageError = (e) => {
console.log('Bad logo path, using default');
e.target.src = require('style/img/catalog-default.svg');
}
toggleDetailsDisplay = (e) => {
let self = this;
let isExpanded = this.state.isExpanded;
e.stopPropagation();
if(!isExpanded) {
document.querySelector('body').addEventListener('click', this.hideIt);
self.setState({
isExpanded: true
});
}
}
detailsHTML = (descriptor) => {
let self = this;
return (
VNFDs
{
(
descriptor['constituent-vnfd'] &&
(descriptor['constituent-vnfd'].length > 0)
) ?
descriptor['constituent-vnfd'] && descriptor['constituent-vnfd'].map(function(v,i) {
return (
{v['name']}
)
})
: 'None'
}
VLDs
{
(
descriptor['vld'] &&
(descriptor['vld'].length > 0)
) ?
descriptor['vld'] && descriptor['vld'].map(function(v,i) {
return (
{v['short-name']}
)
})
: 'None'
}
VNFFGDs
{
(
descriptor['vnffgd'] &&
(descriptor['vnffgd'].length > 0)
) ?
descriptor['vnffgd'] && descriptor['vnffgd'].map(function(v,i) {
return (
{v['short-name']}
)
})
: 'None'
}
);
}
componentWillUnmount() {
document.querySelector('body').removeEventListener('click', this.hideIt);
}
render() {
let {className, descriptor, isActive, isOpen, onCloseCard,...props} = this.props;
let openTool = isOpen ? null :
className = "CatalogCard " + buildClass(this.props);
return (
{descriptor.name}
{descriptor['short-name']}
{descriptor['vendor']} / {descriptor['version']}
{descriptor['description']}
- VNFDs:
- {descriptor['constituent-vnfd'] && descriptor['constituent-vnfd'].length || 0}
- VLDs:
- {descriptor['vld'] && descriptor['vld'].length || 0}
- VNFFGDs:
- {descriptor['vnffgd'] && descriptor['vnffgd'].length || 0}
{this.detailsHTML(descriptor)}
{openTool}
)
}
}
CatalogCard.defaultProps = {
className: null,
descriptor: {}
}
function buildClass(props) {
let className = '';
if(props.isSelected) {
className += ' CatalogCard-is-selected';
}
if(props.isActive) {
className += ' CatalogCard-is-active';
}
return className;
}
function cardHandler(element) {
this.handleEvent = function(e) {
''
}
}
function cleanDataURI(imageString, type, id) {
if (/\bbase64\b/g.test(imageString)) {
return imageString;
} else if (/<\?xml\b/g.test(imageString)) {
const imgStr = imageString.substring(imageString.indexOf('