@map-colonies/react-components 3.12.0 → 3.12.2

package/src/lib/ol-map/source/wmts.tsx

@@ -1,82 +1,82 @@
-import React, { useEffect } from 'react';
-import { WMTS } from 'ol/source';
-import { Options } from 'ol/source/WMTS';
-import WMTSRequestEncoding from 'ol/source/WMTSRequestEncoding';
-import { get as getProjection } from 'ol/proj';
-import WMTSTileGrid from 'ol/tilegrid/WMTS';
-import { getTopLeft, getWidth } from 'ol/extent';
-import { useTileLayer } from '../layers/tile-layer';
-
-const RESOLUTIONS = 20,
-  TILE_GRANULARITY = 256,
-  WMTS_RESOLUTION_BASIS = 2,
-  LAYER_HEIGHT_WIDHT_RATIO = 2,
-  REQUEST_ENCODING = 'REST';
-
-interface TileWMTSProps {
-  options: Options;
-}
-
-export interface WMTSOptionParams {
-  attributions?: string;
-  url: string;
-  layer: string;
-  projection: string;
-  format: string;
-  style: string;
-  matrixSet: string;
-  wrapX?: boolean;
-  heightWidthRatio?: number;
-  requestEncoding?: WMTSRequestEncoding | string;
-}
-
-export const getWMTSOptions = (params: WMTSOptionParams): Options => {
-  const projection = getProjection(params.projection);
-  const projectionExtent = projection.getExtent();
-  const resolutions = new Array<number>(RESOLUTIONS);
-  const matrixIds = new Array<string>(RESOLUTIONS);
-  const size = getWidth(projectionExtent) / TILE_GRANULARITY;
-  const heightWidthRatio =
-    params.heightWidthRatio !== undefined
-      ? params.heightWidthRatio
-      : LAYER_HEIGHT_WIDHT_RATIO;
-  const requestEncoding =
-    params.requestEncoding !== undefined
-      ? params.requestEncoding
-      : REQUEST_ENCODING;
-  for (let z = 0; z < RESOLUTIONS; ++z) {
-    // generate resolutions and matrixIds arrays for this WMTS
-    resolutions[z] =
-      size / Math.pow(WMTS_RESOLUTION_BASIS, z) / heightWidthRatio;
-    matrixIds[z] = z.toString();
-  }
-
-  const wmtsOptions = {
-    attributions: params.attributions,
-    url: params.url,
-    layer: params.layer,
-    matrixSet: params.matrixSet,
-    format: params.format,
-    projection: projection,
-    tileGrid: new WMTSTileGrid({
-      origin: getTopLeft(projectionExtent),
-      resolutions: resolutions,
-      matrixIds: matrixIds,
-    }),
-    style: params.style,
-    requestEncoding: requestEncoding,
-    wrapX: params.wrapX !== undefined ? params.wrapX : true,
-  };
-
-  return wmtsOptions;
-};
-export const TileWMTS: React.FC<TileWMTSProps> = (props) => {
-  const tileLayer = useTileLayer();
-  const { options } = props;
-
-  useEffect(() => {
-    tileLayer.setSource(new WMTS(options));
-  }, [tileLayer, options]);
-
-  return null;
-};
+import React, { useEffect } from 'react';
+import { WMTS } from 'ol/source';
+import { Options } from 'ol/source/WMTS';
+import WMTSRequestEncoding from 'ol/source/WMTSRequestEncoding';
+import { get as getProjection } from 'ol/proj';
+import WMTSTileGrid from 'ol/tilegrid/WMTS';
+import { getTopLeft, getWidth } from 'ol/extent';
+import { useTileLayer } from '../layers/tile-layer';
+
+const RESOLUTIONS = 20,
+  TILE_GRANULARITY = 256,
+  WMTS_RESOLUTION_BASIS = 2,
+  LAYER_HEIGHT_WIDHT_RATIO = 2,
+  REQUEST_ENCODING = 'REST';
+
+interface TileWMTSProps {
+  options: Options;
+}
+
+export interface WMTSOptionParams {
+  attributions?: string;
+  url: string;
+  layer: string;
+  projection: string;
+  format: string;
+  style: string;
+  matrixSet: string;
+  wrapX?: boolean;
+  heightWidthRatio?: number;
+  requestEncoding?: WMTSRequestEncoding | string;
+}
+
+export const getWMTSOptions = (params: WMTSOptionParams): Options => {
+  const projection = getProjection(params.projection);
+  const projectionExtent = projection.getExtent();
+  const resolutions = new Array<number>(RESOLUTIONS);
+  const matrixIds = new Array<string>(RESOLUTIONS);
+  const size = getWidth(projectionExtent) / TILE_GRANULARITY;
+  const heightWidthRatio =
+    params.heightWidthRatio !== undefined
+      ? params.heightWidthRatio
+      : LAYER_HEIGHT_WIDHT_RATIO;
+  const requestEncoding =
+    params.requestEncoding !== undefined
+      ? params.requestEncoding
+      : REQUEST_ENCODING;
+  for (let z = 0; z < RESOLUTIONS; ++z) {
+    // generate resolutions and matrixIds arrays for this WMTS
+    resolutions[z] =
+      size / Math.pow(WMTS_RESOLUTION_BASIS, z) / heightWidthRatio;
+    matrixIds[z] = z.toString();
+  }
+
+  const wmtsOptions = {
+    attributions: params.attributions,
+    url: params.url,
+    layer: params.layer,
+    matrixSet: params.matrixSet,
+    format: params.format,
+    projection: projection,
+    tileGrid: new WMTSTileGrid({
+      origin: getTopLeft(projectionExtent),
+      resolutions: resolutions,
+      matrixIds: matrixIds,
+    }),
+    style: params.style,
+    requestEncoding: requestEncoding,
+    wrapX: params.wrapX !== undefined ? params.wrapX : true,
+  };
+
+  return wmtsOptions;
+};
+export const TileWMTS: React.FC<TileWMTSProps> = (props) => {
+  const tileLayer = useTileLayer();
+  const { options } = props;
+
+  useEffect(() => {
+    tileLayer.setSource(new WMTS(options));
+  }, [tileLayer, options]);
+
+  return null;
+};

