diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx')
-rw-r--r-- | openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx | 89 |
1 files changed, 89 insertions, 0 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx new file mode 100644 index 0000000000..0c0ba0f646 --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx @@ -0,0 +1,89 @@ +import React from 'react'; + +import i18n from 'nfvo-utils/i18n/i18n.js'; +import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx'; +import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx'; + +const ComponentPropType = React.PropTypes.shape({ + id: React.PropTypes.string, + name: React.PropTypes.string, + displayName: React.PropTypes.string, + description: React.PropTypes.string +}); + +class SoftwareProductComponentsListView extends React.Component { + + state = { + localFilter: '' + }; + + static propTypes = { + isReadOnlyMode: React.PropTypes.bool, + componentsList: React.PropTypes.arrayOf(ComponentPropType), + onComponentSelect: React.PropTypes.func + }; + + render() { + let {componentsList = []} = this.props; + return ( + <div className=''> + { + componentsList.length > 0 && this.renderComponents() + } + </div> + ); + } + + renderComponents() { + const {localFilter} = this.state; + let {isReadOnlyMode} = this.props; + + return ( + <ListEditorView + title={i18n('Virtual Function Components')} + filterValue={localFilter} + placeholder={i18n('Filter Components')} + onFilter={filter => this.setState({localFilter: filter})} + isReadOnlyMode={isReadOnlyMode}> + {this.filterList().map(component => this.renderComponentsListItem(component))} + </ListEditorView> + ); + } + + renderComponentsListItem(component) { + let {id: componentId, name, displayName, description = ''} = component; + let {currentSoftwareProduct: {id}, onComponentSelect} = this.props; + return ( + <ListEditorItemView + key={name + Math.floor(Math.random() * (100 - 1) + 1).toString()} + className='list-editor-item-view' + onSelect={() => onComponentSelect({id, componentId})}> + <div className='list-editor-item-view-field'> + <div className='title'>{i18n('Component')}</div> + <div className='name'>{displayName}</div> + </div> + <div className='list-editor-item-view-field'> + <div className='title'>{i18n('Description')}</div> + <div className='description'>{description}</div> + </div> + </ListEditorItemView> + ); + } + + filterList() { + let {componentsList = []} = this.props; + + let {localFilter} = this.state; + if (localFilter.trim()) { + const filter = new RegExp(escape(localFilter), 'i'); + return componentsList.filter(({displayName = '', description = ''}) => { + return escape(displayName).match(filter) || escape(description).match(filter); + }); + } + else { + return componentsList; + } + } +} + +export default SoftwareProductComponentsListView; |