9a9789e736
Feat/SW-1549 map improvements * fix: imported new icon * refactor: rename component and set map handling to 'greedy' * fix: show cards for 3s after hover * refactor: update styles and added HotelPin component * fix: change from close to back icon * refactor: update to only use 1 state value for active pin and card * fix: add click handler when dialog is opened * fix: performance fixes for the dialog carousel * fix: added border * fix: clear timeout on mouseenter * fix: changed to absolute import * fix: moved hover state into the store * fix: renamed store actions Approved-by: Michael Zetterberg
44 lines
1.0 KiB
TypeScript
44 lines
1.0 KiB
TypeScript
import { create } from "zustand"
|
|
|
|
interface HotelsMapState {
|
|
activeHotel: string | null
|
|
hoveredHotel: string | null
|
|
hoverTimeout: number | null
|
|
activate: (hotel: string | null) => void
|
|
deactivate: () => void
|
|
engage: (hotel: string | null) => void
|
|
disengage: () => void
|
|
disengageAfterDelay: () => void
|
|
}
|
|
|
|
export const useHotelsMapStore = create<HotelsMapState>((set, get) => ({
|
|
activeHotel: null,
|
|
hoveredHotel: null,
|
|
hoverTimeout: null,
|
|
activate: (hotel) => set({ activeHotel: hotel }),
|
|
deactivate: () => set({ activeHotel: null }),
|
|
engage: (hotel) => {
|
|
const state = get()
|
|
|
|
if (state.hoverTimeout) {
|
|
window.clearTimeout(state.hoverTimeout)
|
|
}
|
|
|
|
if (hotel && state.activeHotel) {
|
|
set({ activeHotel: null })
|
|
}
|
|
|
|
set({ hoveredHotel: hotel })
|
|
},
|
|
disengage: () => {
|
|
set({ hoveredHotel: null })
|
|
},
|
|
disengageAfterDelay: () => {
|
|
const timeoutId = window.setTimeout(() => {
|
|
set({ hoveredHotel: null, activeHotel: null, hoverTimeout: null })
|
|
}, 3000)
|
|
|
|
set({ hoverTimeout: timeoutId })
|
|
},
|
|
}))
|