package/src/lib/ol-map/source/xyz.tsx

@@ -1,33 +1,33 @@
-import React, { useEffect } from 'react';
-import OlXYZ, { Options } from 'ol/source/XYZ';
-import { useTileLayer } from '../layers/tile-layer';
-
-interface TileXYZProps {
-  options: Options;
-}
-
-export interface XYZOptionParams {
-  attributions?: string;
-  url: string;
-}
-
-export const getXYZOptions = (optionParams: XYZOptionParams): Options => {
-  const { attributions, url } = optionParams;
-
-  const xyzOptions = {
-    attributions,
-    url,
-  };
-
-  return xyzOptions;
-};
-export const TileXYZ: React.FC<TileXYZProps> = (props) => {
-  const tileLayer = useTileLayer();
-  const { options } = props;
-
-  useEffect(() => {
-    tileLayer.setSource(new OlXYZ(options));
-  }, [tileLayer, options]);
-
-  return null;
-};
+import React, { useEffect } from 'react';
+import OlXYZ, { Options } from 'ol/source/XYZ';
+import { useTileLayer } from '../layers/tile-layer';
+
+interface TileXYZProps {
+  options: Options;
+}
+
+export interface XYZOptionParams {
+  attributions?: string;
+  url: string;
+}
+
+export const getXYZOptions = (optionParams: XYZOptionParams): Options => {
+  const { attributions, url } = optionParams;
+
+  const xyzOptions = {
+    attributions,
+    url,
+  };
+
+  return xyzOptions;
+};
+export const TileXYZ: React.FC<TileXYZProps> = (props) => {
+  const tileLayer = useTileLayer();
+  const { options } = props;
+
+  useEffect(() => {
+    tileLayer.setSource(new OlXYZ(options));
+  }, [tileLayer, options]);
+
+  return null;
+};

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

