@map-colonies/react-components 3.12.2 → 3.13.0

package/src/lib/models/defaults.ts

@@ -1,32 +1,32 @@
-import { SupportedLocales } from './enums';
-
-const DEFAULTS = {
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  DATE_PICKER: {
-    dateFormat: 'dd/MM/yyyy',
-    local: {
-      setText: 'set',
-      placeHolderText: 'Enter the Date',
-      calendarLocale: SupportedLocales.EN,
-    },
-    disableFuture: true,
-    showTime: false,
-    variant: 'inline',
-  },
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  DATE_RANGE_PICKER: {
-    dateFormat: 'dd/MM/yyyy HH:mm',
-    controlsLayout: 'row',
-    local: {
-      setText: 'set',
-      startPlaceHolderText: 'Start of time',
-      endPlaceHolderText: 'End of time',
-      calendarLocale: SupportedLocales.EN,
-    },
-    renderAsButton: true,
-    offset: 0,
-    disableFuture: true,
-  },
-};
-
-export default DEFAULTS;
+import { SupportedLocales } from './enums';
+
+const DEFAULTS = {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  DATE_PICKER: {
+    dateFormat: 'dd/MM/yyyy',
+    local: {
+      setText: 'set',
+      placeHolderText: 'Enter the Date',
+      calendarLocale: SupportedLocales.EN,
+    },
+    disableFuture: true,
+    showTime: false,
+    variant: 'inline',
+  },
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  DATE_RANGE_PICKER: {
+    dateFormat: 'dd/MM/yyyy HH:mm',
+    controlsLayout: 'row',
+    local: {
+      setText: 'set',
+      startPlaceHolderText: 'Start of time',
+      endPlaceHolderText: 'End of time',
+      calendarLocale: SupportedLocales.EN,
+    },
+    renderAsButton: true,
+    offset: 0,
+    disableFuture: true,
+  },
+};
+
+export default DEFAULTS;

package/src/lib/models/enums.ts

@@ -1,16 +1,16 @@
-export enum DrawType {
-  BOX = 'BOX',
-  POLYGON = 'POLYGON',
-  UNKNOWN = 'UNKNOWN',
-}
-
-export enum SupportedLocales {
-  HE = 'he',
-  EN = 'en',
-  RU = 'ru',
-}
-
-export enum BboxCorner {
-  TOP_RIGHT = 'TOP_RIGHT',
-  BOTTOM_LEFT = 'BOTTOM_LEFT',
-}
+export enum DrawType {
+  BOX = 'BOX',
+  POLYGON = 'POLYGON',
+  UNKNOWN = 'UNKNOWN',
+}
+
+export enum SupportedLocales {
+  HE = 'he',
+  EN = 'en',
+  RU = 'ru',
+}
+
+export enum BboxCorner {
+  TOP_RIGHT = 'TOP_RIGHT',
+  BOTTOM_LEFT = 'BOTTOM_LEFT',
+}

package/src/lib/models/index.ts

@@ -1 +1 @@
-export * from './enums';
+export * from './enums';

package/src/lib/ol-map/feature.tsx

@@ -1,23 +1,23 @@
-import React, { useEffect } from 'react';
-import { Geometry } from 'geojson';
-import { GeoJSON } from 'ol/format';
-import { useVectorSource } from './source/vector-source';
-
-export interface FeatureProps {
-  geometry: Geometry;
-}
-
-export const GeoJSONFeature: React.FC<FeatureProps> = ({ geometry }) => {
-  const source = useVectorSource();
-
-  useEffect(() => {
-    const geoJSON = new GeoJSON();
-    const feature = geoJSON.readFeature(geometry);
-    source.addFeature(feature);
-    return (): void => {
-      source.removeFeature(feature);
-    };
-  }, [geometry, source]);
-
-  return null;
-};
+import React, { useEffect } from 'react';
+import { Geometry } from 'geojson';
+import { GeoJSON } from 'ol/format';
+import { useVectorSource } from './source/vector-source';
+
+export interface FeatureProps {
+  geometry: Geometry;
+}
+
+export const GeoJSONFeature: React.FC<FeatureProps> = ({ geometry }) => {
+  const source = useVectorSource();
+
+  useEffect(() => {
+    const geoJSON = new GeoJSON();
+    const feature = geoJSON.readFeature(geometry);
+    source.addFeature(feature);
+    return (): void => {
+      source.removeFeature(feature);
+    };
+  }, [geometry, source]);
+
+  return null;
+};

