mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2025-12-13 07:46:10 +00:00
restructured internal files
This commit is contained in:
parent
4f7050f0bc
commit
179ed10d93
18
README.md
18
README.md
@ -1,13 +1,11 @@
|
||||
# Utopia UI [](https://www.npmjs.com/package/utopia-ui)
|
||||
Reuseable React Components to build mapping apps for all kinds of communities with focus of real life action, local connection and positiv impact.
|
||||
Reuseable React Components to build mapping apps with focus of real life action, local connection and positiv impact.
|
||||
|
||||
Check [utopia-os.org](https://utopia-os.org) for more information
|
||||
|
||||
*This Library is in early alpha stage. You are very welcome to participate in the development*
|
||||
*In early 2021, we developed a Django-based Proof of Concept, which can be found @ [new.docutopia.de](https://new.docutopia.de). This map can be edited freely you can register to create an account and place them on the map.*
|
||||
|
||||
*A Django-based Proof of Concept can be found @ [new.docutopia.de](https://new.docutopia.de). This map can be edited freely you can register to create an account and place them on the map.*
|
||||
|
||||
Utopia UI is the approach to create a Open Source Library of JavaScript Components which should useful maps and apps to all kind of projects and communities.
|
||||
Utopia UI is the approach to create a Open Source Library of JavaScript Components which should bring useful maps and apps to all kind of projects and communities.
|
||||
|
||||
|
||||
## Map UI Component
|
||||
@ -91,9 +89,9 @@ const tags = [
|
||||
`width` | `string` |`'100vw'` | No | width of the map
|
||||
`center` | `LatLng` |`[50.6, 9.5]` | No | initial map position
|
||||
`zoom` | `number` |`10` | No | initial zoom level
|
||||
`places` | [`Item[]`](https://utopia-os.org/docs/utopia-ui/map-components/item)| `[]` | No | Array with Items
|
||||
`events` | [`Item[]`](https://utopia-os.org/docs/utopia-ui/map-components/item)| `[]` | No | Array with Items
|
||||
`tags` | [`Tag[]`](https://utopia-os.org/docs/utopia-ui/map-components/tag) | `[]` | No | Array with Tags
|
||||
`places` | [`Item[]`](https://utopia-os.org/docs/utopia-ui/map-components/item)| `[]` | No | Array with Items
|
||||
`events` | [`Item[]`](https://utopia-os.org/docs/utopia-ui/map-components/item)| `[]` | No | Array with Items
|
||||
`tags` | [`Tag[]`](https://utopia-os.org/docs/utopia-ui/map-components/tag) | `[]` | No | Array with Tags
|
||||
|
||||
## Coming Soon
|
||||
|
||||
@ -107,6 +105,8 @@ const tags = [
|
||||
|
||||
## Join the community
|
||||
|
||||
*We are looking for Web Developer, UX Designer, Community Manager, Visionaries, Artists, etc. who like to support this Vision.*
|
||||
*This Library is in early alpha stage. You are very welcome to participate in the development*
|
||||
|
||||
*We are looking for Web Developer, UX Designer, Community Manager, Visionaries, Artists, etc. who like to support this Vision.*
|
||||
|
||||
[https://t.me/utopiaOS](https://t.me/utopiaOS)
|
||||
@ -1,71 +0,0 @@
|
||||
import * as React from 'react'
|
||||
import { Popup } from 'react-leaflet'
|
||||
import { Item, Tag } from '../../types'
|
||||
|
||||
export interface MarkerPopupProps {
|
||||
item: Item,
|
||||
tags: Tag[]
|
||||
}
|
||||
|
||||
const MarkerPopup = (props: MarkerPopupProps) => {
|
||||
const item: Item = props.item;
|
||||
const tags: Tag[] = props.tags;
|
||||
|
||||
return (
|
||||
<Popup maxHeight={320} minWidth={275} maxWidth={275} autoPanPadding={[30, 30]}>
|
||||
<b className="text-xl font-bold">{item.name}</b>
|
||||
{item.start && item.end &&
|
||||
<div className="flex flex-row">
|
||||
<div className="basis-2/5">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<span className='align-middle'>{new Date(item.start).toISOString().substring(0, 10) || ""}</span>
|
||||
</div>
|
||||
<div className="basis-1/5 place-content-center">
|
||||
<span>-</span>
|
||||
</div>
|
||||
<div className="basis-2/5">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<span className='align-middle leading-6'>{new Date(item.end).toISOString().substring(0, 10) || ""}</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<p style={{ whiteSpace: "pre-wrap" }} dangerouslySetInnerHTML={{ __html: replaceURLs(item.text) }} />
|
||||
<p>
|
||||
|
||||
{item.tags &&
|
||||
tags.map((tag: Tag) => (
|
||||
<span className="" style={{ fontWeight: "bold", display: "inline-block", color: "#fff", padding: ".3rem", borderRadius: ".5rem", backgroundColor: tag.color, margin: '.2rem', fontSize: "100%" }} key={tag.id}>#{tag.name}</span>
|
||||
))
|
||||
}
|
||||
</p>
|
||||
</Popup>
|
||||
)
|
||||
}
|
||||
|
||||
export default MarkerPopup;
|
||||
|
||||
|
||||
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;
|
||||
message = message.replace(urlRegex, function (url) {
|
||||
var 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;
|
||||
message = message.replace(mailRegex, function (mail) {
|
||||
return '<a href="mailto:' + mail + '">' + mail + '</a>'
|
||||
});
|
||||
|
||||
return message;
|
||||
}
|
||||
@ -2,8 +2,9 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
|
||||
.leaflet-data-marker {
|
||||
|
||||
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAQCAYAAACcN8ZaAAAB3klEQVR42s3U4UdDURzG8czMXJnJ1Vwzc6VJZjaZJdlMlpQsKdmUFNOUspRSSqUolfQfr+fF98Vx5mwv9qbDx7LdznnO7/7Omej3+/+Ga0QMUYkhbvBgmhzCQxwxibIGrGEF8CQhU+LLtKQkQNqScUgjxRxTBIxbgfgD/BgnhM8kM5KTeclLQYqGkkMRBckzR8ic/mAgd5BAZplsUaqyIg2sDtHg2brUZJk5SmwopErJUWE8SpmTMhNvya60Zd/SNrR4bkeaskG4uiwRZk6yrJEYFibGAxn+scECHTmTnuVCzvmty3PHciB7bGKN6lQkzysPqIrHmpFhYbKUtckC1/Ioz4ZHuZdbuSLYiRxRpSZVWXZVxAzC0R4Ik5SQsu6w8yd5l2/5kg95I9SdXMoZQfYIUjeqEUrgOkXGPeN4TYRhxy8E+ZUf+eS7B7miIoeybVSjKDnm8u3+gH3pDTYwu1igATvs/pXqvBKiR4i2bNJfi1ZfUAnjgrOG8wY2quNzBKuU/ZS+uSFEl5O0xRGuUIlZCcw7xG5QPkeHYUSNV5WXGou2sC3rBC0LjenqCXGO0WEiTJa0Lr4KixdHBrDGuGGiRqCUpFk8pGIpQtCU7p4YPwxYxEMCk1aAMQZh8Ac8PfbIzYPJOwAAAABJRU5ErkJggg==') no-repeat;
|
||||
background-position: 6px 32px;
|
||||
}
|
||||
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAQCAYAAACcN8ZaAAAB3klEQVR42s3U4UdDURzG8czMXJnJ1Vwzc6VJZjaZJdlMlpQsKdmUFNOUspRSSqUolfQfr+fF98Vx5mwv9qbDx7LdznnO7/7Omej3+/+Ga0QMUYkhbvBgmhzCQxwxibIGrGEF8CQhU+LLtKQkQNqScUgjxRxTBIxbgfgD/BgnhM8kM5KTeclLQYqGkkMRBckzR8ic/mAgd5BAZplsUaqyIg2sDtHg2brUZJk5SmwopErJUWE8SpmTMhNvya60Zd/SNrR4bkeaskG4uiwRZk6yrJEYFibGAxn+scECHTmTnuVCzvmty3PHciB7bGKN6lQkzysPqIrHmpFhYbKUtckC1/Ioz4ZHuZdbuSLYiRxRpSZVWXZVxAzC0R4Ik5SQsu6w8yd5l2/5kg95I9SdXMoZQfYIUjeqEUrgOkXGPeN4TYRhxy8E+ZUf+eS7B7miIoeybVSjKDnm8u3+gH3pDTYwu1igATvs/pXqvBKiR4i2bNJfi1ZfUAnjgrOG8wY2quNzBKuU/ZS+uSFEl5O0xRGuUIlZCcw7xG5QPkeHYUSNV5WXGou2sC3rBC0LjenqCXGO0WEiTJa0Lr4KixdHBrDGuGGiRqCUpFk8pGIpQtCU7p4YPwxYxEMCk1aAMQZh8Ac8PfbIzYPJOwAAAABJRU5ErkJggg==') no-repeat;
|
||||
background-position: 6px 32px;
|
||||
}
|
||||
@ -1,92 +1,2 @@
|
||||
import { TileLayer, MapContainer, Marker } from "react-leaflet";
|
||||
import "leaflet/dist/leaflet.css";
|
||||
import * as React from "react";
|
||||
import MarkerIconFactory from './Utils/MarkerIconFactory';
|
||||
import MarkerPopup from "./Components/Map/MarkerPopup";
|
||||
import { Item, Tag } from "./types"
|
||||
import "./index.css"
|
||||
import { LatLng } from "leaflet";
|
||||
import MarkerClusterGroup from 'react-leaflet-cluster'
|
||||
|
||||
export interface MapProps {
|
||||
height: string,
|
||||
width: string,
|
||||
center: LatLng,
|
||||
zoom: number,
|
||||
places?: Item[],
|
||||
events?: Item[],
|
||||
tags?: Tag[],
|
||||
}
|
||||
|
||||
const UtopiaMap = (props: MapProps) => {
|
||||
let center: LatLng = new LatLng(50.6, 9.5);
|
||||
if (props.center) center = props.center;
|
||||
let zoom: number = 10;
|
||||
if (props.zoom) zoom = props.zoom;
|
||||
let height: string = "400px";
|
||||
if (props.height) height = props.height;
|
||||
let width: string = "100vw";
|
||||
if (props.width) width = props.width;
|
||||
|
||||
let tagMap = new Map(props.tags?.map(key => [key.id, key]));
|
||||
|
||||
const getTags = (item: Item) => {
|
||||
let tags: Tag[] = [];
|
||||
item.tags && item.tags.forEach(element => {
|
||||
if (tagMap.has(element)) { tags.push(tagMap.get(element)!) };
|
||||
});
|
||||
return tags;
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<MapContainer style={{ height: height, width: width }} center={center} zoom={zoom} >
|
||||
<TileLayer
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
|
||||
<MarkerClusterGroup showCoverageOnHover chunkedLoading maxClusterRadius={50}>
|
||||
{props.places &&
|
||||
props.places.map((place: Item) => {
|
||||
let tags = getTags(place);
|
||||
let color1 = "#666";
|
||||
let color2 = "RGBA(35, 31, 32, 0.2)";
|
||||
if (tags[0]) {
|
||||
color1 = tags[0].color;
|
||||
}
|
||||
if (tags[1]) {
|
||||
color2 = tags[1].color;
|
||||
}
|
||||
return (
|
||||
<Marker icon={MarkerIconFactory('circle', color1, color2, 'circle-solid')} key={place.id} position={[place.position.coordinates[1], place.position.coordinates[0]]}>
|
||||
<MarkerPopup item={place} tags={tags} />
|
||||
</Marker>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
{props.events &&
|
||||
props.events.map((event: Item) => {
|
||||
let tags = getTags(event);
|
||||
let color1 = "#666";
|
||||
let color2 = "RGBA(35, 31, 32, 0.2)";
|
||||
if (tags[0]) {
|
||||
color1 = tags[0].color;
|
||||
}
|
||||
if (tags[1]) {
|
||||
color2 = tags[1].color;
|
||||
}
|
||||
return (
|
||||
<Marker icon={MarkerIconFactory('square', color1, color2, 'calendar-days-solid')} key={event.id} position={[event.position.coordinates[1], event.position.coordinates[0]]}>
|
||||
<MarkerPopup item={event} tags={tags} />
|
||||
</Marker>
|
||||
)
|
||||
})
|
||||
}
|
||||
</MarkerClusterGroup>
|
||||
</MapContainer>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export { UtopiaMap, Item, Tag };
|
||||
|
||||
import { UtopiaMap, Item, Tag } from './Components/Map/UtopiaMap'
|
||||
export { UtopiaMap, Item, Tag };
|
||||
Loading…
x
Reference in New Issue
Block a user