@map-colonies/react-components 3.15.1 → 4.0.1

package/src/lib/cesium-map/tools/zoom_level-tracker.tool.tsx

@@ -1,144 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { get } from 'lodash';
-import { PerspectiveOffCenterFrustum } from 'cesium';
-import { CesiumViewer, useCesiumMap } from '../map';
-import { CesiumSceneMode } from '../map.types';
-
-import './zoom_level-tracker.tool.css';
-
-export interface RZoomLevelTrackerToolProps {
-  locale?: { [key: string]: string };
-}
-
-/* eslint-disable @typescript-eslint/no-magic-numbers, @typescript-eslint/naming-convention, @typescript-eslint/no-unsafe-assignment,  @typescript-eslint/no-unnecessary-type-assertion, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call */
-const detectZoomLevel = (distance: number, viewer: CesiumViewer) => {
-  const MAX_ZOOM_LEVEL = 19;
-  const tileProvider = get(viewer.scene.globe, '_surface.tileProvider') as any;
-  const quadtree = tileProvider._quadtree;
-  const drawingBufferHeight = viewer.canvas.height;
-  const sseDenominator = get(viewer.camera.frustum, 'sseDenominator') ?? 1;
-
-  for (let level = 0; level <= MAX_ZOOM_LEVEL; level++) {
-    const maxGeometricError = tileProvider.getLevelMaximumGeometricError(level);
-    const error =
-      (maxGeometricError * drawingBufferHeight) / (distance * sseDenominator);
-    if (error < quadtree.maximumScreenSpaceError) {
-      return level;
-    }
-  }
-
-  return null;
-};
-
-const getZoomLevelHeights = (precision: number, viewer: CesiumViewer) => {
-  precision = precision || 10;
-
-  const result = [];
-  let step = 100000.0;
-  let currentZoomLevel = 0;
-  for (let height = 100000000.0; height > step; height = height - step) {
-    const level = detectZoomLevel(height, viewer);
-    if (level === null) {
-      break;
-    }
-
-    if (level !== currentZoomLevel) {
-      let minHeight = height;
-      let maxHeight = height + step;
-      while (maxHeight - minHeight > precision) {
-        height = minHeight + (maxHeight - minHeight) / 2;
-        if (detectZoomLevel(height, viewer) === level) {
-          minHeight = height;
-        } else {
-          maxHeight = height;
-        }
-      }
-
-      result.push({
-        level: level,
-        height: Math.round(height),
-      });
-
-      currentZoomLevel = level;
-
-      if (result.length >= 2) {
-        step = (result[result.length - 2].height - height) / 1000.0;
-      }
-    }
-  }
-
-  return result;
-};
-/* eslint-enable @typescript-eslint/no-magic-numbers */
-
-export const ZoomLevelTrackerTool: React.FC<RZoomLevelTrackerToolProps> = (
-  props
-) => {
-  const mapViewer: CesiumViewer = useCesiumMap();
-  const [zoomLevel, setZoomLevel] = useState(1);
-  const zoomLevelHeights = getZoomLevelHeights(1, mapViewer);
-
-  useEffect(() => {
-    const calculateZoomLevel = () => {
-      const camera = mapViewer.camera;
-      const ORTHOPHOTO_HEIGHT_FRUSTRUM_FACTOR = 0.5;
-      let cameraHeight = 0;
-
-      switch (mapViewer.scene.mode) {
-        case CesiumSceneMode.SCENE3D:
-          cameraHeight = mapViewer.scene.mapProjection.ellipsoid.cartesianToCartographic(
-            camera.positionWC
-          ).height;
-          break;
-        case CesiumSceneMode.SCENE2D:
-          cameraHeight =
-            ((camera.frustum as PerspectiveOffCenterFrustum).right -
-              (camera.frustum as PerspectiveOffCenterFrustum).left) *
-            ORTHOPHOTO_HEIGHT_FRUSTRUM_FACTOR;
-          break;
-        case CesiumSceneMode.COLUMBUS_VIEW:
-          cameraHeight = camera.position.z;
-          break;
-        default:
-          cameraHeight = 0;
-          break;
-      }
-
-      if (zoomLevelHeights.length > 0) {
-        const closestZoom = zoomLevelHeights.reduce((a, b) => {
-          return Math.abs(b.height - cameraHeight) <
-            Math.abs(a.height - cameraHeight)
-            ? b
-            : a;
-        });
-
-        setZoomLevel(closestZoom.level);
-      }
-    };
-
-    mapViewer.camera.moveEnd.addEventListener(calculateZoomLevel);
-
-    return (): void => {
-      try {
-        /* eslint-disable @typescript-eslint/no-unnecessary-condition*/
-        if (get(mapViewer, '_cesiumWidget') != undefined) {
-          mapViewer.camera.moveEnd.removeEventListener(calculateZoomLevel);
-        }
-      } catch (e) {
-        console.log(
-          'CESIUM camera "moveEnd"(from zoom tracker) remove listener failed',
-          e
-        );
-      }
-    };
-  }, [mapViewer, zoomLevelHeights.length]);
-
-  return (
-    <div className="zoomLevel">
-      <div className="zoomLevelValue">{zoomLevel}</div>
-      <div className="zoomLevelLabel">
-        {get(props.locale, 'ZOOM_LABEL') ?? 'zoom'}
-      </div>
-    </div>
-  );
-};