package/src/lib/ol-map/index.ts

@@ -1,6 +1,6 @@
-export * from './interactions';
-export * from './layers';
-export * from './source';
-export * from './feature';
-export * from './map';
-export * from '../utils/projections';
+export * from './interactions';
+export * from './layers';
+export * from './source';
+export * from './feature';
+export * from './map';
+export * from '../utils/projections';

package/src/lib/ol-map/interactions/draw.tsx

@@ -1,56 +1,56 @@
-import React, { useEffect } from 'react';
-import { Draw } from 'ol/interaction';
-import {
-  createBox,
-  DrawEvent,
-  Options as DrawOptions,
-} from 'ol/interaction/Draw';
-import GeometryType from 'ol/geom/GeometryType';
-import { GeoJSON } from 'ol/format';
-import { Geometry } from 'geojson';
-import { useMap } from '../map';
-import { DrawType } from '../../models/enums';
-
-export interface DrawProps {
-  drawType: DrawType;
-  onPolygonSelected?: (geometry: Geometry) => void;
-}
-
-export const DrawInteraction: React.FC<DrawProps> = ({
-  drawType,
-  onPolygonSelected,
-}) => {
-  const map = useMap();
-
-  useEffect(() => {
-    const options: DrawOptions = { type: GeometryType.CIRCLE };
-    switch (drawType) {
-      case DrawType.BOX:
-        options.geometryFunction = createBox();
-        break;
-      case DrawType.POLYGON:
-        options.type = GeometryType.POLYGON;
-        break;
-      default:
-        return;
-    }
-
-    const draw = new Draw(options);
-    map.addInteraction(draw);
-
-    const onDrawEnd = (e: DrawEvent): void => {
-      const geoJson = new GeoJSON();
-      const geom = geoJson.writeGeometryObject(e.feature.getGeometry());
-      onPolygonSelected?.(geom);
-    };
-
-    draw.on('drawend', onDrawEnd);
-
-    return (): void => {
-      draw.un('drawend', onDrawEnd);
-      map.removeInteraction(draw);
-    };
-  }, [onPolygonSelected, drawType, map]);
-
-  return null;
-};
+import React, { useEffect } from 'react';
+import { Draw } from 'ol/interaction';
+import {
+  createBox,
+  DrawEvent,
+  Options as DrawOptions,
+} from 'ol/interaction/Draw';
+import GeometryType from 'ol/geom/GeometryType';
+import { GeoJSON } from 'ol/format';
+import { Geometry } from 'geojson';
+import { useMap } from '../map';
+import { DrawType } from '../../models/enums';
+
+export interface DrawProps {
+  drawType: DrawType;
+  onPolygonSelected?: (geometry: Geometry) => void;
+}
+
+export const DrawInteraction: React.FC<DrawProps> = ({
+  drawType,
+  onPolygonSelected,
+}) => {
+  const map = useMap();
+
+  useEffect(() => {
+    const options: DrawOptions = { type: GeometryType.CIRCLE };
+    switch (drawType) {
+      case DrawType.BOX:
+        options.geometryFunction = createBox();
+        break;
+      case DrawType.POLYGON:
+        options.type = GeometryType.POLYGON;
+        break;
+      default:
+        return;
+    }
+
+    const draw = new Draw(options);
+    map.addInteraction(draw);
+
+    const onDrawEnd = (e: DrawEvent): void => {
+      const geoJson = new GeoJSON();
+      const geom = geoJson.writeGeometryObject(e.feature.getGeometry());
+      onPolygonSelected?.(geom);
+    };
+
+    draw.on('drawend', onDrawEnd);
+
+    return (): void => {
+      draw.un('drawend', onDrawEnd);
+      map.removeInteraction(draw);
+    };
+  }, [onPolygonSelected, drawType, map]);
+
+  return null;
+};

package/src/lib/ol-map/interactions/index.ts

@@ -1 +1 @@
-export * from './draw';
+export * from './draw';

package/src/lib/ol-map/layers/index.ts

@@ -1,3 +1,3 @@
-export * from './tile-layer';
-export * from './vector-layer';
-export * from './vector-tile-layer';
+export * from './tile-layer';
+export * from './vector-layer';
+export * from './vector-tile-layer';

