mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2025-12-13 07:46:10 +00:00
Ulf Gebhardt
9668f8d417
* support for svg files Support to load svg files and include them as bas64 encoded images in the bundle. * navbar svgs * replace NavBar SVGs with heroicons * layercontrol icons * lint fix * quest - questionmark * plusbutton - plus * linkeditem - elipse-vertical - link-slash * contactinfo - envelope & phone * avatar - arrow-up-tray * ActionButton - link & plus * StartEndView - calendar x2 * HeaderView - ellipse-vertical & pencil & trash * SidebarControl - bars-3 * SearchControl - flag & magnifying-glass * GratitudeControl - heart * FilterControl - funnel * AddButton - plus * reduce test coverage requirements * remove wrongfully commit dummy svg * updated obsolete package.lock * migrate more svgs from code to file, use hero icons where it seems applicable * moved share icons to subfolder * fixed layout --------- Co-authored-by: Anton Tranelis <mail@antontranelis.de>
74 lines
2.2 KiB
TypeScript
74 lines
2.2 KiB
TypeScript
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
|
|
/* eslint-disable @typescript-eslint/prefer-ts-expect-error */
|
|
/* eslint-disable @typescript-eslint/ban-ts-comment */
|
|
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
|
|
/* eslint-disable @typescript-eslint/no-unsafe-call */
|
|
import { control } from 'leaflet'
|
|
import { useEffect, useRef, useState } from 'react'
|
|
import { useMap, useMapEvents } from 'react-leaflet'
|
|
|
|
import TargetSVG from '#assets/target.svg'
|
|
|
|
// eslint-disable-next-line import/no-unassigned-import
|
|
import 'leaflet.locatecontrol'
|
|
import 'leaflet.locatecontrol/dist/L.Control.Locate.css'
|
|
|
|
// Converts leaflet.locatecontrol to a React Component
|
|
export const LocateControl = () => {
|
|
const map = useMap()
|
|
|
|
// prevent react18 from calling useEffect twice
|
|
const init = useRef(false)
|
|
|
|
const [lc, setLc] = useState<any>(null)
|
|
const [active, setActive] = useState<boolean>(false)
|
|
const [loading, setLoading] = useState<boolean>(false)
|
|
|
|
useEffect(() => {
|
|
if (!init.current) {
|
|
// @ts-ignore
|
|
setLc(control.locate().addTo(map))
|
|
init.current = true
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [])
|
|
|
|
useMapEvents({
|
|
locationfound: () => {
|
|
setLoading(false)
|
|
setActive(true)
|
|
},
|
|
})
|
|
|
|
return (
|
|
<>
|
|
<div className='tw-card tw-h-12 tw-w-12 tw-bg-base-100 tw-shadow-xl tw-items-center tw-justify-center hover:tw-bg-slate-300 hover:tw-cursor-pointer tw-transition-all tw-duration-300 tw-ml-2'>
|
|
<div
|
|
className='tw-card-body tw-card tw-p-2 tw-h-10 tw-w-10 '
|
|
onClick={() => {
|
|
if (active) {
|
|
lc.stop()
|
|
setActive(false)
|
|
} else {
|
|
lc.start()
|
|
setLoading(true)
|
|
}
|
|
}}
|
|
>
|
|
{loading ? (
|
|
<span className='tw-loading tw-loading-spinner tw-loading-md tw-mt-1'></span>
|
|
) : (
|
|
<img
|
|
src={TargetSVG}
|
|
alt='x'
|
|
className='tw-mt-1 tw-p-[1px]'
|
|
style={{ fill: `${active ? '#fc8702' : 'currentColor'}` }}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|