diff options
Diffstat (limited to 'openecomp-ui/src/nfvo-components/listEditor')
-rw-r--r-- | openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx | 47 | ||||
-rw-r--r-- | openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx | 64 |
2 files changed, 111 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; 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; |