1 import React from 'react';
3 import i18n from 'nfvo-utils/i18n/i18n.js';
4 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
5 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
7 const ComponentPropType = React.PropTypes.shape({
8 id: React.PropTypes.string,
9 name: React.PropTypes.string,
10 displayName: React.PropTypes.string,
11 description: React.PropTypes.string
14 class SoftwareProductComponentsListView extends React.Component {
21 isReadOnlyMode: React.PropTypes.bool,
22 componentsList: React.PropTypes.arrayOf(ComponentPropType),
23 onComponentSelect: React.PropTypes.func
27 let {componentsList = []} = this.props;
31 componentsList.length > 0 && this.renderComponents()
38 const {localFilter} = this.state;
39 let {isReadOnlyMode} = this.props;
43 title={i18n('Virtual Function Components')}
44 filterValue={localFilter}
45 placeholder={i18n('Filter Components')}
46 onFilter={filter => this.setState({localFilter: filter})}
47 isReadOnlyMode={isReadOnlyMode}>
48 {this.filterList().map(component => this.renderComponentsListItem(component))}
53 renderComponentsListItem(component) {
54 let {id: componentId, name, displayName, description = ''} = component;
55 let {currentSoftwareProduct: {id}, onComponentSelect} = this.props;
58 key={name + Math.floor(Math.random() * (100 - 1) + 1).toString()}
59 className='list-editor-item-view'
60 onSelect={() => onComponentSelect({id, componentId})}>
61 <div className='list-editor-item-view-field'>
62 <div className='title'>{i18n('Component')}</div>
63 <div className='name'>{displayName}</div>
65 <div className='list-editor-item-view-field'>
66 <div className='title'>{i18n('Description')}</div>
67 <div className='description'>{description}</div>
74 let {componentsList = []} = this.props;
76 let {localFilter} = this.state;
77 if (localFilter.trim()) {
78 const filter = new RegExp(escape(localFilter), 'i');
79 return componentsList.filter(({displayName = '', description = ''}) => {
80 return escape(displayName).match(filter) || escape(description).match(filter);
84 return componentsList;
89 export default SoftwareProductComponentsListView;