@@ -1,60 +1,60 @@
-import React from 'react';
-import { Story, Meta } from '@storybook/react/types-6-0';
-import { Map } from '../map';
-import { TileOsm } from '../source';
-import { TileLayer } from '../layers';
-import { Proj } from '../../utils/projections';
-
-export default {
-  title: 'Map',
-  component: Map,
-  parameters: {
-    layout: 'fullscreen',
-  },
-} as Meta;
-
-const mapDivStyle = {
-  height: '100%',
-  width: '100%',
-  position: 'absolute' as const,
-};
-
-export const BaseMap: Story = (args: unknown) => (
-  <div style={mapDivStyle}>
-    <Map {...args}>
-      <TileLayer>
-        <TileOsm />
-      </TileLayer>
-    </Map>
-  </div>
-);
-
-BaseMap.argTypes = {
-  projection: {
-    defaultValue: Proj.WGS84,
-    control: {
-      type: 'radio',
-      options: [Proj.WEB_MERCATOR, Proj.WGS84],
-    },
-  },
-  zoom: {
-    defaultValue: 3,
-    control: {
-      type: 'range',
-      min: 0,
-      max: 20,
-    },
-  },
-};
-
-export const ConfiguredMap: Story = () => (
-  <div style={mapDivStyle}>
-    <Map zoom={3} center={[0, 0]}>
-      <TileLayer>
-        <TileOsm />
-      </TileLayer>
-    </Map>
-  </div>
-);
-
-ConfiguredMap.storyName = 'with zoom and center';
+import React from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { Map } from '../map';
+import { TileOsm } from '../source';
+import { TileLayer } from '../layers';
+import { Proj } from '../../utils/projections';
+
+export default {
+  title: 'Map',
+  component: Map,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as Meta;
+
+const mapDivStyle = {
+  height: '100%',
+  width: '100%',
+  position: 'absolute' as const,
+};
+
+export const BaseMap: Story = (args: unknown) => (
+  <div style={mapDivStyle}>
+    <Map {...args}>
+      <TileLayer>
+        <TileOsm />
+      </TileLayer>
+    </Map>
+  </div>
+);
+
+BaseMap.argTypes = {
+  projection: {
+    defaultValue: Proj.WGS84,
+    control: {
+      type: 'radio',
+      options: [Proj.WEB_MERCATOR, Proj.WGS84],
+    },
+  },
+  zoom: {
+    defaultValue: 3,
+    control: {
+      type: 'range',
+      min: 0,
+      max: 20,
+    },
+  },
+};
+
+export const ConfiguredMap: Story = () => (
+  <div style={mapDivStyle}>
+    <Map zoom={3} center={[0, 0]}>
+      <TileLayer>
+        <TileOsm />
+      </TileLayer>
+    </Map>
+  </div>
+);
+
+ConfiguredMap.storyName = 'with zoom and center';

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

@@ -1,24 +1,24 @@
-import { Fill, Stroke, Circle, Style } from 'ol/style';
-import { StyleFunction } from 'ol/style/Style';
-
-const fill = new Fill({
-  color: 'rgba(255,255,255,0.4)',
-});
-const stroke = new Stroke({
-  color: '#3399CC',
-  width: 1.25,
-});
-
-export type MapStyle = Style | Style[] | StyleFunction;
-
-export const defaultStyle = [
-  new Style({
-    image: new Circle({
-      fill: fill,
-      stroke: stroke,
-      radius: 5,
-    }),
-    fill: fill,
-    stroke: stroke,
-  }),
-];
+import { Fill, Stroke, Circle, Style } from 'ol/style';
+import { StyleFunction } from 'ol/style/Style';
+
+const fill = new Fill({
+  color: 'rgba(255,255,255,0.4)',
+});
+const stroke = new Stroke({
+  color: '#3399CC',
+  width: 1.25,
+});
+
+export type MapStyle = Style | Style[] | StyleFunction;
+
+export const defaultStyle = [
+  new Style({
+    image: new Circle({
+      fill: fill,
+      stroke: stroke,
+      radius: 5,
+    }),
+    fill: fill,
+    stroke: stroke,
+  }),
+];

package/src/lib/popover/index.ts

@@ -1 +1 @@
-export { McPopover as Popover } from './popover';
+export { McPopover as Popover } from './popover';

package/src/lib/popover/popover.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import { Popover, PopoverProps } from '@material-ui/core';
-
-export const McPopover: React.FC<PopoverProps> = (props) => {
-  const { children, ...rest } = props;
-  return <Popover {...rest}>{children}</Popover>;
-};
+import React from 'react';
+import { Popover, PopoverProps } from '@material-ui/core';
+
+export const McPopover: React.FC<PopoverProps> = (props) => {
+  const { children, ...rest } = props;
+  return <Popover {...rest}>{children}</Popover>;
+};

package/src/lib/smart-table/__mock-data__/smartTableMocks.ts

@@ -1,22 +1,22 @@
-import { CellMetadata } from '../smart-table-types';
-
-export interface Item {
-  first: string;
-  second: number;
-}
-
-export const headCells: CellMetadata<Item>[] = [
-  {
-    disablePadding: true,
-    id: 'first',
-    label: 'first',
-    numeric: false,
-    transform: jest.fn().mockReturnValue('42'),
-  },
-  { disablePadding: false, id: 'second', label: 'second', numeric: true },
-];
-
-export const items: Item[] = [
-  { first: 'a', second: 1 },
-  { first: 'b', second: 2 },
-];
+import { CellMetadata } from '../smart-table-types';
+
+export interface Item {
+  first: string;
+  second: number;
+}
+
+export const headCells: CellMetadata<Item>[] = [
+  {
+    disablePadding: true,
+    id: 'first',
+    label: 'first',
+    numeric: false,
+    transform: jest.fn().mockReturnValue('42'),
+  },
+  { disablePadding: false, id: 'second', label: 'second', numeric: true },
+];
+
+export const items: Item[] = [
+  { first: 'a', second: 1 },
+  { first: 'b', second: 2 },
+];

package/src/lib/smart-table/index.ts

@@ -1,2 +1,2 @@
-export * from './smart-table';
-export * from './smart-table-types';
+export * from './smart-table';
+export * from './smart-table-types';