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

react 18

Browse Source
This commit is contained in:
AT 2023-04-15 16:23:19 +02:00
commit 4942777352
11 changed files with 2440 additions and 3881 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6256
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

19
package.json
View File

@ -20,14 +20,19 @@
"@types/react": "^18.0.14",
"@types/react-dom": "^18.0.5",
"@types/react-leaflet": "^2.8.2",
"@typescript-eslint/eslint-plugin": "^5.38.1",
"@typescript-eslint/parser": "^5.38.1",
"autoprefixer": "^10.4.7",
"babel-core": "^6.26.3",
"babel-loader": "^9.1.2",
"babel-runtime": "^6.26.0",
"daisyui": "^2.19.0",
"eslint": "^8.24.0",
"eslint-plugin-react": "^7.31.8",
"eslint-plugin-react-hooks": "^4.6.0",
"postcss": "^8.4.14",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"rollup": "^2.75.7",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-typescript2": "^0.32.1",
@ -35,13 +40,13 @@
"typescript": "^4.7.4"
},
"peerDependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"dependencies": {
"@heroicons/react": "^1.0.6",
"leaflet": "^1.8.0",
"react-leaflet": "^3.2.5",
"react-leaflet-cluster": "^1.0.4"
"leaflet": "^1.9.3",
"react-leaflet": "^4.2.1",
"react-leaflet-cluster": "^2.1.0"
}
}

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