package/src/lib/ol-map/layers/tile-layer.tsx

@@ -1,36 +1,36 @@
-import React, { useEffect, useState, createContext, useContext } from 'react';
-import { Tile } from 'ol/layer';
-import { Options } from 'ol/layer/Base';
-import { useMap } from '../map';
-
-const tileLayerContext = createContext<Tile | null>(null);
-const TileLayerProvider = tileLayerContext.Provider;
-
-interface TileLayerProps {
-  options?: Options;
-}
-
-export const useTileLayer = (): Tile => {
-  const layer = useContext(tileLayerContext);
-
-  if (layer === null) {
-    throw new Error('tile layer context is null, please check the provider');
-  }
-
-  return layer;
-};
-
-export const TileLayer: React.FC<TileLayerProps> = ({ options, children }) => {
-  const map = useMap();
-  const [tileLayer] = useState(new Tile(options));
-
-  useEffect(() => {
-    map.addLayer(tileLayer);
-
-    return (): void => {
-      map.removeLayer(tileLayer);
-    };
-  }, [map, tileLayer]);
-
-  return <TileLayerProvider value={tileLayer}>{children}</TileLayerProvider>;
-};
+import React, { useEffect, useState, createContext, useContext } from 'react';
+import { Tile } from 'ol/layer';
+import { Options } from 'ol/layer/Base';
+import { useMap } from '../map';
+
+const tileLayerContext = createContext<Tile | null>(null);
+const TileLayerProvider = tileLayerContext.Provider;
+
+interface TileLayerProps {
+  options?: Options;
+}
+
+export const useTileLayer = (): Tile => {
+  const layer = useContext(tileLayerContext);
+
+  if (layer === null) {
+    throw new Error('tile layer context is null, please check the provider');
+  }
+
+  return layer;
+};
+
+export const TileLayer: React.FC<TileLayerProps> = ({ options, children }) => {
+  const map = useMap();
+  const [tileLayer] = useState(new Tile(options));
+
+  useEffect(() => {
+    map.addLayer(tileLayer);
+
+    return (): void => {
+      map.removeLayer(tileLayer);
+    };
+  }, [map, tileLayer]);
+
+  return <TileLayerProvider value={tileLayer}>{children}</TileLayerProvider>;
+};

package/src/lib/ol-map/layers/vector-layer.tsx

@@ -1,32 +1,32 @@
-import React, { useEffect, useState, createContext, useContext } from 'react';
-import { Vector } from 'ol/layer';
-import { useMap } from '../map';
-
-const vectorLayerContext = createContext<Vector | null>(null);
-const VectorLayerProvider = vectorLayerContext.Provider;
-
-export const useVectorLayer = (): Vector => {
-  const layer = useContext(vectorLayerContext);
-
-  if (layer === null) {
-    throw new Error('vector layer context is null, please check the provider');
-  }
-
-  return layer;
-};
-
-export const VectorLayer: React.FC = ({ children }) => {
-  const map = useMap();
-  const [vectorLayer] = useState(new Vector());
-
-  useEffect(() => {
-    map.addLayer(vectorLayer);
-    return (): void => {
-      map.removeLayer(vectorLayer);
-    };
-  }, [map, vectorLayer]);
-
-  return (
-    <VectorLayerProvider value={vectorLayer}>{children}</VectorLayerProvider>
-  );
-};
+import React, { useEffect, useState, createContext, useContext } from 'react';
+import { Vector } from 'ol/layer';
+import { useMap } from '../map';
+
+const vectorLayerContext = createContext<Vector | null>(null);
+const VectorLayerProvider = vectorLayerContext.Provider;
+
+export const useVectorLayer = (): Vector => {
+  const layer = useContext(vectorLayerContext);
+
+  if (layer === null) {
+    throw new Error('vector layer context is null, please check the provider');
+  }
+
+  return layer;
+};
+
+export const VectorLayer: React.FC = ({ children }) => {
+  const map = useMap();
+  const [vectorLayer] = useState(new Vector());
+
+  useEffect(() => {
+    map.addLayer(vectorLayer);
+    return (): void => {
+      map.removeLayer(vectorLayer);
+    };
+  }, [map, vectorLayer]);
+
+  return (
+    <VectorLayerProvider value={vectorLayer}>{children}</VectorLayerProvider>
+  );
+};

