mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2025-12-13 07:46:10 +00:00
renamed Popup Components
This commit is contained in:
parent
4e7170cfc9
commit
eba7f0630b
28
package-lock.json
generated
28
package-lock.json
generated
@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "utopia-ui",
|
||||
"version": "1.0.8",
|
||||
"version": "2.0.6",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "utopia-ui",
|
||||
"version": "1.0.8",
|
||||
"version": "2.0.6",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@heroicons/react": "^2.0.17",
|
||||
@ -354,9 +354,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@typescript-eslint/eslint-plugin/node_modules/semver": {
|
||||
"version": "7.3.7",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
|
||||
"integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
|
||||
"version": "7.5.4",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
|
||||
"integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"lru-cache": "^6.0.0"
|
||||
@ -480,9 +480,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
|
||||
"version": "7.3.7",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
|
||||
"integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
|
||||
"version": "7.5.4",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
|
||||
"integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"lru-cache": "^6.0.0"
|
||||
@ -4170,9 +4170,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/semver": {
|
||||
"version": "6.3.0",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
|
||||
"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
|
||||
"version": "6.3.1",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
|
||||
"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"semver": "bin/semver.js"
|
||||
@ -4750,9 +4750,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/word-wrap": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
|
||||
"integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
|
||||
"version": "1.2.4",
|
||||
"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.4.tgz",
|
||||
"integrity": "sha512-2V81OA4ugVo5pRo46hAoD2ivUJx8jXmWXfUkY4KFNw0hEptvN0QfH3K4nHiwzGeKl5rFKedV48QVoqYavy4YpA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
{
|
||||
"name": "utopia-ui",
|
||||
"version": "2.0.5",
|
||||
"description": "Reuseable React Components to build mapping apps for all kinds of communities ",
|
||||
"version": "2.0.6",
|
||||
"description": "Reuseable React Components to build mapping apps for real life communities and networks",
|
||||
"repository": "https://github.com/utopia-os/utopia-ui",
|
||||
"homepage:": "https://utopia.os/",
|
||||
"homepage:": "https://utopia-os.org/",
|
||||
"module": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
|
||||
@ -2,7 +2,7 @@ import * as React from 'react'
|
||||
import { Marker } from 'react-leaflet'
|
||||
import { Item, Tag, LayerProps } from '../../types'
|
||||
import MarkerIconFactory from '../../Utils/MarkerIconFactory'
|
||||
import { Popup } from './Subcomponents/Popup'
|
||||
import { ItemViewPopup } from './Subcomponents/ItemViewPopup'
|
||||
import { useTags } from './hooks/useTags'
|
||||
import { useAddItem, useItems, useResetItems } from './hooks/useItems'
|
||||
import { useEffect } from 'react'
|
||||
@ -55,7 +55,7 @@ export const Layer = (props: LayerProps) => {
|
||||
}
|
||||
return (
|
||||
<Marker icon={MarkerIconFactory(props.markerShape, color1, color2, props.markerIcon)} key={place.id} position={[place.position.coordinates[1], place.position.coordinates[0]]}>
|
||||
<Popup item={place} tags={tags} setNewItemPopup={props.setNewItemPopup}/>
|
||||
<ItemViewPopup item={place} tags={tags} setItemFormPopup={props.setItemFormPopup}/>
|
||||
</Marker>
|
||||
);
|
||||
})
|
||||
|
||||
@ -5,14 +5,14 @@ import { useEffect, useState } from 'react'
|
||||
import { useAddItem, useUpdateItem } from '../hooks/useItems'
|
||||
import { Geometry, LayerProps, Item} from '../../../types'
|
||||
|
||||
export interface NewItemPopupProps {
|
||||
export interface ItemFormPopupProps {
|
||||
position: LatLng,
|
||||
layer: LayerProps,
|
||||
item?: Item,
|
||||
setNewItemPopup: React.Dispatch<React.SetStateAction<any>>
|
||||
setItemFormPopup: React.Dispatch<React.SetStateAction<any>>
|
||||
}
|
||||
|
||||
export default function NewItemPopup(props: NewItemPopupProps) {
|
||||
export default function ItemFormPopup(props: ItemFormPopupProps) {
|
||||
const [name, setName] = useState('')
|
||||
const [text, setText] = useState('')
|
||||
|
||||
@ -29,7 +29,7 @@ export default function NewItemPopup(props: NewItemPopupProps) {
|
||||
else {
|
||||
addItem(new Item(crypto.randomUUID(), name, text, new Geometry(props.position.lng, props.position.lat), props.layer))}
|
||||
map.closePopup();
|
||||
props.setNewItemPopup(null);
|
||||
props.setItemFormPopup(null);
|
||||
}
|
||||
|
||||
const resetPopup = () => {
|
||||
@ -4,16 +4,16 @@ import { Popup as LeafletPopup, useMap } from 'react-leaflet'
|
||||
import { Item, Tag } from '../../../types'
|
||||
import { replaceURLs } from '../../../Utils/ReplaceURLs'
|
||||
import { useRemoveItem } from '../hooks/useItems'
|
||||
import { NewItemPopupProps } from './NewItemPopup'
|
||||
import { ItemFormPopupProps } from './ItemFormPopup'
|
||||
|
||||
export interface UtopiaPopupProps {
|
||||
export interface ItemViewPopupProps {
|
||||
item: Item,
|
||||
tags: Tag[],
|
||||
setNewItemPopup?: React.Dispatch<React.SetStateAction<NewItemPopupProps | null>>
|
||||
setItemFormPopup?: React.Dispatch<React.SetStateAction<ItemFormPopupProps | null>>
|
||||
}
|
||||
|
||||
|
||||
const Popup = (props: UtopiaPopupProps) => {
|
||||
const ItemViewPopup = (props: ItemViewPopupProps) => {
|
||||
const item: Item = props.item;
|
||||
const tags: Tag[] = props.tags;
|
||||
const removeItem = useRemoveItem();
|
||||
@ -28,8 +28,8 @@ const Popup = (props: UtopiaPopupProps) => {
|
||||
const openEditPopup = (event: React.MouseEvent<HTMLElement>) => {
|
||||
event.stopPropagation();
|
||||
map.closePopup();
|
||||
if (props.setNewItemPopup)
|
||||
props.setNewItemPopup({ position: new LatLng(item.position.coordinates[1], item.position.coordinates[0]), layer: item.layer, item: item, setNewItemPopup: props.setNewItemPopup })
|
||||
if (props.setItemFormPopup)
|
||||
props.setItemFormPopup({ position: new LatLng(item.position.coordinates[1], item.position.coordinates[0]), layer: item.layer, item: item, setItemFormPopup: props.setItemFormPopup })
|
||||
}
|
||||
|
||||
return (
|
||||
@ -101,6 +101,6 @@ const Popup = (props: UtopiaPopupProps) => {
|
||||
)
|
||||
}
|
||||
|
||||
export { Popup };
|
||||
export { ItemViewPopup };
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ import { LatLng } from "leaflet";
|
||||
import MarkerClusterGroup from 'react-leaflet-cluster'
|
||||
import AddButton from "./Subcomponents/AddButton";
|
||||
import { useState } from "react";
|
||||
import NewItemPopup, { NewItemPopupProps } from "./Subcomponents/NewItemPopup";
|
||||
import ItemFormPopup, { ItemFormPopupProps } from "./Subcomponents/ItemFormPopup";
|
||||
import { ItemsProvider } from "./hooks/useItems";
|
||||
import { TagsProvider } from "./hooks/useTags";
|
||||
import { LayersProvider } from "./hooks/useLayers";
|
||||
@ -16,7 +16,7 @@ import { LayersProvider } from "./hooks/useLayers";
|
||||
export interface MapEventListenerProps {
|
||||
selectMode: LayerProps | null,
|
||||
setSelectMode: React.Dispatch<any>,
|
||||
setNewItemPopup: React.Dispatch<React.SetStateAction<any>>
|
||||
setItemFormPopup: React.Dispatch<React.SetStateAction<any>>
|
||||
}
|
||||
|
||||
function MapEventListener(props: MapEventListenerProps) {
|
||||
@ -25,7 +25,7 @@ function MapEventListener(props: MapEventListenerProps) {
|
||||
|
||||
console.log(e.latlng.lat + ',' + e.latlng.lng);
|
||||
if (props.selectMode != null) {
|
||||
props.setNewItemPopup({ layer: props.selectMode, position: e.latlng })
|
||||
props.setItemFormPopup({ layer: props.selectMode, position: e.latlng })
|
||||
props.setSelectMode(null)
|
||||
}
|
||||
}
|
||||
@ -43,7 +43,7 @@ function UtopiaMap({
|
||||
: UtopiaMapProps) {
|
||||
|
||||
const [selectMode, setSelectMode] = useState<LayerProps | null>(null);
|
||||
const [newItemPopup, setNewItemPopup] = useState<NewItemPopupProps | null>(null);
|
||||
const [newItemPopup, setItemFormPopup] = useState<ItemFormPopupProps | null>(null);
|
||||
|
||||
|
||||
|
||||
@ -59,13 +59,13 @@ function UtopiaMap({
|
||||
<MarkerClusterGroup showCoverageOnHover chunkedLoading maxClusterRadius={50}>
|
||||
{
|
||||
React.Children.toArray(children).map((child) =>
|
||||
React.isValidElement<{ setNewItemPopup: React.Dispatch<React.SetStateAction<NewItemPopupProps | null>> }>(child) ? React.cloneElement(child, { setNewItemPopup: setNewItemPopup }) : child
|
||||
React.isValidElement<{ setItemFormPopup: React.Dispatch<React.SetStateAction<ItemFormPopupProps | null>> }>(child) ? React.cloneElement(child, { setItemFormPopup: setItemFormPopup }) : child
|
||||
)
|
||||
}
|
||||
</MarkerClusterGroup>
|
||||
<MapEventListener setSelectMode={setSelectMode} selectMode={selectMode} setNewItemPopup={setNewItemPopup} />
|
||||
<MapEventListener setSelectMode={setSelectMode} selectMode={selectMode} setItemFormPopup={setItemFormPopup} />
|
||||
{newItemPopup &&
|
||||
<NewItemPopup position={newItemPopup.position} layer={newItemPopup.layer} setNewItemPopup={setNewItemPopup} item={newItemPopup.item} />
|
||||
<ItemFormPopup position={newItemPopup.position} layer={newItemPopup.layer} setItemFormPopup={setItemFormPopup} item={newItemPopup.item} />
|
||||
}
|
||||
<AddButton setSelectMode={setSelectMode}></AddButton>
|
||||
</MapContainer>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { LatLng } from "leaflet";
|
||||
import { NewItemPopupProps } from "./Components/Map/Subcomponents/NewItemPopup";
|
||||
import { ItemFormPopupProps } from "./Components/Map/Subcomponents/ItemFormPopup";
|
||||
|
||||
export interface UtopiaMapProps {
|
||||
height?: string,
|
||||
@ -22,7 +22,7 @@ export interface LayerProps {
|
||||
markerDefaultColor: string,
|
||||
tags?: Tag[],
|
||||
api?: ItemsApi,
|
||||
setNewItemPopup?: React.Dispatch<React.SetStateAction<NewItemPopupProps | null>>
|
||||
setItemFormPopup?: React.Dispatch<React.SetStateAction<ItemFormPopupProps | null>>
|
||||
}
|
||||
|
||||
export class Item {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user