diff --git a/src/Context/MapContext/MapContext.example.md b/src/Context/MapContext/MapContext.example.md index 36ff8eafbf..8b7819c58a 100644 --- a/src/Context/MapContext/MapContext.example.md +++ b/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 ( - - - {(map) => { - return - }} - - - ); - } +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 ( + + + + ); } diff --git a/src/HigherOrderComponent/DropTargetMap/DropTargetMap.example.md b/src/HigherOrderComponent/DropTargetMap/DropTargetMap.example.md index 67181e4ba8..1fea59758f 100644 --- a/src/HigherOrderComponent/DropTargetMap/DropTargetMap.example.md +++ b/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)); - - - - + const mapComponent = () => { + const map = useMap(); + return ( + + ); + }; + + const DropTargetMapComponent = onDropAware(mapComponent); + + return ( + + + + ) +} + + +``` diff --git a/src/HigherOrderComponent/DropTargetMap/DropTargetMap.tsx b/src/HigherOrderComponent/DropTargetMap/DropTargetMap.tsx index 89bc470f38..b59d7d60f5 100644 --- a/src/HigherOrderComponent/DropTargetMap/DropTargetMap.tsx +++ b/src/HigherOrderComponent/DropTargetMap/DropTargetMap.tsx @@ -50,14 +50,18 @@ export function onDropAware(WrappedComponent: React.ComponentType { - return ; + render() { + return ( +
+ +
+ ); }; - }; } diff --git a/src/HigherOrderComponent/LoadifiedComponent/LoadifiedComponent.example.md b/src/HigherOrderComponent/LoadifiedComponent/LoadifiedComponent.example.md deleted file mode 100644 index df2a67434c..0000000000 --- a/src/HigherOrderComponent/LoadifiedComponent/LoadifiedComponent.example.md +++ /dev/null @@ -1,143 +0,0 @@ -This demonstrates the use of The `LoadifiedComponent` HOC (High Order Component). - -The example below you see a `SimpleButton` that changes the `Titlebar`'s loading status: -```jsx -import * as React from 'react'; - -import SimpleButton from '@terrestris/react-geo/dist/Button/SimpleButton/SimpleButton'; -import Titlebar from '@terrestris/react-geo/dist/Panel/Titlebar/Titlebar'; -import { loadify } from '@terrestris/react-geo/dist/HigherOrderComponent/LoadifiedComponent/LoadifiedComponent'; - -const LoadingPanel = loadify(Titlebar); - -class LoadingTitleBar extends React.Component { - - constructor(props) { - super(props); - this.state = { - loading: false - }; - } - - loadingChange() { - const { loading } = this.state; - this.setState({ - loading: !loading - }); - } - - render() { - const { loading } = this.state; - return ( -
- A simple Titlebar - - - start/stop loading - -
- ); - } -} - - -``` -This shows the use of the component with the `LayerTree` component. -Changing the layer orders in the `layerTree` will trigger the loading status to change. -```jsx -import * as React from 'react'; - -import OlMap from 'ol/Map'; -import OlView from 'ol/View'; -import OlLayerGroup from 'ol/layer/Group'; -import OlLayerTile from 'ol/layer/Tile'; -import OlSourceOSM from 'ol/source/OSM'; -import OlSourceTileWMS from 'ol/source/TileWMS'; -import { fromLonLat } from 'ol/proj'; - -import LayerTree from '@terrestris/react-geo/dist/LayerTree/LayerTree'; -import { loadify } from '@terrestris/react-geo/dist/HigherOrderComponent/LoadifiedComponent/LoadifiedComponent'; - -const LoadingTree = loadify(LayerTree); - -class LoadingTreeExample extends React.Component { - - constructor(props) { - super(props); - - this.mapDivId = `map-${Math.random()}`; - this.layerGroup = new OlLayerGroup({ - name: 'Layergroup', - layers: [ - new OlLayerTile({ - name: 'OSM', - source: new OlSourceOSM() - }), - new OlLayerTile({ - name: 'SRTM30-Contour', - minResolution: 0, - maxResolution: 10, - source: new OlSourceTileWMS({ - url: 'https://ows.terrestris.de/osm/service', - params: { - LAYERS: 'SRTM30-Contour' - } - }) - }) - ] - }); - this.map = new OlMap({ - layers: [this.layerGroup], - view: new OlView({ - center: fromLonLat([12.924, 47.551]), - zoom: 13 - }) - }); - - this.state = { - loading: false - }; - } - - loadingStart() { - this.setState({ - loading: true - }); - } - - loadingEnd() { - this.setState({ - loading: false - }); - } - - componentDidMount() { - this.map.setTarget(this.mapDivId); - } - - render() { - return ( -
- -
- ); - } -} - -``` diff --git a/src/HigherOrderComponent/LoadifiedComponent/LoadifiedComponent.spec.tsx b/src/HigherOrderComponent/LoadifiedComponent/LoadifiedComponent.spec.tsx deleted file mode 100644 index 2df8cf2e70..0000000000 --- a/src/HigherOrderComponent/LoadifiedComponent/LoadifiedComponent.spec.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import * as React from 'react'; -import TestUtil from '../../Util/TestUtil'; -import { loadify } from './LoadifiedComponent'; - -describe('loadify', () => { - let EnhancedComponent; - - class MockComponent extends React.Component { - render() { - return ( -
A mock Component
- ); - } - } - - beforeEach(() => { - EnhancedComponent = loadify(MockComponent); - }); - - describe('Basics', () => { - it('is defined', () => { - expect(loadify).not.toBeUndefined(); - }); - - it('can be rendered', () => { - const wrapper = TestUtil.mountComponent(EnhancedComponent); - expect(wrapper).not.toBeUndefined(); - expect(wrapper.first().is(EnhancedComponent)).toBe(true); - }); - - it('passes through all props except Spin props', () => { - const props = { - someProp: '09', - otherProp: 'ppp', - spinning: false - }; - const expectedProps = { - someProp: '09', - otherProp: 'ppp' - }; - const wrapper = TestUtil.mountComponent(EnhancedComponent, props); - const wrappedInstance = wrapper.childAt(0).prop('children'); - - expect(wrappedInstance.props).toEqual(expectedProps); - }); - - it('shows or hides the Loading component based on the spinning prop', () => { - let wrapper = TestUtil.mountComponent(EnhancedComponent); - - // 1. Don't Show loading sign. - wrapper = TestUtil.mountComponent(EnhancedComponent, { - spinning: false - }); - expect(wrapper.find('.ant-spin').length).toBe(0); - - // 2. show loading sign. - wrapper = TestUtil.mountComponent(EnhancedComponent, { - spinning: true - }); - expect(wrapper.find('.ant-spin').length).toBe(1); - }); - }); -}); diff --git a/src/HigherOrderComponent/LoadifiedComponent/LoadifiedComponent.tsx b/src/HigherOrderComponent/LoadifiedComponent/LoadifiedComponent.tsx deleted file mode 100644 index 79adefb557..0000000000 --- a/src/HigherOrderComponent/LoadifiedComponent/LoadifiedComponent.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import * as React from 'react'; -import { Spin } from 'antd'; -import { SpinProps } from 'antd/lib/spin'; - -/** - * The HOC factory function. - * - * Wrapped components will be used as the content of the Loader component. - * If the wrapped component is set to be loading the loader element - * will be shown and if not it wont. - * - * @param WrappedComponent The component to wrap and enhance. - * @return The wrapped component. - */ -export function loadify

(WrappedComponent: React.ComponentType) { - - /** - * The wrapper class for the given component. - * - * @class The loadify - * @extends React.Component - */ - return class LoadifiedComponent extends React.Component

> { - - /** - * The default properties. - */ - static defaultProps = { - spinning: false - }; - - /** - * Create the Loadify. - * - * @constructs Loadify - */ - constructor(props: P & Partial) { - super(props); - } - - /** - * The render function. - */ - render() { - const { - size, - indicator, - tip, - delay, - spinning, - ...passThroughProps - } = this.props; - - // Propoerties passed to the Spin component. For the List of all the Spin component - // properties see: - // https://ant.design/components/spin/ - const passToLoader: Partial = { - size, - indicator, - tip, - delay, - spinning - }; - - return ( - - - - ); - } - }; -} - -export default loadify; diff --git a/src/HigherOrderComponent/MappifiedComponent/MappifiedComponent.spec.tsx b/src/HigherOrderComponent/MappifiedComponent/MappifiedComponent.spec.tsx deleted file mode 100644 index 03fe0b13a2..0000000000 --- a/src/HigherOrderComponent/MappifiedComponent/MappifiedComponent.spec.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import * as React from 'react'; - -import TestUtil from '../../Util/TestUtil'; - -import { mappify } from './MappifiedComponent'; - -import Logger from '@terrestris/base-util/dist/Logger'; - -describe('mappify', () => { - let EnhancedComponent; - let map; - - class MockComponent extends React.Component { - render() { - return ( -

A mock Component
- ); - } - } - - beforeEach(() => { - map = TestUtil.createMap(); - EnhancedComponent = mappify(MockComponent); - }); - - describe('Basics', () => { - it('is defined', () => { - expect(mappify).not.toBeUndefined(); - }); - - it('can be rendered', () => { - const wrapper = TestUtil.mountComponent(EnhancedComponent, {}, {context: {map}}); - - expect(wrapper).not.toBeUndefined(); - expect(wrapper.first().is(EnhancedComponent)).toBe(true); - }); - - it('adds the map from the context as a prop', () => { - const wrapper = TestUtil.mountComponent(EnhancedComponent, {}, {context: {map}}); - const wrappedInstance = wrapper.childAt(0).instance(); - - expect(wrappedInstance.props.map).toBe(map); - }); - - it('warns if no map is given in the context', () => { - const loggerSpy = jest.spyOn(Logger, 'warn'); - TestUtil.mountComponent(EnhancedComponent); - expect(loggerSpy).toHaveBeenCalled(); - expect(loggerSpy).toHaveBeenCalledWith('You\'re trying to mappify a ' + - 'component without any map in the context. Did you implement ' + - 'the MapProvider?'); - loggerSpy.mockRestore(); - }); - - it('passes through all props', () => { - const props = { - someProp: '10', - name: 'Podolski' - }; - const expectedProps = { - someProp: '10', - name: 'Podolski', - map: map - }; - const wrapper = TestUtil.mountComponent(EnhancedComponent, props, {context: {map}}); - const wrappedInstance = wrapper.childAt(0).instance(); - - expect(wrappedInstance.props).toEqual(expectedProps); - }); - - }); -}); diff --git a/src/HigherOrderComponent/MappifiedComponent/MappifiedComponent.tsx b/src/HigherOrderComponent/MappifiedComponent/MappifiedComponent.tsx deleted file mode 100644 index 2f636a79ba..0000000000 --- a/src/HigherOrderComponent/MappifiedComponent/MappifiedComponent.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import * as React from 'react'; -import * as PropTypes from 'prop-types'; -import OlMap from 'ol/Map'; - -import Logger from '@terrestris/base-util/dist/Logger'; - -/** - * The HOC factory function. - * - * Wrapped components will receive the map from the context as a prop. - * - * @param WrappedComponent The component to wrap and enhance. - * @return The wrapped component. - */ -export function mappify

(WrappedComponent: React.ComponentType

) { - - /** - * The wrapper class for the given component. - * - * @class The MappifiedComponent - * @extends React.Component - */ - return class MappifiedComponent extends React.Component> { - - /** - * The context types. - */ - static contextTypes = { - map: PropTypes.instanceOf(OlMap).isRequired - }; - - /** - * Create the MappifiedComponent. - * - * @constructs MappifiedComponent - */ - constructor(props: P) { - super(props); - } - - /** - * The render function. - */ - render() { - const { - map - } = this.context; - - if (!map) { - Logger.warn('You\'re trying to mappify a component without any map ' + - 'in the context. Did you implement the MapProvider?'); - } - - return ( - - ); - - } - }; -} - -export default mappify; diff --git a/src/HigherOrderComponent/VisibleComponent/VisibleComponent.example.md b/src/HigherOrderComponent/VisibleComponent/VisibleComponent.example.md deleted file mode 100644 index 7f7eebd028..0000000000 --- a/src/HigherOrderComponent/VisibleComponent/VisibleComponent.example.md +++ /dev/null @@ -1,63 +0,0 @@ -This example shows the usage of the VisibleComponent HOC (High Order Component) to -determine the visibility of a component based on a `activeModules` property. Typically -this property is managed globally by `react-redux` (or similiar). - -In the example below you see three components wrapped by the use of -`isVisibleComponent`. As the second one's name isn't listed in the activeModules, -it won't be rendered. - -```jsx -import SimpleButton from '@terrestris/react-geo/dist/Button/SimpleButton/SimpleButton'; - -import { isVisibleComponent } from '@terrestris/react-geo/dist/HigherOrderComponent/VisibleComponent/VisibleComponent'; - -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faSearch, faPowerOff } from '@fortawesome/free-solid-svg-icons'; - -// Enhance (any) Component by wrapping it using isVisibleComponent(). -const VisibleButton = isVisibleComponent(SimpleButton); - -// The activeModules is a whitelist of components (identified by it's names) to -// render. -const activeModules = [{ - name: 'visibleButtonName' -}, { - name: 'anotherVisibleButtonName' -}]; - -

