src/generic-components/filter/components/SelectFilter.jsx

   1 /*
   2  * ============LICENSE_START=======================================================
   3  * org.onap.aai
   4  * ================================================================================
   5  * Copyright © 2017-2021 AT&T Intellectual Property. All rights reserved.
   6  * ================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *       http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ============LICENSE_END=========================================================
  19  */
  20
  21 import React, {Component} from 'react';
  22 import DropdownButton from 'react-bootstrap/lib/DropdownButton';
  23 import MenuItem from 'react-bootstrap/lib/MenuItem';
  24
  25 class SelectFilter extends Component {
  26         constructor(props) {
  27                 console.log('SelectFilter props',props);
  28         super(props);
  29         this.props = props;
  30         this.state = {dropdownIsOpen : false, isInitialize: true}
  31     }
  32     componentWillReceiveProps (nextProps) {
  33         console.log('next props componentWillReceiveProps>>>>>>>',nextProps);
  34         console.log('tihs props componentWillReceiveProps>>>>>>>',this.props);
  35         if(this.state.isInitialize || this.props.id !== nextProps.id){
  36             this.props=nextProps;
  37             this.setState({isInitialize:false},()=>{this.updateDropDownState();});
  38         }
  39         console.log('this.state under Update>>>>>',this.state);
  40     }
  41
  42     handleDropdownValues = (props) => {
  43         const listItems = Object.keys(props.filterList).map((filter,index) => {
  44           let filterValue=(props.filterList[index].value)?props.filterList[index].value:props.filterList[index];
  45           let description=(props.filterList[index].description)?props.filterList[index].description:'';
  46           return(
  47               <MenuItem eventKey={index} key={index} title={description}>{filterValue}</MenuItem>
  48           );
  49         });
  50         console.log('listItems',listItems);
  51         return (
  52           listItems
  53         );
  54     };
  55     toggleDropdown = () => {
  56         console.log('toggleDropdown>>>>>',this.state.dropdownIsOpen);
  57         this.setState({ dropdownIsOpen: !this.state.dropdownIsOpen },()=>{this.updateDropDownState();});
  58     };
  59     updateDropDownState = () =>{
  60         console.log('updateDropDownState',this.state.dropdownIsOpen);
  61         //document.dispatchEvent(new MouseEvent('click'));dropdownIsOpen
  62         let id=(this.props.id)? 'dropdown-root-'+this.props.id :'dropdown-root-1'
  63         if(this.state.dropdownIsOpen){
  64             document.getElementById(id).getElementsByClassName('dropdown-menu')[0].style.display='block';
  65         }else{
  66             document.getElementById(id).getElementsByClassName('dropdown-menu')[0].style.display='none';
  67         }
  68     }
  69     handleSelect(eventKey, event) {
  70        Object.keys(this.props.filterList).map((filter,index) => {
  71            if(eventKey === index){
  72                 let filterValue=(this.props.filterList[index].value)?this.props.filterList[index].value:this.props.filterList[index];
  73                 this.props.onMenuSelect(filterValue,this.props.id)
  74            }
  75        });
  76     }
  77     render(){
  78         if(this.state.isInitialize){
  79             this.setState({isInitialize:false},()=>{this.updateDropDownState();});
  80         }
  81         return(
  82             <div id={(this.props.id)? 'dropdown-root-'+this.props.id :'dropdown-root-1'}>
  83                 <DropdownButton
  84                     bsStyle='primary'
  85                     title= {(this.props.selectedFilter)? this.props.selectedFilter: this.props.param.filterDisplay}
  86                     key= '1'
  87                     id={(this.props.id)? 'dropdown-basic-'+this.props.id :'dropdown-basic-1'}
  88                     className='dropdownButton'
  89                     onToggle={this.toggleDropdown}
  90                     onSelect={this.handleSelect.bind(this)}
  91                     >
  92                     {
  93                         this.handleDropdownValues(this.props)
  94                     }
  95                 </DropdownButton>
  96             </div>
  97         );
  98     }
  99 }
 100 export default SelectFilter;