@map-colonies/react-components 3.12.2 → 3.13.0

package/src/lib/map-filter-container/polygon-selection-ui.spec.tsx

@@ -1,119 +1,119 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { MenuItem, Menu, Button } from '@map-colonies/react-core';
-import { DrawType } from '../models';
-import { PolygonSelectionUi } from './polygon-selection-ui';
-
-const startDraw = jest.fn();
-const cancelDraw = jest.fn();
-const resetDraw = jest.fn();
-afterEach(() => {
-  startDraw.mockClear();
-  cancelDraw.mockClear();
-  resetDraw.mockClear();
-});
-
-// it('renders correctly', () => {
-//   // const store = rootStore.create({}, { fetch: conflictFetcher })
-//   const tree = renderer
-//     .create(
-//       <PolygonSelectionUi
-//         isSelectionEnabled={false}
-//         onCancelDraw={() => {}}
-//         onReset={() => {}}
-//         onStartDraw={() => {}}
-//       />
-//     )
-//     .toJSON();
-//   expect(tree).toMatchSnapshot();
-// });
-
-it('opens the menu with drawing options on open menu button click', () => {
-  const wrapper = shallow(
-    <PolygonSelectionUi
-      onStartDraw={startDraw}
-      onCancelDraw={cancelDraw}
-      onReset={resetDraw}
-      isSelectionEnabled={false}
-    />
-  );
-
-  expect(wrapper.find(Menu).prop('open')).toBe(false);
-
-  wrapper.find(Button).simulate('click', { currentTarget: {} });
-
-  expect(wrapper.find(Menu).prop('open')).toBe(true);
-});
-
-it('Polygon/box drawing menu items call start draw with correct params on click and closes the menu', () => {
-  const wrapper = shallow(
-    <PolygonSelectionUi
-      onStartDraw={startDraw}
-      onCancelDraw={cancelDraw}
-      onReset={resetDraw}
-      isSelectionEnabled={false}
-    />
-  );
-
-  const openMenuButton = wrapper.find(Button);
-  openMenuButton.simulate('click', { currentTarget: {} });
-
-  wrapper
-    .findWhere((n) => n.type() === MenuItem && n.prop('children') === 'Polygon')
-    .simulate('click');
-
-  expect(wrapper.find(Menu).prop('open')).toBe(false);
-  expect(startDraw).toHaveBeenCalledWith(DrawType.POLYGON);
-  expect(startDraw).toHaveBeenCalledTimes(1);
-
-  startDraw.mockClear();
-
-  openMenuButton.simulate('click', { currentTarget: {} });
-  wrapper
-    .findWhere((n) => n.type() === MenuItem && n.prop('children') === 'Box')
-    .simulate('click');
-
-  expect(wrapper.find(Menu).prop('open')).toBe(false);
-  expect(startDraw).toHaveBeenCalledWith(DrawType.BOX);
-  expect(startDraw).toHaveBeenCalledTimes(1);
-});
-
-it('clicking the clear menu item calls onreset and closes the menu', () => {
-  const wrapper = shallow(
-    <PolygonSelectionUi
-      onStartDraw={startDraw}
-      onCancelDraw={cancelDraw}
-      onReset={resetDraw}
-      isSelectionEnabled={false}
-    />
-  );
-
-  const openMenuButton = wrapper.find(Button);
-  openMenuButton.simulate('click', { currentTarget: {} });
-
-  wrapper
-    .findWhere((n) => n.type() === MenuItem && n.prop('children') === 'Clear')
-    .simulate('click');
-
-  expect(wrapper.find(Menu).prop('open')).toBe(false);
-  expect(resetDraw).toHaveBeenCalledTimes(1);
-});
-
-it('Cancel draw is shown when IsSelectionEnabled is true, and clicking on the button calls onCancelDraw', () => {
-  const wrapper = shallow(
-    <PolygonSelectionUi
-      onStartDraw={startDraw}
-      onCancelDraw={cancelDraw}
-      onReset={resetDraw}
-      isSelectionEnabled={true}
-    />
-  );
-
-  const button = wrapper.find(Button);
-
-  expect(button.prop('children')).toBe('Cancel Draw');
-
-  button.simulate('click');
-
-  expect(cancelDraw).toHaveBeenCalledTimes(1);
-});
+import React from 'react';
+import { shallow } from 'enzyme';
+import { MenuItem, Menu, Button } from '@map-colonies/react-core';
+import { DrawType } from '../models';
+import { PolygonSelectionUi } from './polygon-selection-ui';
+
+const startDraw = jest.fn();
+const cancelDraw = jest.fn();
+const resetDraw = jest.fn();
+afterEach(() => {
+  startDraw.mockClear();
+  cancelDraw.mockClear();
+  resetDraw.mockClear();
+});
+
+// it('renders correctly', () => {
+//   // const store = rootStore.create({}, { fetch: conflictFetcher })
+//   const tree = renderer
+//     .create(
+//       <PolygonSelectionUi
+//         isSelectionEnabled={false}
+//         onCancelDraw={() => {}}
+//         onReset={() => {}}
+//         onStartDraw={() => {}}
+//       />
+//     )
+//     .toJSON();
+//   expect(tree).toMatchSnapshot();
+// });
+
+it('opens the menu with drawing options on open menu button click', () => {
+  const wrapper = shallow(
+    <PolygonSelectionUi
+      onStartDraw={startDraw}
+      onCancelDraw={cancelDraw}
+      onReset={resetDraw}
+      isSelectionEnabled={false}
+    />
+  );
+
+  expect(wrapper.find(Menu).prop('open')).toBe(false);
+
+  wrapper.find(Button).simulate('click', { currentTarget: {} });
+
+  expect(wrapper.find(Menu).prop('open')).toBe(true);
+});
+
+it('Polygon/box drawing menu items call start draw with correct params on click and closes the menu', () => {
+  const wrapper = shallow(
+    <PolygonSelectionUi
+      onStartDraw={startDraw}
+      onCancelDraw={cancelDraw}
+      onReset={resetDraw}
+      isSelectionEnabled={false}
+    />
+  );
+
+  const openMenuButton = wrapper.find(Button);
+  openMenuButton.simulate('click', { currentTarget: {} });
+
+  wrapper
+    .findWhere((n) => n.type() === MenuItem && n.prop('children') === 'Polygon')
+    .simulate('click');
+
+  expect(wrapper.find(Menu).prop('open')).toBe(false);
+  expect(startDraw).toHaveBeenCalledWith(DrawType.POLYGON);
+  expect(startDraw).toHaveBeenCalledTimes(1);
+
+  startDraw.mockClear();
+
+  openMenuButton.simulate('click', { currentTarget: {} });
+  wrapper
+    .findWhere((n) => n.type() === MenuItem && n.prop('children') === 'Box')
+    .simulate('click');
+
+  expect(wrapper.find(Menu).prop('open')).toBe(false);
+  expect(startDraw).toHaveBeenCalledWith(DrawType.BOX);
+  expect(startDraw).toHaveBeenCalledTimes(1);
+});
+
+it('clicking the clear menu item calls onreset and closes the menu', () => {
+  const wrapper = shallow(
+    <PolygonSelectionUi
+      onStartDraw={startDraw}
+      onCancelDraw={cancelDraw}
+      onReset={resetDraw}
+      isSelectionEnabled={false}
+    />
+  );
+
+  const openMenuButton = wrapper.find(Button);
+  openMenuButton.simulate('click', { currentTarget: {} });
+
+  wrapper
+    .findWhere((n) => n.type() === MenuItem && n.prop('children') === 'Clear')
+    .simulate('click');
+
+  expect(wrapper.find(Menu).prop('open')).toBe(false);
+  expect(resetDraw).toHaveBeenCalledTimes(1);
+});
+
+it('Cancel draw is shown when IsSelectionEnabled is true, and clicking on the button calls onCancelDraw', () => {
+  const wrapper = shallow(
+    <PolygonSelectionUi
+      onStartDraw={startDraw}
+      onCancelDraw={cancelDraw}
+      onReset={resetDraw}
+      isSelectionEnabled={true}
+    />
+  );
+
+  const button = wrapper.find(Button);
+
+  expect(button.prop('children')).toBe('Cancel Draw');
+
+  button.simulate('click');
+
+  expect(cancelDraw).toHaveBeenCalledTimes(1);
+});

