src/generic-components/filter/components/FilterTypes.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 Dropdown from 'react-bootstrap/lib/Dropdown';
  24 import MenuItem from 'react-bootstrap/lib/MenuItem';
  25 import {GlobalExtConstants} from 'utils/GlobalExtConstants.js';
  26 var filterTypeList = GlobalExtConstants.FILTER_TYPES;
  27
  28 class FilterTypes extends Component {
  29         constructor(props) {
  30                 console.log('FilterTypes props>>>>',props);
  31         super(props);
  32         this.props = props;
  33         this.state = {dropdownIsOpen : false, isInitialize: true}
  34     }
  35     componentWillReceiveProps (nextProps) {
  36         console.log('next props componentWillReceiveProps>>>>>>>',nextProps);
  37         console.log('tihs props componentWillReceiveProps>>>>>>>',this.props);
  38         if(this.state.isInitialize || this.props !== nextProps){
  39             this.props=nextProps;
  40             this.setState({isInitialize:false}, ()=>{this.updateDropDownState();});
  41         }
  42         console.log('this.state under Update>>>>>',this.state);
  43     }
  44     handleDropdownValues = (props) => {
  45         const listItems = Object.keys(filterTypeList).map((filter,index) => {
  46           return(
  47               <MenuItem
  48                       eventKey={index}
  49                       key={filter}>
  50                       {filterTypeList[index]}
  51               </MenuItem>
  52           );
  53         });
  54         return (
  55           listItems
  56         );
  57     };
  58     toggleDropdown = () => {
  59         console.log('toggleDropdown>>>>>',this.state.dropdownIsOpen);
  60         this.setState({ dropdownIsOpen: !this.state.dropdownIsOpen },()=>{this.updateDropDownState()});
  61     };
  62     updateDropDownState = () =>{
  63         console.log('updateDropDownState',this.state.dropdownIsOpen);
  64         //document.dispatchEvent(new MouseEvent('click'));
  65         let id=(this.props.id)? 'dropdown-root-'+this.props.id :'dropdown-root-2'
  66         if(this.state.dropdownIsOpen){
  67             document.getElementById(id).getElementsByClassName('dropdown-menu')[0].style.display='block';
  68         }else{
  69             document.getElementById(id).getElementsByClassName('dropdown-menu')[0].style.display='none';
  70         }
  71     }
  72     handleSelect(eventKey, event) {
  73         Object.keys(filterTypeList).map((filter,index) => {
  74             if(eventKey === index){
  75                 this.props.onMenuSelect(filterTypeList[index],this.props.id)
  76             }
  77         });
  78      }
  79     render(){
  80         if(this.state.isInitialize){
  81             this.setState({isInitialize:false},()=>{this.updateDropDownState();});
  82         }
  83         return(
  84             <div id={(this.props.id)? 'dropdown-root-'+this.props.id :'dropdown-root-2'}>
  85                 <DropdownButton
  86                     bsStyle='primary'
  87                     title= {(this.props.selectedFilter)? this.props.selectedFilter: this.props.param.filterTypeDisplay}
  88                     key= '2'
  89                     id={(this.props.id)? 'dropdown-basic-'+this.props.id :'dropdown-basic-2'}
  90                     className='dropdownButton'
  91                     onToggle={this.toggleDropdown}
  92                     disabled={(this.props.state)?this.props.state:false}
  93                     onSelect={this.handleSelect.bind(this)}  >
  94                     {
  95                         this.handleDropdownValues(this.props)
  96                     }
  97                 </DropdownButton>
  98             </div>
  99         )
 100     }
 101 }
 102 export default FilterTypes;