115 lines
3.0 KiB
TypeScript
115 lines
3.0 KiB
TypeScript
|
|
import { Button, Input, Space, Typography } from "antd";
|
|
import { useState } from "react";
|
|
|
|
const { Text } = Typography;
|
|
const { TextArea } = Input;
|
|
|
|
interface MapFallbackProps {
|
|
onLocationSelect?: (lat: number, lng: number, address: string) => void;
|
|
height?: string;
|
|
initialAddress?: string;
|
|
}
|
|
|
|
export function MapFallback({ onLocationSelect, height = "100%", initialAddress = "" }: MapFallbackProps) {
|
|
const [address, setAddress] = useState(initialAddress);
|
|
|
|
// Prevent events from bubbling up to parent components
|
|
const handleTouchStart = (e: React.TouchEvent) => {
|
|
e.stopPropagation();
|
|
};
|
|
|
|
const handleTouchMove = (e: React.TouchEvent) => {
|
|
e.stopPropagation();
|
|
};
|
|
|
|
const handleTouchEnd = (e: React.TouchEvent) => {
|
|
e.stopPropagation();
|
|
};
|
|
|
|
const handleMouseDown = (e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
};
|
|
|
|
const handleMouseMove = (e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
};
|
|
|
|
const handleMouseUp = (e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
};
|
|
|
|
const handleWheel = (e: React.WheelEvent) => {
|
|
e.stopPropagation();
|
|
};
|
|
|
|
const handleSubmit = () => {
|
|
if (address.trim()) {
|
|
// For fallback, we'll use dummy coordinates
|
|
// In a real implementation, you might want to use a geocoding service
|
|
const dummyLat = 24.7136 + (Math.random() - 0.5) * 0.01;
|
|
const dummyLng = 46.6753 + (Math.random() - 0.5) * 0.01;
|
|
onLocationSelect?.(dummyLat, dummyLng, address);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
height: height,
|
|
padding: "20px",
|
|
backgroundColor: "#f8f9fa",
|
|
borderRadius: "8px",
|
|
border: "2px dashed #dee2e6",
|
|
}}
|
|
onTouchStart={handleTouchStart}
|
|
onTouchMove={handleTouchMove}
|
|
onTouchEnd={handleTouchEnd}
|
|
onMouseDown={handleMouseDown}
|
|
onMouseMove={handleMouseMove}
|
|
onMouseUp={handleMouseUp}
|
|
onWheel={handleWheel}
|
|
>
|
|
<div
|
|
style={{
|
|
textAlign: "center",
|
|
marginBottom: "20px",
|
|
}}
|
|
>
|
|
<div style={{ fontSize: "48px", marginBottom: "12px" }}>📍</div>
|
|
<Text strong style={{ fontSize: "16px" }}>
|
|
Map Not Available
|
|
</Text>
|
|
<br />
|
|
<Text type="secondary" style={{ fontSize: "12px" }}>
|
|
Please enter your address manually
|
|
</Text>
|
|
</div>
|
|
|
|
<Space direction="vertical" size="middle" style={{ flex: 1 }}>
|
|
<div>
|
|
<Text strong>Enter Address:</Text>
|
|
<TextArea
|
|
rows={4}
|
|
placeholder="Enter your full address including street, city, and postal code..."
|
|
value={address}
|
|
onChange={(e) => setAddress(e.target.value)}
|
|
style={{ marginTop: "8px" }}
|
|
/>
|
|
</div>
|
|
|
|
<Button
|
|
type="primary"
|
|
onClick={handleSubmit}
|
|
disabled={!address.trim()}
|
|
style={{ alignSelf: "flex-end" }}
|
|
>
|
|
Use This Address
|
|
</Button>
|
|
</Space>
|
|
</div>
|
|
);
|
|
}
|