antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2026-03-01 12:44:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix add button

Browse Source
This commit is contained in:
Anton Tranelis 2025-10-12 14:07:45 +02:00
parent 9db1844a1b
commit 1def41cfa6
1 changed files with 10 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
lib/src/Components/Map/Subcomponents/AddButton.tsx
View File

@ -1,7 +1,5 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import { DomEvent } from 'leaflet'
import { useEffect, useRef, useState } from 'react'
import SVG from 'react-inlinesvg'
import PlusSVG from '#assets/plus.svg'
@ -10,8 +8,6 @@ import { useLayers } from '#components/Map/hooks/useLayers'
import { useHasUserPermission } from '#components/Map/hooks/usePermissions'
import useWindowDimensions from '#components/Map/hooks/useWindowDimension'
import type { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react'
export default function AddButton({
triggerAction,
}: {
@ -22,27 +18,6 @@ export default function AddButton({
const appState = useAppState()
const { width } = useWindowDimensions()
const isMobile = width < 768
const [isOpen, setIsOpen] = useState(false)
const containerRef = useRef<HTMLDivElement>(null)
useEffect(() => {
const container = containerRef.current
if (!container) return
DomEvent.disableClickPropagation(container)
DomEvent.disableScrollPropagation(container)
const handlePointerDown = (event: PointerEvent) => {
event.stopPropagation()
event.preventDefault()
}
DomEvent.on(container, 'pointerdown', handlePointerDown)
return () => {
DomEvent.off(container, 'pointerdown', handlePointerDown)
}
}, [])
const canAddItems = () => {
let canAdd = false
@ -58,54 +33,16 @@ export default function AddButton({
return canAdd
}
const stopPropagation = (
event: ReactMouseEvent<HTMLElement> | ReactTouchEvent<HTMLElement>,
): void => {
const shouldPreventDefault = event.type === 'mousedown' || event.type === 'touchstart'
if (shouldPreventDefault) {
event.preventDefault()
}
event.stopPropagation()
if (
'nativeEvent' in event &&
typeof event.nativeEvent.stopImmediatePropagation === 'function'
) {
event.nativeEvent.stopImmediatePropagation()
}
}
const handleLayerSelect = (
event: ReactMouseEvent<HTMLButtonElement> | ReactTouchEvent<HTMLButtonElement>,
layer: (typeof layers)[number],
) => {
stopPropagation(event)
triggerAction(layer)
setIsOpen(false)
}
return (
<>
{canAddItems() ? (
<div
ref={containerRef}
className={`tw:dropdown tw:dropdown-top tw:dropdown-end tw:z-500 tw:absolute tw:right-4 tw:bottom-4 ${isOpen ? 'tw:dropdown-open' : ''}`}
>
<button
type='button'
className='tw:z-500 tw:btn tw:btn-circle tw:btn-lg tw:shadow tw:bg-base-100'
onMouseDown={(event) => {
stopPropagation(event)
}}
onClick={(event) => {
stopPropagation(event)
setIsOpen((prev) => !prev)
}}
onTouchStart={(event) => {
stopPropagation(event)
}}
<div className='tw:dropdown tw:dropdown-top tw:dropdown-end tw:dropdown-hover tw:z-500 tw:absolute tw:right-4 tw:bottom-4'>
<label
tabIndex={0}
className='tw:z-500 tw:btn tw:btn-circle tw:btn-lg tw:shadow tw:bg-base-100'
>
<SVG src={PlusSVG} className='tw:h-5 tw:w-5' />
</button>
</label>
<ul
tabIndex={0}
className='tw:dropdown-content tw:pr-1 tw:list-none tw:space-y-3 tw:pb-3'
@ -125,14 +62,12 @@ export default function AddButton({
tabIndex={0}
className='tw:z-500 tw:border-0 tw:p-0 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 tw:focus:outline-hidden tw:flex tw:items-center tw:justify-center'
style={{ backgroundColor: layer.menuColor || '#777' }}
onMouseDown={(event) => {
stopPropagation(event)
onClick={() => {
triggerAction(layer)
}}
onClick={(event) => {
handleLayerSelect(event, layer)
}}
onTouchStart={(event) => {
stopPropagation(event)
onTouchEnd={(e) => {
triggerAction(layer)
e.preventDefault()
}}
>
<img