@map-colonies/react-components 3.12.0 → 3.12.2

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

@@ -1,2 +1,2 @@
-export * from './file-picker';
-export * from './localization';
+export * from './file-picker';
+export * from './localization';

package/src/lib/file-picker/localization.ts

@@ -1,164 +1,164 @@
-/* eslint-disable */
-import {
-  ChonkyActions,
-  ChonkyFormatters,
-  FileData,
-  FileHelper,
-  I18nConfig,
-} from 'chonky';
-import { IntlShape } from 'react-intl';
-import filesize from 'filesize';
-import { SupportedLocales } from '../models';
-
-export interface FilePickerFormatters extends ChonkyFormatters {
-  formatFileSize: (
-    intl: IntlShape | null,
-    file: FileData | null
-  ) => string | null;
-}
-
-interface IFileSize {
-  value: number;
-  symbol: string;
-  exponent: number;
-  unit: string;
-}
-
-export const defaultFormatters: FilePickerFormatters = {
-  formatFileModDate: (
-    intl: IntlShape,
-    file: FileData | null
-  ): string | null => {
-    const safeModDate = FileHelper.getModDate(file);
-    if (safeModDate) {
-      return intl.formatDate(safeModDate, {
-        dateStyle: 'short',
-        timeStyle: 'short',
-      });
-    } else {
-      return null;
-    }
-  },
-  formatFileSize: (
-    _intl: IntlShape | null,
-    file: FileData | null
-  ): string | null => {
-    if (!file || typeof file.size !== 'number') return null;
-
-    const size = file.size;
-    const sizeData = (filesize(size, {
-      bits: false,
-      output: 'object',
-    }) as unknown) as IFileSize;
-    if (sizeData.symbol === 'B') {
-      // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-      return `${Math.round(sizeData.value / 10) / 100.0} KB`;
-    } else if (sizeData.symbol === 'KB') {
-      return `${Math.round(sizeData.value)} ${sizeData.symbol}`;
-    }
-    return `${sizeData.value} ${sizeData.symbol.toUpperCase()}`;
-  },
-};
-
-interface ILocalization {
-  [key: string]: I18nConfig;
-}
-
-const englishI18n: I18nConfig = {
-  locale: SupportedLocales.EN,
-  formatters: { ...defaultFormatters },
-};
-
-const russianI18n: I18nConfig = {
-  locale: SupportedLocales.RU,
-  formatters: { ...defaultFormatters },
-  messages: {
-    'chonky.toolbar.searchPlaceholder': 'Поиск',
-    'chonky.toolbar.visibleFileCount': `{fileCount, plural,
-      one {# файл}
-      few {# файла}
-      other {# файлов}
-    }`,
-    'chonky.toolbar.selectedFileCount': `{fileCount, plural,
-      =0 {}
-      one {# выделен}
-      other {# выделено}
-    }`,
-    'chonky.toolbar.hiddenFileCount': `{fileCount, plural,
-      =0 {}
-      one {# скрыт}
-      other {# скрыто}
-    }`,
-    'chonky.fileList.nothingToShow': 'Здесь пусто!',
-    'chonky.contextMenu.browserMenuShortcut': 'Меню браузера: {shortcut}',
-
-    // Actions
-    [`chonky.actionGroups.Actions`]: 'Действия',
-    [`chonky.actionGroups.Options`]: 'Опции',
-    [`chonky.actions.${ChonkyActions.OpenParentFolder.id}.button.name`]: 'Открыть родительскую папку',
-    [`chonky.actions.${ChonkyActions.CreateFolder.id}.button.name`]: 'Новая папка',
-    [`chonky.actions.${ChonkyActions.CreateFolder.id}.button.tooltip`]: 'Создать новую папку',
-    [`chonky.actions.${ChonkyActions.DeleteFiles.id}.button.name`]: 'Удалить файлы',
-    [`chonky.actions.${ChonkyActions.OpenSelection.id}.button.name`]: 'Открыть выделение',
-    [`chonky.actions.${ChonkyActions.SelectAllFiles.id}.button.name`]: 'Выделить все',
-    [`chonky.actions.${ChonkyActions.ClearSelection.id}.button.name`]: 'Сбросить выделение',
-    [`chonky.actions.${ChonkyActions.EnableListView.id}.button.name`]: 'Показать список',
-    [`chonky.actions.${ChonkyActions.EnableGridView.id}.button.name`]: 'Показать иконки',
-    [`chonky.actions.${ChonkyActions.SortFilesByName.id}.button.name`]: 'Сорт. по имени',
-    [`chonky.actions.${ChonkyActions.SortFilesBySize.id}.button.name`]: 'Сорт. по размеру',
-    [`chonky.actions.${ChonkyActions.SortFilesByDate.id}.button.name`]: 'Сорт. по дате',
-    [`chonky.actions.${ChonkyActions.ToggleHiddenFiles.id}.button.name`]: 'Скрытые файлы',
-    [`chonky.actions.${ChonkyActions.ToggleShowFoldersFirst.id}.button.name`]: 'Папки в начале',
-  },
-};
-
-const hebrewI18n: I18nConfig = {
-  locale: SupportedLocales.HE,
-  formatters: { ...defaultFormatters },
-  messages: {
-    'chonky.toolbar.searchPlaceholder': 'חיפוש',
-    'chonky.toolbar.visibleFileCount': `{fileCount, plural,
-      one {פריט #}
-      other {# פריטים}
-    }`,
-    'chonky.toolbar.selectedFileCount': `{fileCount, plural,
-      =0 {}
-      one {# נבחר}
-      other {# נבחרו}
-    }`,
-    'chonky.toolbar.hiddenFileCount': `{fileCount, plural,
-      =0 {}
-      one {# נסתר}
-      other {# נסתרים}
-    }`,
-    'chonky.fileList.nothingToShow': 'ריק',
-    'chonky.contextMenu.browserMenuShortcut': 'תפריט דפדפן: {shortcut}',
-
-    // Actions
-    [`chonky.actionGroups.Actions`]: 'פעולות',
-    [`chonky.actionGroups.Options`]: 'אפשרויות',
-    [`chonky.actions.${ChonkyActions.OpenParentFolder.id}.button.name`]: 'פתח סיפריית אב',
-    [`chonky.actions.${ChonkyActions.CreateFolder.id}.button.name`]: 'סיפרייה חדשה',
-    [`chonky.actions.${ChonkyActions.CreateFolder.id}.button.tooltip`]: 'צור סיפרייה חדשה',
-    [`chonky.actions.${ChonkyActions.DeleteFiles.id}.button.name`]: 'מחק',
-    [`chonky.actions.${ChonkyActions.OpenSelection.id}.button.name`]: 'פתח את הבחירה',
-    [`chonky.actions.${ChonkyActions.SelectAllFiles.id}.button.name`]: 'בחר הכל',
-    [`chonky.actions.${ChonkyActions.ClearSelection.id}.button.name`]: 'אפס את הבחירה',
-    [`chonky.actions.${ChonkyActions.EnableListView.id}.button.name`]: 'תצוגת רשימה',
-    [`chonky.actions.${ChonkyActions.EnableGridView.id}.button.name`]: 'תצוגת גריד',
-    [`chonky.actions.${ChonkyActions.SortFilesByName.id}.button.name`]: 'מיון לפי שם',
-    [`chonky.actions.${ChonkyActions.SortFilesBySize.id}.button.name`]: 'מיון לפי גודל',
-    [`chonky.actions.${ChonkyActions.SortFilesByDate.id}.button.name`]: 'מיון לפי תאריך',
-    [`chonky.actions.${ChonkyActions.ToggleHiddenFiles.id}.button.name`]: 'קבצים נסתרים',
-    [`chonky.actions.${ChonkyActions.ToggleShowFoldersFirst.id}.button.name`]: 'הצגת תיקיות בראש הרשימה',
-  },
-};
-
-const localization: ILocalization = {
-  [SupportedLocales.EN]: englishI18n,
-  [SupportedLocales.RU]: russianI18n,
-  [SupportedLocales.HE]: hebrewI18n,
-};
-
-export default localization;
-/* eslint-enable */
+/* eslint-disable */
+import {
+  ChonkyActions,
+  ChonkyFormatters,
+  FileData,
+  FileHelper,
+  I18nConfig,
+} from 'chonky';
+import { IntlShape } from 'react-intl';
+import filesize from 'filesize';
+import { SupportedLocales } from '../models';
+
+export interface FilePickerFormatters extends ChonkyFormatters {
+  formatFileSize: (
+    intl: IntlShape | null,
+    file: FileData | null
+  ) => string | null;
+}
+
+interface IFileSize {
+  value: number;
+  symbol: string;
+  exponent: number;
+  unit: string;
+}
+
+export const defaultFormatters: FilePickerFormatters = {
+  formatFileModDate: (
+    intl: IntlShape,
+    file: FileData | null
+  ): string | null => {
+    const safeModDate = FileHelper.getModDate(file);
+    if (safeModDate) {
+      return intl.formatDate(safeModDate, {
+        dateStyle: 'short',
+        timeStyle: 'short',
+      });
+    } else {
+      return null;
+    }
+  },
+  formatFileSize: (
+    _intl: IntlShape | null,
+    file: FileData | null
+  ): string | null => {
+    if (!file || typeof file.size !== 'number') return null;
+
+    const size = file.size;
+    const sizeData = (filesize(size, {
+      bits: false,
+      output: 'object',
+    }) as unknown) as IFileSize;
+    if (sizeData.symbol === 'B') {
+      // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+      return `${Math.round(sizeData.value / 10) / 100.0} KB`;
+    } else if (sizeData.symbol === 'KB') {
+      return `${Math.round(sizeData.value)} ${sizeData.symbol}`;
+    }
+    return `${sizeData.value} ${sizeData.symbol.toUpperCase()}`;
+  },
+};
+
+interface ILocalization {
+  [key: string]: I18nConfig;
+}
+
+const englishI18n: I18nConfig = {
+  locale: SupportedLocales.EN,
+  formatters: { ...defaultFormatters },
+};
+
+const russianI18n: I18nConfig = {
+  locale: SupportedLocales.RU,
+  formatters: { ...defaultFormatters },
+  messages: {
+    'chonky.toolbar.searchPlaceholder': 'Поиск',
+    'chonky.toolbar.visibleFileCount': `{fileCount, plural,
+      one {# файл}
+      few {# файла}
+      other {# файлов}
+    }`,
+    'chonky.toolbar.selectedFileCount': `{fileCount, plural,
+      =0 {}
+      one {# выделен}
+      other {# выделено}
+    }`,
+    'chonky.toolbar.hiddenFileCount': `{fileCount, plural,
+      =0 {}
+      one {# скрыт}
+      other {# скрыто}
+    }`,
+    'chonky.fileList.nothingToShow': 'Здесь пусто!',
+    'chonky.contextMenu.browserMenuShortcut': 'Меню браузера: {shortcut}',
+
+    // Actions
+    [`chonky.actionGroups.Actions`]: 'Действия',
+    [`chonky.actionGroups.Options`]: 'Опции',
+    [`chonky.actions.${ChonkyActions.OpenParentFolder.id}.button.name`]: 'Открыть родительскую папку',
+    [`chonky.actions.${ChonkyActions.CreateFolder.id}.button.name`]: 'Новая папка',
+    [`chonky.actions.${ChonkyActions.CreateFolder.id}.button.tooltip`]: 'Создать новую папку',
+    [`chonky.actions.${ChonkyActions.DeleteFiles.id}.button.name`]: 'Удалить файлы',
+    [`chonky.actions.${ChonkyActions.OpenSelection.id}.button.name`]: 'Открыть выделение',
+    [`chonky.actions.${ChonkyActions.SelectAllFiles.id}.button.name`]: 'Выделить все',
+    [`chonky.actions.${ChonkyActions.ClearSelection.id}.button.name`]: 'Сбросить выделение',
+    [`chonky.actions.${ChonkyActions.EnableListView.id}.button.name`]: 'Показать список',
+    [`chonky.actions.${ChonkyActions.EnableGridView.id}.button.name`]: 'Показать иконки',
+    [`chonky.actions.${ChonkyActions.SortFilesByName.id}.button.name`]: 'Сорт. по имени',
+    [`chonky.actions.${ChonkyActions.SortFilesBySize.id}.button.name`]: 'Сорт. по размеру',
+    [`chonky.actions.${ChonkyActions.SortFilesByDate.id}.button.name`]: 'Сорт. по дате',
+    [`chonky.actions.${ChonkyActions.ToggleHiddenFiles.id}.button.name`]: 'Скрытые файлы',
+    [`chonky.actions.${ChonkyActions.ToggleShowFoldersFirst.id}.button.name`]: 'Папки в начале',
+  },
+};
+
+const hebrewI18n: I18nConfig = {
+  locale: SupportedLocales.HE,
+  formatters: { ...defaultFormatters },
+  messages: {
+    'chonky.toolbar.searchPlaceholder': 'חיפוש',
+    'chonky.toolbar.visibleFileCount': `{fileCount, plural,
+      one {פריט #}
+      other {# פריטים}
+    }`,
+    'chonky.toolbar.selectedFileCount': `{fileCount, plural,
+      =0 {}
+      one {# נבחר}
+      other {# נבחרו}
+    }`,
+    'chonky.toolbar.hiddenFileCount': `{fileCount, plural,
+      =0 {}
+      one {# נסתר}
+      other {# נסתרים}
+    }`,
+    'chonky.fileList.nothingToShow': 'ריק',
+    'chonky.contextMenu.browserMenuShortcut': 'תפריט דפדפן: {shortcut}',
+
+    // Actions
+    [`chonky.actionGroups.Actions`]: 'פעולות',
+    [`chonky.actionGroups.Options`]: 'אפשרויות',
+    [`chonky.actions.${ChonkyActions.OpenParentFolder.id}.button.name`]: 'פתח סיפריית אב',
+    [`chonky.actions.${ChonkyActions.CreateFolder.id}.button.name`]: 'סיפרייה חדשה',
+    [`chonky.actions.${ChonkyActions.CreateFolder.id}.button.tooltip`]: 'צור סיפרייה חדשה',
+    [`chonky.actions.${ChonkyActions.DeleteFiles.id}.button.name`]: 'מחק',
+    [`chonky.actions.${ChonkyActions.OpenSelection.id}.button.name`]: 'פתח את הבחירה',
+    [`chonky.actions.${ChonkyActions.SelectAllFiles.id}.button.name`]: 'בחר הכל',
+    [`chonky.actions.${ChonkyActions.ClearSelection.id}.button.name`]: 'אפס את הבחירה',
+    [`chonky.actions.${ChonkyActions.EnableListView.id}.button.name`]: 'תצוגת רשימה',
+    [`chonky.actions.${ChonkyActions.EnableGridView.id}.button.name`]: 'תצוגת גריד',
+    [`chonky.actions.${ChonkyActions.SortFilesByName.id}.button.name`]: 'מיון לפי שם',
+    [`chonky.actions.${ChonkyActions.SortFilesBySize.id}.button.name`]: 'מיון לפי גודל',
+    [`chonky.actions.${ChonkyActions.SortFilesByDate.id}.button.name`]: 'מיון לפי תאריך',
+    [`chonky.actions.${ChonkyActions.ToggleHiddenFiles.id}.button.name`]: 'קבצים נסתרים',
+    [`chonky.actions.${ChonkyActions.ToggleShowFoldersFirst.id}.button.name`]: 'הצגת תיקיות בראש הרשימה',
+  },
+};
+
+const localization: ILocalization = {
+  [SupportedLocales.EN]: englishI18n,
+  [SupportedLocales.RU]: russianI18n,
+  [SupportedLocales.HE]: hebrewI18n,
+};
+
+export default localization;
+/* eslint-enable */

