@map-colonies/react-components 3.7.3 → 3.9.0

package/src/lib/cesium-map/terrain-providers/terrain-provider.stories.tsx

@@ -0,0 +1,183 @@
+import React, { ChangeEvent, useState } from 'react';
+import {
+  ArcGISTiledElevationTerrainProvider,
+  EllipsoidTerrainProvider,
+  TerrainProvider,
+  VRTheWorldTerrainProvider,
+  WebMercatorProjection,
+  CesiumTerrainProvider,
+  Resource,
+  WebMercatorTilingScheme,
+} from 'cesium';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { CesiumMap, useCesiumMap } from '../map';
+import { CesiumSceneMode } from '../map.types';
+import { Cesium3DTileset } from '../layers';
+import QuantizedMeshTerrainProvider from './custom/quantized-mesh-terrain-provider';
+
+export default {
+  title: 'Cesium Map',
+  component: CesiumMap,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as Meta;
+
+const mapDivStyle = {
+  height: '90%',
+  width: '100%',
+  position: 'absolute' as const,
+};
+
+const BASE_MAPS = {
+  maps: [
+    {
+      id: '1st',
+      title: '1st Map Title',
+      isCurrent: true,
+      thumbnail:
+        'https://nsw.digitaltwin.terria.io/build/efa2f6c408eb790753a9b5fb2f3dc678.png',
+      baseRasteLayers: [
+        {
+          id: 'GOOGLE_TERRAIN',
+          type: 'XYZ_LAYER',
+          opacity: 1,
+          zIndex: 0,
+          options: {
+            url: 'https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
+            layers: '',
+            credit: 'GOOGLE',
+          },
+        },
+      ],
+      baseVectorLayers: [],
+    },
+  ],
+};
+
+const EllipsoidProvider = new EllipsoidTerrainProvider({});
+
+const CesiumProvider = new CesiumTerrainProvider({
+  url: new Resource({
+    url: 'https://my-assets.cesium.com/1',
+    headers: {
+      authorization: 'Bearer <my-access-token>',
+    },
+  }),
+});
+
+const VRTheWorldProvider = new VRTheWorldTerrainProvider({
+  url: 'http://www.vr-theworld.com/vr-theworld/tiles1.0.0/73/',
+});
+
+const ArcGisProvider = new ArcGISTiledElevationTerrainProvider({
+  url:
+    'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer',
+});
+
+const QuantizedMeshProvider = new QuantizedMeshTerrainProvider({
+  getUrl: (x: number, y: number, level: number): string => {
+    const tilingScheme = new WebMercatorTilingScheme();
+    const column = x;
+    const row = tilingScheme.getNumberOfYTilesAtLevel(level) - y - 1;
+
+    return `/mock/terrain_example_tiles/${level}/${column}/${row}.terrain`;
+  },
+  credit: `Mapcolonies`,
+});
+
+const terrainProviderList = [
+  {
+    id: 'NONE',
+    value: EllipsoidProvider,
+  },
+  {
+    id: 'Cesium Terrain Provider',
+    value: CesiumProvider,
+  },
+  {
+    id: 'V R The World Terrain Provider (Hight Map)',
+    value: VRTheWorldProvider,
+  },
+  {
+    id: 'Arc Gis Terrain Provider',
+    value: ArcGisProvider,
+  },
+  {
+    id: 'Custom Terrain Provider',
+    value: QuantizedMeshProvider,
+  },
+];
+
+interface ITerrainProviderItem {
+  id: string;
+  value: TerrainProvider | undefined;
+}
+
+interface ITerrainProviderSelectorProps {
+  terrainProviderList: ITerrainProviderItem[];
+}
+
+const TerrainProviderSelector: React.FC<ITerrainProviderSelectorProps> = ({
+  terrainProviderList,
+}) => {
+  const mapViewer = useCesiumMap();
+  const [depthTest, setDepthTest] = useState<boolean>(false);
+
+  const scene = mapViewer.scene;
+
+  const handleDepthTestChange = (e: ChangeEvent<HTMLInputElement>): void => {
+    setDepthTest(e.target.checked);
+    scene.globe.depthTestAgainstTerrain = !depthTest;
+  };
+
+  return (
+    <>
+      <select
+        defaultValue={terrainProviderList[0].id}
+        onChange={(evt): void => {
+          const selected = terrainProviderList.find(
+            (item) => item.id === evt.target.value
+          );
+          mapViewer.terrainProvider = (selected as ITerrainProviderItem)
+            .value as TerrainProvider;
+        }}
+      >
+        {terrainProviderList.map((provider) => {
+          return <option key={provider.id}>{provider.id}</option>;
+        })}
+      </select>
+      <br />
+      <input
+        type="checkbox"
+        id="input"
+        checked={depthTest}
+        onChange={handleDepthTestChange}
+      />
+      <label htmlFor="input">depthTestAgainstTerrain</label>
+    </>
+  );
+};
+
+export const QuantizedMesh: Story = () => {
+  // const [center] = useState<[number, number]>([24, -200]);
+  const [center] = useState<[number, number]>([-122, 43]);
+  return (
+    <div style={mapDivStyle}>
+      <CesiumMap
+        center={center}
+        zoom={5}
+        imageryProvider={false}
+        sceneModes={[CesiumSceneMode.SCENE3D, CesiumSceneMode.COLUMBUS_VIEW]}
+        baseMaps={BASE_MAPS}
+        mapProjection={new WebMercatorProjection()}
+      >
+        <Cesium3DTileset
+          isZoomTo={true}
+          url="/mock/tileset_2/L16_31023/L16_31023.json"
+        />
+        <TerrainProviderSelector terrainProviderList={terrainProviderList} />
+      </CesiumMap>
+    </div>
+  );
+};

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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +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';

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

@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+import { he, enUS } from 'date-fns/locale';
+import {
+  MuiPickersUtilsProvider,
+  KeyboardDateTimePicker,
+  KeyboardDatePicker,
+  KeyboardDatePickerProps,
+} from '@material-ui/pickers';
+import { ParsableDate } from '@material-ui/pickers/constants/prop-types';
+import { WrapperVariant } from '@material-ui/pickers/wrappers/Wrapper';
+import DateFnsUtils from '@date-io/date-fns';
+import { ThemeProvider } from '@material-ui/core';
+
+import { useTheme } from '@map-colonies/react-core';
+import { SupportedLocales } from '../models/enums';
+import DEFAULTS from '../models/defaults';
+import { useMappedMuiTheme } from '../theme';
+
+import '@map-colonies/react-core/dist/button/styles';
+import './date-picker.css';
+
+interface DatePickerProps extends KeyboardDatePickerProps {
+  local?: {
+    placeHolderText?: string;
+    calendarLocale?: SupportedLocales;
+  };
+  showTime?: boolean;
+}
+
+export const DateTimePicker: React.FC<DatePickerProps> = (props) => {
+  const theme: { [key: string]: string } = useTheme();
+  const themeMui = useMappedMuiTheme(theme);
+
+  const [value, setValue] = useState<ParsableDate>(props.value);
+
+  const {
+    format = DEFAULTS.DATE_PICKER.dateFormat,
+    variant = DEFAULTS.DATE_PICKER.variant,
+    disableFuture = DEFAULTS.DATE_PICKER.disableFuture,
+    local,
+    onChange,
+    showTime = DEFAULTS.DATE_PICKER.showTime,
+    value: propValue,
+    ...resProps
+  } = props;
+
+  const {
+    placeHolderText = DEFAULTS.DATE_PICKER.local.placeHolderText,
+    calendarLocale,
+  } = local ?? {
+    placeHolderText: DEFAULTS.DATE_PICKER.local.placeHolderText,
+    calendarLocale: SupportedLocales.EN,
+  };
+
+  const locale = calendarLocale === SupportedLocales.HE ? he : enUS;
+
+  const handleOnChange = (e: any): void => {
+    setValue(e);
+    onChange(e as Date);
+  };
+
+  return (
+    <ThemeProvider theme={themeMui}>
+      <MuiPickersUtilsProvider utils={DateFnsUtils} locale={locale}>
+        {showTime && (
+          <KeyboardDateTimePicker
+            variant={variant as WrapperVariant}
+            placeholder={placeHolderText}
+            onChange={handleOnChange}
+            value={value}
+            disableFuture={disableFuture}
+            format={format}
+            {...resProps}
+          />
+        )}
+        {!showTime && (
+          <KeyboardDatePicker
+            variant={variant as WrapperVariant}
+            placeholder={placeHolderText}
+            onChange={handleOnChange}
+            value={value}
+            disableFuture={disableFuture}
+            format={format}
+            {...resProps}
+          />
+        )}
+      </MuiPickersUtilsProvider>
+    </ThemeProvider>
+  );
+};

package/src/lib/date-picker/index.ts

@@ -0,0 +1 @@
+export * from './date-picker';

package/src/lib/date-range-picker/date-range-picker.form-control.tsx

@@ -34,7 +34,7 @@ export const DateTimeRangePickerFormControl: React.FC<DateRangePickerProps> = (
   const [from, setFrom] = useState<Date | null>(null);
   const [to, setTo] = useState<Date | null>(null);
   const [dateFormat, setDateFormat] = useState<string>(
-    DEFAULTS.DATE_PICKER.dateFormat
+    DEFAULTS.DATE_RANGE_PICKER.dateFormat
   );
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
     null
@@ -66,24 +66,26 @@ export const DateTimeRangePickerFormControl: React.FC<DateRangePickerProps> = (
   }, [props.to]);
 
   useEffect(() => {
-    setDateFormat(props.dateFormat ?? DEFAULTS.DATE_PICKER.dateFormat);
+    setDateFormat(props.dateFormat ?? DEFAULTS.DATE_RANGE_PICKER.dateFormat);
   }, [props.dateFormat]);
 
   const startPlaceHolderText =
     props.local?.startPlaceHolderText ??
-    DEFAULTS.DATE_PICKER.local.startPlaceHolderText;
+    DEFAULTS.DATE_RANGE_PICKER.local.startPlaceHolderText;
   const endPlaceHolderText =
     props.local?.endPlaceHolderText ??
-    DEFAULTS.DATE_PICKER.local.endPlaceHolderText;
+    DEFAULTS.DATE_RANGE_PICKER.local.endPlaceHolderText;
   const renderAsButton =
     props.renderAsButton === undefined
-      ? DEFAULTS.DATE_PICKER.renderAsButton
+      ? DEFAULTS.DATE_RANGE_PICKER.renderAsButton
       : props.renderAsButton;
   const offset =
-    props.offset === undefined ? DEFAULTS.DATE_PICKER.offset : props.offset;
+    props.offset === undefined
+      ? DEFAULTS.DATE_RANGE_PICKER.offset
+      : props.offset;
   const disableFuture =
     props.disableFuture === undefined
-      ? DEFAULTS.DATE_PICKER.disableFuture
+      ? DEFAULTS.DATE_RANGE_PICKER.disableFuture
       : props.disableFuture;
 
   const controlText = useMemo(() => {

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

@@ -61,22 +61,24 @@ export const DateTimeRangePicker: React.FC<DateRangePickerProps> = (props) => {
   const [from, setFrom] = useState<Date | null>(null);
   const [to, setTo] = useState<Date | null>(null);
   const [dateFormat, setDateFormat] = useState<string>(
-    DEFAULTS.DATE_PICKER.dateFormat
+    DEFAULTS.DATE_RANGE_PICKER.dateFormat
   );
 
   const flexDirection =
-    props.controlsLayout ?? DEFAULTS.DATE_PICKER.controlsLayout;
+    props.controlsLayout ?? DEFAULTS.DATE_RANGE_PICKER.controlsLayout;
   const disableFuture =
-    props.disableFuture ?? DEFAULTS.DATE_PICKER.disableFuture;
+    props.disableFuture ?? DEFAULTS.DATE_RANGE_PICKER.disableFuture;
   const startPlaceHolderText =
     props.local?.startPlaceHolderText ??
-    DEFAULTS.DATE_PICKER.local.startPlaceHolderText;
+    DEFAULTS.DATE_RANGE_PICKER.local.startPlaceHolderText;
   const endPlaceHolderText =
     props.local?.endPlaceHolderText ??
-    DEFAULTS.DATE_PICKER.local.endPlaceHolderText;
-  const setText = props.local?.setText ?? DEFAULTS.DATE_PICKER.local.setText;
+    DEFAULTS.DATE_RANGE_PICKER.local.endPlaceHolderText;
+  const setText =
+    props.local?.setText ?? DEFAULTS.DATE_RANGE_PICKER.local.setText;
   const calendarLocale =
-    props.local?.calendarLocale ?? DEFAULTS.DATE_PICKER.local.calendarLocale;
+    props.local?.calendarLocale ??
+    DEFAULTS.DATE_RANGE_PICKER.local.calendarLocale;
 
   const locale = calendarLocale === SupportedLocales.HE ? he : enUS;
 
@@ -89,7 +91,7 @@ export const DateTimeRangePicker: React.FC<DateRangePickerProps> = (props) => {
   }, [props.to]);
 
   useEffect(() => {
-    setDateFormat(props.dateFormat ?? DEFAULTS.DATE_PICKER.dateFormat);
+    setDateFormat(props.dateFormat ?? DEFAULTS.DATE_RANGE_PICKER.dateFormat);
   }, [props.dateFormat]);
 
   const isRangeValid = Boolean(
@@ -116,7 +118,7 @@ export const DateTimeRangePicker: React.FC<DateRangePickerProps> = (props) => {
         <MuiPickersUtilsProvider utils={DateFnsUtils} locale={locale}>
           <KeyboardDateTimePicker
             variant="inline"
-            label={startPlaceHolderText}
+            placeholder={startPlaceHolderText}
             onChange={(date): void => setFrom(date as Date)}
             value={from}
             disableFuture={disableFuture}
@@ -126,7 +128,7 @@ export const DateTimeRangePicker: React.FC<DateRangePickerProps> = (props) => {
           />
           <KeyboardDateTimePicker
             variant="inline"
-            label={endPlaceHolderText}
+            placeholder={endPlaceHolderText}
             className={classes.margin}
             onChange={(date): void => setTo(date as Date)}
             value={to}

package/src/lib/index.ts

@@ -1,4 +1,5 @@
 export * from './date-range-picker';
+export * from './date-picker';
 export * from './map-filter-container';
 export * from './models';
 export * from './ol-map';
@@ -8,3 +9,4 @@ export * from './box';
 export * from './cssbaseline';
 export * from './theme';
 export * from './cesium-map';
+export * from './autocomplete';

package/src/lib/models/defaults.ts

@@ -3,6 +3,18 @@ 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: {

package/src/types/quantized-mesh-decoder.d.ts

@@ -0,0 +1 @@
+declare module '@here/quantized-mesh-decoder';