antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

renamed Popup Components

Browse Source
This commit is contained in:
Anton 2023-07-20 10:00:19 +02:00
parent 4e7170cfc9
commit eba7f0630b
7 changed files with 39 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
package-lock.json generated
View File

@ -1,12 +1,12 @@
{ {
"name": "utopia-ui", "name": "utopia-ui",
"version": "1.0.8", "version": "2.0.6",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "utopia-ui", "name": "utopia-ui",
"version": "1.0.8", "version": "2.0.6",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@heroicons/react": "^2.0.17", "@heroicons/react": "^2.0.17",
@ -354,9 +354,9 @@
} }
}, },
"node_modules/@typescript-eslint/eslint-plugin/node_modules/semver": { "node_modules/@typescript-eslint/eslint-plugin/node_modules/semver": {
"version": "7.3.7", "version": "7.5.4",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz", "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
"integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==", "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"lru-cache": "^6.0.0" "lru-cache": "^6.0.0"
@ -480,9 +480,9 @@
} }
}, },
"node_modules/@typescript-eslint/typescript-estree/node_modules/semver": { "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
"version": "7.3.7", "version": "7.5.4",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz", "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
"integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==", "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"lru-cache": "^6.0.0" "lru-cache": "^6.0.0"
@ -4170,9 +4170,9 @@
} }
}, },
"node_modules/semver": { "node_modules/semver": {
"version": "6.3.0", "version": "6.3.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
"dev": true, "dev": true,
"bin": { "bin": {
"semver": "bin/semver.js" "semver": "bin/semver.js"
@ -4750,9 +4750,9 @@
} }
}, },
"node_modules/word-wrap": { "node_modules/word-wrap": {
"version": "1.2.3", "version": "1.2.4",
"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz", "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.4.tgz",
"integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==", "integrity": "sha512-2V81OA4ugVo5pRo46hAoD2ivUJx8jXmWXfUkY4KFNw0hEptvN0QfH3K4nHiwzGeKl5rFKedV48QVoqYavy4YpA==",
"dev": true, "dev": true,
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"

6
package.json
View File

@ -1,9 +1,9 @@
{ {
"name": "utopia-ui", "name": "utopia-ui",
"version": "2.0.5", "version": "2.0.6",
"description": "Reuseable React Components to build mapping apps for all kinds of communities ", "description": "Reuseable React Components to build mapping apps for real life communities and networks",
"repository": "https://github.com/utopia-os/utopia-ui", "repository": "https://github.com/utopia-os/utopia-ui",
"homepage:": "https://utopia.os/", "homepage:": "https://utopia-os.org/",
"module": "dist/index.js", "module": "dist/index.js",
"types": "dist/index.d.ts", "types": "dist/index.d.ts",
"scripts": { "scripts": {

4
src/Components/Map/Layer.tsx
View File

@ -2,7 +2,7 @@ import * as React from 'react'
import { Marker } from 'react-leaflet' import { Marker } from 'react-leaflet'
import { Item, Tag, LayerProps } from '../../types' import { Item, Tag, LayerProps } from '../../types'
import MarkerIconFactory from '../../Utils/MarkerIconFactory' import MarkerIconFactory from '../../Utils/MarkerIconFactory'
import { Popup } from './Subcomponents/Popup' import { ItemViewPopup } from './Subcomponents/ItemViewPopup'
import { useTags } from './hooks/useTags' import { useTags } from './hooks/useTags'
import { useAddItem, useItems, useResetItems } from './hooks/useItems' import { useAddItem, useItems, useResetItems } from './hooks/useItems'
import { useEffect } from 'react' import { useEffect } from 'react'
@ -55,7 +55,7 @@ export const Layer = (props: LayerProps) => {
} }
return ( return (
<Marker icon={MarkerIconFactory(props.markerShape, color1, color2, props.markerIcon)} key={place.id} position={[place.position.coordinates[1], place.position.coordinates[0]]}> <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> </Marker>
); );
}) })

8
src/Components/Map/Subcomponents/NewItemPopup.tsx → src/Components/Map/Subcomponents/ItemFormPopup.tsx
View File

@ -5,14 +5,14 @@ import { useEffect, useState } from 'react'
import { useAddItem, useUpdateItem } from '../hooks/useItems' import { useAddItem, useUpdateItem } from '../hooks/useItems'
import { Geometry, LayerProps, Item} from '../../../types' import { Geometry, LayerProps, Item} from '../../../types'
export interface NewItemPopupProps { export interface ItemFormPopupProps {
position: LatLng, position: LatLng,
layer: LayerProps, layer: LayerProps,
item?: Item, 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 [name, setName] = useState('')
const [text, setText] = useState('') const [text, setText] = useState('')
@ -29,7 +29,7 @@ export default function NewItemPopup(props: NewItemPopupProps) {
else { else {
addItem(new Item(crypto.randomUUID(), name, text, new Geometry(props.position.lng, props.position.lat), props.layer))} addItem(new Item(crypto.randomUUID(), name, text, new Geometry(props.position.lng, props.position.lat), props.layer))}
map.closePopup(); map.closePopup();
props.setNewItemPopup(null); props.setItemFormPopup(null);
} }
const resetPopup = () => { const resetPopup = () => {

14
src/Components/Map/Subcomponents/Popup.tsx → src/Components/Map/Subcomponents/ItemViewPopup.tsx
View File

@ -4,16 +4,16 @@ import { Popup as LeafletPopup, useMap } from 'react-leaflet'
import { Item, Tag } from '../../../types' import { Item, Tag } from '../../../types'
import { replaceURLs } from '../../../Utils/ReplaceURLs' import { replaceURLs } from '../../../Utils/ReplaceURLs'
import { useRemoveItem } from '../hooks/useItems' import { useRemoveItem } from '../hooks/useItems'
import { NewItemPopupProps } from './NewItemPopup' import { ItemFormPopupProps } from './ItemFormPopup'
export interface UtopiaPopupProps { export interface ItemViewPopupProps {
item: Item, item: Item,
tags: Tag[], 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 item: Item = props.item;
const tags: Tag[] = props.tags; const tags: Tag[] = props.tags;
const removeItem = useRemoveItem(); const removeItem = useRemoveItem();
@ -28,8 +28,8 @@ const Popup = (props: UtopiaPopupProps) => {
const openEditPopup = (event: React.MouseEvent<HTMLElement>) => { const openEditPopup = (event: React.MouseEvent<HTMLElement>) => {
event.stopPropagation(); event.stopPropagation();
map.closePopup(); map.closePopup();
if (props.setNewItemPopup) if (props.setItemFormPopup)
props.setNewItemPopup({ position: new LatLng(item.position.coordinates[1], item.position.coordinates[0]), layer: item.layer, item: item, setNewItemPopup: props.setNewItemPopup }) props.setItemFormPopup({ position: new LatLng(item.position.coordinates[1], item.position.coordinates[0]), layer: item.layer, item: item, setItemFormPopup: props.setItemFormPopup })
} }
return ( return (
@ -101,6 +101,6 @@ const Popup = (props: UtopiaPopupProps) => {
) )
} }
export { Popup }; export { ItemViewPopup };

14
src/Components/Map/UtopiaMap.tsx
View File

@ -7,7 +7,7 @@ import { LatLng } from "leaflet";
import MarkerClusterGroup from 'react-leaflet-cluster' import MarkerClusterGroup from 'react-leaflet-cluster'
import AddButton from "./Subcomponents/AddButton"; import AddButton from "./Subcomponents/AddButton";
import { useState } from "react"; import { useState } from "react";
import NewItemPopup, { NewItemPopupProps } from "./Subcomponents/NewItemPopup"; import ItemFormPopup, { ItemFormPopupProps } from "./Subcomponents/ItemFormPopup";
import { ItemsProvider } from "./hooks/useItems"; import { ItemsProvider } from "./hooks/useItems";
import { TagsProvider } from "./hooks/useTags"; import { TagsProvider } from "./hooks/useTags";
import { LayersProvider } from "./hooks/useLayers"; import { LayersProvider } from "./hooks/useLayers";
@ -16,7 +16,7 @@ import { LayersProvider } from "./hooks/useLayers";
export interface MapEventListenerProps { export interface MapEventListenerProps {
selectMode: LayerProps | null, selectMode: LayerProps | null,
setSelectMode: React.Dispatch<any>, setSelectMode: React.Dispatch<any>,
setNewItemPopup: React.Dispatch<React.SetStateAction<any>> setItemFormPopup: React.Dispatch<React.SetStateAction<any>>
} }
function MapEventListener(props: MapEventListenerProps) { function MapEventListener(props: MapEventListenerProps) {
@ -25,7 +25,7 @@ function MapEventListener(props: MapEventListenerProps) {
console.log(e.latlng.lat + ',' + e.latlng.lng); console.log(e.latlng.lat + ',' + e.latlng.lng);
if (props.selectMode != null) { if (props.selectMode != null) {
props.setNewItemPopup({ layer: props.selectMode, position: e.latlng }) props.setItemFormPopup({ layer: props.selectMode, position: e.latlng })
props.setSelectMode(null) props.setSelectMode(null)
} }
} }
@ -43,7 +43,7 @@ function UtopiaMap({
: UtopiaMapProps) { : UtopiaMapProps) {
const [selectMode, setSelectMode] = useState<LayerProps | null>(null); 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}> <MarkerClusterGroup showCoverageOnHover chunkedLoading maxClusterRadius={50}>
{ {
React.Children.toArray(children).map((child) => 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> </MarkerClusterGroup>
<MapEventListener setSelectMode={setSelectMode} selectMode={selectMode} setNewItemPopup={setNewItemPopup} /> <MapEventListener setSelectMode={setSelectMode} selectMode={selectMode} setItemFormPopup={setItemFormPopup} />
{newItemPopup && {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> <AddButton setSelectMode={setSelectMode}></AddButton>
</MapContainer> </MapContainer>

4
src/types.ts
View File

@ -1,5 +1,5 @@
import { LatLng } from "leaflet"; import { LatLng } from "leaflet";
import { NewItemPopupProps } from "./Components/Map/Subcomponents/NewItemPopup"; import { ItemFormPopupProps } from "./Components/Map/Subcomponents/ItemFormPopup";
export interface UtopiaMapProps { export interface UtopiaMapProps {
height?: string, height?: string,
@ -22,7 +22,7 @@ export interface LayerProps {
markerDefaultColor: string, markerDefaultColor: string,
tags?: Tag[], tags?: Tag[],
api?: ItemsApi, api?: ItemsApi,
setNewItemPopup?: React.Dispatch<React.SetStateAction<NewItemPopupProps | null>> setItemFormPopup?: React.Dispatch<React.SetStateAction<ItemFormPopupProps | null>>
} }
export class Item { export class Item {