refactor factory.jsx to factory.tsx

wip
apache · Dec 2, 2021 · c85f44b · c85f44b
1 parent 760c6cc
commit c85f44b
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 48 deletions.
diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/DeckGLContainer.jsx b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/DeckGLContainer.jsx
@@ -42,6 +42,7 @@ const propTypes = {
   bottomMargin: PropTypes.number,
   width: PropTypes.number.isRequired,
   height: PropTypes.number.isRequired,
+  onViewportChange: PropTypes.func,
 };
 const defaultProps = {
   mapStyle: 'light',
@@ -50,7 +51,7 @@ const defaultProps = {
   bottomMargin: 0,
 };
 
-class DeckGLContainer extends React.Component {
+export class DeckGLContainer extends React.Component {
   constructor(props) {
     super(props);
     this.tick = this.tick.bind(this);

diff --git a/...egacy-preset-chart-deckgl/src/factory.jsx → ...egacy-preset-chart-deckgl/src/factory.tsx b/...egacy-preset-chart-deckgl/src/factory.jsx → ...egacy-preset-chart-deckgl/src/factory.tsx
@@ -1,7 +1,3 @@
-/* eslint-disable react/sort-prop-types */
-/* eslint-disable react/jsx-handler-names */
-/* eslint-disable camelcase */
-/* eslint-disable react/no-unused-prop-types */
 /**
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
@@ -21,34 +17,54 @@
  * under the License.
  */
 import React from 'react';
-import PropTypes from 'prop-types';
 import { isEqual } from 'lodash';
+import { Datasource, QueryFormData, JsonObject } from '@superset-ui/core';
 
-import DeckGLContainer from './DeckGLContainer';
+import DeckGLContainerStyledWrapper, {
+  DeckGLContainer,
+} from './DeckGLContainer';
 import CategoricalDeckGLContainer from './CategoricalDeckGLContainer';
-// eslint-disable-next-line import/extensions
-import fitViewport from './utils/fitViewport';
-
-const propTypes = {
-  datasource: PropTypes.object.isRequired,
-  formData: PropTypes.object.isRequired,
-  height: PropTypes.number.isRequired,
-  onAddFilter: PropTypes.func,
-  payload: PropTypes.object.isRequired,
-  setControlValue: PropTypes.func.isRequired,
-  viewport: PropTypes.object.isRequired,
-  width: PropTypes.number.isRequired,
+import fitViewport, { Viewport } from './utils/fitViewport';
+import { Point } from './types';
+
+type deckGLComponentProps = {
+  datasource: Datasource;
+  formData: QueryFormData;
+  height: number;
+  onAddFilter: () => void;
+  payload: JsonObject;
+  setControlValue: () => void;
+  viewport: Viewport;
+  width: number;
 };
-const defaultProps = {
-  onAddFilter() {},
+interface getLayerType<T> {
+  (
+    formData: QueryFormData,
+    payload: JsonObject,
+    onAddFilter: () => void,
+    setTooltip: (tooltip: string) => void,
+  ): T;
+}
+interface getPointsType<T> {
+  (point: number[]): T;
+}
+type deckGLComponentState = {
+  viewport: Viewport;
+  layer: unknown;
 };
 
-export function createDeckGLComponent(getLayer, getPoints) {
+export function createDeckGLComponent(
+  getLayer: getLayerType<unknown>,
+  getPoints: getPointsType<Point[]>,
+): React.ComponentClass<deckGLComponentProps> {
   // Higher order component
-  class Component extends React.PureComponent {
-    containerRef = React.createRef();
+  class Component extends React.PureComponent<
+    deckGLComponentProps,
+    deckGLComponentState
+  > {
+    containerRef: React.RefObject<DeckGLContainer> = React.createRef();
 
-    constructor(props) {
+    constructor(props: deckGLComponentProps) {
       super(props);
 
       const { width, height, formData } = props;
@@ -58,7 +74,7 @@ export function createDeckGLComponent(getLayer, getPoints) {
           width,
           height,
           points: getPoints(props.payload.data.features),
-        });
+        }) as Viewport;
       }
 
       this.state = {
@@ -68,7 +84,7 @@ export function createDeckGLComponent(getLayer, getPoints) {
       this.onViewportChange = this.onViewportChange.bind(this);
     }
 
-    UNSAFE_componentWillReceiveProps(nextProps) {
+    UNSAFE_componentWillReceiveProps(nextProps: deckGLComponentProps) {
       // Only recompute the layer if anything BUT the viewport has changed
       const nextFdNoVP = { ...nextProps.formData, viewport: null };
       const currFdNoVP = { ...this.props.formData, viewport: null };
@@ -80,20 +96,20 @@ export function createDeckGLComponent(getLayer, getPoints) {
       }
     }
 
-    onViewportChange(viewport) {
+    onViewportChange(viewport: Viewport) {
       this.setState({ viewport });
     }
 
-    computeLayer(props) {
+    computeLayer(props: deckGLComponentProps) {
       const { formData, payload, onAddFilter } = props;
 
       return getLayer(formData, payload, onAddFilter, this.setTooltip);
     }
 
-    setTooltip = tooltip => {
+    setTooltip = (tooltip: string) => {
       const { current } = this.containerRef;
       if (current) {
-        current.setTooltip(tooltip);
+        current?.setTooltip(tooltip);
       }
     };
 
@@ -102,7 +118,7 @@ export function createDeckGLComponent(getLayer, getPoints) {
       const { layer, viewport } = this.state;
 
       return (
-        <DeckGLContainer
+        <DeckGLContainerStyledWrapper
           ref={this.containerRef}
           mapboxApiAccessToken={payload.data.mapboxApiKey}
           viewport={viewport}
@@ -116,14 +132,14 @@ export function createDeckGLComponent(getLayer, getPoints) {
       );
     }
   }
-  Component.propTypes = propTypes;
-  Component.defaultProps = defaultProps;
-
   return Component;
 }
 
-export function createCategoricalDeckGLComponent(getLayer, getPoints) {
-  function Component(props) {
+export function createCategoricalDeckGLComponent(
+  getLayer: getLayerType<unknown>,
+  getPoints: getPointsType<Point[]>,
+) {
+  return function Component(props: deckGLComponentProps) {
     const {
       datasource,
       formData,
@@ -148,10 +164,5 @@ export function createCategoricalDeckGLComponent(getLayer, getPoints) {
         height={height}
       />
     );
-  }
-
-  Component.propTypes = propTypes;
-  Component.defaultProps = defaultProps;
-
-  return Component;
+  };
 }
diff --git a/...cy-preset-chart-deckgl/src/utils/types.ts → ...s/legacy-preset-chart-deckgl/src/types.ts b/...cy-preset-chart-deckgl/src/utils/types.ts → ...s/legacy-preset-chart-deckgl/src/types.ts
diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/utils/computeBoundsFromPoints.ts b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/utils/computeBoundsFromPoints.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 import { extent as d3Extent } from 'd3-array';
-import { Point, Range } from './types';
+import { Point, Range } from '../types';
 
 const LAT_LIMIT: Range = [-90, 90];
 const LNG_LIMIT: Range = [-180, 180];

diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/utils/fitViewport.ts b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/utils/fitViewport.ts
@@ -18,17 +18,17 @@
  */
 import { fitBounds } from '@math.gl/web-mercator';
 import computeBoundsFromPoints from './computeBoundsFromPoints';
-import { Point } from './types';
+import { Point } from '../types';
 
-type Viewport = {
+export type Viewport = {
   longtitude: number;
   latitude: number;
   zoom: number;
   bearing?: number;
   pitch?: number;
 };
 
-type FitViewportOptions = {
+export type FitViewportOptions = {
   points: Point[];
   width: number;
   height: number;

diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/utils/getPointsFromPolygon.ts b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/utils/getPointsFromPolygon.ts
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Point } from './types';
+import { Point } from '../types';
 
 /** Format originally used by the Polygon plugin */
 type CustomPolygonFeature = {