From bf90e32d0c2068ae2d250eea528f1713a298ee3d Mon Sep 17 00:00:00 2001 From: Chris Shaffer Date: Sun, 19 May 2019 14:31:25 -0500 Subject: [PATCH] Remove MapView definitions from @types/react-native - create new react-native-maps module (#35239) * Add initalRegion missing type definition initialRegion is a valid prop in `react-native-maps` but it's definition is missing in the @types. * Corrected typo in initialRegion Corrected `initalRegion` to `initialRegion`. * Removed trailing white space due to Travis fail * removed any reference to MapView in index.d.ts * removed any reference to MapView in legacy-properties.d.ts * Revert "removed any reference to MapView in legacy-properties.d.ts" This reverts commit 157b4a9ec7b3327be9fb3165dd31101df987b868. * Revert "removed any reference to MapView in index.d.ts" This reverts commit e98b539e0155a2b9646f373205fd0e385b78cb6c. * Revert "Removed trailing white space due to Travis fail" This reverts commit 5d28044181c8b73fef3108c8001cc4821b35cd94. * Revert "Corrected typo in initialRegion" This reverts commit 15c79a02cfb6517dccc8bc29e92cde14c66b5ac4. * Revert "Add initalRegion missing type definition" This reverts commit e622788386aa444d96ffd5e68fb526690f1b7c13. * removed all references to deprecated MapView * added full types for react-native-maps, some tests, incompolete tests atm * gitignored package.* files * gitignored package.* files * added missing tslint.json * added header w/updated attributions to contributors from react-native-maps * removed additional attributions * removed ./ in files config tsconfig.json * removed stuff that might conflict with ultra-picky travis * removed stuff that might conflict with ultra-picky travis * copied rn tsconfig.json due to travis conflicts * correct header url * corrected header to not include minor version --- types/react-native-maps/index.d.ts | 492 ++++++++++++++++++++++ types/react-native-maps/tsconfig.json | 17 + types/react-native-maps/tslint.json | 28 ++ types/react-native/index.d.ts | 173 -------- types/react-native/legacy-properties.d.ts | 4 - 5 files changed, 537 insertions(+), 177 deletions(-) create mode 100644 types/react-native-maps/index.d.ts create mode 100644 types/react-native-maps/tsconfig.json create mode 100644 types/react-native-maps/tslint.json diff --git a/types/react-native-maps/index.d.ts b/types/react-native-maps/index.d.ts new file mode 100644 index 0000000000..fda77a6d29 --- /dev/null +++ b/types/react-native-maps/index.d.ts @@ -0,0 +1,492 @@ +// Type definitions for react-native-maps 0.24 +// Project: https://github.com/react-native-community/react-native-maps +// Definitions by: Eloy Durán +// HuHuanming +// Kyle Roach +// Simon Knott +// Tim Wang +// Kamal Mahyuddin +// Naoufal El Yousfi +// Alex Dunne +// Manuel Alabor +// Michele Bombardi +// Tanguy Krotoff +// Alexander T. +// Martin van Dam +// Kacper Wiszczuk +// Ryan Nickel +// Souvik Ghosh +// Cheng Gibson +// Saransh Kataria +// Francesco Moro +// Wojciech Tyczynski +// Chris Shaffer +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.8 + +/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// +// +// USING: these definitions are meant to be used with the TSC compiler target set to at least ES2015. +// +// USAGE EXAMPLES: check the RNTSExplorer project at https://github.com/bgrieder/RNTSExplorer +// +// CONTRIBUTING: please open pull requests +// +// CREDITS: This work is based on an original work made by Bernd Paradies: https://github.com/bparadie +// +/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// + +import * as React from 'react'; +import { Animated, ImageRequireSource, ImageURISource, NativeSyntheticEvent, ViewProperties } from 'react-native'; + +export interface Region { + latitude: number; + longitude: number; + latitudeDelta: number; + longitudeDelta: number; +} + +export interface LatLng { + latitude: number; + longitude: number; +} + +export interface Camera { + center: LatLng; + heading: number; + pitch: number; + zoom: number; + altitude: number; +} + +export interface Point { + x: number; + y: number; +} + +// helper interface +export interface MapEvent + extends NativeSyntheticEvent< + T & { + coordinate: LatLng; + position: Point; + } + > {} + +export type LineCapType = 'butt' | 'round' | 'square'; +export type LineJoinType = 'miter' | 'round' | 'bevel'; + +// ======================================================================= +// AnimatedRegion +// ======================================================================= + +interface AnimatedRegionTimingConfig extends Animated.AnimationConfig, Partial { + easing?: (value: number) => number; + duration?: number; + delay?: number; +} + +interface AnimatedRegionSpringConfig extends Animated.AnimationConfig, Partial { + overshootClamping?: boolean; + restDisplacementThreshold?: number; + restSpeedThreshold?: number; + velocity?: number | Point; + bounciness?: number; + speed?: number; + tension?: number; + friction?: number; + stiffness?: number; + mass?: number; + damping?: number; +} + +export class AnimatedRegion extends Animated.AnimatedWithChildren { + latitude: Animated.Value; + longitude: Animated.Value; + latitudeDelta: Animated.Value; + longitudeDelta: Animated.Value; + + constructor(region?: Region); + + setValue(value: Region): void; + setOffset(offset: Region): void; + flattenOffset(): void; + stopAnimation(callback?: (region: Region) => void): void; + addListener(callback: (region: Region) => void): string; + removeListener(id: string): void; + spring(config: AnimatedRegionSpringConfig): Animated.CompositeAnimation; + timing(config: AnimatedRegionTimingConfig): Animated.CompositeAnimation; +} + +// ======================================================================= +// MapView (default export) +// ======================================================================= + +/** + * takeSnapshot options + */ +export interface SnapshotOptions { + /** optional, when omitted the view-width is used */ + width?: number; + /** optional, when omitted the view-height is used */ + height?: number; + /** __iOS only__, optional region to render */ + region?: Region; + /** image formats, defaults to 'png' */ + format?: 'png' | 'jpg'; + /** image quality: 0..1 (only relevant for jpg, default: 1) */ + quality?: number; + /** result types, defaults to 'file' */ + result?: 'file' | 'base64'; +} + +/** + * onUserLocationChange parameters + */ +export interface EventUserLocation extends NativeSyntheticEvent<{}> { + nativeEvent: { + coordinate: { + latitude: number; + longitude: number; + altitude: number; + timestamp: number; + accuracy: number; + speed: number; + isFromMockProvider: boolean; + }; + }; +} + +/** + * Map style elements. + * @see https://developers.google.com/maps/documentation/ios-sdk/styling#use_a_string_resource + * @see https://developers.google.com/maps/documentation/android-api/styling + */ +export type MapStyleElement = { + featureType?: string; + elementType?: string; + stylers: object[]; +}; + +export type EdgePadding = { + top: Number; + right: Number; + bottom: Number; + left: Number; +}; + +export type EdgeInsets = { + top: Number; + right: Number; + bottom: Number; + left: Number; +}; + +export type KmlMarker = { + id: String; + title: String; + description: String; + coordinate: LatLng; + position: Point; +}; + +/** + * onKmlReady parameter + */ +export interface KmlMapEvent extends NativeSyntheticEvent<{ markers: KmlMarker[] }> {} + +type MapTypes = 'standard' | 'satellite' | 'hybrid' | 'terrain' | 'none' | 'mutedStandard'; + +export interface MapViewProps extends ViewProperties { + provider?: 'google' | null; + customMapStyle?: MapStyleElement[]; + customMapStyleString?: string; + showsUserLocation?: boolean; + userLocationAnnotationTitle?: string; + showsMyLocationButton?: boolean; + followsUserLocation?: boolean; + showsPointsOfInterest?: boolean; + showsCompass?: boolean; + zoomEnabled?: boolean; + zoomTapEnabled?: boolean; + zoomControlEnabled?: boolean; + rotateEnabled?: boolean; + cacheEnabled?: boolean; + loadingEnabled?: boolean; + loadingBackgroundColor?: string; + loadingIndicatorColor?: string; + scrollEnabled?: boolean; + pitchEnabled?: boolean; + toolbarEnabled?: boolean; + moveOnMarkerPress?: boolean; + showsScale?: boolean; + showsBuildings?: boolean; + showsTraffic?: boolean; + showsIndoors?: boolean; + showsIndoorLevelPicker?: boolean; + mapType?: MapTypes; + region?: Region; + initialRegion?: Region; + camera?: Camera; + initialCamera?: Camera; + liteMode?: boolean; + mapPadding?: EdgePadding; + maxDelta?: number; + minDelta?: number; + legalLabelInsets?: EdgeInsets; + compassOffset?: Point; + + onMapReady?: () => void; + onKmlReady?: (values: KmlMapEvent) => void; + onRegionChange?: (region: Region) => void; + onRegionChangeComplete?: (region: Region) => void; + onPress?: (event: MapEvent) => void; + onLongPress?: (event: MapEvent) => void; + onUserLocationChange?: (event: EventUserLocation) => void; + onPanDrag?: (event: MapEvent) => void; + onPoiClick?: (event: MapEvent<{ placeId: string; name: string }>) => void; + onMarkerPress?: (event: MapEvent<{ action: 'marker-press'; id: string }>) => void; + onMarkerSelect?: (event: MapEvent<{ action: 'marker-select'; id: string }>) => void; + onMarkerDeselect?: (event: MapEvent<{ action: 'marker-deselect'; id: string }>) => void; + onCalloutPress?: (event: MapEvent<{ action: 'callout-press' }>) => void; + onMarkerDragStart?: (event: MapEvent) => void; + onMarkerDrag?: (event: MapEvent) => void; + onMarkerDragEnd?: (event: MapEvent) => void; + + minZoomLevel?: number; + maxZoomLevel?: number; + kmlSrc?: string; +} + +export default class MapView extends React.Component { + getCamera(): Promise; + setCamera(camera: Partial): void; + animateCamera(camera: Partial, opts?: { duration?: number }): void; + animateToNavigation(location: LatLng, bearing: number, angle: number, duration?: number): void; + animateToRegion(region: Region, duration?: number): void; + animateToCoordinate(latLng: LatLng, duration?: number): void; + animateToBearing(bearing: number, duration?: number): void; + animateToViewingAngle(angle: number, duration?: number): void; + fitToElements(animated: boolean): void; + fitToSuppliedMarkers(markers: string[], options?: { edgePadding?: EdgePadding; animated?: boolean }): void; + fitToCoordinates(coordinates?: LatLng[], options?: { edgePadding?: EdgePadding; animated?: boolean }): void; + setMapBoundaries(northEast: LatLng, southWest: LatLng): void; + getMapBoundaries(): Promise<{ northEast: LatLng; southWest: LatLng }>; + takeSnapshot(options?: SnapshotOptions): Promise; + pointForCoordinate(coordinate: LatLng): Promise; + coordinateForPoint(point: Point): Promise; +} + +export class MapViewAnimated extends MapView {} + +// ======================================================================= +// Marker +// ======================================================================= + +export interface MarkerProps extends ViewProperties { + identifier?: string; + reuseIdentifier?: string; + title?: string; + description?: string; + image?: ImageURISource | ImageRequireSource; + icon?: ImageURISource | ImageRequireSource; + opacity?: number; + pinColor?: string; + coordinate: LatLng | AnimatedRegion; + centerOffset?: Point; + calloutOffset?: Point; + anchor?: Point; + calloutAnchor?: Point; + flat?: boolean; + draggable?: boolean; + tracksViewChanges?: boolean; + tracksInfoWindowChanges?: boolean; + stopPropagation?: boolean; + onPress?: (event: MapEvent<{ action: 'marker-press'; id: string }>) => void; + onSelect?: (event: MapEvent<{ action: 'marker-select'; id: string }>) => void; + onDeselect?: (event: MapEvent<{ action: 'marker-deselect'; id: string }>) => void; + onCalloutPress?: (event: MapEvent<{ action: 'callout-press' }>) => void; + onDragStart?: (event: MapEvent) => void; + onDrag?: (event: MapEvent) => void; + onDragEnd?: (event: MapEvent) => void; + + rotation?: number; + zIndex?: number; +} + +export class Marker extends React.Component { + /** + * Shows the callout for this marker + */ + showCallout(): void; + /** + * Hides the callout for this marker + */ + hideCallout(): void; + /** + * Redraws the callout for this marker + * __iOS only__ + */ + redrawCallout(): void; + /** + * Animates marker movement. + * __Android only__ + */ + animateMarkerToCoordinate(coordinate: LatLng, duration?: number): void; +} + +export class MarkerAnimated extends Marker {} + +// ======================================================================= +// Callout +// ======================================================================= + +export interface MapCalloutProps extends ViewProperties { + tooltip?: boolean; + onPress?: (event: MapEvent<{ action: 'callout-press' }>) => void; +} + +export class Callout extends React.Component {} + +// ======================================================================= +// CalloutSubview +// ======================================================================= + +export interface MapCalloutSubviewProps extends ViewProperties { + onPress?: (event: MapEvent<{ action: 'callout-inside-press' }>) => void; +} + +export class CalloutSubview extends React.Component {} + +// ======================================================================= +// Polyline +// ======================================================================= + +export interface MapPolylineProps extends ViewProperties { + coordinates: LatLng[]; + onPress?: (event: MapEvent) => void; + tappable?: boolean; + fillColor?: string; + strokeWidth?: number; + strokeColor?: string; + strokeColors?: string[]; + zIndex?: number; + lineCap?: LineCapType; + lineJoin?: LineJoinType; + miterLimit?: number; + geodesic?: boolean; + lineDashPhase?: number; + lineDashPattern?: number[]; +} + +export class Polyline extends React.Component {} + +// ======================================================================= +// Polygon +// ======================================================================= + +export interface MapPolygonProps extends ViewProperties { + coordinates: LatLng[]; + holes?: LatLng[][]; + onPress?: (event: MapEvent) => void; + tappable?: boolean; + strokeWidth?: number; + strokeColor?: string; + fillColor?: string; + zIndex?: number; + lineCap?: LineCapType; + lineJoin?: LineJoinType; + miterLimit?: number; + geodesic?: boolean; + lineDashPhase?: number; + lineDashPattern?: number[]; +} + +export class Polygon extends React.Component {} + +// ======================================================================= +// Circle +// ======================================================================= + +export interface MapCircleProps extends ViewProperties { + center: LatLng; + radius: number; + onPress?: (event: MapEvent) => void; + strokeWidth?: number; + strokeColor?: string; + fillColor?: string; + zIndex?: number; + lineCap?: LineCapType; + lineJoin?: LineJoinType; + miterLimit?: number; + lineDashPhase?: number; + lineDashPattern?: number[]; +} + +export class Circle extends React.Component {} + +// ======================================================================= +// UrlTile & LocalTile +// ======================================================================= + +export interface MapUrlTileProps extends ViewProperties { + urlTemplate: string; + maximumZ?: number; + zIndex?: number; + tileSize?: number; +} + +export class UrlTile extends React.Component {} + +export interface MapLocalTileProps extends ViewProperties { + pathTemplate: string; + tileSize?: number; + zIndex?: number; +} + +export class LocalTile extends React.Component {} + +// ======================================================================= +// WMSTile +// ======================================================================= + +export interface MapWMSTileProps extends ViewProperties { + urlTemplate: string; + maximumZ?: number; + minimumZ?: number; + tileSize: number; + opacity: number; + zIndex?: number; +} + +export class WMSTile extends React.Component {} +// ======================================================================= +// Overlay +// ======================================================================= + +type Coordinate = [number, number]; + +export interface MapOverlayProps extends ViewProperties { + image?: ImageURISource | ImageRequireSource; + bounds: [Coordinate, Coordinate]; +} + +export class Overlay extends React.Component {} + +export class OverlayAnimated extends Overlay {} + +// ======================================================================= +// Constants +// ======================================================================= + +export const MAP_TYPES: { + STANDARD: MapTypes; + SATELLITE: MapTypes; + HYBRID: MapTypes; + TERRAIN: MapTypes; + NONE: MapTypes; + MUTEDSTANDARD: MapTypes; +}; + +export const PROVIDER_DEFAULT: null; +export const PROVIDER_GOOGLE: 'google'; diff --git a/types/react-native-maps/tsconfig.json b/types/react-native-maps/tsconfig.json new file mode 100644 index 0000000000..0308fd1cad --- /dev/null +++ b/types/react-native-maps/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "lib": ["es6"], + "module": "commonjs", + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": false, + "strictFunctionTypes": true, + "baseUrl": "../", + "jsx": "react", + "typeRoots": ["../"], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": ["index.d.ts"] +} diff --git a/types/react-native-maps/tslint.json b/types/react-native-maps/tslint.json new file mode 100644 index 0000000000..74f426298b --- /dev/null +++ b/types/react-native-maps/tslint.json @@ -0,0 +1,28 @@ +{ + "extends": "dtslint/dt.json", + "rules": { + "ban-types": false, + "align": false, + "array-type": false, + "comment-format": false, + "interface-over-type-literal": false, + "jsdoc-format": false, + "max-line-length": false, + "no-declare-current-package": false, + "no-misused-new": false, + "no-consecutive-blank-lines": false, + "no-duplicate-imports": false, + "no-empty-interface": false, + "no-padding": false, + "no-self-import": false, + "no-var": false, + "no-var-keyword": false, + "prefer-declare-function": false, + "prefer-method-signature": false, + "semicolon": false, + "space-within-parens": false, + "strict-export-declare-modifiers": false, + "use-default-type-parameter": false, + "no-unnecessary-generics": false + } +} diff --git a/types/react-native/index.d.ts b/types/react-native/index.d.ts index dd52701e78..f395b5ebac 100644 --- a/types/react-native/index.d.ts +++ b/types/react-native/index.d.ts @@ -4839,179 +4839,6 @@ export class ListView extends ListViewBase { scrollTo: (y?: number | { x?: number; y?: number; animated?: boolean }, x?: number, animated?: boolean) => void; } -export interface MapViewAnnotation { - latitude: number; - longitude: number; - animateDrop?: boolean; - draggable?: boolean; - onDragStateChange?: () => any; - onFocus?: () => any; - onBlur?: () => any; - title?: string; - subtitle?: string; - leftCalloutView?: React.ReactElement; - rightCalloutView?: React.ReactElement; - detailCalloutView?: React.ReactElement; - tintColor?: string; - image?: ImageURISource; - view?: React.ReactElement; - hasLeftCallout?: boolean; - hasRightCallout?: boolean; - onLeftCalloutPress?: () => void; - onRightCalloutPress?: () => void; - id?: string; -} - -export interface MapViewRegion { - latitude: number; - longitude: number; - latitudeDelta?: number; - longitudeDelta?: number; -} - -export interface MapViewOverlay { - coordinates: ({ latitude: number; longitude: number })[]; - lineWidth?: number; - strokeColor?: string; - fillColor?: string; - id?: string; -} - -export interface MapViewProps extends ViewProps { - /** - * If false points of interest won't be displayed on the map. - * Default value is true. - */ - showsPointsOfInterest?: boolean; - - /** - * Map annotations with title/subtitle. - */ - annotations?: MapViewAnnotation[]; - - /** - * If true the map will follow the user's location whenever it changes. - * Note that this has no effect unless showsUserLocation is enabled. - * Default value is true. - */ - followUserLocation?: boolean; - - /** - * Insets for the map's legal label, originally at bottom left of the map. See EdgeInsetsPropType.js for more information. - */ - legalLabelInsets?: Insets; - - /** - * The map type to be displayed. - * standard: standard road map (default) - * satellite: satellite view - * hybrid: satellite view with roads and points of interest overlayed - * - * enum('standard', 'satellite', 'hybrid') - */ - mapType?: "standard" | "satellite" | "hybrid"; - - /** - * Maximum size of area that can be displayed. - */ - maxDelta?: number; - - /** - * Minimum size of area that can be displayed. - */ - minDelta?: number; - - /** - * Map overlays - */ - overlays?: MapViewOverlay[]; - - /** - * If false compass won't be displayed on the map. - * Default value is true. - */ - showsCompass?: boolean; - - /** - * Callback that is called once, when the user taps an annotation. - */ - onAnnotationPress?: () => void; - - /** - * Callback that is called continuously when the user is dragging the map. - */ - onRegionChange?: (region: MapViewRegion) => void; - - /** - * Callback that is called once, when the user is done moving the map. - */ - onRegionChangeComplete?: (region: MapViewRegion) => void; - - /** - * When this property is set to true and a valid camera is associated with the map, - * the camera’s pitch angle is used to tilt the plane of the map. - * - * When this property is set to false, the camera’s pitch angle is ignored and - * the map is always displayed as if the user is looking straight down onto it. - */ - pitchEnabled?: boolean; - - /** - * The region to be displayed by the map. - * The region is defined by the center coordinates and the span of coordinates to display. - */ - region?: MapViewRegion; - - /** - * When this property is set to true and a valid camera is associated with the map, - * the camera’s heading angle is used to rotate the plane of the map around its center point. - * - * When this property is set to false, the camera’s heading angle is ignored and the map is always oriented - * so that true north is situated at the top of the map view - */ - rotateEnabled?: boolean; - - /** - * If false the user won't be able to change the map region being displayed. - * Default value is true. - */ - scrollEnabled?: boolean; - - /** - * If true the app will ask for the user's location and focus on it. - * Default value is false. - * - * NOTE: You need to add NSLocationWhenInUseUsageDescription key in Info.plist to enable geolocation, - * otherwise it is going to fail silently! - */ - showsUserLocation?: boolean; - - /** - * Used to style and layout the MapView. - * See StyleSheet.js and ViewStylePropTypes.js for more info. - */ - style?: StyleProp; - - /** - * If false the user won't be able to pinch/zoom the map. - * Default value is true. - */ - zoomEnabled?: boolean; -} - -/** - * @see https://facebook.github.io/react-native/docs/mapview.html#content - */ -declare class MapViewComponent extends React.Component {} -declare const MapViewBase: Constructor & typeof MapViewComponent; -export class MapView extends MapViewBase { - static PinColors: { - RED: string; - GREEN: string; - PURPLE: string; - }; -} - interface MaskedViewIOSProps extends ViewProps { maskElement: React.ReactElement; } diff --git a/types/react-native/legacy-properties.d.ts b/types/react-native/legacy-properties.d.ts index 1968baabee..fceccde97f 100644 --- a/types/react-native/legacy-properties.d.ts +++ b/types/react-native/legacy-properties.d.ts @@ -51,7 +51,6 @@ import { VirtualizedListProps, SectionListProps, ListViewProps, - MapViewProps, MaskedViewIOSProps, ModalProps, TouchableWithoutFeedbackProps, @@ -232,9 +231,6 @@ declare module "react-native" { /** @deprecated Use ListViewProps */ export type ListViewProperties = ListViewProps; - /** @deprecated Use MapViewProps */ - export type MapViewProperties = MapViewProps; - /** @deprecated Use MaskedViewIOSProps */ export type MaskedViewIOSProperties = MaskedViewIOSProps;