PhongPham
c65cc97a33
✨ MAJOR FEATURES: • Auto-zoom intelligence với smart bounds fitting • Enhanced 3D GPS markers với pulsing effects • Professional route display với 6-layer rendering • Status-based parking icons với availability indicators • Production-ready build optimizations 🗺️ AUTO-ZOOM FEATURES: • Smart bounds fitting cho GPS + selected parking • Adaptive padding (50px) cho visual balance • Max zoom control (level 16) để tránh quá gần • Dynamic centering khi không có selection 🎨 ENHANCED VISUALS: • 3D GPS marker với multi-layer pulse effects • Advanced parking icons với status colors • Selection highlighting với animation • Dimming system cho non-selected items 🛣️ ROUTE SYSTEM: • OpenRouteService API integration • Multi-layer route rendering (glow, shadow, main, animated) • Real-time distance & duration calculation • Visual route info trong popup 📱 PRODUCTION READY: • SSR safe với dynamic imports • Build errors resolved • Global deployment via Vercel • Optimized performance 🌍 DEPLOYMENT: • Vercel: https://whatever-ctk2auuxr-phong12hexdockworks-projects.vercel.app • Bundle size: 22.8 kB optimized • Global CDN distribution • HTTPS enabled 💾 VERSION CONTROL: • MapView-v2.0.tsx backup created • MAPVIEW_VERSIONS.md documentation • Full version history tracking
86 lines
3.0 KiB
TypeScript
86 lines
3.0 KiB
TypeScript
import { CSSProperties } from 'react';
|
|
|
|
type ToastType = 'success' | 'error' | 'loading' | 'blank' | 'custom';
|
|
type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
|
|
type Renderable = React.ReactElement | string | null;
|
|
interface IconTheme {
|
|
primary: string;
|
|
secondary: string;
|
|
}
|
|
type ValueFunction<TValue, TArg> = (arg: TArg) => TValue;
|
|
type ValueOrFunction<TValue, TArg> = TValue | ValueFunction<TValue, TArg>;
|
|
declare const resolveValue: <TValue, TArg>(valOrFunction: ValueOrFunction<TValue, TArg>, arg: TArg) => TValue;
|
|
interface Toast {
|
|
type: ToastType;
|
|
id: string;
|
|
message: ValueOrFunction<Renderable, Toast>;
|
|
icon?: Renderable;
|
|
duration?: number;
|
|
pauseDuration: number;
|
|
position?: ToastPosition;
|
|
removeDelay?: number;
|
|
ariaProps: {
|
|
role: 'status' | 'alert';
|
|
'aria-live': 'assertive' | 'off' | 'polite';
|
|
};
|
|
style?: CSSProperties;
|
|
className?: string;
|
|
iconTheme?: IconTheme;
|
|
createdAt: number;
|
|
visible: boolean;
|
|
dismissed: boolean;
|
|
height?: number;
|
|
}
|
|
type ToastOptions = Partial<Pick<Toast, 'id' | 'icon' | 'duration' | 'ariaProps' | 'className' | 'style' | 'position' | 'iconTheme' | 'removeDelay'>>;
|
|
type DefaultToastOptions = ToastOptions & {
|
|
[key in ToastType]?: ToastOptions;
|
|
};
|
|
interface ToasterProps {
|
|
position?: ToastPosition;
|
|
toastOptions?: DefaultToastOptions;
|
|
reverseOrder?: boolean;
|
|
gutter?: number;
|
|
containerStyle?: React.CSSProperties;
|
|
containerClassName?: string;
|
|
children?: (toast: Toast) => React.ReactElement;
|
|
}
|
|
|
|
type Message = ValueOrFunction<Renderable, Toast>;
|
|
type ToastHandler = (message: Message, options?: ToastOptions) => string;
|
|
declare const toast: {
|
|
(message: Message, opts?: ToastOptions): string;
|
|
error: ToastHandler;
|
|
success: ToastHandler;
|
|
loading: ToastHandler;
|
|
custom: ToastHandler;
|
|
dismiss(toastId?: string): void;
|
|
remove(toastId?: string): void;
|
|
promise<T>(promise: Promise<T> | (() => Promise<T>), msgs: {
|
|
loading: Renderable;
|
|
success?: ValueOrFunction<Renderable, T>;
|
|
error?: ValueOrFunction<Renderable, any>;
|
|
}, opts?: DefaultToastOptions): Promise<T>;
|
|
};
|
|
|
|
declare const useToaster: (toastOptions?: DefaultToastOptions) => {
|
|
toasts: Toast[];
|
|
handlers: {
|
|
updateHeight: (toastId: string, height: number) => void;
|
|
startPause: () => void;
|
|
endPause: () => void;
|
|
calculateOffset: (toast: Toast, opts?: {
|
|
reverseOrder?: boolean;
|
|
gutter?: number;
|
|
defaultPosition?: ToastPosition;
|
|
}) => number;
|
|
};
|
|
};
|
|
|
|
interface State {
|
|
toasts: Toast[];
|
|
pausedAt: number | undefined;
|
|
}
|
|
declare const useStore: (toastOptions?: DefaultToastOptions) => State;
|
|
|
|
export { DefaultToastOptions, IconTheme, Renderable, Toast, ToastOptions, ToastPosition, ToastType, ToasterProps, ValueFunction, ValueOrFunction, toast as default, resolveValue, toast, useToaster, useStore as useToasterStore };
|