package/src/lib/cssbaseline/cssbaseline.tsx

@@ -1,19 +0,0 @@
-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 +0,0 @@
-export {
-  McCssBaseline as CssBaseline,
-  McScopedCssBaseline as ScopedCssBaseline,
-} from './cssbaseline';

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

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

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

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

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

@@ -1,9 +0,0 @@
-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-range-picker/date-range-picker.form-control.css

@@ -1,3 +0,0 @@
-body[dir='rtl'] .drpOpener .mdc-text-field {
-  direction: ltr;
-}

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

@@ -1,58 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import { KeyboardDateTimePicker } from '@material-ui/pickers';
-import { Button } from '@map-colonies/react-core';
-import { DateTimeRangePickerFormControl } from './date-range-picker.form-control';
-
-const date = new Date(1990, 1, 1);
-
-it('set the values of to and from to the props of the date pickers when changed', () => {
-  const wrapper = mount(
-    <DateTimeRangePickerFormControl
-      onChange={() => {
-        // do nothing for linitng
-      }}
-    />
-  );
-  wrapper.setProps({ from: date, to: date });
-  // eslint-disable-next-line
-  wrapper.find(Button).first().simulate('click', { currentTarget: {} });
-
-  wrapper.update();
-  const pickers = wrapper.find(KeyboardDateTimePicker);
-  const fromRangePicker = pickers.first();
-  const toRangePicker = pickers.at(1);
-
-  expect(fromRangePicker.prop('value')?.valueOf()).toBe(date.getTime());
-  expect(toRangePicker.prop('value')?.valueOf()).toBe(date.getTime());
-});
-
-it('calls on change with right argumnets when inner set button is clicked', () => {
-  const onChangeMock = jest.fn();
-  const wrapper = mount(
-    <DateTimeRangePickerFormControl
-      from={date}
-      to={date}
-      onChange={onChangeMock}
-    />
-  );
-
-  // eslint-disable-next-line
-  wrapper.find(Button).at(1).props().onClick?.();
-
-  expect(onChangeMock).toHaveBeenCalledWith({ from: date, to: date });
-
-  wrapper.setProps({ to: null });
-  wrapper.update();
-
-  // eslint-disable-next-line
-  wrapper.find(Button).at(1).props().onClick?.();
-  expect(onChangeMock).toHaveBeenCalledWith({ from: date });
-
-  wrapper.setProps({ to: date, from: null });
-  wrapper.update();
-
-  // eslint-disable-next-line
-  wrapper.find(Button).at(1).props().onClick?.();
-  expect(onChangeMock).toHaveBeenCalledWith({ to: date });
-});

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

