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/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.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/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx')
-rw-r--r-- | openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx | 168 |
1 files changed, 98 insertions, 70 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx index 0bf32df1a3..fc8abf6ff6 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx @@ -22,85 +22,113 @@ import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.js import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx'; const ComponentPropType = PropTypes.shape({ - id: PropTypes.string, - name: PropTypes.string, - displayName: PropTypes.string, - description: PropTypes.string + id: PropTypes.string, + name: PropTypes.string, + displayName: PropTypes.string, + description: PropTypes.string }); class SoftwareProductComponentsListView extends React.Component { + state = { + localFilter: '' + }; - state = { - localFilter: '' - }; + static propTypes = { + isReadOnlyMode: PropTypes.bool, + componentsList: PropTypes.arrayOf(ComponentPropType), + onComponentSelect: PropTypes.func + }; - static propTypes = { - isReadOnlyMode: PropTypes.bool, - componentsList: PropTypes.arrayOf(ComponentPropType), - onComponentSelect: PropTypes.func - }; + render() { + let { componentsList = [], isManual } = this.props; + return ( + <div className=""> + {(componentsList.length > 0 || isManual) && + this.renderComponents()} + </div> + ); + } - render() { - let {componentsList = [], isManual} = this.props; - return ( - <div className=''> - { - (componentsList.length > 0 || isManual) && this.renderComponents() - } - </div> - ); - } + renderComponents() { + const { localFilter } = this.state; + const { + isManual, + onAddComponent, + isReadOnlyMode, + version, + currentSoftwareProduct: { id: softwareProductId }, + componentsList + } = this.props; + return ( + <ListEditorView + title={i18n('Virtual Function Components')} + filterValue={localFilter} + placeholder={i18n('Filter Components')} + onFilter={value => this.setState({ localFilter: value })} + isReadOnlyMode={isReadOnlyMode || !!this.filterList().length} + plusButtonTitle={i18n('Add Component')} + onAdd={ + isManual && componentsList.length === 0 + ? () => onAddComponent(softwareProductId, version) + : false + } + twoColumns> + {this.filterList().map(component => + this.renderComponentsListItem(component) + )} + </ListEditorView> + ); + } - renderComponents() { - const {localFilter} = this.state; - const {isManual, onAddComponent, isReadOnlyMode, version, currentSoftwareProduct: {id: softwareProductId}, componentsList } = this.props; - return ( - <ListEditorView - title={i18n('Virtual Function Components')} - filterValue={localFilter} - placeholder={i18n('Filter Components')} - onFilter={value => this.setState({localFilter: value})} - isReadOnlyMode={isReadOnlyMode || !!this.filterList().length} - plusButtonTitle={i18n('Add Component')} - onAdd={isManual && componentsList.length === 0 ? () => onAddComponent(softwareProductId, version) : false} - twoColumns> - {this.filterList().map(component => this.renderComponentsListItem(component))} - </ListEditorView> - ); - } + renderComponentsListItem(component) { + let { + id: componentId, + name, + displayName, + description = '' + } = component; + let { + currentSoftwareProduct: { id }, + onComponentSelect, + version + } = this.props; + return ( + <ListEditorItemView + key={ + name + Math.floor(Math.random() * (100 - 1) + 1).toString() + } + className="list-editor-item-view" + onSelect={() => + onComponentSelect({ id, componentId, version }) + }> + <ListEditorItemViewField> + <div className="name">{displayName}</div> + </ListEditorItemViewField> + <ListEditorItemViewField> + <div className="description">{description}</div> + </ListEditorItemViewField> + </ListEditorItemView> + ); + } - renderComponentsListItem(component) { - let {id: componentId, name, displayName, description = ''} = component; - let {currentSoftwareProduct: {id}, onComponentSelect, version} = this.props; - return ( - <ListEditorItemView - key={name + Math.floor(Math.random() * (100 - 1) + 1).toString()} - className='list-editor-item-view' - onSelect={() => onComponentSelect({id, componentId, version})}> - <ListEditorItemViewField> - <div className='name'>{displayName}</div> - </ListEditorItemViewField> - <ListEditorItemViewField> - <div className='description'>{description}</div> - </ListEditorItemViewField> - </ListEditorItemView> - ); - } + filterList() { + let { componentsList = [] } = this.props; - filterList() { - let {componentsList = []} = this.props; - - let {localFilter} = this.state; - if (localFilter.trim()) { - const filter = new RegExp(escape(localFilter), 'i'); - return componentsList.filter(({displayName = '', description = ''}) => { - return escape(displayName).match(filter) || escape(description).match(filter); - }); - } - else { - return componentsList; - } - } + let { localFilter } = this.state; + if (localFilter.trim()) { + const filter = new RegExp(escape(localFilter), 'i'); + return componentsList.filter( + ({ displayName = '', description = '' }) => { + return ( + escape(displayName).match(filter) || + escape(description).match(filter) + ); + } + ); + } else { + return componentsList; + } + } } export default SoftwareProductComponentsListView; |