diff options
author | Einav Weiss Keidar <einavw@amdocs.com> | 2018-03-20 14:45:40 +0200 |
---|---|---|
committer | Avi Gaffa <avi.gaffa@amdocs.com> | 2018-03-20 13:52:31 +0000 |
commit | 7fdf733a64670fceefc3ded35cfa581e1c458179 (patch) | |
tree | b3623ac9a331473830cb0167c0b487f2a176427c /openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx | |
parent | c7916a4e5955ccc5f0f5252307363b791ec5c7b9 (diff) |
Adding Prettier and fixing up eslint version
Issue-ID: SDC-1094
Change-Id: Ie83ad95a03899345dd90235daf0323cbe3bc6afd
Signed-off-by: Einav Weiss Keidar <einavw@amdocs.com>
Diffstat (limited to 'openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx')
-rw-r--r-- | openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx | 148 |
1 files changed, 93 insertions, 55 deletions
diff --git a/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx b/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx index 16823b7dc5..f71372ce1a 100644 --- a/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx +++ b/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx @@ -19,69 +19,107 @@ import Button from 'sdc-ui/lib/react/Button.js'; import classnames from 'classnames'; import ExpandableInput from 'nfvo-components/input/ExpandableInput.jsx'; -const ListEditorHeader = ({onAdd, isReadOnlyMode, title, plusButtonTitle}) => { - return ( - <div className='list-editor-view-header'> - {title && <div className='list-editor-view-title'>{title}</div>} - <div> - { onAdd && - <Button data-test-id='add-button' iconName='plusThin' btnType='link' onClick={onAdd} disabled={isReadOnlyMode === true}>{plusButtonTitle}</Button> - } - </div> - </div> - ); +const ListEditorHeader = ({ + onAdd, + isReadOnlyMode, + title, + plusButtonTitle +}) => { + return ( + <div className="list-editor-view-header"> + {title && <div className="list-editor-view-title">{title}</div>} + <div> + {onAdd && ( + <Button + data-test-id="add-button" + iconName="plusThin" + btnType="link" + onClick={onAdd} + disabled={isReadOnlyMode === true}> + {plusButtonTitle} + </Button> + )} + </div> + </div> + ); }; -const ListEditorScroller = ({children, twoColumns}) => { - return ( - <div className='list-editor-view-list-scroller'> - <div className={classnames('list-editor-view-list', {'two-columns': twoColumns})}> - {children} - </div> - </div> - ); +const ListEditorScroller = ({ children, twoColumns }) => { + return ( + <div className="list-editor-view-list-scroller"> + <div + className={classnames('list-editor-view-list', { + 'two-columns': twoColumns + })}> + {children} + </div> + </div> + ); }; -const FilterWrapper = ({onFilter, filterValue}) => { - return ( - <div className='expandble-search-wrapper'> - <ExpandableInput - onChange={onFilter} - iconType='search' - value={filterValue}/> - </div> - ); +const FilterWrapper = ({ onFilter, filterValue }) => { + return ( + <div className="expandble-search-wrapper"> + <ExpandableInput + onChange={onFilter} + iconType="search" + value={filterValue} + /> + </div> + ); }; class ListEditorView extends React.Component { + static defaultProps = { + className: '', + twoColumns: false + }; - static defaultProps = { - className: '', - twoColumns: false - }; - - static propTypes = { - title: PropTypes.string, - plusButtonTitle: PropTypes.string, - children: PropTypes.node, - filterValue: PropTypes.string, - onFilter: PropTypes.func, - className: PropTypes.string, - isReadOnlyMode: PropTypes.bool, - placeholder: PropTypes.string, - twoColumns: PropTypes.bool - }; - - render() { - let {title, plusButtonTitle, onAdd, children, onFilter, className, isReadOnlyMode, twoColumns, filterValue} = this.props; - return ( - <div className={classnames('list-editor-view', className)}> - <ListEditorHeader onAdd={onAdd} isReadOnlyMode={isReadOnlyMode} plusButtonTitle={plusButtonTitle} title={title}/> - {onFilter && (children.length || filterValue) && <FilterWrapper onFilter={onFilter} filterValue={filterValue}/>} - <ListEditorScroller children={children} twoColumns={twoColumns}/> - </div> - ); - } + static propTypes = { + title: PropTypes.string, + plusButtonTitle: PropTypes.string, + children: PropTypes.node, + filterValue: PropTypes.string, + onFilter: PropTypes.func, + className: PropTypes.string, + isReadOnlyMode: PropTypes.bool, + placeholder: PropTypes.string, + twoColumns: PropTypes.bool + }; + render() { + let { + title, + plusButtonTitle, + onAdd, + children, + onFilter, + className, + isReadOnlyMode, + twoColumns, + filterValue + } = this.props; + return ( + <div className={classnames('list-editor-view', className)}> + <ListEditorHeader + onAdd={onAdd} + isReadOnlyMode={isReadOnlyMode} + plusButtonTitle={plusButtonTitle} + title={title} + /> + {onFilter && + (children.length || filterValue) && ( + <FilterWrapper + onFilter={onFilter} + filterValue={filterValue} + /> + )} + <ListEditorScroller + children={children} + twoColumns={twoColumns} + /> + </div> + ); + } } export default ListEditorView; |