@map-colonies/react-components 3.12.2 → 3.13.0

package/src/lib/cesium-map/tools/terranian-height.tool.tsx

@@ -1,171 +1,171 @@
-import React, { ChangeEvent } from 'react';
-import {
-  Cartesian2,
-  Ellipsoid,
-  Color as CesiumColor,
-  LabelStyle as CesiumLabelStyle,
-  VerticalOrigin as CesiumVerticalOrigin,
-  Cartographic,
-  sampleTerrainMostDetailed,
-} from 'cesium';
-import { CesiumViewer, useCesiumMap } from '../map';
-
-interface IParsedData {
-  cartographic: Cartographic;
-  cartesian: Cartesian2;
-}
-
-const LABEL_PIXEL_OFFSET = -25;
-const FIRST_DATA_ROW_IDX = 2;
-
-export interface TerrainianHeightProps {}
-
-export const TerrainianHeightTool: React.FC<TerrainianHeightProps> = (
-  props
-) => {
-  const mapViewer: CesiumViewer = useCesiumMap();
-
-  const csvToArray = (str: string, delimiter = ','): IParsedData[] => {
-    // const headers = str.slice(0, str.indexOf('\n')).split(delimiter);
-    const rows = str.slice(str.indexOf('\n') + 1).split('\n');
-
-    const arr = rows.map((row) => {
-      const values = row.split(delimiter);
-      const el = Cartographic.fromDegrees(
-        parseFloat(values[0]),
-        parseFloat(values[1])
-      );
-      // const el = headers.reduce((object: Record<string, number>, header, index) => {
-      //   const trimmedHeader = header.trim();
-      //   object[trimmedHeader] = parseFloat(values[index]);
-      //   return object;
-      // }, {});
-
-      //return el;
-      return {
-        cartographic: el,
-        cartesian: new Cartesian2(parseFloat(values[0]), parseFloat(values[1])),
-      };
-    });
-
-    return arr;
-  };
-
-  const loadCSV = (evt: ChangeEvent<HTMLInputElement>): void => {
-    evt.preventDefault();
-    evt.persist();
-    const reader = new FileReader();
-
-    reader.onload = (e: ProgressEvent<FileReader>): any => {
-      const text = e.target?.result;
-      const parsed = csvToArray(text as string);
-      const ellipsoid = Ellipsoid.WGS84;
-
-      console.log('Loaded CSV content:\n', text);
-
-      void sampleTerrainMostDetailed(
-        mapViewer.terrainProvider,
-        parsed.map((item) => item.cartographic)
-      ).then(
-        (updatedPositions) => {
-          console.log(updatedPositions);
-          updatedPositions = updatedPositions.slice(
-            0,
-            updatedPositions.length - 1
-          ); // UNIX brake line
-
-          mapViewer.scene.globe.depthTestAgainstTerrain = true;
-          mapViewer.entities.suspendEvents();
-          mapViewer.entities.removeAll();
-
-          updatedPositions.forEach((position, idx) => {
-            mapViewer.entities.add({
-              name: (idx + FIRST_DATA_ROW_IDX).toString(),
-              position: ellipsoid.cartographicToCartesian(position),
-              billboard: {
-                verticalOrigin: CesiumVerticalOrigin.BOTTOM,
-                scale: 0.7,
-                image: 'assets/img/map-marker.gif',
-              },
-              label: {
-                text: (idx + FIRST_DATA_ROW_IDX).toString(),
-                font: '14pt monospace',
-                fillColor: CesiumColor.BLACK,
-                style: CesiumLabelStyle.FILL_AND_OUTLINE,
-                outlineWidth: 4,
-                outlineColor: CesiumColor.BLACK,
-                verticalOrigin: CesiumVerticalOrigin.BOTTOM,
-                pixelOffset: new Cartesian2(0, LABEL_PIXEL_OFFSET),
-              },
-              description: `
-                Long: ${parsed[idx].cartesian.x} </br>
-                Lat: ${parsed[idx].cartesian.y} </br>
-                Height(m): <span style="font-weight: 500">${position.height}</span>
-              `,
-            });
-          });
-
-          mapViewer.entities.resumeEvents();
-
-          if (evt.target.files !== null) {
-            exportToCsv(
-              `terranian_heights_${evt.target.files[0].name}`,
-              parsed
-            );
-            evt.target.value = '';
-          }
-
-          console.log(
-            'Pinned point count is ',
-            mapViewer.entities.values.length
-          );
-        },
-        (err) => {
-          console.error('ERROR while sampleTerrainMostDetailed:', err);
-        }
-      );
-    };
-
-    if (evt.target.files?.[0]) {
-      reader.readAsText(evt.target.files[0]);
-    }
-  };
-
-  const exportToCsv = (filename: string, rows: IParsedData[]): void => {
-    const processRow = (row: IParsedData): string => {
-      let finalVal = '';
-      finalVal += row.cartesian.x.toString() + ',';
-      finalVal += row.cartesian.y.toString() + ',';
-      finalVal += row.cartographic.height.toString();
-      return finalVal + '\n';
-    };
-
-    let csvFile = 'long,lat,height\n';
-    rows.forEach((row) => {
-      csvFile += processRow(row);
-    });
-
-    const blob = new Blob([csvFile], { type: 'text/csv;charset=utf-8;' });
-    const link = document.createElement('a');
-    const url = URL.createObjectURL(blob);
-    link.setAttribute('href', url);
-    link.setAttribute('download', filename);
-    link.style.visibility = 'hidden';
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  };
-
-  return (
-    <>
-      <input
-        type="file"
-        id="csvFile"
-        accept=".csv"
-        onChange={(e: ChangeEvent<HTMLInputElement>): void => {
-          loadCSV(e);
-        }}
-      />
-    </>
-  );
-};
+import React, { ChangeEvent } from 'react';
+import {
+  Cartesian2,
+  Ellipsoid,
+  Color as CesiumColor,
+  LabelStyle as CesiumLabelStyle,
+  VerticalOrigin as CesiumVerticalOrigin,
+  Cartographic,
+  sampleTerrainMostDetailed,
+} from 'cesium';
+import { CesiumViewer, useCesiumMap } from '../map';
+
+interface IParsedData {
+  cartographic: Cartographic;
+  cartesian: Cartesian2;
+}
+
+const LABEL_PIXEL_OFFSET = -25;
+const FIRST_DATA_ROW_IDX = 2;
+
+export interface TerrainianHeightProps {}
+
+export const TerrainianHeightTool: React.FC<TerrainianHeightProps> = (
+  props
+) => {
+  const mapViewer: CesiumViewer = useCesiumMap();
+
+  const csvToArray = (str: string, delimiter = ','): IParsedData[] => {
+    // const headers = str.slice(0, str.indexOf('\n')).split(delimiter);
+    const rows = str.slice(str.indexOf('\n') + 1).split('\n');
+
+    const arr = rows.map((row) => {
+      const values = row.split(delimiter);
+      const el = Cartographic.fromDegrees(
+        parseFloat(values[0]),
+        parseFloat(values[1])
+      );
+      // const el = headers.reduce((object: Record<string, number>, header, index) => {
+      //   const trimmedHeader = header.trim();
+      //   object[trimmedHeader] = parseFloat(values[index]);
+      //   return object;
+      // }, {});
+
+      //return el;
+      return {
+        cartographic: el,
+        cartesian: new Cartesian2(parseFloat(values[0]), parseFloat(values[1])),
+      };
+    });
+
+    return arr;
+  };
+
+  const loadCSV = (evt: ChangeEvent<HTMLInputElement>): void => {
+    evt.preventDefault();
+    evt.persist();
+    const reader = new FileReader();
+
+    reader.onload = (e: ProgressEvent<FileReader>): any => {
+      const text = e.target?.result;
+      const parsed = csvToArray(text as string);
+      const ellipsoid = Ellipsoid.WGS84;
+
+      console.log('Loaded CSV content:\n', text);
+
+      void sampleTerrainMostDetailed(
+        mapViewer.terrainProvider,
+        parsed.map((item) => item.cartographic)
+      ).then(
+        (updatedPositions) => {
+          console.log(updatedPositions);
+          updatedPositions = updatedPositions.slice(
+            0,
+            updatedPositions.length - 1
+          ); // UNIX brake line
+
+          mapViewer.scene.globe.depthTestAgainstTerrain = true;
+          mapViewer.entities.suspendEvents();
+          mapViewer.entities.removeAll();
+
+          updatedPositions.forEach((position, idx) => {
+            mapViewer.entities.add({
+              name: (idx + FIRST_DATA_ROW_IDX).toString(),
+              position: ellipsoid.cartographicToCartesian(position),
+              billboard: {
+                verticalOrigin: CesiumVerticalOrigin.BOTTOM,
+                scale: 0.7,
+                image: 'assets/img/map-marker.gif',
+              },
+              label: {
+                text: (idx + FIRST_DATA_ROW_IDX).toString(),
+                font: '14pt monospace',
+                fillColor: CesiumColor.BLACK,
+                style: CesiumLabelStyle.FILL_AND_OUTLINE,
+                outlineWidth: 4,
+                outlineColor: CesiumColor.BLACK,
+                verticalOrigin: CesiumVerticalOrigin.BOTTOM,
+                pixelOffset: new Cartesian2(0, LABEL_PIXEL_OFFSET),
+              },
+              description: `
+                Long: ${parsed[idx].cartesian.x} </br>
+                Lat: ${parsed[idx].cartesian.y} </br>
+                Height(m): <span style="font-weight: 500">${position.height}</span>
+              `,
+            });
+          });
+
+          mapViewer.entities.resumeEvents();
+
+          if (evt.target.files !== null) {
+            exportToCsv(
+              `terranian_heights_${evt.target.files[0].name}`,
+              parsed
+            );
+            evt.target.value = '';
+          }
+
+          console.log(
+            'Pinned point count is ',
+            mapViewer.entities.values.length
+          );
+        },
+        (err) => {
+          console.error('ERROR while sampleTerrainMostDetailed:', err);
+        }
+      );
+    };
+
+    if (evt.target.files?.[0]) {
+      reader.readAsText(evt.target.files[0]);
+    }
+  };
+
+  const exportToCsv = (filename: string, rows: IParsedData[]): void => {
+    const processRow = (row: IParsedData): string => {
+      let finalVal = '';
+      finalVal += row.cartesian.x.toString() + ',';
+      finalVal += row.cartesian.y.toString() + ',';
+      finalVal += row.cartographic.height.toString();
+      return finalVal + '\n';
+    };
+
+    let csvFile = 'long,lat,height\n';
+    rows.forEach((row) => {
+      csvFile += processRow(row);
+    });
+
+    const blob = new Blob([csvFile], { type: 'text/csv;charset=utf-8;' });
+    const link = document.createElement('a');
+    const url = URL.createObjectURL(blob);
+    link.setAttribute('href', url);
+    link.setAttribute('download', filename);
+    link.style.visibility = 'hidden';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  return (
+    <>
+      <input
+        type="file"
+        id="csvFile"
+        accept=".csv"
+        onChange={(e: ChangeEvent<HTMLInputElement>): void => {
+          loadCSV(e);
+        }}
+      />
+    </>
+  );
+};

package/src/lib/cssbaseline/cssbaseline.tsx

@@ -1,19 +1,19 @@
-import React from 'react';
-import CssBaseline, { CssBaselineProps } from '@material-ui/core/CssBaseline';
-import ScopedCssBaseline, {
-  ScopedCssBaselineProps,
-} from '@material-ui/core/ScopedCssBaseline';
-
-export const McCssBaseline: React.FC<CssBaselineProps> = (
-  props: CssBaselineProps
-) => {
-  const { children, ...rest } = props;
-  return <CssBaseline {...rest}>{children}</CssBaseline>;
-};
-
-export const McScopedCssBaseline: React.FC<ScopedCssBaselineProps> = (
-  props: ScopedCssBaselineProps
-) => {
-  const { children, ...rest } = props;
-  return <ScopedCssBaseline {...rest}>{children}</ScopedCssBaseline>;
-};
+import React from 'react';
+import CssBaseline, { CssBaselineProps } from '@material-ui/core/CssBaseline';
+import ScopedCssBaseline, {
+  ScopedCssBaselineProps,
+} from '@material-ui/core/ScopedCssBaseline';
+
+export const McCssBaseline: React.FC<CssBaselineProps> = (
+  props: CssBaselineProps
+) => {
+  const { children, ...rest } = props;
+  return <CssBaseline {...rest}>{children}</CssBaseline>;
+};
+
+export const McScopedCssBaseline: React.FC<ScopedCssBaselineProps> = (
+  props: ScopedCssBaselineProps
+) => {
+  const { children, ...rest } = props;
+  return <ScopedCssBaseline {...rest}>{children}</ScopedCssBaseline>;
+};

package/src/lib/cssbaseline/index.ts

@@ -1,4 +1,4 @@
-export {
-  McCssBaseline as CssBaseline,
-  McScopedCssBaseline as ScopedCssBaseline,
-} from './cssbaseline';
+export {
+  McCssBaseline as CssBaseline,
+  McScopedCssBaseline as ScopedCssBaseline,
+} from './cssbaseline';

package/src/lib/date-picker/date-picker.css

@@ -1,9 +1,9 @@
-body[dir='rtl'] .drpContainer .MuiInputLabel-formControl {
-  right: 0px;
-  left: unset;
-}
-
-body[dir='rtl'] .drpContainer .MuiInputBase-input {
-  direction: ltr;
-  text-align: end;
-}
+body[dir='rtl'] .drpContainer .MuiInputLabel-formControl {
+  right: 0px;
+  left: unset;
+}
+
+body[dir='rtl'] .drpContainer .MuiInputBase-input {
+  direction: ltr;
+  text-align: end;
+}

package/src/lib/date-picker/date-picker.stories.tsx

@@ -1,130 +1,130 @@
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-import { Story } from '@storybook/react/types-6-0';
-import { CSFStory } from '../utils/story';
-import { SupportedLocales } from '../models/enums';
-import { DateTimePicker } from './date-picker';
-
-const TODAY = new Date();
-
-export default {
-  title: 'Date Picker',
-  component: DateTimePicker,
-};
-
-export const DatePickerDefault: CSFStory<JSX.Element> = () => (
-  <DateTimePicker onChange={action('date changed')} value={TODAY} />
-);
-
-DatePickerDefault.story = {
-  name: 'Date picker default',
-};
-
-export const DateTimePickerMode: CSFStory<JSX.Element> = () => (
-  <DateTimePicker
-    value={TODAY}
-    onChange={action('date changed')}
-    showTime={true}
-    format={'dd/MM/yyyy HH:mm'}
-  />
-);
-
-DateTimePickerMode.story = {
-  name: 'Date time picker',
-};
-
-export const DateNoFutureLimitTime: CSFStory<JSX.Element> = () => (
-  <DateTimePicker
-    value={TODAY}
-    disableFuture={false}
-    onChange={action('date changed')}
-  />
-);
-
-DateNoFutureLimitTime.story = {
-  name: 'Date time no future limit',
-};
-
-export const DateMinMaxLimitTime: CSFStory<JSX.Element> = () => {
-  const minDate = new Date();
-  const maxDate = new Date();
-  const deltaInDays = 6;
-  minDate.setDate(maxDate.getDate() - deltaInDays);
-  maxDate.setDate(maxDate.getDate() + deltaInDays);
-  return (
-    <DateTimePicker
-      value={TODAY}
-      onChange={(date) => {
-        action('date changed')(date);
-        console.log(date?.toDateString());
-      }}
-      minDate={minDate}
-      maxDate={maxDate}
-    />
-  );
-};
-
-DateMinMaxLimitTime.story = {
-  name: 'Date time with minDate & maxDate ',
-};
-
-export const DateMinMaxLimitTimeWithOnBlur: CSFStory<JSX.Element> = () => {
-  const minDate = new Date();
-  const maxDate = new Date();
-  const deltaInDays = 6;
-  minDate.setDate(maxDate.getDate() - deltaInDays);
-  maxDate.setDate(maxDate.getDate() + deltaInDays);
-  return (
-    <DateTimePicker
-      value={TODAY}
-      onChange={(date) => {
-        action('date changed')(date);
-        console.log(date?.toDateString());
-      }}
-      onBlur={(date) => {
-        action('OnBlur invoked')(date);
-        console.log('OnBlur invoked');
-      }}
-      minDate={minDate}
-      maxDate={maxDate}
-    />
-  );
-};
-
-DateMinMaxLimitTimeWithOnBlur.story = {
-  name: 'Date time with OnBlur ',
-};
-
-export const DateTimeWithControlArgs: Story = (args: unknown) => {
-  return (
-    <DateTimePicker {...args} value={TODAY} onChange={action('date changed')} />
-  );
-};
-
-DateTimeWithControlArgs.storyName = 'Date time control with args';
-
-DateTimeWithControlArgs.argTypes = {
-  local: {
-    control: {
-      type: 'object',
-    },
-  },
-};
-
-export const DateTimeHebrewLocalized: Story = (args: unknown) => {
-  const local = {
-    placeHolderText: 'הכנס תאריך',
-    calendarLocale: SupportedLocales.HE,
-  };
-  return (
-    <DateTimePicker
-      local={local}
-      {...args}
-      value={TODAY}
-      onChange={action('date changed')}
-    />
-  );
-};
-
-DateTimeHebrewLocalized.storyName =
-  'Date time range looks like input with Hebrew calendar';
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { Story } from '@storybook/react/types-6-0';
+import { CSFStory } from '../utils/story';
+import { SupportedLocales } from '../models/enums';
+import { DateTimePicker } from './date-picker';
+
+const TODAY = new Date();
+
+export default {
+  title: 'Date Picker',
+  component: DateTimePicker,
+};
+
+export const DatePickerDefault: CSFStory<JSX.Element> = () => (
+  <DateTimePicker onChange={action('date changed')} value={TODAY} />
+);
+
+DatePickerDefault.story = {
+  name: 'Date picker default',
+};
+
+export const DateTimePickerMode: CSFStory<JSX.Element> = () => (
+  <DateTimePicker
+    value={TODAY}
+    onChange={action('date changed')}
+    showTime={true}
+    format={'dd/MM/yyyy HH:mm'}
+  />
+);
+
+DateTimePickerMode.story = {
+  name: 'Date time picker',
+};
+
+export const DateNoFutureLimitTime: CSFStory<JSX.Element> = () => (
+  <DateTimePicker
+    value={TODAY}
+    disableFuture={false}
+    onChange={action('date changed')}
+  />
+);
+
+DateNoFutureLimitTime.story = {
+  name: 'Date time no future limit',
+};
+
+export const DateMinMaxLimitTime: CSFStory<JSX.Element> = () => {
+  const minDate = new Date();
+  const maxDate = new Date();
+  const deltaInDays = 6;
+  minDate.setDate(maxDate.getDate() - deltaInDays);
+  maxDate.setDate(maxDate.getDate() + deltaInDays);
+  return (
+    <DateTimePicker
+      value={TODAY}
+      onChange={(date) => {
+        action('date changed')(date);
+        console.log(date?.toDateString());
+      }}
+      minDate={minDate}
+      maxDate={maxDate}
+    />
+  );
+};
+
+DateMinMaxLimitTime.story = {
+  name: 'Date time with minDate & maxDate ',
+};
+
+export const DateMinMaxLimitTimeWithOnBlur: CSFStory<JSX.Element> = () => {
+  const minDate = new Date();
+  const maxDate = new Date();
+  const deltaInDays = 6;
+  minDate.setDate(maxDate.getDate() - deltaInDays);
+  maxDate.setDate(maxDate.getDate() + deltaInDays);
+  return (
+    <DateTimePicker
+      value={TODAY}
+      onChange={(date) => {
+        action('date changed')(date);
+        console.log(date?.toDateString());
+      }}
+      onBlur={(date) => {
+        action('OnBlur invoked')(date);
+        console.log('OnBlur invoked');
+      }}
+      minDate={minDate}
+      maxDate={maxDate}
+    />
+  );
+};
+
+DateMinMaxLimitTimeWithOnBlur.story = {
+  name: 'Date time with OnBlur ',
+};
+
+export const DateTimeWithControlArgs: Story = (args: unknown) => {
+  return (
+    <DateTimePicker {...args} value={TODAY} onChange={action('date changed')} />
+  );
+};
+
+DateTimeWithControlArgs.storyName = 'Date time control with args';
+
+DateTimeWithControlArgs.argTypes = {
+  local: {
+    control: {
+      type: 'object',
+    },
+  },
+};
+
+export const DateTimeHebrewLocalized: Story = (args: unknown) => {
+  const local = {
+    placeHolderText: 'הכנס תאריך',
+    calendarLocale: SupportedLocales.HE,
+  };
+  return (
+    <DateTimePicker
+      local={local}
+      {...args}
+      value={TODAY}
+      onChange={action('date changed')}
+    />
+  );
+};
+
+DateTimeHebrewLocalized.storyName =
+  'Date time range looks like input with Hebrew calendar';