Skip to content

Commit

Permalink
refactor: components FeatureGrid and AgFeatureGrid to function component
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: share common grid props among all grids
  • Loading branch information
@dnlkoch @simonseyock
dnlkoch authored and simonseyock committed May 6, 2024
1 parent 7b0732e commit ea48bb3
Show file tree
Hide file tree
Showing 12 changed files with 1,487 additions and 2,517 deletions.
328 changes: 180 additions & 148 deletions package-lock.json
View file

Large diffs are not rendered by default.

42 changes: 20 additions & 22 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,8 @@
"lint:styleguide": "eslint -c .eslintrc.styleguide.js src/",
"lint:styleguide-fix": "eslint -c .eslintrc.styleguide.js src/ --fix",
"prepare": "husky install",
"start:styleguide": "styleguidist server",
"pretest": "npm run typecheck && npm run lint",
"start:styleguide": "styleguidist server",
"test": "npm run test:jest",
"test:jest": "jest --maxWorkers=4 --coverage",
"test:watch": "jest --watchAll",
Expand All @@ -75,25 +75,22 @@
"@fortawesome/free-solid-svg-icons": "^6.4.2",
"@fortawesome/react-fontawesome": "^0.2.0",
"@terrestris/base-util": "^1.1.0",
"@terrestris/ol-util": "^14.0.0",
"@terrestris/ol-util": "^16.0.0",
"@terrestris/react-util": "^4.0.0-beta.3",
"@types/geojson": "^7946.0.12",
"@types/lodash": "^4.14.200",
"ag-grid-community": "^28.2.1",
"ag-grid-react": "^28.2.1",
"ag-grid-community": "^31.1.1",
"ag-grid-react": "^31.1.1",
"jspdf": "^2.5.1",
"lodash": "^4.17.21",
"moment": "^2.29.4",
"proj4": "^2.9.2",
"prop-types": "^15.8.1"
"proj4": "^2.9.2"
},
"devDependencies": {
"@babel/cli": "^7.23.0",
"@babel/core": "^7.23.2",
"@babel/cli": "^7.23.9",
"@babel/core": "^7.24.0",
"@babel/eslint-parser": "^7.22.15",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-modules-commonjs": "^7.23.0",
"@babel/preset-env": "^7.23.2",
"@babel/preset-env": "^7.24.0",
"@babel/preset-react": "^7.22.15",
"@babel/preset-typescript": "^7.23.2",
"@cfaester/enzyme-adapter-react-18": "^0.7.1",
Expand All @@ -103,18 +100,19 @@
"@semantic-release/git": "^10.0.1",
"@terrestris/eslint-config-typescript": "^5.0.0",
"@terrestris/eslint-config-typescript-react": "^2.0.0",
"@terrestris/ol-util": "^15.0.0",
"@testing-library/dom": "^9.3.3",
"@testing-library/jest-dom": "^6.4.2",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.5.1",
"@types/enzyme": "^3.10.15",
"@types/geojson": "^7946.0.12",
"@types/jest": "^29.5.6",
"@types/node": "^20.8.9",
"@types/react": "^18.2.33",
"@types/lodash": "^4.14.200",
"@types/node": "^20.11.24",
"@types/react": "^18.2.63",
"@types/react-dom": "^18.2.14",
"@typescript-eslint/eslint-plugin": "^7.0.1",
"@typescript-eslint/parser": "^7.0.1",
"@typescript-eslint/eslint-plugin": "^7.1.1",
"@typescript-eslint/parser": "^7.1.1",
"antd": "^5.10.2",
"babel-jest": "^29.7.0",
"babel-loader": "^9.1.3",
Expand All @@ -127,12 +125,12 @@
"coveralls": "^3.1.1",
"css-loader": "^6.8.1",
"enzyme": "^3.11.0",
"eslint": "^8.56.0",
"eslint": "^8.57.0",
"eslint-plugin-jest-dom": "^5.1.0",
"eslint-plugin-markdown": "^3.0.1",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react": "^7.34.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-simple-import-sort": "^10.0.0",
"eslint-plugin-simple-import-sort": "^12.0.0",
"eslint-plugin-testing-library": "^6.1.0",
"file-loader": "^6.2.0",
"fork-ts-checker-webpack-plugin": "^9.0.0",
Expand All @@ -155,14 +153,14 @@
"tsconfig-paths-webpack-plugin": "^4.1.0",
"typescript": "^5.3.3",
"use-resize-observer": "^9.1.0",
"webpack": "^5.89.0",
"webpack": "^5.90.3",
"whatwg-fetch": "^3.6.19"
},
"peerDependencies": {
"@terrestris/ol-util": ">=15",
"@terrestris/ol-util": ">=16",
"@types/react": ">=18",
"antd": "^5",
"ol": ">=8",
"ol": ">=9",
"ol-mapbox-style": ">=12",
"react": ">=18",
"react-dom": ">=18"
Expand Down
162 changes: 81 additions & 81 deletions src/CoordinateInfo/CoordinateInfo.example.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@
import { faCopy } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import CoordinateInfo from '@terrestris/react-geo/dist/CoordinateInfo/CoordinateInfo';
import MapComponent from '@terrestris/react-util/dist/Components/MapComponent/MapComponent';
import MapContext from '@terrestris/react-util/dist/Context/MapContext/MapContext';
import {
Button,
Spin,
Statistic,
Tooltip
} from 'antd';
import * as copy from 'copy-to-clipboard';
import MapComponent from '@terrestris/react-util/dist/Components/MapComponent/MapComponent';
import MapContext from '@terrestris/react-util/dist/Context/MapContext/MapContext';
import OlLayerTile from 'ol/layer/Tile';
import OlMap from 'ol/Map';
import { fromLonLat } from 'ol/proj';
Expand Down Expand Up @@ -64,88 +64,88 @@ const CoordinateInfoExample = () => {
height: '400px'
}}
/>
<CoordinateInfo
map={this.map}
queryLayers={[queryLayer]}
resultRenderer={(opts) => {
const features = opts.features;
const clickCoord = opts.clickCoordinate;
const loading = opts.loading;
<CoordinateInfo
map={this.map}
queryLayers={[queryLayer]}
resultRenderer={(opts) => {
const features = opts.features;
const clickCoord = opts.clickCoordinate;
const loading = opts.loading;

return (
Object.keys(features).length === 1 && features[Object.keys(features)[0]].length === 1 ?
<div>
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between'
}}
return (
Object.keys(features).length === 1 && features[Object.keys(features)[0]].length === 1 ?
<div>
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between'
}}
>
<Spin
spinning={loading}
>
<Spin
spinning={loading}
>
<Statistic
title="Coordinate"
value={clickCoord.join(', ')}
/>
</Spin>
<Tooltip
title="Copy to clipboard"
>
<Button
style={{ marginTop: 16 }}
type="primary"
onClick={() => {
copy(clickCoord.join(', '));
}}
icon={
<FontAwesomeIcon
icon={faCopy}
/>
}
/>
</Tooltip>
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between'
}}
<Statistic
title="Coordinate"
value={clickCoord.join(', ')}
/>
</Spin>
<Tooltip
title="Copy to clipboard"
>
<Spin
spinning={loading}
>
<Statistic
title="State"
value={features[Object.keys(features)[0]][0].get('STATE_NAME')}
/>
</Spin>
<Tooltip
title="Copy to clipboard"
>
<Button
style={{ marginTop: 16 }}
type="primary"
onClick={() => {
copy(features[Object.keys(features)[0]][0].get('STATE_NAME'));
}}
icon={
<FontAwesomeIcon
icon={faCopy}
/>
}
/>
</Tooltip>
</div>
</div> :
<span>Click on a state to get details about the clicked coordinate.</span>
);
}}
/>
</MapContext.Provider>
);
<Button
style={{ marginTop: 16 }}
type="primary"
onClick={() => {
copy(clickCoord.join(', '));
}}
icon={
<FontAwesomeIcon
icon={faCopy}
/>
}
/>
</Tooltip>
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between'
}}
>
<Spin
spinning={loading}
>
<Statistic
title="State"
value={features[Object.keys(features)[0]][0].get('STATE_NAME')}
/>
</Spin>
<Tooltip
title="Copy to clipboard"
>
<Button
style={{ marginTop: 16 }}
type="primary"
onClick={() => {
copy(features[Object.keys(features)[0]][0].get('STATE_NAME'));
}}
icon={
<FontAwesomeIcon
icon={faCopy}
/>
}
/>
</Tooltip>
</div>
</div> :
<span>Click on a state to get details about the clicked coordinate.</span>
);
}}
/>
</MapContext.Provider>
);
}