@ -13,13 +13,13 @@ export const Layer = (props: LayerProps) => {
const tags = useTags();
// create a JS-Map with all Tags
let tagMap = new Map(tags?.map(key => [key.id, key]));
const tagMap = new Map(tags?.map(key => [key.id, key]));
// returns all tags for passed item
const getTags = (item: Item) => {
let tags: Tag[] = [];
const tags: Tag[] = [];
item.tags && item.tags.forEach(element => {
if (tagMap.has(element)) { tags.push(tagMap.get(element)!); };
if (tagMap.has(element)) { tags.push(tagMap.get(element)!)}
});
return tags;
};
@ -35,13 +35,13 @@ export const Layer = (props: LayerProps) => {
})
addLayer(props);
}, [])
}, [addItem, addLayer, props])
return (
<>
{items.filter(item => item.layer?.name === props.name)?.map((place: Item) => {
let tags = getTags(place);
const tags = getTags(place);
let color1 = "#666";
let color2 = "RGBA(35, 31, 32, 0.2)";
if (tags[0]) {

2
src/Components/Map/Tags.tsx
View File

@ -9,7 +9,7 @@ useEffect(() => {
data.map(tag => {
addTag(tag)
})
}, [])
}, [addTag, data])
return (
<></>

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

@ -15,7 +15,7 @@ import { LayersProvider } from "./hooks/useLayers";
export interface MapEventListenerProps {
selectMode: Layer | null,
setSelectMode: React.Dispatch<React.SetStateAction<any>>,
setSelectMode: React.Dispatch<any>,
setNewItemPopup: React.Dispatch<React.SetStateAction<any>>
}
@ -23,8 +23,6 @@ function MapEventListener(props: MapEventListenerProps) {
useMapEvents({
click: (e) => {
console.log(e.latlng.lat + ',' + e.latlng.lng);
console.log(props.selectMode);
if (props.selectMode != null) {
props.setNewItemPopup({ layer: props.selectMode, position: e.latlng })
props.setSelectMode(null)
@ -55,7 +53,7 @@ function UtopiaMap({
<MapContainer style={{ height: height, width: width }} center={center} zoom={zoom}>
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
url="https://tile.osmand.net/hd/{z}/{x}/{y}.png" />
<MarkerClusterGroup showCoverageOnHover chunkedLoading maxClusterRadius={50}>
{
React.Children.toArray(children).map((child) =>

8
src/Components/Map/hooks/useItems.tsx
View File

@ -24,11 +24,15 @@ function useItemsManager (initialItems: Item[]): {
} {
const [items, dispatch] = useReducer((state: Item[], action: ActionType) => {
switch (action.type) {
case "ADD":
return [
case "ADD":
const exist = state.find((item) =>
item.id === action.item.id ? true : false
);
if (!exist) return [
...state,
action.item,
];
else return state;
case "UPDATE":
return state.map((item) => {
if (item.id === action.item.id) {

8
src/Components/Map/hooks/useLayers.tsx
View File

@ -20,10 +20,14 @@ function useLayerManager(initialLayers: Layer[]): {
const [layers, dispatch] = useReducer((state: Layer[], action: ActionType) => {
switch (action.type) {
case "ADD LAYER":
return [
const exist = state.find((layer) =>
layer.name === action.layer.name ? true : false
);
if (!exist) return [
...state,
action.layer,
];
else return state;
default:
throw new Error();
}
@ -36,7 +40,7 @@ function useLayerManager(initialLayers: Layer[]): {
});
}, []);
return { layers, addLayer};
return { layers, addLayer };
}
export const LayersProvider: React.FunctionComponent<{

2
src/Utils/MarkerIconFactory.ts
View File

@ -1,7 +1,7 @@
import * as L from 'leaflet';
const createSvg = (shape:string, markerColor:string, borderColor:string) => {
var svgMap = {
const svgMap = {
circle: '<svg width="32" height="44" viewBox="0 0 35 45" xmlns="http://www.w3.org/2000/svg"><path d="M17.5 2.746c-8.284 0-15 6.853-15 15.307 0 .963.098 1.902.265 2.816a15.413 15.413 0 002.262 5.684l.134.193 12.295 17.785 12.439-17.863.056-.08a15.422 15.422 0 002.343-6.112c.123-.791.206-1.597.206-2.423 0-8.454-6.716-15.307-15-15.307" fill="' + markerColor + '" /><path d="M17.488 2.748c-8.284 0-15 6.853-15 15.307 0 .963.098 1.902.265 2.816a15.413 15.413 0 002.262 5.684l.134.193 12.295 17.785 12.44-17.863.055-.08a15.422 15.422 0 002.343-6.112c.124-.791.206-1.597.206-2.423 0-8.454-6.716-15.307-15-15.307m0 1.071c7.68 0 13.929 6.386 13.929 14.236 0 .685-.064 1.423-.193 2.258-.325 2.075-1.059 3.99-2.164 5.667l-.055.078-11.557 16.595L6.032 26.14l-.12-.174a14.256 14.256 0 01-2.105-5.29 14.698 14.698 0 01-.247-2.62c0-7.851 6.249-14.237 13.928-14.237" fill="' + borderColor + '" opacity="1" /></svg>',
square: '<svg width="33" height="44" viewBox="0 0 35 45" xmlns="http://www.w3.org/2000/svg"><path d="M28.205 3.217H6.777c-2.367 0-4.286 1.87-4.286 4.179v19.847c0 2.308 1.919 4.179 4.286 4.179h5.357l5.337 13.58 5.377-13.58h5.357c2.366 0 4.285-1.87 4.285-4.179V7.396c0-2.308-1.919-4.179-4.285-4.179" fill="' + markerColor + '" /><g opacity="1" transform="matrix(1.0714 0 0 -1.0714 -233.22 146.783)"><path d="M244 134h-20c-2.209 0-4-1.746-4-3.9v-18.525c0-2.154 1.791-3.9 4-3.9h5L233.982 95 239 107.675h5c2.209 0 4 1.746 4 3.9V130.1c0 2.154-1.791 3.9-4 3.9m0-1c1.654 0 3-1.301 3-2.9v-18.525c0-1.599-1.346-2.9-3-2.9h-5.68l-.25-.632-4.084-10.318-4.055 10.316-.249.634H224c-1.654 0-3 1.301-3 2.9V130.1c0 1.599 1.346 2.9 3 2.9h20" fill="'+ borderColor +'" /></g></svg>',
star: '<svg width="34" height="44" viewBox="0 0 35 45" xmlns="http://www.w3.org/2000/svg"><path d="M32.92 16.93l-3.525-3.525V8.419a1.983 1.983 0 00-1.983-1.982h-4.985L18.9 2.91a1.984 1.984 0 00-2.803 0l-3.524 3.526H7.588a1.983 1.983 0 00-1.982 1.982v4.986L2.081 16.93a1.982 1.982 0 000 2.803l3.525 3.526v4.984c0 1.096.888 1.983 1.982 1.983h4.986L17.457 45l4.97-14.773h4.985a1.983 1.983 0 001.983-1.983V23.26l3.525-3.526a1.982 1.982 0 000-2.803" fill="' + markerColor + '" /><g opacity=".15" transform="matrix(1.0667 0 0 -1.0667 -347.3 97.26)"><path d="M342 89c-.476 0-.951-.181-1.314-.544l-3.305-3.305h-4.673a1.858 1.858 0 01-1.859-1.858v-4.674l-3.305-3.305a1.857 1.857 0 010-2.627l3.305-3.305v-4.674a1.86 1.86 0 011.859-1.859h4.673L341.959 49l4.659 13.849h4.674a1.86 1.86 0 011.859 1.859v4.674l3.305 3.305a1.858 1.858 0 010 2.627l-3.305 3.305v4.674a1.859 1.859 0 01-1.859 1.858h-4.674l-3.304 3.305A1.851 1.851 0 01342 89m0-1a.853.853 0 00.607-.251l3.304-3.305.293-.293h5.088a.86.86 0 00.859-.858v-5.088l3.598-3.598A.852.852 0 00356 74a.85.85 0 00-.251-.606l-3.598-3.598v-5.088a.86.86 0 00-.859-.859h-5.393l-.229-.681-3.702-11.006-3.637 11.001-.227.686h-5.396a.86.86 0 00-.859.859v5.088l-3.598 3.598c-.162.162-.251.377-.251.606s.089.445.251.607l3.598 3.598v5.088a.86.86 0 00.859.858h5.087l3.598 3.598A.853.853 0 00342 88" fill="#231f20" /></g></svg>',

6
src/Utils/ReplaceURLs.ts
View File

@ -1,16 +1,16 @@
export function replaceURLs(message: string): string {
if (!message) return "";
var urlRegex = /(^| )(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,10}(:[0-9]{1,10})?(\/.*)?$/gm;
const urlRegex = /(^| )(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,10}(:[0-9]{1,10})?(\/.*)?$/gm;
message = message.replace(urlRegex, function (url) {
var hyperlink = url.replace(' ', '');
let hyperlink = url.replace(' ', '');
if (!hyperlink.match('^https?:\/\/')) {
hyperlink = 'http://' + hyperlink;
}
return '<a href="' + hyperlink + '" target="_blank" rel="noopener noreferrer">' + url + '</a>'
});
var mailRegex = /([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9_-]+)/gi;
const mailRegex = /([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9_-]+)/gi;
message = message.replace(mailRegex, function (mail) {
return '<a href="mailto:' + mail + '">' + mail + '</a>'
});

2
src/index.tsx
View File

@ -1 +1 @@
export { UtopiaMap, Layer, Tags, Item, Tag, API } from './Components/Map/index'
export { UtopiaMap, Layer, Tags, Item, Tag, API } from './Components/Map/index';

2
src/types.ts
View File

@ -32,7 +32,7 @@ export class Item {
name: string;
text: string;
position: Geometry;
layer: Layer;
[key: string]: any;
start?: string;
end?: string;
tags?: number[];