From c85f44b0c002ee79b0c8d1097cbb5b8466f28f41 Mon Sep 17 00:00:00 2001 From: Yongjie Zhao Date: Thu, 2 Dec 2021 16:10:30 +0800 Subject: [PATCH] refactor factory.jsx to factory.tsx wip --- .../src/DeckGLContainer.jsx | 3 +- .../src/{factory.jsx => factory.tsx} | 95 +++++++++++-------- .../src/{utils => }/types.ts | 0 .../src/utils/computeBoundsFromPoints.ts | 2 +- .../src/utils/fitViewport.ts | 6 +- .../src/utils/getPointsFromPolygon.ts | 2 +- 6 files changed, 60 insertions(+), 48 deletions(-) rename superset-frontend/plugins/legacy-preset-chart-deckgl/src/{factory.jsx => factory.tsx} (65%) rename superset-frontend/plugins/legacy-preset-chart-deckgl/src/{utils => }/types.ts (100%) diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/DeckGLContainer.jsx b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/DeckGLContainer.jsx index 67d320894b031..f1e720a2c76ea 100644 --- 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/superset-frontend/plugins/legacy-preset-chart-deckgl/src/factory.jsx b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/factory.tsx similarity index 65% rename from superset-frontend/plugins/legacy-preset-chart-deckgl/src/factory.jsx rename to superset-frontend/plugins/legacy-preset-chart-deckgl/src/factory.tsx index 25558585620e6..f64358103f199 100644 --- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/factory.jsx +++ b/superset-frontend/plugins/legacy-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 { + ( + formData: QueryFormData, + payload: JsonObject, + onAddFilter: () => void, + setTooltip: (tooltip: string) => void, + ): T; +} +interface getPointsType { + (point: number[]): T; +} +type deckGLComponentState = { + viewport: Viewport; + layer: unknown; }; -export function createDeckGLComponent(getLayer, getPoints) { +export function createDeckGLComponent( + getLayer: getLayerType, + getPoints: getPointsType, +): React.ComponentClass { // Higher order component - class Component extends React.PureComponent { - containerRef = React.createRef(); + class Component extends React.PureComponent< + deckGLComponentProps, + deckGLComponentState + > { + containerRef: React.RefObject = 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 ( - , + getPoints: getPointsType, +) { + 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/superset-frontend/plugins/legacy-preset-chart-deckgl/src/utils/types.ts b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/types.ts similarity index 100% rename from superset-frontend/plugins/legacy-preset-chart-deckgl/src/utils/types.ts rename to superset-frontend/plugins/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 index e0046f57c41be..729f75adbddfc 100644 --- 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 index b640a730978b2..5b5bbb6b478fb 100644 --- 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,9 +18,9 @@ */ 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; @@ -28,7 +28,7 @@ type Viewport = { 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 index e4e9fbe9b4916..19d431a733125 100644 --- 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 = {