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

renaming setItemPosition

Browse Source
This commit is contained in:
Anton 2023-09-04 20:13:57 +02:00
parent cace6fc7e8
commit 1d2831befc
4 changed files with 16 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,7 @@ import { ItemViewPopup } from './Subcomponents/ItemViewPopup'
import { useItems, useResetItems, useSetItemsApi, useSetItemsData } from './hooks/useItems'
import { useEffect, useState } from 'react'
import { ItemFormPopupProps, ItemFormPopup } from './Subcomponents/ItemFormPopup'
import { useAddFilterTag, useFilterTags, useSearchPhrase } from './hooks/useFilter'
import { useFilterTags, useSearchPhrase } from './hooks/useFilter'
export const Layer = (props: LayerProps) => {
@ -14,11 +14,6 @@ export const Layer = (props: LayerProps) => {
const [itemFormPopup, setItemFormPopup] = useState<ItemFormPopupProps | null>(null);
const filterTags = useFilterTags();
const setFilterTag = useAddFilterTag();
// setFilterTag({id: "healing", color: "#000"})
const items = useItems();
const setItemsApi = useSetItemsApi();

8
src/Components/Map/Subcomponents/AddButton.tsx
View File

@ -3,7 +3,7 @@ import DynamicHeroIcon from '../../../Utils/DynamicHeroIcon'
import { useLayers } from '../hooks/useLayers'
export default function AddButton({ setSelectMode }: { setSelectMode: React.Dispatch<React.SetStateAction<any>> }) {
export default function AddButton({ setSelectNewItemPosition }: { setSelectNewItemPosition: React.Dispatch<React.SetStateAction<any>> }) {
const layers = useLayers();
@ -14,16 +14,16 @@ export default function AddButton({ setSelectMode }: { setSelectMode: React.Disp
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</label>
<ul tabIndex={0} className="tw-dropdown-content tw-pr-1 tw-mb-1 tw-list-none">
<ul tabIndex={0} className="tw-dropdown-content tw-pr-1 tw-list-none">
{layers.map((layer) => (
layer.api?.createItem && (
<li key={layer.name} >
<a>
<div className="tw-tooltip tw-tooltip-left" data-tip={layer.menuText}>
<button tabIndex={0}
className="tw-z-500 tw-border-0 tw-pl-2 tw-p-0 tw-mb-2 tw-mt-2 tw-w-10 tw-h-10 tw-cursor-pointer tw-rounded-full tw-mouse tw-drop-shadow-md tw-transition tw-ease-in tw-duration-200 focus:tw-outline-none"
className="tw-z-500 tw-border-0 tw-pl-2 tw-p-0 tw-mb-3 tw-w-10 tw-h-10 tw-cursor-pointer tw-rounded-full tw-mouse tw-drop-shadow-md tw-transition tw-ease-in tw-duration-200 focus:tw-outline-none"
style={{ backgroundColor: layer.menuColor }}
onClick={() => { setSelectMode(layer) }}>
onClick={() => { setSelectNewItemPosition(layer) }}>
<DynamicHeroIcon icon={layer.menuIcon} />
</button>
</div>

2
src/Components/Map/Subcomponents/FilterControl.tsx
View File

@ -1,7 +1,5 @@
import * as React from 'react'
import { useFilterTags, useRemoveFilterTag, useSetSearchPhrase } from '../hooks/useFilter'
import { useMapEvents } from 'react-leaflet';
import { useState } from 'react';
import useWindowDimensions from '../hooks/useWindowDimension';

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

@ -16,8 +16,8 @@ import { FilterControl } from "./Subcomponents/FilterControl";
export interface MapEventListenerProps {
selectMode: LayerProps | null,
setSelectMode: React.Dispatch<any>,
selectNewItemPosition: LayerProps | null,
setSelectNewItemPosition: React.Dispatch<any>,
setItemFormPopup: React.Dispatch<React.SetStateAction<any>>
}
@ -26,9 +26,9 @@ function MapEventListener(props: MapEventListenerProps) {
click: (e) => {
console.log(e.latlng.lat + ',' + e.latlng.lng);
if (props.selectMode != null) {
props.setItemFormPopup({ layer: props.selectMode, position: e.latlng })
props.setSelectMode(null)
if (props.selectNewItemPosition != null) {
props.setItemFormPopup({ layer: props.selectNewItemPosition, position: e.latlng })
props.setSelectNewItemPosition(null)
}
},
resize: () => {
@ -49,7 +49,7 @@ function UtopiaMap({
children }
: UtopiaMapProps) {
const [selectMode, setSelectMode] = useState<LayerProps | null>(null);
const [selectNewItemPosition, setSelectNewItemPosition] = useState<LayerProps | null>(null);
const [itemFormPopup, setItemFormPopup] = useState<ItemFormPopupProps | null>(null);
@ -59,7 +59,7 @@ function UtopiaMap({
<TagsProvider initialTags={[]}>
<FilterProvider initialTags={[]}>
<ItemsProvider initialItems={[]}>
<div className={(selectMode != null ? "crosshair-cursor-enabled" : undefined)}>
<div className={(selectNewItemPosition != null ? "crosshair-cursor-enabled" : undefined)}>
<MapContainer ref={mapDivRef} style={{ height: height, width: width }} center={center} zoom={zoom} zoomControl={false}>
<FilterControl></FilterControl>
<TileLayer
@ -73,14 +73,14 @@ function UtopiaMap({
)
}
</MarkerClusterGroup>
<MapEventListener setSelectMode={setSelectMode} selectMode={selectMode} setItemFormPopup={setItemFormPopup} />
<MapEventListener setSelectNewItemPosition={setSelectNewItemPosition} selectNewItemPosition={selectNewItemPosition} setItemFormPopup={setItemFormPopup} />
</MapContainer>
<AddButton setSelectMode={setSelectMode}></AddButton>
{selectMode != null &&
<AddButton setSelectNewItemPosition={setSelectNewItemPosition}></AddButton>
{selectNewItemPosition != null &&
<div className="tw-button tw-z-500 tw-absolute tw-right-5 tw-top-4 tw-drop-shadow-md">
<div className="tw-alert tw-bg-base-100 tw-text-base-content">
<div>
<span>Select {selectMode.name} position!</span>
<span>Select {selectNewItemPosition.name} position!</span>
</div>
</div>
</div>