Skip to content

Commit

Permalink
[fix] Fix types for Typescript 4.8 (#2229)
Browse files Browse the repository at this point in the history
  • Loading branch information
@igorDykhta
igorDykhta committed May 19, 2023
1 parent 41c8099 commit 7fb4cad
Show file tree
Hide file tree
Showing 16 changed files with 100 additions and 81 deletions.
1 change: 1 addition & 0 deletions bindings/kepler.gl-jupyter/js/package.json
View file
Expand Up @@ -50,6 +50,7 @@
"eslint-plugin-babel": "^5.3.0",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-react": "~7.12.4",
"@jupyterlab/builder": "^4.0.0",
"html-webpack-plugin": "^4.3.0",
"react-dev-utils": "^10.2.1",
"rimraf": "^2.6.1",
Expand Down
8 changes: 7 additions & 1 deletion src/actions/src/actions.ts
View file
Expand Up @@ -30,7 +30,13 @@ import {
ProtoDataset
} from '@kepler.gl/types';

export type ActionHandler<A extends (...args: any) => any> = (...args: Parameters<A>) => void;
type Handler = (...args: any) => any;

export type ActionHandler<A extends Handler> = (...args: Parameters<A>) => void;

export type ActionHandlers<T extends {[k: string]: Handler}> = {
[K in keyof T]: ActionHandler<T[K]>;
};

/**
* Add data to kepler.gl reducer, prepare map with preset configuration if config is passed.
Expand Down
6 changes: 3 additions & 3 deletions src/actions/src/ui-state-actions.ts
View file
Expand Up @@ -25,7 +25,7 @@ import {ExportImage} from '@kepler.gl/constants';

/** TOGGLE_SIDE_PANEL */
export type ToggleSidePanelUpdaterAction = {
payload: string;
payload: string | null;
};
/**
* Toggle active side panel
Expand All @@ -34,11 +34,11 @@ export type ToggleSidePanelUpdaterAction = {
* @public
*/
export const toggleSidePanel: (
id: string
id: string | null
) => Merge<
ToggleSidePanelUpdaterAction,
{type: typeof ActionTypes.TOGGLE_SIDE_PANEL}
> = createAction(ActionTypes.TOGGLE_SIDE_PANEL, (id: string) => ({payload: id}));
> = createAction(ActionTypes.TOGGLE_SIDE_PANEL, (id: string | null) => ({payload: id}));

/** TOGGLE_MODAL */
export type ToggleModalUpdaterAction = {
Expand Down
14 changes: 7 additions & 7 deletions src/components/src/editor/editor.tsx
View file
Expand Up @@ -33,8 +33,8 @@ import {
KeyEvent
} from '@kepler.gl/constants';
import {Layer, EditorLayerUtils} from '@kepler.gl/layers';
import {Filter, FeatureSelectionContext} from '@kepler.gl/types';
import {Feature} from '@nebula.gl/edit-modes';
import {Filter, FeatureSelectionContext, Feature} from '@kepler.gl/types';
import {FeatureOf, Polygon} from '@nebula.gl/edit-modes';
import {Datasets} from '@kepler.gl/table';

const DECKGL_RENDER_LAYER = 'default-deckgl-overlay-wrapper';
Expand All @@ -53,12 +53,12 @@ interface EditorProps {
datasets: Datasets;
editor: {selectedFeature: Feature; mode: string; selectionContext?: FeatureSelectionContext};
index: number;
className: string;
className?: string;
style: CSSProperties;
onSelect: (f: Feature | null) => void;
onSelect: (f: Feature | null) => any;
onSetEditorMode: (m: any) => void;
onDeleteFeature: (f: Feature) => void;
onTogglePolygonFilter: (l: Layer, f: Feature) => void;
onDeleteFeature: (f: Feature) => any;
onTogglePolygonFilter: (l: Layer, f: Feature) => any;
}

export default function EditorFactory(
Expand Down Expand Up @@ -163,7 +163,7 @@ export default function EditorFactory(
<StyledWrapper className={classnames('editor', className)} style={style}>
{Boolean(rightClick) && selectedFeature && index === mapIndex ? (
<FeatureActionPanel
selectedFeature={selectedFeature}
selectedFeature={selectedFeature as FeatureOf<Polygon>}
datasets={datasets}
layers={availableLayers}
currentFilter={currentFilter}
Expand Down
6 changes: 5 additions & 1 deletion src/components/src/index.ts
View file
Expand Up @@ -42,7 +42,7 @@ export {default as KeplerGl, default, injectComponents, ContainerFactory, ERROR_
export {default as KeplerGlFactory, DEFAULT_KEPLER_GL_PROPS, getVisibleDatasets, mapFieldsSelector, plotContainerSelector} from './kepler-gl';
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 MapContainerFactory, Attribution} from './map-container';
export {default as MapsLayoutFactory} from './maps-layout';
export {default as BottomWidgetFactory} from './bottom-widget';
export {default as LayerAnimationControllerFactory} from './layer-animation-controller';
Expand Down Expand Up @@ -268,6 +268,10 @@ export type {LayerGroupColorPickerProps} from './side-panel/map-style-panel/map-
export type {MapLegendPanelProps, MapLegendPanelFactoryDeps} from './map/map-legend-panel';
export type {FormatterDropdownProps} from './common/data-table/option-dropdown';
export type {LayerListProps, LayerListFactoryDeps} from './side-panel/layer-panel/layer-list';
export type {MapContainerProps} from './map-container';
export type {MapControlProps} from './map/map-control';
export type {MapDrawPanelProps} from './map/map-draw-panel';
export type {PanelHeaderProps} from './side-panel/panel-header';

export {
Icons,
Expand Down
26 changes: 13 additions & 13 deletions src/components/src/map-container.tsx
View file
Expand Up @@ -202,11 +202,11 @@ const DatasetAttributions = ({
</>
);

export const Attribution = ({
showMapboxLogo = true,
showOsmBasemapAttribution = false,
datasetAttributions
}) => {
export const Attribution: React.FC<{
showMapboxLogo: boolean;
showOsmBasemapAttribution: boolean;
datasetAttributions: DatasetAttribution[];
}> = ({showMapboxLogo = true, showOsmBasemapAttribution = false, datasetAttributions}) => {
const isPalm = hasMobileWidth(breakPointValues);

const memoizedComponents = useMemo(() => {
Expand Down Expand Up @@ -268,7 +268,7 @@ MapContainerFactory.deps = [MapPopoverFactory, MapControlFactory, EditorFactory]
type MapboxStyle = string | object | undefined;
type PropSelector<R> = Selector<MapContainerProps, R>;

interface MapContainerProps {
export interface MapContainerProps {
visState: VisState;
mapState: MapState;
mapControls: MapControls;
Expand Down Expand Up @@ -310,9 +310,9 @@ interface MapContainerProps {
}

export default function MapContainerFactory(
MapPopover,
MapControl,
Editor
MapPopover: ReturnType<typeof MapPopoverFactory>,
MapControl: ReturnType<typeof MapControlFactory>,
Editor: ReturnType<typeof EditorFactory>
): React.ComponentType<MapContainerProps> {
class MapContainer extends Component<MapContainerProps> {
displayName = 'MapContainer';
Expand Down Expand Up @@ -592,7 +592,7 @@ export default function MapContainerFactory(
? interactionConfig.tooltip.config.compareMode
: false;

let pinnedPosition = {};
let pinnedPosition = {x: 0, y: 0};
let layerPinnedProp: LayerHoverProp | null = null;
if (pinned || clicked) {
// project lnglat to screen so that tooltip follows the object on zoom
Expand Down Expand Up @@ -903,11 +903,11 @@ export default function MapContainerFactory(
availableLocales={LOCALE_CODES_ARRAY}
dragRotate={mapState.dragRotate}
isSplit={isSplit}
primary={primary}
primary={Boolean(primary)}
isExport={isExport}
layers={layers}
layersToRender={layersToRender}
mapIndex={index}
mapIndex={index || 0}
mapControls={mapControls}
readOnly={this.props.readOnly}
scale={mapState.scale || 1}
Expand Down Expand Up @@ -941,7 +941,7 @@ export default function MapContainerFactory(
{this._renderDeckOverlay(layersForDeck, {primaryMap: true})}
{this._renderMapboxOverlays()}
<Editor
index={index}
index={index || 0}
datasets={datasets}
editor={editor}
filters={this.polygonFiltersSelector(this.props)}
Expand Down
45 changes: 24 additions & 21 deletions src/components/src/map/map-control.tsx
View file
Expand Up @@ -32,6 +32,7 @@ import LocalePanelFactory from './locale-panel';
import {Layer} from '@kepler.gl/layers';
import {Editor, MapControls, MapState} from '@kepler.gl/types';
import {Datasets} from '@kepler.gl/table';
import {MapStateActions, UIStateActions} from '@kepler.gl/actions';

interface StyledMapControlProps {
top?: number;
Expand Down Expand Up @@ -66,47 +67,49 @@ export type MapControlProps = {
mapIndex: number;
mapControls: MapControls;
onTogglePerspective: () => void;
onToggleSplitMap: () => void;
onToggleSplitMap: typeof MapStateActions.toggleSplitMap;
onToggleSplitMapViewport: ({
isViewportSynced,
isZoomLocked
}: {
isViewportSynced: boolean;
isZoomLocked: boolean;
}) => void;
onMapToggleLayer: (layerId: string) => void;
onToggleMapControl: (control: string) => void;
onSetEditorMode: (mode: string) => void;
onToggleEditorVisibility: () => void;
top: number;
onSetLocale: () => void;
onSetLocale: typeof UIStateActions.setLocale;
locale: string;
logoComponent: React.FC | React.ReactNode;
logoComponent?: React.FC | React.ReactNode;
isExport?: boolean;

// optional
mapState?: MapState;
readOnly?: boolean;
scale?: number;
mapLayers?: {[key: string]: boolean};
editor: Editor;
actionComponents: React.FC[] | React.Component[];
actionComponents?: React.ComponentType<any>[];
mapHeight?: number;
};

MapControlFactory.deps = [
MapDrawPanelFactory,
Toggle3dButtonFactory,
SplitMapButtonFactory,
MapLegendPanelFactory,
Toggle3dButtonFactory,
LayerSelectorPanelFactory,
MapLegendPanelFactory,
MapDrawPanelFactory,
LocalePanelFactory
];

function MapControlFactory(
MapDrawPanel: ReturnType<typeof MapDrawPanelFactory>,
Toggle3dButton: ReturnType<typeof Toggle3dButtonFactory>,
SplitMapButton: ReturnType<typeof SplitMapButtonFactory>,
MapLegendPanel: ReturnType<typeof MapLegendPanelFactory>,
Toggle3dButton: ReturnType<typeof Toggle3dButtonFactory>,
LayerSelectorPanel: ReturnType<typeof LayerSelectorPanelFactory>,
MapLegendPanel: ReturnType<typeof MapLegendPanelFactory>,
MapDrawPanel: ReturnType<typeof MapDrawPanelFactory>,
LocalePanel: ReturnType<typeof LocalePanelFactory>
) {
const DEFAULT_ACTIONS = [
Expand All @@ -118,23 +121,23 @@ function MapControlFactory(
MapLegendPanel
];

/** @type {import('./map-control').MapControl} */
const MapControl: React.FC<MapControlProps> = React.memo(({actionComponents, ...props}) => {
return (
<StyledMapControl className="map-control" top={props.top}>
{actionComponents.map((ActionComponent, index) => (
<ActionComponent key={index} className="map-control-action" {...props} />
))}
</StyledMapControl>
);
});
const MapControl: React.FC<MapControlProps> = React.memo(
({actionComponents = DEFAULT_ACTIONS, ...props}) => {
return (
<StyledMapControl className="map-control" top={props.top}>
{actionComponents.map((ActionComponent, index) => (
<ActionComponent key={index} className="map-control-action" {...props} />
))}
</StyledMapControl>
);
}
);

MapControl.defaultProps = {
isSplit: false,
top: 0,
mapIndex: 0,
logoComponent: LegendLogo,
// @ts-expect-error
actionComponents: DEFAULT_ACTIONS
};

Expand Down
7 changes: 5 additions & 2 deletions src/components/src/map/map-draw-panel.tsx
View file
Expand Up @@ -41,7 +41,10 @@ export type MapDrawPanelProps = {
actionIcons: {[id: string]: React.ComponentType<Partial<BaseProps>>};
};

function MapDrawPanelFactory(MapControlTooltip, MapControlToolbar) {
function MapDrawPanelFactory(
MapControlTooltip: ReturnType<typeof MapControlTooltipFactory>,
MapControlToolbar: ReturnType<typeof MapControlToolbarFactory>
) {
const defaultActionIcons = {
visible: EyeSeen,
hidden: EyeUnseen,
Expand All @@ -50,7 +53,7 @@ function MapDrawPanelFactory(MapControlTooltip, MapControlToolbar) {
innerPolygon: Polygon,
rectangle: Rectangle
};
/** @type {import('./map-draw-panel').MapDrawPanelComponent} */

const MapDrawPanel: React.FC<MapDrawPanelProps> = React.memo(
({
editor,
Expand Down
4 changes: 2 additions & 2 deletions src/components/src/map/map-popover.tsx
View file
Expand Up @@ -30,7 +30,7 @@ import {parseGeoJsonRawFeature} from '@kepler.gl/layers';
import {idToPolygonGeo, generateHashId} from '@kepler.gl/utils';
import {LAYER_TYPES} from '@kepler.gl/constants';
import {LayerHoverProp} from '@kepler.gl/reducers';
import {Feature} from '@kepler.gl/types';
import {Feature, FeatureSelectionContext} from '@kepler.gl/types';

const SELECTABLE_LAYERS: string[] = [LAYER_TYPES.hexagonId, LAYER_TYPES.geojson];
const MAX_WIDTH = 500;
Expand Down Expand Up @@ -228,7 +228,7 @@ export type MapPopoverProps = {
container?: HTMLElement | null;
onClose: () => void;
onSetFeatures: (features: Feature[]) => any;
setSelectedFeature: (feature: Feature, clickContext: object) => any;
setSelectedFeature: (feature: Feature | null, clickContext?: FeatureSelectionContext) => any;
featureCollection?: {
type: string;
features: Feature[];
Expand Down
16 changes: 5 additions & 11 deletions src/components/src/side-panel.tsx
View file
Expand Up @@ -45,7 +45,7 @@ import CustomPanelsFactory from './side-panel/custom-panel';

import styled from 'styled-components';
import get from 'lodash.get';
import {SidePanelProps} from './types';
import {SidePanelProps, SidePanelItem} from './types';

export const StyledSidePanelContent = styled.div`
${props => props.theme.sidePanelScrollBar};
Expand Down Expand Up @@ -101,7 +101,7 @@ export default function SidePanelFactory(
};

// We should defined sidebar panels here but keeping them for backward compatible
const fullPanels = SIDEBAR_PANELS.map(component => ({
const fullPanels: SidePanelItem[] = SIDEBAR_PANELS.map(component => ({
...component,
component: SIDEBAR_COMPONENTS[component.id],
iconComponent: SIDEBAR_ICONS[component.id]
Expand All @@ -110,7 +110,7 @@ export default function SidePanelFactory(
const getCustomPanelProps = get(CustomPanels, ['defaultProps', 'getProps']) || (() => ({}));

// eslint-disable-next-line max-statements
const SidePanel = (props: SidePanelProps) => {
const SidePanel: React.FC<SidePanelProps> = (props: SidePanelProps) => {
const {
appName,
appWebsite,
Expand All @@ -123,7 +123,7 @@ export default function SidePanelFactory(
layerClasses,
layerOrder,
interactionConfig,
panels,
panels = fullPanels,
mapInfo,
mapSaved,
mapStateActions,
Expand Down Expand Up @@ -181,7 +181,7 @@ export default function SidePanelFactory(
() => (hasStorage && mapSaved ? onClickSaveAsToStorage : null),
[hasStorage, mapSaved, onClickSaveAsToStorage]
);
const currentPanel = useMemo(() => panels.find(({id}) => id === activeSidePanel), [
const currentPanel = useMemo(() => panels.find(({id}) => id === activeSidePanel) || null, [
activeSidePanel,
panels
]);
Expand All @@ -190,7 +190,6 @@ export default function SidePanelFactory(
onClickShareMap
]);
const customPanelProps = useMemo(() => getCustomPanelProps(props), [props]);

const PanelComponent = currentPanel?.component;

return (
Expand Down Expand Up @@ -268,11 +267,6 @@ export default function SidePanelFactory(

SidePanel.defaultProps = {
panels: fullPanels,
sidebarComponents: SIDEBAR_COMPONENTS,
uiState: {},
visStateActions: {},
mapStyleActions: {},
uiStateActions: {},
availableProviders: {},
mapInfo: {}
};
Expand Down

0 comments on commit 7fb4cad

Please sign in to comment.