refactor: remove deprecated HOC components

BREAKING CHANGE: mappify, loadify, isVisibleComponent HOCs as well as MapProvider class were removed

src/Context/MapContext/MapContext.example.md

@@ -1,8 +1,6 @@
 This example shows the usage of the MapContext which uses the new React Context API introduced
 with [react 16.3](https://reactjs.org/docs/context.html).
 
-It replaces the old `MapProvider` and `mappify` HOC.
-
 If you are using function-components head over to the `useMap` example in the "HOOKS" section.
 
 ```jsx
@@ -15,43 +13,33 @@ import OlView from 'ol/View';
 import OlLayerTile from 'ol/layer/Tile';
 import OlSourceOsm from 'ol/source/OSM';
 
-class MapContextExample extends React.Component {
-
-  constructor(props) {
-    super(props);
-    const layer = new OlLayerTile({
-      source: new OlSourceOsm()
-    });
-    const olMap = new OlMap({
-      view: new OlView({
-        center: [
-          135.1691495,
-          34.6565482
-        ],
-        projection: 'EPSG:4326',
-        zoom: 16,
-      }),
-      layers: [layer]
-    });
-    this.map = olMap;
-  }
-
-  render() {
-    return (
-      <MapContext.Provider value={this.map}>
-        <MapContext.Consumer>
-          {(map) => {
-            return <MapComponent
-              map={map}
-              style={{
-                height: '400px'
-              }}
-            />
-          }}
-        </MapContext.Consumer>
-      </MapContext.Provider>
-    );
-  }
+const MapContextExample = () => {
+
+  const layer = new OlLayerTile({
+    source: new OlSourceOsm()
+  });
+  const olMap = new OlMap({
+    view: new OlView({
+      center: [
+        135.1691495,
+        34.6565482
+      ],
+      projection: 'EPSG:4326',
+      zoom: 16,
+    }),
+    layers: [layer]
+  });
+
+  return (
+    <MapContext.Provider value={olMap}>
+      <MapComponent
+        map={olMap}
+        style={{
+          height: '400px'
+        }}
+      />
+    </MapContext.Provider>
+  );
 }
 
 <MapContextExample />

src/HigherOrderComponent/DropTargetMap/DropTargetMap.example.md

@@ -1,6 +1,5 @@
 This example shows the usage of the DropTargetMap HOC by use of the onDropAware
-function. The wrapped map component needs to be mappified in order to access
-the map.
+function.
 
 ```jsx
 import * as React from 'react';
@@ -12,20 +11,15 @@ import OlSourceOSM from 'ol/source/OSM';
 
 import onDropAware from '@terrestris/react-geo/dist/HigherOrderComponent/DropTargetMap/DropTargetMap';
 import MapComponent from '@terrestris/react-geo/dist/Map/MapComponent/MapComponent';
-import MapProvider from '@terrestris/react-geo/dist/Provider/MapProvider/MapProvider';
-import { mappify } from '@terrestris/react-geo/dist/HigherOrderComponent/MappifiedComponent/MappifiedComponent';
-
-/**
- * Create the OlMap (you could do some asynchronus stuff here).
- *
- * @return {Promise} Promise that resolves an OlMap.
- */
-const mapPromise = new Promise((resolve) => {
+import MapContext from '@terrestris/react-geo/dist/Context/MapContext/MapContext';
+import { useMap } from '@terrestris/react-geo/dist/Hook/useMap';
+
+const DropTargetMapExample = () => {
+
   const layer = new OlLayerTile({
     source: new OlSourceOSM()
   });
-
-  const map = new OlMap({
+  const olMap = new OlMap({
     view: new OlView({
       center: [
         135.1691495,
@@ -37,13 +31,26 @@ const mapPromise = new Promise((resolve) => {
     layers: [layer]
   });
 
-  resolve(map);
-});
-
-const Map = mappify(onDropAware(MapComponent));
-
-<MapProvider map={mapPromise}>
-  <Map style={{
-    height: '512px'
-  }} />
-</MapProvider>
+  const mapComponent = () => {
+    const map = useMap();
+    return (
+      <MapComponent
+        map={map}
+        style={{
+          height: '512px'
+        }}
+      />
+    );
+  };
+
+  const DropTargetMapComponent = onDropAware(mapComponent);
+
+  return (
+    <MapContext.Provider value={olMap}>
+      <DropTargetMapComponent map={olMap}/>
+    </MapContext.Provider>
+  )
+}
+
+<DropTargetMapExample />
+```

src/HigherOrderComponent/DropTargetMap/DropTargetMap.tsx

@@ -50,14 +50,18 @@ export function onDropAware(WrappedComponent: React.ComponentType<MapComponentPr
      * Injects the onDrop and onDragOver properties.
      * @return The wrapped component.
      */
-    render = () => {
-      return <WrappedComponent
-        onDrop={this.onDrop.bind(this)}
-        onDragOver={this.onDragOver}
-        {...this.props}
-      />;
+    render() {
+      return (
+        <div
+          onDrop={this.onDrop.bind(this)}
+          onDragOver={this.onDragOver}
+        >
+          <WrappedComponent
+            {...this.props}
+          />
+        </div>
+      );
     };
-
   };
 
 }