openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx

   1 import React from 'react';
   2 import FontAwesome from 'react-fontawesome';
   3 import Input from 'react-bootstrap/lib/Input.js';
   4
   5
   6 class ListEditorView extends React.Component {
   7
   8         static defaultProps = {
   9                 className: ''
  10         };
  11
  12         static propTypes = {
  13                 title: React.PropTypes.string,
  14                 plusButtonTitle: React.PropTypes.string,
  15                 children: React.PropTypes.node,
  16                 filterValue: React.PropTypes.string,
  17                 onFilter: React.PropTypes.func,
  18                 className: React.PropTypes.string,
  19                 isReadOnlyMode: React.PropTypes.bool,
  20                 placeholder: React.PropTypes.string
  21         };
  22
  23         render() {
  24                 let {title, plusButtonTitle, onAdd, children, filterValue, onFilter, className, placeholder, isReadOnlyMode} = this.props;
  25                 return (
  26                         <div className={`list-editor-view ${className}`}>
  27                                 {title && onAdd && <div className='list-editor-view-title'>{title}</div>}
  28                                 <div className='list-editor-view-actions'>
  29                                         {title && !onAdd && <div className='list-editor-view-title-inline'>{title}</div>}
  30                                         <div className={`list-editor-view-add-controller${isReadOnlyMode ? ' disabled' : ''}`} >
  31                                                 { onAdd &&
  32                                                         <div onClick={onAdd}>
  33                                                                 <span className='plus-icon-button pull-left'/>
  34                                                                 <span>{plusButtonTitle}</span>
  35                                                         </div>
  36                                                 }
  37                                         </div>
  38
  39                                         {
  40                                                 onFilter &&
  41                                                         <div className='list-editor-view-search search-wrapper'>
  42                                                                 <Input
  43                                                                         ref='filter'
  44                                                                         type='text'
  45                                                                         value={filterValue}
  46                                                                         name='list-editor-view-search'
  47                                                                         placeholder={placeholder}
  48                                                                         groupClassName='search-input-control'
  49                                                                         onChange={() => onFilter(this.refs.filter.getValue())}/>
  50                                                                 <FontAwesome name='filter' className='filter-icon'/>
  51                                                         </div>
  52                                         }
  53                                 </div>
  54                                 <div className='list-editor-view-list-scroller'>
  55                                         <div className='list-editor-view-list'>
  56                                                 {children}
  57                                         </div>
  58                                 </div>
  59                         </div>
  60                 );
  61         }
  62
  63 }
  64 export default ListEditorView;