-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'feature/exploration' into feature/analysis-requests
- Loading branch information
Showing
8 changed files
with
579 additions
and
26 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
48 changes: 48 additions & 0 deletions
48
app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import React, { useState } from 'react'; | ||
| import { Feature, Polygon } from 'geojson'; | ||
| import { CollecticonUpload2 } from '@devseed-ui/collecticons'; | ||
| import { Button, createButtonStyles } from '@devseed-ui/button'; | ||
| import styled from 'styled-components'; | ||
| import { themeVal } from '@devseed-ui/theme-provider'; | ||
| import useThemedControl from '../hooks/use-themed-control'; | ||
| import CustomAoIModal from '../custom-aoi-modal'; | ||
|
|
||
| const SelectorButton = styled(Button)` | ||
| &&& { | ||
| ${createButtonStyles({ variation: 'primary-fill', fitting: 'skinny' })} | ||
| background-color: ${themeVal('color.surface')}; | ||
| &:hover { | ||
| background-color: ${themeVal('color.surface')}; | ||
| } | ||
| & path { | ||
| fill: ${themeVal('color.base')}; | ||
| } | ||
| } | ||
| `; | ||
|
|
||
| interface CustomAoIProps { | ||
| onConfirm: (features: Feature<Polygon>[]) => void; | ||
| } | ||
|
|
||
| function CustomAoI({ onConfirm }: CustomAoIProps) { | ||
| const [aoiModalRevealed, setAoIModalRevealed] = useState(false); | ||
| return ( | ||
| <> | ||
| <SelectorButton onClick={() => setAoIModalRevealed(true)}> | ||
| <CollecticonUpload2 title='Upload geoJSON' meaningful /> | ||
| </SelectorButton> | ||
| <CustomAoIModal | ||
| revealed={aoiModalRevealed} | ||
| onConfirm={onConfirm} | ||
| onCloseClick={() => setAoIModalRevealed(false)} | ||
| /> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default function CustomAoIControl(props: CustomAoIProps) { | ||
| useThemedControl(() => <CustomAoI {...props} />, { | ||
| position: 'top-left' | ||
| }); | ||
| return null; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
220 changes: 220 additions & 0 deletions
220
app/scripts/components/common/map/controls/custom-aoi-modal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,220 @@ | ||
| import React, { useCallback, useEffect, useRef } from 'react'; | ||
| import styled from 'styled-components'; | ||
| import { Feature, Polygon } from 'geojson'; | ||
| import { Modal, ModalHeadline, ModalFooter } from '@devseed-ui/modal'; | ||
| import { Heading, Subtitle } from '@devseed-ui/typography'; | ||
|
|
||
| import { Button } from '@devseed-ui/button'; | ||
| import { | ||
| glsp, | ||
| listReset, | ||
| themeVal, | ||
| visuallyHidden | ||
| } from '@devseed-ui/theme-provider'; | ||
| import { | ||
| CollecticonArrowUp, | ||
| CollecticonTickSmall, | ||
| CollecticonXmarkSmall, | ||
| CollecticonCircleExclamation, | ||
| CollecticonCircleTick, | ||
| CollecticonCircleInformation | ||
| } from '@devseed-ui/collecticons'; | ||
| import useCustomAoI, { acceptExtensions } from './hooks/use-custom-aoi'; | ||
| import { variableGlsp, variableProseVSpace } from '$styles/variable-utils'; | ||
|
|
||
| const UploadFileModalFooter = styled(ModalFooter)` | ||
| display: flex; | ||
| justify-content: right; | ||
| flex-flow: row nowrap; | ||
| gap: ${variableGlsp(0.25)}; | ||
| `; | ||
|
|
||
| const ModalBodyInner = styled.div` | ||
| display: flex; | ||
| flex-flow: column nowrap; | ||
| gap: ${variableGlsp()}; | ||
| `; | ||
|
|
||
| const UploadFileIntro = styled.div` | ||
| display: flex; | ||
| flex-flow: column nowrap; | ||
| gap: ${variableProseVSpace()}; | ||
| `; | ||
|
|
||
| const FileUpload = styled.div` | ||
| display: flex; | ||
| flex-flow: nowrap; | ||
| align-items: center; | ||
| gap: ${variableGlsp(0.5)}; | ||
| ${Button} { | ||
| flex-shrink: 0; | ||
| } | ||
| ${Subtitle} { | ||
| overflow-wrap: anywhere; | ||
| } | ||
| `; | ||
|
|
||
| const FileInput = styled.input` | ||
| ${visuallyHidden()} | ||
| `; | ||
|
|
||
| const UploadInformation = styled.div` | ||
| padding: ${variableGlsp()}; | ||
| background: ${themeVal('color.base-50')}; | ||
| box-shadow: ${themeVal('boxShadow.inset')}; | ||
| border-radius: ${themeVal('shape.rounded')}; | ||
| `; | ||
|
|
||
| const UploadListInfo = styled.ul` | ||
| ${listReset()} | ||
| display: flex; | ||
| flex-flow: column nowrap; | ||
| gap: ${glsp(0.25)}; | ||
| li { | ||
| display: flex; | ||
| flex-flow: row nowrap; | ||
| gap: ${glsp(0.5)}; | ||
| align-items: top; | ||
| > svg { | ||
| flex-shrink: 0; | ||
| margin-top: ${glsp(0.25)}; | ||
| } | ||
| } | ||
| `; | ||
|
|
||
| const UploadInfoItemSuccess = styled.li` | ||
| color: ${themeVal('color.success')}; | ||
| `; | ||
|
|
||
| const UploadInfoItemWarnings = styled.li` | ||
| color: ${themeVal('color.info')}; | ||
| `; | ||
|
|
||
| const UploadInfoItemError = styled.li` | ||
| color: ${themeVal('color.danger')}; | ||
| `; | ||
|
|
||
| interface CustomAoIModalProps { | ||
| revealed: boolean; | ||
| onCloseClick: () => void; | ||
| onConfirm: (features: Feature<Polygon>[]) => void; | ||
| } | ||
|
|
||
| export default function CustomAoIModal({ | ||
| revealed, | ||
| onCloseClick, | ||
| onConfirm | ||
| }: CustomAoIModalProps) { | ||
| const { | ||
| features, | ||
| onUploadFile, | ||
| uploadFileError, | ||
| uploadFileWarnings, | ||
| fileInfo, | ||
| reset | ||
| } = useCustomAoI(); | ||
| const fileInputRef = useRef<HTMLInputElement>(null); | ||
|
|
||
| const onUploadClick = useCallback(() => { | ||
| if (fileInputRef.current) fileInputRef.current.click(); | ||
| }, []); | ||
|
|
||
| const onConfirmClick = useCallback(() => { | ||
| if (!features) return; | ||
| onConfirm(features); | ||
| onCloseClick(); | ||
| }, [features, onConfirm, onCloseClick]); | ||
|
|
||
| useEffect(() => { | ||
| if (revealed) reset(); | ||
| }, [revealed, reset]); | ||
|
|
||
| const hasInfo = !!uploadFileWarnings.length || !!features || uploadFileError; | ||
|
|
||
| return ( | ||
| <Modal | ||
| id='aoiUpload' | ||
| size='medium' | ||
| revealed={revealed} | ||
| onCloseClick={onCloseClick} | ||
| renderHeadline={() => ( | ||
| <ModalHeadline> | ||
| <h2>Upload custom area</h2> | ||
| </ModalHeadline> | ||
| )} | ||
| content={ | ||
| <ModalBodyInner> | ||
| <UploadFileIntro> | ||
| <p> | ||
| You can upload a zipped shapefile (*.zip) or a GeoJSON file | ||
| (*.json, *.geojson) to define a custom area of interest. | ||
| </p> | ||
| <FileUpload> | ||
| <Button variation='base-outline' onClick={onUploadClick}> | ||
| <CollecticonArrowUp /> | ||
| Upload file... | ||
| </Button> | ||
| {fileInfo && ( | ||
| <Subtitle as='p'> | ||
| File: {fileInfo.name} ({fileInfo.type}). | ||
| </Subtitle> | ||
| )} | ||
| <FileInput | ||
| type='file' | ||
| onChange={onUploadFile} | ||
| accept={acceptExtensions} | ||
| ref={fileInputRef} | ||
| /> | ||
| </FileUpload> | ||
| </UploadFileIntro> | ||
|
|
||
| {hasInfo && ( | ||
| <UploadInformation> | ||
| <Heading hidden>Upload information</Heading> | ||
|
|
||
| <UploadListInfo> | ||
| {uploadFileWarnings.map((w) => ( | ||
| <UploadInfoItemWarnings key={w}> | ||
| <CollecticonCircleInformation /> | ||
| <span>{w}</span> | ||
| </UploadInfoItemWarnings> | ||
| ))} | ||
| {features && ( | ||
| <UploadInfoItemSuccess> | ||
| <CollecticonCircleTick /> | ||
| <span>File uploaded successfully.</span> | ||
| </UploadInfoItemSuccess> | ||
| )} | ||
| {uploadFileError && ( | ||
| <UploadInfoItemError> | ||
| <CollecticonCircleExclamation /> {uploadFileError} | ||
| </UploadInfoItemError> | ||
| )} | ||
| </UploadListInfo> | ||
| </UploadInformation> | ||
| )} | ||
| </ModalBodyInner> | ||
| } | ||
| renderFooter={() => ( | ||
| <UploadFileModalFooter> | ||
| <Button variation='base-text' onClick={onCloseClick}> | ||
| <CollecticonXmarkSmall /> | ||
| Cancel | ||
| </Button> | ||
| <Button | ||
| variation='primary-fill' | ||
| disabled={!features} | ||
| onClick={onConfirmClick} | ||
| > | ||
| <CollecticonTickSmall /> | ||
| Add area | ||
| </Button> | ||
| </UploadFileModalFooter> | ||
| )} | ||
| /> | ||
| ); | ||
| } |
Oops, something went wrong.