package/src/lib/index.ts

@@ -1,13 +1,13 @@
-export * from './date-range-picker';
-export * from './date-picker';
-export * from './map-filter-container';
-export * from './models';
-export * from './ol-map';
-export * from './smart-table';
-export * from './popover';
-export * from './box';
-export * from './cssbaseline';
-export * from './theme';
-export * from './cesium-map';
-export * from './autocomplete';
-export * from './file-picker';
+export * from './date-range-picker';
+export * from './date-picker';
+export * from './map-filter-container';
+export * from './models';
+export * from './ol-map';
+export * from './smart-table';
+export * from './popover';
+export * from './box';
+export * from './cssbaseline';
+export * from './theme';
+export * from './cesium-map';
+export * from './autocomplete';
+export * from './file-picker';

package/src/lib/map-filter-container/container-map.css

@@ -1,5 +1,5 @@
-.ol-zoom {
-  top: 2.5em;
-  right: 0.5em;
-  left: unset;
-}
+.ol-zoom {
+  top: 2.5em;
+  right: 0.5em;
+  left: unset;
+}

package/src/lib/map-filter-container/container-map.tsx

@@ -1,48 +1,48 @@
-import React from 'react';
-import { Geometry } from 'geojson';
-import rewind from '@turf/rewind';
-import { Polygon } from 'geojson';
-import { Map } from '../ol-map/map';
-import { TileLayer } from '../ol-map/layers/tile-layer';
-import { VectorSource } from '../ol-map/source/vector-source';
-import { GeoJSONFeature } from '../ol-map/feature';
-import { TileOsm } from '../ol-map/source/osm';
-import { VectorLayer } from '../ol-map/layers/vector-layer';
-import { DrawInteraction } from '../ol-map/interactions/draw';
-import { DrawType } from '../models/enums';
-import './container-map.css';
-
-interface ContainerMapProps {
-  drawType?: DrawType;
-  selectionPolygon?: Polygon;
-  onPolygonSelection: (polygon: Polygon) => void;
-}
-
-export const ContainerMap: React.FC<ContainerMapProps> = (props) => {
-  const handlePolygonSelected = (geometry: Geometry): void => {
-    const rewindedPolygon = rewind(geometry as Polygon);
-    props.onPolygonSelection(rewindedPolygon);
-  };
-
-  return (
-    <Map allowFullScreen={true} showMousePosition={true}>
-      <TileLayer>
-        <TileOsm />
-      </TileLayer>
-      {props.selectionPolygon && (
-        <VectorLayer>
-          <VectorSource>
-            <GeoJSONFeature geometry={props.selectionPolygon} />
-          </VectorSource>
-        </VectorLayer>
-      )}
-      {props.children}
-      {props.drawType !== undefined && (
-        <DrawInteraction
-          drawType={props.drawType}
-          onPolygonSelected={handlePolygonSelected}
-        />
-      )}
-    </Map>
-  );
-};
+import React from 'react';
+import { Geometry } from 'geojson';
+import rewind from '@turf/rewind';
+import { Polygon } from 'geojson';
+import { Map } from '../ol-map/map';
+import { TileLayer } from '../ol-map/layers/tile-layer';
+import { VectorSource } from '../ol-map/source/vector-source';
+import { GeoJSONFeature } from '../ol-map/feature';
+import { TileOsm } from '../ol-map/source/osm';
+import { VectorLayer } from '../ol-map/layers/vector-layer';
+import { DrawInteraction } from '../ol-map/interactions/draw';
+import { DrawType } from '../models/enums';
+import './container-map.css';
+
+interface ContainerMapProps {
+  drawType?: DrawType;
+  selectionPolygon?: Polygon;
+  onPolygonSelection: (polygon: Polygon) => void;
+}
+
+export const ContainerMap: React.FC<ContainerMapProps> = (props) => {
+  const handlePolygonSelected = (geometry: Geometry): void => {
+    const rewindedPolygon = rewind(geometry as Polygon);
+    props.onPolygonSelection(rewindedPolygon);
+  };
+
+  return (
+    <Map allowFullScreen={true} showMousePosition={true}>
+      <TileLayer>
+        <TileOsm />
+      </TileLayer>
+      {props.selectionPolygon && (
+        <VectorLayer>
+          <VectorSource>
+            <GeoJSONFeature geometry={props.selectionPolygon} />
+          </VectorSource>
+        </VectorLayer>
+      )}
+      {props.children}
+      {props.drawType !== undefined && (
+        <DrawInteraction
+          drawType={props.drawType}
+          onPolygonSelected={handlePolygonSelected}
+        />
+      )}
+    </Map>
+  );
+};

