[Chore] refactored side-panel from class to functional component (#1536)

* chore: refactored side-panel from class to functional component
* created new side panel content component to isolate logic to toggle panels

Signed-off-by: Shan He <heshan0131@gmail.com>
Co-authored-by: Giuseppe Macrì <macri.giuseppe@gmail.com>

src/components/bottom-widget.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import {Datasets, Filter, AnimationConfig} from 'reducers/vis-state-updaters';
+import {UiState} from 'reducers/ui-state-updaters';
+import * as UIStateActions from 'actions/ui-state-actions';
+import * as VisStateActions from 'actions/vis-state-actions';
+import {Layer} from 'layers';
+
+export type BottomWidgetProps = {
+  datasets: Datasets;
+  filters: Filter[];
+  layers: Layer[];
+  animationConfig: AnimationConfig;
+  uiStateActions: typeof UIStateActions;
+  visStateActions: typeof VisStateActions;
+  rootRef: React.ForwardedRef<HTMLDivElement>;
+  containerW: number;
+  uiState: UiState;
+  sidePanelWidth: number;
+  toggleModal: typeof UIStateActions.toggleModal;
+  children?: React.ReactNode;
+};
+
+export function BottomWidgetFactory(
+  TimeWidget: typeof React.Component,
+  AnimationControl: typeof React.Component,
+  FilterAnimationController: typeof React.Component,
+  LayerAnimationController: typeof React.Component
+): any;
+
+export default BottomWidgetFactory;
+
+export function LayerAnimationControllerFactory(): React.Component;
+export function FilterAnimationControllerFactory(): React.Component;

src/components/index.js

@@ -35,7 +35,8 @@ export {default as KeplerGl, default, injectComponents, ContainerFactory} from '
 
 // factories
 export {default as KeplerGlFactory, DEFAULT_KEPLER_GL_PROPS} from './kepler-gl';
-export {default as SidePanelFactory, PanelTitleFactory} from './side-panel';
+export {default as SidePanelFactory} from './side-panel';
+export {default as PanelTitleFactory} from './side-panel/panel-title';
 export {default as MapContainerFactory} from './map-container';
 export {
   default as BottomWidgetFactory,
@@ -54,7 +55,8 @@ export {
 } from './side-panel/panel-header';
 export {default as PanelHeaderActionFactory} from './side-panel/panel-header-action';
 export {CollapseButtonFactory, default as SidebarFactory} from './side-panel/side-bar';
-export {default as PanelToggleFactory, PanelTabFactory} from './side-panel/panel-toggle';
+export {default as PanelToggleFactory} from './side-panel/panel-toggle';
+export {default as PanelTabFactory} from './side-panel/panel-tab';
 
 export {AddDataButtonFactory, default as LayerManagerFactory} from './side-panel/layer-manager';
 export {default as LayerPanelFactory} from './side-panel/layer-panel/layer-panel';
@@ -80,7 +82,6 @@ export {default as MapManagerFactory} from './side-panel/map-manager';
 export {default as LayerGroupSelectorFactory} from './side-panel/map-style-panel/map-layer-selector';
 export {default as MapStyleSelectorFactory} from './side-panel/map-style-panel/map-style-selector';
 export {default as CustomPanelsFactory} from './side-panel/custom-panel';
-
 // // map factories
 export {default as MapPopoverFactory} from './map/map-popover';
 export {default as MapControlFactory} from './map/map-control';

src/components/kepler-gl.d.ts

@@ -1,5 +1,4 @@
-import {ComponentClass, RefType} from 'react';
-import {LoaderObject} from '@loaders.gl/loader-utils';
+import {ComponentClass} from 'react';
 import {OnErrorCallBack, OnSuccessCallBack} from 'actions/provider-actions';
 import {MapState} from 'reducers/map-state-updaters';
 import {MapStyle} from 'reducers/map-style-updaters';
@@ -13,44 +12,44 @@ import * as UIStateActions from 'actions/ui-state-actions';
 import * as ProviderActions from 'actions/provider-actions';
 
 export type KeplerGlProps = {
-  id: string,
-  appWebsite: any,
-  onSaveMap?: () => void,
-  onViewStateChange?: () => void,
-  onDeckInitialized?: () => void,
-  onKeplerGlInitialized?: () => void,
-  mapboxApiAccessToken: string,
-  mapboxApiUrl: string,
-  getMapboxRef: () => React.RefType<any>,
-  mapStyles: {id: string, style?: object}[],
-  mapStylesReplaceDefault: boolean,
-  mapboxApiUrl: string,
-  width: number,
-  height: number,
-  appName: string,
-  version: string,
-  sidePanelWidth: number,
-  theme: object,
-  cloudProviders: object[],
-  deckGlProps?: object,
-  onLoadCloudMapSuccess?: OnSuccessCallBack,
-  onLoadCloudMapError?: OnErrorCallBack,
-  onExportToCloudSuccess?:OnSuccessCallBack,
-  onExportToCloudError?: OnErrorCallBack,
-  readOnly?: boolean
+  id: string;
+  appWebsite: any;
+  onSaveMap?: () => void;
+  onViewStateChange?: () => void;
+  onDeckInitialized?: () => void;
+  onKeplerGlInitialized?: () => void;
+  mapboxApiAccessToken: string;
+  mapboxApiUrl: string;
+  getMapboxRef: () => React.RefType<any>;
+  mapStyles: {id: string; style?: object}[];
+  mapStylesReplaceDefault: boolean;
+  mapboxApiUrl: string;
+  width: number;
+  height: number;
+  appName: string;
+  version: string;
+  sidePanelWidth: number;
+  theme: object;
+  cloudProviders: object[];
+  deckGlProps?: object;
+  onLoadCloudMapSuccess?: OnSuccessCallBack;
+  onLoadCloudMapError?: OnErrorCallBack;
+  onExportToCloudSuccess?: OnSuccessCallBack;
+  onExportToCloudError?: OnErrorCallBack;
+  readOnly?: boolean;
 };
 
 export type UnconnectedKeplerGlProps = KeplerGlProps & {
-  mapState: MapState,
-  mapStyle: MapStyle,
-  uiState: UiState,
-  visState: VisState,
-  providerState: ProviderState,
-  visStateActions: typeof VisStateActions,
-  uiStateActions: typeof UIStateActions,
-  mapStateActions: typeof MapStateActions,
-  mapStyleActions: typeof MapStyleActions,
-  providerActions: typeof ProviderActions
+  mapState: MapState;
+  mapStyle: MapStyle;
+  uiState: UiState;
+  visState: VisState;
+  providerState: ProviderState;
+  visStateActions: typeof VisStateActions;
+  uiStateActions: typeof UIStateActions;
+  mapStateActions: typeof MapStateActions;
+  mapStyleActions: typeof MapStyleActions;
+  providerActions: typeof ProviderActions;
 };
 
 export type KeplerGlComponent = ComponentClass<UnconnectedKeplerGlProps>;

src/components/modal-container.d.ts

@@ -10,7 +10,6 @@ import {MapStyle} from 'reducers/map-style-updaters';
 import {UiState} from 'reducers/ui-state-updaters';
 import {VisState} from 'reducers/vis-state-updaters';
 import {ProviderState} from 'reducers/provider-state-updaters';
-import {OnSuccessCallBack} from 'actions';
 
 export type ModalContainerProps = {
   appName: string;

src/components/side-panel.d.ts

@@ -0,0 +1,33 @@
+import {ComponentType} from 'react';
+import {Datasets, Filter, InteractionConfig, MapStyle} from '../reducers';
+import {Layer, LayerClassesType} from '../layers';
+
+import * as MapStyleActions from 'actions/map-style-actions';
+import * as VisStateActions from 'actions/vis-state-actions';
+import * as MapStateActions from 'actions/map-state-actions';
+
+export type SidePanelItem = {
+  id: stirng;
+  label: string;
+  iconComponent: ComponentType<any>;
+};
+
+export type SidePanelProps = {
+  filters: Filter;
+  interactionConfig: InteractionConfig;
+  layerBlending: stirng;
+  layers: Layer;
+  layerClasses: LayerClassesType;
+  mapStyle: MapStyle;
+  width: number;
+  datasets: Datasets;
+  visStateActions: typeof VisStateActions;
+  mapStateActions: typeof MapStateActions;
+  mapStyleActions: typeof MapStyleActions;
+  availableProviders: object;
+  mapSaved?: string | null;
+  panels: SidePanelItem[];
+};
+
+export const SidePanel: PureComponent<SidePanelProps>;
+export default function SidePanelFactory(): PureComponent<SidePanelProps>;