@@ -1,150 +0,0 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import { format as formatDateFns } from 'date-fns';
-import { Button, TextField } from '@map-colonies/react-core';
-import '@map-colonies/react-core/dist/textfield/styles';
-
-import { SupportedLocales } from '../models/enums';
-import DEFAULTS from '../models/defaults';
-import { Popover } from '../popover';
-import { DateTimeRangePicker } from './date-range-picker';
-import './date-range-picker.form-control.css';
-
-interface DateRangePickerProps {
-  onChange: (dateRange: { from?: Date; to?: Date }) => void;
-  from?: Date;
-  to?: Date;
-  dateFormat?: string;
-  renderAsButton?: boolean;
-  width?: string | number;
-  controlsLayout?: 'column' | 'row';
-  offset?: number;
-  disableFuture?: boolean;
-  maxDate?: string | number | Date | null | undefined;
-  minDate?: string | number | Date | null | undefined;
-  local?: {
-    setText?: string;
-    startPlaceHolderText?: string;
-    endPlaceHolderText?: string;
-    calendarLocale?: SupportedLocales;
-  };
-}
-export const DateTimeRangePickerFormControl: 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_RANGE_PICKER.dateFormat
-  );
-  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
-    null
-  );
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClickInput = (
-    event: React.MouseEvent<HTMLInputElement>
-  ): void => {
-    if (event.currentTarget.tagName === 'I')
-      setAnchorEl(
-        event.currentTarget.previousElementSibling as HTMLButtonElement
-      );
-    else setAnchorEl(event.currentTarget as HTMLButtonElement);
-  };
-  const handleClose = (): void => {
-    setAnchorEl(null);
-  };
-  const open = Boolean(anchorEl);
-  const controlsLayout = props.controlsLayout ?? 'column';
-
-  useEffect(() => {
-    setFrom(props.from ?? null);
-  }, [props.from]);
-
-  useEffect(() => {
-    setTo(props.to ?? null);
-  }, [props.to]);
-
-  useEffect(() => {
-    setDateFormat(props.dateFormat ?? DEFAULTS.DATE_RANGE_PICKER.dateFormat);
-  }, [props.dateFormat]);
-
-  const startPlaceHolderText =
-    props.local?.startPlaceHolderText ??
-    DEFAULTS.DATE_RANGE_PICKER.local.startPlaceHolderText;
-  const endPlaceHolderText =
-    props.local?.endPlaceHolderText ??
-    DEFAULTS.DATE_RANGE_PICKER.local.endPlaceHolderText;
-  const renderAsButton =
-    props.renderAsButton === undefined
-      ? DEFAULTS.DATE_RANGE_PICKER.renderAsButton
-      : props.renderAsButton;
-  const offset =
-    props.offset === undefined
-      ? DEFAULTS.DATE_RANGE_PICKER.offset
-      : props.offset;
-  const disableFuture =
-    props.disableFuture === undefined
-      ? DEFAULTS.DATE_RANGE_PICKER.disableFuture
-      : props.disableFuture;
-
-  const controlText = useMemo(() => {
-    return `${
-      from ? formatDateFns(from, dateFormat) : startPlaceHolderText
-    } - ${to ? formatDateFns(to, dateFormat) : endPlaceHolderText}`;
-  }, [from, to, dateFormat, startPlaceHolderText, endPlaceHolderText]);
-
-  return (
-    <>
-      {renderAsButton ? (
-        <Button
-          style={{ width: props.width }}
-          raised
-          onClick={handleClick}
-          className="drpOpener"
-        >
-          {controlText}
-        </Button>
-      ) : (
-        <TextField
-          className="drpOpener"
-          readOnly
-          style={{ width: props.width }}
-          value={controlText}
-          onClick={handleClickInput}
-          trailingIcon={{
-            icon: 'date_range',
-            tabIndex: 0,
-            onClick: handleClickInput,
-          }}
-        />
-      )}
-
-      <Popover
-        open={open}
-        anchorEl={anchorEl}
-        onClose={handleClose}
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-        keepMounted
-      >
-        <DateTimeRangePicker
-          controlsLayout={controlsLayout}
-          contentWidth={(anchorEl?.clientWidth ?? 0) - offset}
-          dateFormat={dateFormat}
-          disableFuture={disableFuture}
-          minDate={props.minDate}
-          maxDate={props.maxDate}
-          local={props.local}
-          from={from ?? undefined}
-          to={to ?? undefined}
-          onChange={({ from, to }): void => {
-            setFrom(from ?? null);
-            setTo(to ?? null);
-            props.onChange({ from, to });
-            handleClose();
-          }}
-        />
-      </Popover>
-    </>
-  );
-};