package/src/lib/map-filter-container/index.ts

@@ -1 +1 @@
-export * from './map-filter-container';
+export * from './map-filter-container';

package/src/lib/map-filter-container/map-filter-container.tsx

@@ -1,91 +1,91 @@
-import React, { useState } from 'react';
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
-import { Paper } from '@material-ui/core';
-import { Polygon } from 'geojson';
-import { DrawType } from '../models/enums';
-import { PolygonSelectionUi } from './polygon-selection-ui';
-import { ContainerMap } from './container-map';
-
-const PLACEMENT_SPACING_FACTOR = 1.5;
-const WIDTH_SPACING_FACTOR = 80;
-const useStyle = makeStyles((theme: Theme) =>
-  createStyles({
-    map: {
-      height: '100%',
-      width: '100%',
-      position: 'absolute',
-    },
-    absolute: {
-      position: 'absolute',
-      zIndex: 1000,
-      left: theme.spacing(PLACEMENT_SPACING_FACTOR),
-      top: theme.spacing(PLACEMENT_SPACING_FACTOR),
-    },
-    contentContainer: {
-      marginTop: theme.spacing(PLACEMENT_SPACING_FACTOR),
-      width: theme.spacing(WIDTH_SPACING_FACTOR),
-    },
-    filtersContainer: {
-      display: 'flex',
-      padding: theme.spacing(1),
-    },
-    filtersMargin: {
-      marginLeft: theme.spacing(1),
-    },
-  })
-);
-
-export interface MapFilterContainerProps {
-  handlePolygonSelected: (polygon: Polygon) => void;
-  handlePolygonReset: () => void;
-  mapContent?: React.ReactNode;
-  filters?: React.ReactNode[];
-}
-
-export const MapFilterContainer: React.FC<MapFilterContainerProps> = (
-  props
-) => {
-  const [drawType, setDrawType] = useState<DrawType>();
-  const [selectionPolygon, setSelectionPolygon] = useState<Polygon>();
-  const classes = useStyle();
-
-  const onPolygonSelection = (polygon: Polygon): void => {
-    setSelectionPolygon(polygon);
-    setDrawType(undefined);
-    props.handlePolygonSelected(polygon);
-  };
-
-  const onReset = (): void => {
-    setSelectionPolygon(undefined);
-    props.handlePolygonReset();
-  };
-
-  return (
-    <div className={classes.map}>
-      <div className={`${classes.absolute}`}>
-        <Paper className={classes.filtersContainer}>
-          <PolygonSelectionUi
-            onCancelDraw={(): void => setDrawType(undefined)}
-            onReset={onReset}
-            onStartDraw={setDrawType}
-            isSelectionEnabled={drawType !== undefined}
-          />
-          {props.filters?.map((filter, index) => (
-            <div key={index} className={classes.filtersMargin}>
-              {filter}
-            </div>
-          ))}
-        </Paper>
-        <Paper color="red" className={`${classes.contentContainer}`}>
-          {props.children}
-        </Paper>
-      </div>
-      <ContainerMap
-        children={props.mapContent}
-        onPolygonSelection={onPolygonSelection}
-        drawType={drawType}
-        selectionPolygon={selectionPolygon}
-      />
-    </div>
-  );
-};
+import React, { useState } from 'react';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import { Paper } from '@material-ui/core';
+import { Polygon } from 'geojson';
+import { DrawType } from '../models/enums';
+import { PolygonSelectionUi } from './polygon-selection-ui';
+import { ContainerMap } from './container-map';
+
+const PLACEMENT_SPACING_FACTOR = 1.5;
+const WIDTH_SPACING_FACTOR = 80;
+const useStyle = makeStyles((theme: Theme) =>
+  createStyles({
+    map: {
+      height: '100%',
+      width: '100%',
+      position: 'absolute',
+    },
+    absolute: {
+      position: 'absolute',
+      zIndex: 1000,
+      left: theme.spacing(PLACEMENT_SPACING_FACTOR),
+      top: theme.spacing(PLACEMENT_SPACING_FACTOR),
+    },
+    contentContainer: {
+      marginTop: theme.spacing(PLACEMENT_SPACING_FACTOR),
+      width: theme.spacing(WIDTH_SPACING_FACTOR),
+    },
+    filtersContainer: {
+      display: 'flex',
+      padding: theme.spacing(1),
+    },
+    filtersMargin: {
+      marginLeft: theme.spacing(1),
+    },
+  })
+);
+
+export interface MapFilterContainerProps {
+  handlePolygonSelected: (polygon: Polygon) => void;
+  handlePolygonReset: () => void;
+  mapContent?: React.ReactNode;
+  filters?: React.ReactNode[];
+}
+
+export const MapFilterContainer: React.FC<MapFilterContainerProps> = (
+  props
+) => {
+  const [drawType, setDrawType] = useState<DrawType>();
+  const [selectionPolygon, setSelectionPolygon] = useState<Polygon>();
+  const classes = useStyle();
+
+  const onPolygonSelection = (polygon: Polygon): void => {
+    setSelectionPolygon(polygon);
+    setDrawType(undefined);
+    props.handlePolygonSelected(polygon);
+  };
+
+  const onReset = (): void => {
+    setSelectionPolygon(undefined);
+    props.handlePolygonReset();
+  };
+
+  return (
+    <div className={classes.map}>
+      <div className={`${classes.absolute}`}>
+        <Paper className={classes.filtersContainer}>
+          <PolygonSelectionUi
+            onCancelDraw={(): void => setDrawType(undefined)}
+            onReset={onReset}
+            onStartDraw={setDrawType}
+            isSelectionEnabled={drawType !== undefined}
+          />
+          {props.filters?.map((filter, index) => (
+            <div key={index} className={classes.filtersMargin}>
+              {filter}
+            </div>
+          ))}
+        </Paper>
+        <Paper color="red" className={`${classes.contentContainer}`}>
+          {props.children}
+        </Paper>
+      </div>
+      <ContainerMap
+        children={props.mapContent}
+        onPolygonSelection={onPolygonSelection}
+        drawType={drawType}
+        selectionPolygon={selectionPolygon}
+      />
+    </div>
+  );
+};