diff options
Diffstat (limited to 'src/generic-components/filter/components/SelectFilter.jsx')
-rw-r--r-- | src/generic-components/filter/components/SelectFilter.jsx | 100 |
1 files changed, 100 insertions, 0 deletions
diff --git a/src/generic-components/filter/components/SelectFilter.jsx b/src/generic-components/filter/components/SelectFilter.jsx new file mode 100644 index 0000000..94f1807 --- /dev/null +++ b/src/generic-components/filter/components/SelectFilter.jsx @@ -0,0 +1,100 @@ +/* + * ============LICENSE_START======================================================= + * org.onap.aai + * ================================================================================ + * Copyright © 2017-2021 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. + * ============LICENSE_END========================================================= + */ + +import React, {Component} from 'react'; +import DropdownButton from 'react-bootstrap/lib/DropdownButton'; +import MenuItem from 'react-bootstrap/lib/MenuItem'; + +class SelectFilter extends Component { + constructor(props) { + console.log('SelectFilter props',props); + super(props); + this.props = props; + this.state = {dropdownIsOpen : false, isInitialize: true} + } + componentWillReceiveProps (nextProps) { + console.log('next props componentWillReceiveProps>>>>>>>',nextProps); + console.log('tihs props componentWillReceiveProps>>>>>>>',this.props); + if(this.state.isInitialize || this.props.id !== nextProps.id){ + this.props=nextProps; + this.setState({isInitialize:false},()=>{this.updateDropDownState();}); + } + console.log('this.state under Update>>>>>',this.state); + } + + handleDropdownValues = (props) => { + const listItems = Object.keys(props.filterList).map((filter,index) => { + let filterValue=(props.filterList[index].value)?props.filterList[index].value:props.filterList[index]; + let description=(props.filterList[index].description)?props.filterList[index].description:''; + return( + <MenuItem eventKey={index} key={index} title={description}>{filterValue}</MenuItem> + ); + }); + console.log('listItems',listItems); + return ( + listItems + ); + }; + toggleDropdown = () => { + console.log('toggleDropdown>>>>>',this.state.dropdownIsOpen); + this.setState({ dropdownIsOpen: !this.state.dropdownIsOpen },()=>{this.updateDropDownState();}); + }; + updateDropDownState = () =>{ + console.log('updateDropDownState',this.state.dropdownIsOpen); + //document.dispatchEvent(new MouseEvent('click'));dropdownIsOpen + let id=(this.props.id)? 'dropdown-root-'+this.props.id :'dropdown-root-1' + if(this.state.dropdownIsOpen){ + document.getElementById(id).getElementsByClassName('dropdown-menu')[0].style.display='block'; + }else{ + document.getElementById(id).getElementsByClassName('dropdown-menu')[0].style.display='none'; + } + } + handleSelect(eventKey, event) { + Object.keys(this.props.filterList).map((filter,index) => { + if(eventKey === index){ + let filterValue=(this.props.filterList[index].value)?this.props.filterList[index].value:this.props.filterList[index]; + this.props.onMenuSelect(filterValue,this.props.id) + } + }); + } + render(){ + if(this.state.isInitialize){ + this.setState({isInitialize:false},()=>{this.updateDropDownState();}); + } + return( + <div id={(this.props.id)? 'dropdown-root-'+this.props.id :'dropdown-root-1'}> + <DropdownButton + bsStyle='primary' + title= {(this.props.selectedFilter)? this.props.selectedFilter: this.props.param.filterDisplay} + key= '1' + id={(this.props.id)? 'dropdown-basic-'+this.props.id :'dropdown-basic-1'} + className='dropdownButton' + onToggle={this.toggleDropdown} + onSelect={this.handleSelect.bind(this)} + > + { + this.handleDropdownValues(this.props) + } + </DropdownButton> + </div> + ); + } +} +export default SelectFilter; |