From 6502794f97968bd3eb3485b5e4f607b7d99329f9 Mon Sep 17 00:00:00 2001 From: steveoh Date: Wed, 6 Jul 2022 20:58:17 -0600 Subject: [PATCH] feat(default-extent): introduce new component closes #46 --- README.md | 1 + package-lock.json | 27 +++++++++- package.json | 3 +- packages/default-extent/README.md | 30 +++++++++++ packages/default-extent/package.json | 52 +++++++++++++++++++ .../src/DefaultExtent.stories.jsx | 20 +++++++ packages/default-extent/src/index.js | 43 +++++++++++++++ 7 files changed, 174 insertions(+), 2 deletions(-) create mode 100644 packages/default-extent/README.md create mode 100644 packages/default-extent/package.json create mode 100644 packages/default-extent/src/DefaultExtent.stories.jsx create mode 100644 packages/default-extent/src/index.js diff --git a/README.md b/README.md index 22fa4920..5292a07d 100644 --- a/README.md +++ b/README.md @@ -12,6 +12,7 @@ Please use [conventional commits](https://www.conventionalcommits.org) with the - `utilities` - `dart-board` - `mouse-trap` +- `default-extent` ### NPM Linking diff --git a/package-lock.json b/package-lock.json index 19e1c29b..ff7b4c3e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,8 @@ "packages/dart-board", "packages/layer-selector", "packages/mouse-trap", - "packages/sherlock" + "packages/sherlock", + "packages/default-extent" ], "dependencies": { "react": ">=16.8.0", @@ -6704,6 +6705,10 @@ "resolved": "packages/dart-board", "link": true }, + "node_modules/@ugrc/default-extent": { + "resolved": "packages/default-extent", + "link": true + }, "node_modules/@ugrc/layer-selector": { "resolved": "packages/layer-selector", "link": true @@ -22698,6 +22703,20 @@ "react-dom": ">=16.8.0" } }, + "packages/default-extent": { + "name": "@ugrc/default-extent", + "version": "1.0.0", + "license": "MIT", + "dependencies": { + "@ugrc/utilities": "^2.1.1" + }, + "peerDependencies": { + "@arcgis/core": "^4.20.0", + "prop-types": "^15.8.1", + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "packages/layer-selector": { "name": "@ugrc/layer-selector", "version": "5.0.1", @@ -27090,6 +27109,12 @@ "reactstrap": "^9.1.1" } }, + "@ugrc/default-extent": { + "version": "file:packages/default-extent", + "requires": { + "@ugrc/utilities": "^2.1.1" + } + }, "@ugrc/layer-selector": { "version": "file:packages/layer-selector", "requires": { diff --git a/package.json b/package.json index 5c70c68a..2ff7ac4e 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,8 @@ "packages/dart-board", "packages/layer-selector", "packages/mouse-trap", - "packages/sherlock" + "packages/sherlock", + "packages/default-extent" ], "scripts": { "build-storybook": "build-storybook", diff --git a/packages/default-extent/README.md b/packages/default-extent/README.md new file mode 100644 index 00000000..7d7cab01 --- /dev/null +++ b/packages/default-extent/README.md @@ -0,0 +1,30 @@ +# @ugrc/default-extent + +[![NPM version](https://badgen.net/npm/v/@ugrc/default-extent)](https://www.npmjs.com/package/@ugrc/default-extent) + +A React component for zooming to a default extent in a map. + +Install with [npm](https://www.npmjs.com/) + +```bash +npm install @ugrc/default-extent +``` + +## Example + +```js +import HomeButton from '@ugrc/default-extent'; +import Extent from '@arcgis/core/geometry/Extent'; + +const defaultExtent = new Extent({ + xmax: -12612006, + xmin: -12246370, + ymax: 5125456, + ymin: 4473357, + spatialReference: 3857, +}); + +return ( + +); +``` diff --git a/packages/default-extent/package.json b/packages/default-extent/package.json new file mode 100644 index 00000000..b89a4b7c --- /dev/null +++ b/packages/default-extent/package.json @@ -0,0 +1,52 @@ +{ + "name": "@ugrc/default-extent", + "version": "1.0.0", + "private": false, + "description": "A react component that creates and places a button in an esri map to set the default map view", + "keywords": [ + "ugrc", + "component", + "arcgis", + "esri", + "react", + "map", + "extent", + "home" + ], + "homepage": "https://github.com/agrc/kitchen-sink/tree/main/packages/default-extent", + "bugs": { + "url": "https://github.com/agrc/kitchen-sink/issues" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/agrc/kitchen-sink.git" + }, + "license": "MIT", + "author": "ugrc developers", + "maintainers": [ + { + "name": "Steve Gourley", + "email": "sgourley@utah.gov" + }, + { + "name": "Scott Davis", + "email": "stdavis@utah.gov" + } + ], + "type": "module", + "exports": { + ".": "./src/index" + }, + "scripts": { + "test": "vitest --config ../../vite.config.js" + }, + "dependencies": { + "@ugrc/utilities": "^2.1.1" + }, + "peerDependencies": { + "@arcgis/core": "^4.20.0", + "prop-types": "^15.8.1", + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } +} diff --git a/packages/default-extent/src/DefaultExtent.stories.jsx b/packages/default-extent/src/DefaultExtent.stories.jsx new file mode 100644 index 00000000..d09b7e3b --- /dev/null +++ b/packages/default-extent/src/DefaultExtent.stories.jsx @@ -0,0 +1,20 @@ +import HomeButton from './'; + +/* eslint import/no-anonymous-default-export: [2, {"allowObject": true}] */ +export default { + title: 'DefaultExtent', + component: HomeButton, + decorators: [ + (Story) =>
{Story()}
, + ], + argTypes: { + goTo: { action: 'goTo' }, + }, +}; + +export const Normal = (args) => ( + {} } }} + extent={{}} + > +); diff --git a/packages/default-extent/src/index.js b/packages/default-extent/src/index.js new file mode 100644 index 00000000..55372de7 --- /dev/null +++ b/packages/default-extent/src/index.js @@ -0,0 +1,43 @@ +import PropTypes from 'prop-types'; +import { faGlobeAmericas } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { useViewUiPosition } from '@ugrc/utilities/hooks'; + +const goHome = (view, extent) => { + return view.goTo(extent); +}; + +export default function DefaultExtent({ view, position, extent }) { + const me = useViewUiPosition(view, position); + + return ( + + ); +} + +DefaultExtent.propTypes = { + view: PropTypes.object.isRequired, + position: PropTypes.oneOf([ + 'bottom-leading', + 'bottom-left', + 'bottom-right', + 'bottom-trailing', + 'top-leading', + 'top-left', + 'top-right', + 'top-trailing', + 'manual', + ]).isRequired, + extent: PropTypes.object.isRequired, +};