package/src/lib/map-filter-container/polygon-selection-ui.tsx

@@ -1,111 +1,111 @@
-import React from 'react';
-import { Menu, MenuItem, Button, Tooltip } from '@map-colonies/react-core';
-import '@map-colonies/react-core/dist/button/styles';
-import '@map-colonies/react-core/dist/tooltip/styles';
-import '@map-colonies/react-core/dist/menu/styles';
-
-import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
-
-import { DrawType } from '../models/enums';
-import { Box } from '../box';
-
-const WIDTH_SPACING_FACTOR = 18;
-const useStyle = makeStyles((theme: Theme) =>
-  createStyles({
-    drawingButton: {
-      width: theme.spacing(WIDTH_SPACING_FACTOR),
-    },
-    fullWidth: {
-      width: '100%',
-      marginTop: '36px',
-    },
-  })
-);
-
-export interface PolygonSelectionUiProps {
-  isSelectionEnabled: boolean;
-  onStartDraw: (type: DrawType) => void;
-  onCancelDraw: () => void;
-  onReset: () => void;
-}
-
-export const PolygonSelectionUi: React.FC<PolygonSelectionUiProps> = (
-  props
-) => {
-  const classes = useStyle();
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-  const { isSelectionEnabled, onCancelDraw, onStartDraw, onReset } = props;
-
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = (): void => {
-    setAnchorEl(null);
-  };
-
-  if (isSelectionEnabled) {
-    return (
-      <Tooltip content="Cancel the ongoing draw" align={'bottomLeft'}>
-        <Button className={classes.drawingButton} raised onClick={onCancelDraw}>
-          Cancel Draw
-        </Button>
-      </Tooltip>
-    );
-  } else {
-    return (
-      <Box position="relative">
-        <Tooltip
-          content="draw an Area of interest to limit the search"
-          align={'bottomLeft'}
-        >
-          <Button
-            className={classes.drawingButton}
-            raised
-            onClick={handleClick}
-          >
-            Draw AOI
-          </Button>
-        </Tooltip>
-        <Menu
-          className={classes.fullWidth}
-          open={Boolean(anchorEl)}
-          // keepMounted
-          onClose={handleClose}
-          // anchorEl={anchorEl}
-          // getContentAnchorEl={null}
-          // anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-          // transformOrigin={{
-          //   vertical: 'top',
-          //   horizontal: 'center',
-          // }}
-        >
-          <MenuItem
-            onClick={(): void => {
-              onStartDraw(DrawType.POLYGON);
-              handleClose();
-            }}
-          >
-            Polygon
-          </MenuItem>
-          <MenuItem
-            onClick={(): void => {
-              onStartDraw(DrawType.BOX);
-              handleClose();
-            }}
-          >
-            Box
-          </MenuItem>
-          <MenuItem
-            onClick={(): void => {
-              onReset();
-              handleClose();
-            }}
-          >
-            Clear
-          </MenuItem>
-        </Menu>
-      </Box>
-    );
-  }
-};
+import React from 'react';
+import { Menu, MenuItem, Button, Tooltip } from '@map-colonies/react-core';
+import '@map-colonies/react-core/dist/button/styles';
+import '@map-colonies/react-core/dist/tooltip/styles';
+import '@map-colonies/react-core/dist/menu/styles';
+
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+
+import { DrawType } from '../models/enums';
+import { Box } from '../box';
+
+const WIDTH_SPACING_FACTOR = 18;
+const useStyle = makeStyles((theme: Theme) =>
+  createStyles({
+    drawingButton: {
+      width: theme.spacing(WIDTH_SPACING_FACTOR),
+    },
+    fullWidth: {
+      width: '100%',
+      marginTop: '36px',
+    },
+  })
+);
+
+export interface PolygonSelectionUiProps {
+  isSelectionEnabled: boolean;
+  onStartDraw: (type: DrawType) => void;
+  onCancelDraw: () => void;
+  onReset: () => void;
+}
+
+export const PolygonSelectionUi: React.FC<PolygonSelectionUiProps> = (
+  props
+) => {
+  const classes = useStyle();
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const { isSelectionEnabled, onCancelDraw, onStartDraw, onReset } = props;
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = (): void => {
+    setAnchorEl(null);
+  };
+
+  if (isSelectionEnabled) {
+    return (
+      <Tooltip content="Cancel the ongoing draw" align={'bottomLeft'}>
+        <Button className={classes.drawingButton} raised onClick={onCancelDraw}>
+          Cancel Draw
+        </Button>
+      </Tooltip>
+    );
+  } else {
+    return (
+      <Box position="relative">
+        <Tooltip
+          content="draw an Area of interest to limit the search"
+          align={'bottomLeft'}
+        >
+          <Button
+            className={classes.drawingButton}
+            raised
+            onClick={handleClick}
+          >
+            Draw AOI
+          </Button>
+        </Tooltip>
+        <Menu
+          className={classes.fullWidth}
+          open={Boolean(anchorEl)}
+          // keepMounted
+          onClose={handleClose}
+          // anchorEl={anchorEl}
+          // getContentAnchorEl={null}
+          // anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+          // transformOrigin={{
+          //   vertical: 'top',
+          //   horizontal: 'center',
+          // }}
+        >
+          <MenuItem
+            onClick={(): void => {
+              onStartDraw(DrawType.POLYGON);
+              handleClose();
+            }}
+          >
+            Polygon
+          </MenuItem>
+          <MenuItem
+            onClick={(): void => {
+              onStartDraw(DrawType.BOX);
+              handleClose();
+            }}
+          >
+            Box
+          </MenuItem>
+          <MenuItem
+            onClick={(): void => {
+              onReset();
+              handleClose();
+            }}
+          >
+            Clear
+          </MenuItem>
+        </Menu>
+      </Box>
+    );
+  }
+};

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

