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