fix(Add lat/lng validation): lat/lng validation done in core-utils/ma…

…p; added support for isRequired

packages/base-map/package.json

@@ -10,7 +10,8 @@
   "dependencies": {
     "leaflet": "^1.6.0",
     "react-leaflet": "^2.6.0",
-    "prop-types": "^15.7.2"
+    "prop-types": "^15.7.2",
+    "core-utils": "0.0.1"
   },
   "peerDependencies": {
     "react": "^16.8.6",

packages/base-map/src/index.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { LayersControl, Map, Popup, TileLayer } from "react-leaflet";
+import { LatlngPropType } from "@opentripplanner/core-utils/lib/react-props";
 import L from "leaflet";
 
 // eslint-disable-next-line func-names
@@ -169,24 +170,6 @@ class BaseMap extends Component {
   }
 }
 
-const twoNumberArrayChecker = (
-  propValue,
-  key,
-  componentName,
-  location,
-  propFullName
-) => {
-  // Source: https://reactjs.org/docs/typechecking-with-proptypes.html#react.proptypes
-  if (
-    !Array.isArray(propValue) ||
-    propValue.length !== 2 ||
-    !Number.isFinite(propValue[key])
-  ) {
-    return new Error(`${propFullName} needs to be an array of two numbers`);
-  }
-  return null;
-};
-
 BaseMap.propTypes = {
   /**
    * Zero, one, or multiple components that extend { MapLayer } from 'react-leaflet'.
@@ -214,7 +197,7 @@ BaseMap.propTypes = {
   /**
    * The center of the map, as a [lat, lng] array.
    */
-  center: PropTypes.arrayOf(twoNumberArrayChecker).isRequired,
+  center: LatlngPropType.isRequired,
   /**
    * The maximum zoom level allowed on the map.
    */
@@ -250,7 +233,7 @@ BaseMap.propTypes = {
   /**
    * The coordinates of the popup object to display, as a [lat, lng] array.
    */
-  popupLocation: PropTypes.arrayOf(twoNumberArrayChecker),
+  popupLocation: LatlngPropType,
   /**
    * The zoom level of the map.
    */

packages/core-utils/src/map.js

@@ -244,3 +244,20 @@ export function itineraryToTransitive(itin) {
 export function isBikeshareStation(place) {
   return place.place_id.lastIndexOf("bicycle_rent_station") !== -1;
 }
+
+export function isValidLat(lat) {
+  return Number.isFinite(lat) && lat >= -90 && lat <= 90;
+}
+
+export function isValidLng(lng) {
+  return Number.isFinite(lng) && lng >= -180 && lng <= 180;
+}
+
+export function isValidLatLng(arr) {
+  return (
+    Array.isArray(arr) &&
+    arr.length === 2 &&
+    isValidLat(arr[0]) &&
+    isValidLng(arr[1])
+  );
+}

packages/core-utils/src/react-props.js

@@ -0,0 +1,36 @@
+import { ReactPropTypeLocationNames } from "react";
+import { isValidLatLng } from "./map";
+
+/**
+ * Utility function to help create chained validators
+ * per https://www.ian-thomas.net/custom-proptype-validation-with-react/
+ * @param {*} validator The validator to use.
+ */
+export function createChainableTypeChecker(validator) {
+  function checkType(isRequired, props, propName, componentName, location) {
+    componentName = componentName || "ANONYMOUS";
+    if (props[propName] == null) {
+      if (isRequired) {
+        const locationName = ReactPropTypeLocationNames[location];
+        return new Error(
+          `Required '${locationName}/${propName}' was not specified in '${componentName}'.`
+        );
+      }
+      return null;
+    }
+    return validator(props, propName, componentName, location);
+  }
+
+  const chainedCheckType = checkType.bind(null, false);
+  chainedCheckType.isRequired = checkType.bind(null, true);
+
+  return chainedCheckType;
+}
+
+export const LatlngPropType = createChainableTypeChecker((props, propName) => {
+  // Source: https://reactjs.org/docs/typechecking-with-proptypes.html#react.proptypes
+  if (!isValidLatLng(props[propName])) {
+    return new Error(`${propName} needs to be a [lat, lng] array`);
+  }
+  return null;
+});