@@ -1,76 +1,76 @@
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-import { Button, Typography } from '@map-colonies/react-core';
-import { MapFilterContainer } from '../map-filter-container';
-import { CSFStory } from '../../utils/story';
-import { Box } from '../..';
-import { VectorLayer, VectorSource, GeoJSONFeature } from '../../ol-map';
-
-export default {
-  title: 'Map Filter Container',
-  component: MapFilterContainer,
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-export const Basic: CSFStory<JSX.Element> = () => (
-  <MapFilterContainer
-    handlePolygonReset={action('vector source cleared')}
-    handlePolygonSelected={action('shape selected')}
-  />
-);
-
-export const ExtraFilters: CSFStory<JSX.Element> = () => (
-  <MapFilterContainer
-    filters={[
-      <Button outlined raised>
-        dont click me
-      </Button>,
-      <Button outlined raised>
-        also dont click me
-      </Button>,
-    ]}
-    handlePolygonReset={action('vector source cleared')}
-    handlePolygonSelected={action('shape selected')}
-  />
-);
-
-export const WithChildren: CSFStory<JSX.Element> = () => (
-  <MapFilterContainer
-    handlePolygonReset={action('vector source cleared')}
-    handlePolygonSelected={action('shape selected')}
-  >
-    <Box style={{ height: '300px' }}>
-      <Typography tag="div" style={{ margin: '16px 0' }} use="headline1">
-        Generic title
-      </Typography>
-    </Box>
-  </MapFilterContainer>
-);
-
-export const WithMapContent: CSFStory<JSX.Element> = () => (
-  <MapFilterContainer
-    handlePolygonReset={action('vector source cleared')}
-    handlePolygonSelected={action('shape selected')}
-    mapContent={
-      <VectorLayer>
-        <VectorSource>
-          <GeoJSONFeature
-            geometry={{
-              type: 'Polygon',
-              coordinates: [
-                [
-                  [35.25787353515625, 31.942839972853083],
-                  [35.0628662109375, 31.70713974681462],
-                  [35.429534912109375, 31.7059714181356],
-                  [35.25787353515625, 31.942839972853083],
-                ],
-              ],
-            }}
-          />
-        </VectorSource>
-      </VectorLayer>
-    }
-  />
-);
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { Button, Typography } from '@map-colonies/react-core';
+import { MapFilterContainer } from '../map-filter-container';
+import { CSFStory } from '../../utils/story';
+import { Box } from '../..';
+import { VectorLayer, VectorSource, GeoJSONFeature } from '../../ol-map';
+
+export default {
+  title: 'Map Filter Container',
+  component: MapFilterContainer,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Basic: CSFStory<JSX.Element> = () => (
+  <MapFilterContainer
+    handlePolygonReset={action('vector source cleared')}
+    handlePolygonSelected={action('shape selected')}
+  />
+);
+
+export const ExtraFilters: CSFStory<JSX.Element> = () => (
+  <MapFilterContainer
+    filters={[
+      <Button outlined raised>
+        dont click me
+      </Button>,
+      <Button outlined raised>
+        also dont click me
+      </Button>,
+    ]}
+    handlePolygonReset={action('vector source cleared')}
+    handlePolygonSelected={action('shape selected')}
+  />
+);
+
+export const WithChildren: CSFStory<JSX.Element> = () => (
+  <MapFilterContainer
+    handlePolygonReset={action('vector source cleared')}
+    handlePolygonSelected={action('shape selected')}
+  >
+    <Box style={{ height: '300px' }}>
+      <Typography tag="div" style={{ margin: '16px 0' }} use="headline1">
+        Generic title
+      </Typography>
+    </Box>
+  </MapFilterContainer>
+);
+
+export const WithMapContent: CSFStory<JSX.Element> = () => (
+  <MapFilterContainer
+    handlePolygonReset={action('vector source cleared')}
+    handlePolygonSelected={action('shape selected')}
+    mapContent={
+      <VectorLayer>
+        <VectorSource>
+          <GeoJSONFeature
+            geometry={{
+              type: 'Polygon',
+              coordinates: [
+                [
+                  [35.25787353515625, 31.942839972853083],
+                  [35.0628662109375, 31.70713974681462],
+                  [35.429534912109375, 31.7059714181356],
+                  [35.25787353515625, 31.942839972853083],
+                ],
+              ],
+            }}
+          />
+        </VectorSource>
+      </VectorLayer>
+    }
+  />
+);