1 files changed, 64 insertions, 0 deletions
diff --git a/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx b/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx
new file mode 100644
index 0000000000..1ee91f31f6
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import FontAwesome from 'react-fontawesome';
+import Input from 'react-bootstrap/lib/Input.js';
+
+
+class ListEditorView extends React.Component {
+
+	static defaultProps = {
+		className: ''
+	};
+
+	static propTypes = {
+		title: React.PropTypes.string,
+		plusButtonTitle: React.PropTypes.string,
+		children: React.PropTypes.node,
+		filterValue: React.PropTypes.string,
+		onFilter: React.PropTypes.func,
+		className: React.PropTypes.string,
+		isReadOnlyMode: React.PropTypes.bool,
+		placeholder: React.PropTypes.string
+	};
+
+	render() {
+		let {title, plusButtonTitle, onAdd, children, filterValue, onFilter, className, placeholder, isReadOnlyMode} = this.props;
+		return (
+			<div className={`list-editor-view ${className}`}>
+				{title && onAdd && <div className='list-editor-view-title'>{title}</div>}
+				<div className='list-editor-view-actions'>
+					{title && !onAdd && <div className='list-editor-view-title-inline'>{title}</div>}
+					<div className={`list-editor-view-add-controller${isReadOnlyMode ? ' disabled' : ''}`} >
+						{ onAdd &&
+							<div onClick={onAdd}>
+								<span className='plus-icon-button pull-left'/>
+								<span>{plusButtonTitle}</span>
+							</div>
+						}
+					</div>
+
+					{
+						onFilter &&
+							<div className='list-editor-view-search search-wrapper'>
+								<Input
+									ref='filter'
+									type='text'
+									value={filterValue}
+									name='list-editor-view-search'
+									placeholder={placeholder}
+									groupClassName='search-input-control'
+									onChange={() => onFilter(this.refs.filter.getValue())}/>
+								<FontAwesome name='filter' className='filter-icon'/>
+							</div>
+					}
+				</div>
+				<div className='list-editor-view-list-scroller'>
+					<div className='list-editor-view-list'>
+						{children}
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+}
+export default ListEditorView;