Updated Sparky to add ECOMP functionality Browse, Specialized Search, BYOQ, and the...

[aai/sparky-fe.git] / src / generic-components / filter / components / SelectFilter.jsx

diff --git a/src/generic-components/filter/components/SelectFilter.jsx b/src/generic-components/filter/components/SelectFilter.jsx
new file mode 100644 (file)
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;