diff options
Diffstat (limited to 'openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx')
| -rw-r--r-- | openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx | 67 |
1 files changed, 44 insertions, 23 deletions
diff --git a/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx b/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx index 171bead9bb..c60d6f777e 100644 --- a/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx +++ b/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx @@ -1,6 +1,21 @@ +/*! + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing + * permissions and limitations under the License. + */ import React from 'react'; -import FontAwesome from 'react-fontawesome'; -import Input from 'react-bootstrap/lib/Input.js'; +import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx'; +import Input from 'nfvo-components/input/validation/InputWrapper.jsx'; class DualListboxView extends React.Component { @@ -30,37 +45,32 @@ class DualListboxView extends React.Component { state = { availableListFilter: '', - selectedValuesListFilter: '' - }; - - static contextTypes = { - isReadOnlyMode: React.PropTypes.bool + selectedValuesListFilter: '', + selectedValues: [] }; render() { - let {availableList, selectedValuesList, filterTitle} = this.props; + let {availableList, selectedValuesList, filterTitle, isReadOnlyMode} = this.props; let {availableListFilter, selectedValuesListFilter} = this.state; - let isReadOnlyMode = this.context.isReadOnlyMode; let unselectedList = availableList.filter(availableItem => !selectedValuesList.find(value => value === availableItem.id)); let selectedList = availableList.filter(availableItem => selectedValuesList.find(value => value === availableItem.id)); selectedList = selectedList.sort((a, b) => selectedValuesList.indexOf(a.id) - selectedValuesList.indexOf(b.id)); - return ( <div className='dual-list-box'> {this.renderListbox(filterTitle.left, unselectedList, { value: availableListFilter, ref: 'availableListFilter', disabled: isReadOnlyMode, - onChange: () => this.setState({availableListFilter: this.refs.availableListFilter.getValue()}) - }, {ref: 'availableValues', disabled: isReadOnlyMode})} + onChange: (value) => this.setState({availableListFilter: value}) + }, {ref: 'availableValues', disabled: isReadOnlyMode, testId: 'available',})} {this.renderOperationsBar(isReadOnlyMode)} {this.renderListbox(filterTitle.right, selectedList, { value: selectedValuesListFilter, ref: 'selectedValuesListFilter', disabled: isReadOnlyMode, - onChange: () => this.setState({selectedValuesListFilter: this.refs.selectedValuesListFilter.getValue()}) - }, {ref: 'selectedValues', disabled: isReadOnlyMode})} + onChange: (value) => this.setState({selectedValuesListFilter: value}) + }, {ref: 'selectedValues', disabled: isReadOnlyMode, testId: 'selected'})} </div> ); } @@ -69,21 +79,25 @@ class DualListboxView extends React.Component { let regExFilter = new RegExp(escape(filterProps.value), 'i'); let matchedItems = list.filter(item => item.name.match(regExFilter)); let unMatchedItems = list.filter(item => !item.name.match(regExFilter)); - - return ( <div className='dual-search-multi-select-section'> <p>{filterTitle}</p> <div className='dual-text-box-search search-wrapper'> - <Input name='search-input-control' type='text' groupClassName='search-input-control' {...filterProps}/> - <FontAwesome name='search' className='search-icon'/> + <Input data-test-id={`${props.testId}-search-input`} + name='search-input-control' type='text' + groupClassName='search-input-control' + {...filterProps}/> + <SVGIcon name='search' className='search-icon'/> </div> <Input multiple + onChange={(event) => this.onSelectItems(event.target.selectedOptions)} groupClassName='dual-list-box-multi-select' type='select' name='dual-list-box-multi-select' - {...props}> + data-test-id={`${props.testId}-select-input`} + disabled={props.disabled} + ref={props.ref}> {matchedItems.map(item => this.renderOption(item.id, item.name))} {matchedItems.length && unMatchedItems.length && <option style={{pointerEvents: 'none'}}>--------------------</option>} {unMatchedItems.map(item => this.renderOption(item.id, item.name))} @@ -92,6 +106,11 @@ class DualListboxView extends React.Component { ); } + onSelectItems(selectedOptions) { + let selectedValues = Object.keys(selectedOptions).map((k) => selectedOptions[k].value); + this.setState({selectedValues}); + } + renderOption(value, name) { return (<option className='dual-list-box-multi-select-text' key={value} value={value}>{name}</option>); } @@ -107,17 +126,19 @@ class DualListboxView extends React.Component { ); } - renderOperationBarButton(onClick, fontAwesomeIconName){ - return (<div className='dual-list-option' onClick={onClick}><FontAwesome name={fontAwesomeIconName}/></div>); + renderOperationBarButton(onClick, iconName){ + return (<div className='dual-list-option' data-test-id={`operation-icon-${iconName}`} onClick={onClick}><SVGIcon name={iconName}/></div>); } addToSelectedList() { - this.props.onChange(this.props.selectedValuesList.concat(this.refs.availableValues.getValue())); + this.props.onChange(this.props.selectedValuesList.concat(this.state.selectedValues)); + this.setState({selectedValues: []}); } removeFromSelectedList() { - const selectedValues = this.refs.selectedValues.getValue(); + const selectedValues = this.state.selectedValues; this.props.onChange(this.props.selectedValuesList.filter(value => !selectedValues.find(selectedValue => selectedValue === value))); + this.setState({selectedValues: []}); } addAllToSelectedList() { |