WIP Add Tracking

src/components/side-panel/panel-header.js

@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React from 'react';
+import React, {Component} from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import {Tooltip} from 'components/common/styled-components';
@@ -204,26 +204,43 @@ const defaultActionItems = [
 ];
 
 function PanelHeaderFactory() {
-  const PanelHeader = ({
+  return class PanelHeader extends Component {
+    static propTypes = {
+      appName: PropTypes.string,
+      version: PropTypes.string,
+      uiState: PropTypes.object,
+      uiStateActions: PropTypes.object,
+      logoComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+      actionItems: PropTypes.arrayOf(PropTypes.any)
+    };
+
+    static defaultProps = {
+      logoComponent: KeplerGlLogo,
+      actionItems: defaultActionItems
+    };
+
+    render() {
+      const {
         appName,
         version,
-        actionItems = defaultActionItems,
+        actionItems,
         onSaveMap,
         onExportImage,
         onExportData,
         onExportConfig,
-        logoComponent = KeplerGlLogo,
         visibleDropdown,
         showExportDropdown,
         hideExportDropdown
-      }) => (
+      } = this.props;
+
+      return (
         <StyledPanelHeader className="side-panel__panel-header">
           <StyledPanelHeaderTop className="side-panel__panel-header__top">
-            <logoComponent version={version}/>
+            <this.props.logoComponent appName={appName} version={version}/>
             <StyledPanelTopActions>
               {actionItems.map(item => (
                 <div className="side-panel__panel-header__right"
-                  key={item.id} style={{position: 'relative'}}>
+                     key={item.id} style={{position: 'relative'}}>
                   <PanelAction
                     item={item}
                     onClick={() => {
@@ -249,16 +266,8 @@ function PanelHeaderFactory() {
           </StyledPanelHeaderTop>
         </StyledPanelHeader>
       );
-
-  PanelHeader.propTypes = {
-    appName: PropTypes.string,
-    version: PropTypes.string,
-    uiState: PropTypes.object,
-    uiStateActions: PropTypes.object,
-    logoComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
-    actionItems: PropTypes.arrayOf(PropTypes.any)
-  };
-  return PanelHeader;
+    }
+  }
 }
 
 export default PanelHeaderFactory;