package/src/lib/ol-map/layers/vector-tile-layer.tsx

@@ -1,56 +1,56 @@
-import React, { useEffect, useState, createContext, useContext } from 'react';
-import VectorTile from 'ol/layer/VectorTile';
-import { Options } from 'ol/layer/Base';
-import { useMap } from '../map';
-import { MapStyle, defaultStyle } from '../style';
-
-export interface VectorTileLayerProps {
-  options?: Options;
-  style?: MapStyle;
-}
-
-const vectorTileLayerContext = createContext<VectorTile | null>(null);
-const VectorTileLayerProvider = vectorTileLayerContext.Provider;
-
-export const useVectorTileLayer = (): VectorTile => {
-  const layer = useContext(vectorTileLayerContext);
-
-  if (layer === null) {
-    throw new Error(
-      'vector tile layer context is null, please check the provider'
-    );
-  }
-
-  return layer;
-};
-
-export const VectorTileLayer: React.FC<VectorTileLayerProps> = ({
-  children,
-  options,
-  style,
-}) => {
-  const map = useMap();
-  const [vectorTileLayer] = useState(
-    new VectorTile({
-      ...options,
-      style: style ? style : defaultStyle,
-    })
-  );
-
-  useEffect(() => {
-    map.addLayer(vectorTileLayer);
-    return (): void => {
-      map.removeLayer(vectorTileLayer);
-    };
-  }, [map, vectorTileLayer]);
-
-  useEffect(() => {
-    vectorTileLayer.setStyle(style ? style : defaultStyle);
-  }, [vectorTileLayer, style]);
-
-  return (
-    <VectorTileLayerProvider value={vectorTileLayer}>
-      {children}
-    </VectorTileLayerProvider>
-  );
-};
+import React, { useEffect, useState, createContext, useContext } from 'react';
+import VectorTile from 'ol/layer/VectorTile';
+import { Options } from 'ol/layer/Base';
+import { useMap } from '../map';
+import { MapStyle, defaultStyle } from '../style';
+
+export interface VectorTileLayerProps {
+  options?: Options;
+  style?: MapStyle;
+}
+
+const vectorTileLayerContext = createContext<VectorTile | null>(null);
+const VectorTileLayerProvider = vectorTileLayerContext.Provider;
+
+export const useVectorTileLayer = (): VectorTile => {
+  const layer = useContext(vectorTileLayerContext);
+
+  if (layer === null) {
+    throw new Error(
+      'vector tile layer context is null, please check the provider'
+    );
+  }
+
+  return layer;
+};
+
+export const VectorTileLayer: React.FC<VectorTileLayerProps> = ({
+  children,
+  options,
+  style,
+}) => {
+  const map = useMap();
+  const [vectorTileLayer] = useState(
+    new VectorTile({
+      ...options,
+      style: style ? style : defaultStyle,
+    })
+  );
+
+  useEffect(() => {
+    map.addLayer(vectorTileLayer);
+    return (): void => {
+      map.removeLayer(vectorTileLayer);
+    };
+  }, [map, vectorTileLayer]);
+
+  useEffect(() => {
+    vectorTileLayer.setStyle(style ? style : defaultStyle);
+  }, [vectorTileLayer, style]);
+
+  return (
+    <VectorTileLayerProvider value={vectorTileLayer}>
+      {children}
+    </VectorTileLayerProvider>
+  );
+};

package/src/lib/ol-map/map.css

@@ -1,17 +1,17 @@
-.map {
-  height: 100%;
-  width: 100%;
-}
-
-.ol-mouse-position {
-  top: auto !important;
-  right: auto !important;
-  bottom: 8px;
-  left: 8px;
-  background-color: white;
-  opacity: 0.7;
-  font-size: 12px;
-  padding: 2px 2px;
-  border-radius: 2px;
-}
-/* @import '../../../../node_modules/ol/ol.css'; */
+.map {
+  height: 100%;
+  width: 100%;
+}
+
+.ol-mouse-position {
+  top: auto !important;
+  right: auto !important;
+  bottom: 8px;
+  left: 8px;
+  background-color: white;
+  opacity: 0.7;
+  font-size: 12px;
+  padding: 2px 2px;
+  border-radius: 2px;
+}
+/* @import '../../../../node_modules/ol/ol.css'; */