|
|
|
@ -1,5 +1,4 @@
|
|
|
|
|
import { Input } from "@mui/joy";
|
|
|
|
|
import { Button } from "@usememos/mui";
|
|
|
|
|
import { Button, Input } from "@usememos/mui";
|
|
|
|
|
import { LatLng } from "leaflet";
|
|
|
|
|
import { MapPinIcon, XIcon } from "lucide-react";
|
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
@ -111,19 +110,19 @@ const LocationSelector = (props: Props) => {
|
|
|
|
|
<div className="min-w-80 sm:w-128 flex flex-col justify-start items-start">
|
|
|
|
|
<LeafletMap key={JSON.stringify(state.initilized)} latlng={state.position} onChange={onPositionChanged} />
|
|
|
|
|
<div className="mt-2 w-full flex flex-row justify-between items-center gap-2">
|
|
|
|
|
<Input
|
|
|
|
|
placeholder="Choose a position first."
|
|
|
|
|
value={state.placeholder}
|
|
|
|
|
disabled={!state.position}
|
|
|
|
|
startDecorator={
|
|
|
|
|
state.position ? (
|
|
|
|
|
<span>
|
|
|
|
|
[{state.position.lat.toFixed(3)}, {state.position.lng.toFixed(3)}]
|
|
|
|
|
</span>
|
|
|
|
|
) : null
|
|
|
|
|
}
|
|
|
|
|
onChange={(e) => setState((state) => ({ ...state, placeholder: e.target.value }))}
|
|
|
|
|
/>
|
|
|
|
|
<div className="flex flex-row items-center justify-start gap-2">
|
|
|
|
|
{state.position && (
|
|
|
|
|
<span className="text-sm">
|
|
|
|
|
[{state.position.lat.toFixed(2)}, {state.position.lng.toFixed(2)}]
|
|
|
|
|
</span>
|
|
|
|
|
)}
|
|
|
|
|
<Input
|
|
|
|
|
placeholder="Choose a position first."
|
|
|
|
|
value={state.placeholder}
|
|
|
|
|
disabled={!state.position}
|
|
|
|
|
onChange={(e) => setState((state) => ({ ...state, placeholder: e.target.value }))}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<Button
|
|
|
|
|
className="shrink-0"
|
|
|
|
|
color="primary"
|
|
|
|
|