-
Notifications
You must be signed in to change notification settings - Fork 41
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* Redesign toolbox * Use default layer props when available * Improved infocard to display layer name instead on layer id Co-authored-by: Shadab Khan <[email protected]>
- Loading branch information
1 parent
870ca7b
commit 00c2bde
Showing
31 changed files
with
719 additions
and
107 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
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
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
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
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
58 changes: 35 additions & 23 deletions
58
react/src/lib/components/DeckGLMap/components/settings/DrawModeSelector.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 |
|---|---|---|
| @@ -1,44 +1,56 @@ | ||
| import { NativeSelect } from "@equinor/eds-core-react"; | ||
| import React, { useCallback } from "react"; | ||
| import { useDispatch, useSelector } from "react-redux"; | ||
| import { useDispatch } from "react-redux"; | ||
| import { updateDrawingMode } from "../../redux/actions"; | ||
| import { MapState } from "../../redux/store"; | ||
| import { DrawModes } from "../../redux/types"; | ||
| import { getDrawMode } from "../../utils/specExtractor"; | ||
| import { DrawMode, DrawModes } from "../../redux/types"; | ||
|
|
||
| interface Props { | ||
| /** | ||
| * It defines the mode that are available for a particular layer based on layer ID. | ||
| */ | ||
| layerId: string; | ||
| /** | ||
| * Label for the component. | ||
| */ | ||
| label: string; | ||
| /** | ||
| * Initial state of the component. | ||
| */ | ||
| value: string; | ||
| } | ||
| const DrawModeSelector: React.FC<Props> = React.memo(({ layerId }: Props) => { | ||
| // Redux | ||
| const dispatch = useDispatch(); | ||
|
|
||
| const drawMode = useSelector((st: MapState) => | ||
| getDrawMode(st.spec, layerId) | ||
| ); | ||
| // handlers | ||
| const handleSelectedItemChange = useCallback( | ||
| (event) => dispatch(updateDrawingMode([layerId, event.target.value])), | ||
| [dispatch] | ||
| ); | ||
| return ( | ||
| drawMode && ( | ||
| const DrawModeSelector: React.FC<Props> = React.memo( | ||
| ({ layerId, label, value }: Props) => { | ||
| // Redux | ||
| const dispatch = useDispatch(); | ||
|
|
||
| // handlers | ||
| const handleSelectedItemChange = useCallback( | ||
| (event) => { | ||
| const selection = DrawModes.find( | ||
| (mode) => mode.displayName === event.target.value | ||
| ); | ||
| dispatch( | ||
| updateDrawingMode([layerId, selection?.id as DrawMode]) | ||
| ); | ||
| }, | ||
| [dispatch] | ||
| ); | ||
| const cur_selection = DrawModes.find((mode) => mode.id === value); | ||
| return ( | ||
| <NativeSelect | ||
| id={`${layerId}-mode-selector`} | ||
| label="Draw Mode" | ||
| value={drawMode} | ||
| label={label} | ||
| value={cur_selection?.displayName} | ||
| onChange={handleSelectedItemChange} | ||
| > | ||
| {DrawModes.map((mode) => ( | ||
| <option key={mode}>{mode}</option> | ||
| <option key={mode.id}>{mode.displayName}</option> | ||
| ))} | ||
| </NativeSelect> | ||
| ) | ||
| ); | ||
| }); | ||
| ); | ||
| } | ||
| ); | ||
|
|
||
| DrawModeSelector.displayName = "DrawModeSelector"; | ||
| export default DrawModeSelector; |
Oops, something went wrong.