1 files changed, 47 insertions, 0 deletions
diff --git a/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx b/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx
new file mode 100644
index 0000000000..e8d0fc2536
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import FontAwesome from 'react-fontawesome';
+import store from 'sdc-app/AppStore.js';
+import NotificationConstants from 'nfvo-components/notifications/NotificationConstants.js';
+
+class ListEditorItem extends React.Component {
+	static propTypes = {
+		onSelect: React.PropTypes.func,
+		onDelete: React.PropTypes.func,
+		onEdit: React.PropTypes.func,
+		children: React.PropTypes.node,
+		isReadOnlyMode: React.PropTypes.bool
+	}
+
+	render() {
+		let {onDelete, onSelect, onEdit, children, isReadOnlyMode} = this.props;
+		let isAbilityToDelete = isReadOnlyMode === undefined ? true : !isReadOnlyMode;
+		return (
+			<div className='list-editor-item-view'>
+				<div className='list-editor-item-view-content' onClick={onSelect}>
+					{children}
+				</div>
+				<div className='list-editor-item-view-controller'>
+					{onEdit && <FontAwesome name='sliders' onClick={() => this.onClickedItem(onEdit)}/>}
+					{onDelete && isAbilityToDelete && <FontAwesome name='trash-o' onClick={() => this.onClickedItem(onDelete)}/>}
+				</div>
+			</div>
+		);
+	}
+
+	onClickedItem(callBackFunc) {
+		if(typeof callBackFunc === 'function') {
+			let {isCheckedOut} = this.props;
+			if (isCheckedOut === false) {
+				store.dispatch({
+					type: NotificationConstants.NOTIFY_ERROR,
+					data: {title: 'Error', msg: 'This item is checkedin/submitted, Click Check Out to continue'}
+				});
+			}
+			else {
+				callBackFunc();
+			}
+		}
+	}
+}
+
+export default ListEditorItem;