- - } - /> - - } - /> - - } - /> -
-``` diff --git a/src/HigherOrderComponent/VisibleComponent/VisibleComponent.spec.tsx b/src/HigherOrderComponent/VisibleComponent/VisibleComponent.spec.tsx deleted file mode 100644 index 6b20d3c5bd..0000000000 --- a/src/HigherOrderComponent/VisibleComponent/VisibleComponent.spec.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import * as React from 'react'; - - -import TestUtil from '../../Util/TestUtil'; - -import { isVisibleComponent } from './VisibleComponent'; - -describe('isVisibleComponent', () => { - let EnhancedComponent; - - class MockComponent extends React.Component { - render() { - return ( -
A mock Component
- ); - } - } - - beforeEach(() => { - EnhancedComponent = isVisibleComponent(MockComponent); - }); - - describe('Basics', () => { - it('is defined', () => { - expect(isVisibleComponent).not.toBeUndefined(); - }); - - it('can be rendered', () => { - const wrapper = TestUtil.mountComponent(EnhancedComponent); - - expect(wrapper).not.toBeUndefined(); - expect(wrapper.first().is(EnhancedComponent)).toBe(true); - }); - - it('passes through all props except activeModules', () => { - const props = { - someProp: '09', - name: 'shinjiKagawaModule', - activeModules: [{ - name: 'shinjiKagawaModule' - }] - }; - const expectedProps = { - someProp: '09', - name: 'shinjiKagawaModule' - }; - const wrapper = TestUtil.mountComponent(EnhancedComponent, props); - const wrappedInstance = wrapper.childAt(0).instance(); - - expect(wrappedInstance.props).toEqual(expectedProps); - }); - - it('shows or hides the wrapped component in relation to it\'s representation in the activeModules prop', () => { - // 1. No name and no activeModules. - let wrapper = TestUtil.mountComponent(EnhancedComponent); - expect(wrapper.find('div').length).toBe(0); - - // 2. Name and no activeModules. - wrapper = TestUtil.mountComponent(EnhancedComponent, { - name: 'shinjiKagawaModule' - }); - expect(wrapper.find('div').length).toBe(0); - - // 3. Name and activeModules. - wrapper = TestUtil.mountComponent(EnhancedComponent, { - name: 'shinjiKagawaModule', - activeModules: [{ - name: 'shinjiKagawaModule' - }] - }); - expect(wrapper.find('div').length).toBe(1); - - // 4. Name and activeModules, but name not in activeModules. - wrapper = TestUtil.mountComponent(EnhancedComponent, { - name: 'someModule', - activeModules: [{ - name: 'shinjiKagawaModule' - }] - }); - expect(wrapper.find('div').length).toBe(0); - - // 5. No name and activeModules. - wrapper = TestUtil.mountComponent(EnhancedComponent, { - activeModules: [{ - name: 'shinjiKagawaModule' - }] - }); - expect(wrapper.find('div').length).toBe(0); - - // 6. Name and activeModules, but no name in activeModules - wrapper = TestUtil.mountComponent(EnhancedComponent, { - name: 'shinjiKagawaModule', - activeModules: [{ - notName: 'shinjiKagawaModule' - }] - }); - expect(wrapper.find('div').length).toBe(0); - }); - - }); -}); diff --git a/src/HigherOrderComponent/VisibleComponent/VisibleComponent.tsx b/src/HigherOrderComponent/VisibleComponent/VisibleComponent.tsx deleted file mode 100644 index 149afe251a..0000000000 --- a/src/HigherOrderComponent/VisibleComponent/VisibleComponent.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import * as React from 'react'; - -export interface VisibleComponentProps { - activeModules: any[]; - name: string; -} - -/** - * The HOC factory function. - * - * Wrapped components will be checked against the activeModules array of - * the state: If the wrapped component (identified by it's name) is included - * in the state, it will be rendered, if not, it wont. - * - * @param WrappedComponent The component to wrap and enhance. - * @return The wrapped component. - */ -export function isVisibleComponent

( - WrappedComponent: React.ComponentType

): React.ComponentType

{ - - /** - * The wrapper class for the given component. - * - * @class The VisibleComponent - * @extends React.Component - */ - return class VisibleComponent extends React.Component

{ - - /** - * Checks if the current component (identified by it's name) should be - * visible or not. - * - * @param componentName The name of the component. - * @return Whether the component should be visible or not. - */ - isVisibleComponent = (componentName: string) => { - const activeModules = this.props.activeModules || []; - - return activeModules.some((activeModule: any) => { - if (!activeModule.name) { - return false; - } else { - return activeModule.name === componentName; - } - }); - }; - - /** - * The render function. - */ - render() { - // Filter out extra props that are specific to this HOC and shouldn't be - // passed through. - const { - activeModules, - ...passThroughProps - } = this.props; - - // Check if the current component should be visible or not. - const isVisible = this.isVisibleComponent(this.props.name); - - // Inject props into the wrapped component. These are usually state - // values or instance methods. - return ( - isVisible ? - : - null - ); - } - }; -} - -export default isVisibleComponent; diff --git a/src/Hook/useMap.example.md b/src/Hook/useMap.example.md index 532baf4ac4..bd781f1062 100644 --- a/src/Hook/useMap.example.md +++ b/src/Hook/useMap.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. - ```jsx import * as React from 'react'; diff --git a/src/Map/MapComponent/MapComponent.example.md b/src/Map/MapComponent/MapComponent.example.md index 8c27323cd1..246dbcd4ab 100644 --- a/src/Map/MapComponent/MapComponent.example.md +++ b/src/Map/MapComponent/MapComponent.example.md @@ -1,14 +1,4 @@ -This example shows the usage of the MapComponent in combination with the MapProvider. -It makes use of the `mappify` HOC function to supply the provided map to the MapComponent -and the NominatimSearch. - -**THE HOC IS DEPRECATED AND ONLY AVAILABLE FOR BACKWARDS COMPATIBILITY. PLEASE CONSIDER USING THE MAPCONTEXT WITH `useMap`** - -This way you can share the same mapobject across the whole application without passing -it as prop to the whole rendertree. - -The map can be created asynchronusly so that every child of the MapProvider is just -rendered when the map is ready. +This example shows the usage of the MapComponent in combination with the MapContext.Provider. ```jsx import * as React from 'react'; @@ -20,64 +10,42 @@ import OlSourceOsm from 'ol/source/OSM'; import MapComponent from '@terrestris/react-geo/dist/Map/MapComponent/MapComponent'; import NominatimSearch from '@terrestris/react-geo/dist/Field/NominatimSearch/NominatimSearch'; -import MapProvider from '@terrestris/react-geo/dist/Provider/MapProvider/MapProvider'; -import { mappify } from '@terrestris/react-geo/dist/HigherOrderComponent/MappifiedComponent/MappifiedComponent'; - -const Map = mappify(MapComponent); -const Search = mappify(NominatimSearch); - -class MapComponentExample extends React.Component { - - constructor(props) { - - super(props); - - this.mapDivId = `map-${Math.random()}`; - - this.mapPromise = new Promise(resolve => { - const layer = new OlLayerTile({ - source: new OlSourceOsm() - }); - - const map = new OlMap({ - target: null, - view: new OlView({ - center: [ - 135.1691495, - 34.6565482 - ], - projection: 'EPSG:4326', - zoom: 16, - }), - layers: [layer] - }); - - this.map = map; - - resolve(map); - }); - } - - componentDidMount() { - window.setTimeout(() => { - this.map.setTarget(this.mapDivId); - }, 100); - } - - render() { - return ( - - NominatimSearch: - - - - ); - } +import MapContext from '@terrestris/react-geo/dist/Context/MapContext/MapContext'; + +const MapComponentExample = () => { + + const layer = new OlLayerTile({ + source: new OlSourceOsm() + }); + + const mapId = `map-${Math.random()}`; + + const map = new OlMap({ + target: mapId, + view: new OlView({ + center: [ + 135.1691495, + 34.6565482 + ], + projection: 'EPSG:4326', + zoom: 16, + }), + layers: [layer] + }); + + return ( + + NominatimSearch: + + + + ); } diff --git a/src/Provider/MapProvider/MapProvider.spec.tsx b/src/Provider/MapProvider/MapProvider.spec.tsx deleted file mode 100644 index 53e4b254c5..0000000000 --- a/src/Provider/MapProvider/MapProvider.spec.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import * as React from 'react'; - -import { mount } from 'enzyme'; - -import { TestUtil } from '../../Util/TestUtil'; - -import MapProvider from './MapProvider'; -import { mappify } from '../../HigherOrderComponent/MappifiedComponent/MappifiedComponent'; -import OlMap from 'ol/Map'; - -describe('MapProvider', () => { - class MockComponent extends React.Component { - render() { - return ( -

Mockety-mock
- ); - } - } - const MappifiedMockComponent = mappify(MockComponent); - - describe('Basics', () => { - it('is defined', () => { - expect(MapProvider).not.toBeUndefined(); - }); - - it('provides a given map to its children (ol.Map)', () => { - const map = TestUtil.createMap(); - const wrapper = mount( - - - - ); - - expect.assertions(2); - return Promise.resolve() - .then(() => { - const isReady = wrapper.state('ready'); - expect(isReady).toBe(true); - wrapper.update(); - const mapFromMock = wrapper.find(MockComponent).prop('map'); - expect(mapFromMock).toBe(map); - }); - }); - - it('provides a given map to its children (Promise)', () => { - const map = TestUtil.createMap(); - const mapPromise = new Promise((resolve) => { - resolve(map); - }); - const wrapper = mount( - {/* See, we now use the actual promise*/} - - - ); - expect.assertions(2); - return mapPromise.then(() => { - const isReady = wrapper.state('ready'); - expect(isReady).toBe(true); - wrapper.update(); - const mapFromMock = wrapper.find(MockComponent).prop('map'); - expect(mapFromMock).toBe(map); - }); - }); - - it('Does not render on rejected promise', () => { - const errMsg = 'Some message: Humpty'; - const failingPromise = new Promise((resolve, reject) => { - reject(new Error(errMsg)); - }); - - const wrapper = mount( - {/* use the failing promise*/} - - - ); - - expect.assertions(3); - return failingPromise.catch((err) => { - expect(err).toBeInstanceOf(Error); - expect(err.message).toBe(errMsg); - wrapper.update(); - const mapFromMock = wrapper.find(MockComponent); - expect(mapFromMock.exists()).toBe(false); - }); - }); - }); -}); diff --git a/src/Provider/MapProvider/MapProvider.tsx b/src/Provider/MapProvider/MapProvider.tsx deleted file mode 100644 index 205b3a16b0..0000000000 --- a/src/Provider/MapProvider/MapProvider.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import * as React from 'react'; -import OlMap from 'ol/Map'; -import * as PropTypes from 'prop-types'; -import Logger from '@terrestris/base-util/dist/Logger'; - -/** - * - * @export - * @interface TimeSliderProps - */ -export interface MapProviderProps { - /** - * The map can be either an OlMap or a Promise that resolves with an OlMap - * if your map is created asynchronously. - */ - map: OlMap | Promise; -} - -interface MapProviderState { - map: OlMap | null; - ready: boolean; -} - -/** - * The MapProvider. - */ -class MapProvider extends React.Component { - - /** - * The child context types. - */ - static childContextTypes = { - map: PropTypes.instanceOf(OlMap) - }; - - /** - * The constructor of the MapProvider sets the - * - * @constructs MapProvider - * @param props The initial props. - */ - constructor(props: MapProviderProps) { - - Logger.warn('MapProvider is deprecated and might be removed in an upcoming major release. ' + - 'Please consider to use the MapContext.'); - - super(props); - - this.state = { - map: null, - ready: false - }; - - Promise.resolve(props.map) - .then((map) => { - this.setState({ - map: map, - ready: true - }); - }) - .catch(error => { - Logger.error(error); - }); - } - - /** - * Returns the context for the children. - * - * @return The child context. - */ - getChildContext() { - const { - map - } = this.state; - - return { map }; - } - - /** - * The render function. - */ - render() { - if (!this.state.ready) { - return null; - } else { - return this.props.children; - } - } -} - -export default MapProvider; diff --git a/src/index.ts b/src/index.ts index e0eb1b87cc..4622d5e4cf 100644 --- a/src/index.ts +++ b/src/index.ts @@ -26,10 +26,7 @@ import AgFeatureGrid from './Grid/AgFeatureGrid/AgFeatureGrid'; import FeatureGrid from './Grid/FeatureGrid/FeatureGrid'; import PropertyGrid from './Grid/PropertyGrid/PropertyGrid'; import onDropAware from './HigherOrderComponent/DropTargetMap/DropTargetMap'; -import loadify from './HigherOrderComponent/LoadifiedComponent/LoadifiedComponent'; -import mappify from './HigherOrderComponent/MappifiedComponent/MappifiedComponent'; import timeLayerAware from './HigherOrderComponent/TimeLayerAware/TimeLayerAware'; -import isVisibleComponent from './HigherOrderComponent/VisibleComponent/VisibleComponent'; import useMap from './Hook/useMap'; import LayerSwitcher from './LayerSwitcher/LayerSwitcher'; import LayerTree from './LayerTree/LayerTree'; @@ -40,7 +37,6 @@ import MapComponent from './Map/MapComponent/MapComponent'; import Panel from './Panel/Panel/Panel'; import TimeLayerSliderPanel from './Panel/TimeLayerSliderPanel/TimeLayerSliderPanel'; import Titlebar from './Panel/Titlebar/Titlebar'; -import MapProvider from './Provider/MapProvider/MapProvider'; import LayerTransparencySlider from './Slider/LayerTransparencySlider/LayerTransparencySlider'; import MultiLayerSlider from './Slider/MultiLayerSlider/MultiLayerSlider'; import TimeSlider from './Slider/TimeSlider/TimeSlider'; @@ -69,17 +65,13 @@ export { FeatureLabelModal, FloatingMapLogo, GeoLocationButton, - isVisibleComponent, LayerSwitcher, LayerTransparencySlider, LayerTree, LayerTreeNode, Legend, - loadify, MapComponent, MapContext, - mappify, - MapProvider, MeasureButton, ModifyButton, MultiLayerSlider,