@expofp/floorplan
Version:
Interactive floor plan library for expos and events
2 lines (1 loc) • 967 B
JavaScript
import{jsx as o}from"react/jsx-runtime";import"./LargeMessage.scss";import{autorun as r,reaction as a}from"mobx";import{useLocalStore as l,useObserver as n}from"mobx-react-lite";import{uiState as i}from"../store";import m from"../tools/logger";import{useInit as u}from"../utils/mobx";const g=1e3;export default function f(){const e=l(()=>({shouldShow:!1,visible:!1,transitioning:!1}));return u(()=>{let t;a(()=>i.largeMessageLastSet,()=>{i.largeMessageLastSet&&(window.clearTimeout(t),m.log("Showing large message"),e.shouldShow=!0,t=window.setTimeout(()=>{e.shouldShow=!1},g))},{fireImmediately:!0});let s;r(()=>{window.clearTimeout(s),e.shouldShow?(e.transitioning=!0,s=window.setTimeout(()=>{e.visible=!0},1)):(e.visible=!1,s=window.setTimeout(()=>{e.transitioning=!1},1e3))})}),n(()=>i.largeMessage&&e.transitioning?o("div",{className:"large-message"+(e.visible?" -visible":""),children:o("div",{className:"large-message__text",children:i.largeMessage})}):null)}