<CoordinateInfoExample />
Expand Down
8 changes: 4 additions & 4 deletions src/Field/CoordinateReferenceSystemCombo/CoordinateReferenceSystemCombo.example.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,21 @@ This demonstrates the usage of the CoordinateReferenceSystemCombo.
```jsx
import CoordinateReferenceSystemCombo from
'@terrestris/react-geo/dist/Field/CoordinateReferenceSystemCombo/CoordinateReferenceSystemCombo';
import { applyTransform } from 'ol/extent';
import MapComponent from '@terrestris/react-util/dist/Components/MapComponent/MapComponent';
import MapContext from '@terrestris/react-util/dist/Context/MapContext/MapContext';
import { applyTransform } from 'ol/extent';
import OlLayerTile from 'ol/layer/Tile';
import OlMap from 'ol/Map';
import {
fromLonLat,
get,
getTransform
} from 'ol/proj';
import { register } from 'ol/proj/proj4';
import OlSourceOSM from 'ol/source/OSM';
import OlView from 'ol/View';
import React, { useEffect, useState } from 'react';
import proj4 from 'proj4';
import { register } from 'ol/proj/proj4';
import React, { useEffect, useState } from 'react';

const predefinedCrsDefinitions = [{
code: '25832',
Expand Down Expand Up @@ -46,7 +46,7 @@ const predefinedCrsDefinitions = [{
const CoordinateReferenceSystemComboExample = () => {

const [map, setMap] = useState();

useEffect(() => {
setMap(new OlMap({
layers: [
Expand Down
13 changes: 6 additions & 7 deletions src/Field/WfsSearchField/WfsSearchField.example.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@ Type a country name in its own language…

```jsx
import WfsSearch from '@terrestris/react-geo/dist/Field/WfsSearchField/WfsSearchField';
import AgFeatureGrid from '@terrestris/react-geo/dist/Grid/AgFeatureGrid/AgFeatureGrid';
import MapComponent from '@terrestris/react-util/dist/Components/MapComponent/MapComponent';
import MapContext from '@terrestris/react-util/dist/Context/MapContext/MapContext';
import AgFeatureGrid from '@terrestris/react-geo/dist/Grid/AgFeatureGrid/AgFeatureGrid';
import OlLayerTile from 'ol/layer/Tile';
import OlMap from 'ol/Map';
import { fromLonLat } from 'ol/proj';
import OlSourceOSM from 'ol/source/OSM';
import OlView from 'ol/View';
import {useEffect, useState} from 'react';
import { useEffect, useState } from 'react';

const WfsSearchFieldExample = () => {

Expand All @@ -31,15 +31,14 @@ const WfsSearchFieldExample = () => {
zoom: 4
})
});

setMap(newMap);
}, []);

if (!map) {
return null;
}
const onFeaturesChange = f => setInputFeatures(f);

const onFeaturesChange = f => setInputFeatures(f);

return (
<MapContext.Provider value={map}>
Expand All @@ -49,7 +48,7 @@ const WfsSearchFieldExample = () => {
placeholder="Type a countryname in its own language…"
baseUrl='https://ows-demo.terrestris.de/geoserver/osm/wfs'
featureTypes={['osm:osm-country-borders']}
featureNS={"osm"}
featureNS={'osm'}
maxFeatures={3}
attributeDetails={{
'osm:osm-country-borders': {
Expand Down
Loading

0 comments on commit ea48bb3

Please sign in to comment.