@expofp/floorplan/dist/esm/components/SearchBox.js

Interactive floor plan library for expos and events

import{jsx as o,jsxs as f}from"react/jsx-runtime";import"./SearchBox.scss";import p from"classnames";import{useObserver as T}from"mobx-react-lite";import{useEffect as g,useMemo as j,useRef as v,useState as w}from"react";import x,{searchStore as e,uiState as s}from"../store";import z from"../tools/debounce";import{GaEventActions as K,sendEventToGa as L}from"../tools/gtag";import{handleCustomCommand as P}from"../utils/customCommands";import{t as i}from"../utils/i18n";import{useAutorun as u}from"../utils/mobx";import{Badge as R}from"./";const G=1e3;function B(l){return l.getRootNode().activeElement===l}function U({className:l}){const _=v(null),r=v(null);function I(t){let n=0;switch(t.key){case"Down":case"ArrowDown":n=1;break;case"Up":case"ArrowUp":n=-1;break;case"Enter":{t.preventDefault(),x.openActiveListItem();const a=r.current;a&&P(a.value);return}case"Escape":t.preventDefault(),e.closeSearch();return}n&&(t.preventDefault(),x.changeActiveListIndex(n))}const[N,k]=w(""),[h,M]=w(!1);u(()=>{M(s.kiosk&&s.inIdle)}),g(()=>{if(!h)return;const t=[i("Find Companies..."),i("Find Categories..."),i("Find Sessions..."),i("Search...")];let n=0,a=0,c=!1,d;const C=()=>{const m=t[n];c?(k(m.substring(0,a-1)),a--):(k(m.substring(0,a+1)),a++);let b=c?50:100;!c&&a===m.length?(c=!0,b=2e3):c&&a===0&&(c=!1,n=(n+1)%t.length,b=500),d=setTimeout(C,b)};return d=setTimeout(C,0),()=>clearTimeout(d)},[h]),u(()=>{const t=r.current;t&&!e.isFocused&&B(t)&&t.blur()}),u(()=>{s.menu&&s.kiosk&&e.setFocused(!1)}),u(()=>{const t=r.current;t&&e.isFocused&&!e.skipInputFocus&&!B(t)&&t.focus()}),g(()=>{x.fuzzySearchEngineStore.loadEngine()},[]);const E=j(()=>z(()=>{e.searchText&&L(K.Search,e.searchText),window.__resett?.()},G),[]);function F(){e.setSearchText(r.current?.value||""),E()}function y(){e.setFocused(!0),window.__resett?.()}function A(){e.isFocused||(e.handleSearchAction(),setTimeout(()=>{r.current?.focus()},100))}function D(){e.handleBackAction()}function S(){e.closeSearch()}return T(()=>f("div",{className:p("search-box",l,e.searchBoxClass,{"efp-semi-transparent":s.setKioskModeEnabled}),"data-interface":s.activeInterfaceId,ref:_,children:[o("button",{className:p("search-box__button","search-box__button--back",{"is-mobile-details":e.isMobileDetailsMode,"search-box__button--home":e.backMode!=="back"&&s.viewerMode}),onClick:D,type:"button","aria-label":e.backMode==="back"?i("Go back"):i("Main menu"),children:o("i",{className:e.backMode==="back"?"icon-chevron-left":s.viewerMode?"icon-home-solid":"icon-menu"})}),o("div",{className:"search-box__input-wrapper",children:e.shouldShowSearchInput?o("input",{ref:r,type:"search",className:"search-box__input",placeholder:h?N:e.placeholder,"aria-label":"Search",value:e.searchText,onChange:F,onKeyDown:I,onFocus:y,autoComplete:"off",autoCorrect:"off",autoCapitalize:"off",spellCheck:!1,disabled:s.setKioskModeEnabled}):f("div",{className:"search-box__title",children:[e.searchBoxIcon&&o("i",{className:p("search-box__title-icon",e.searchBoxIcon)}),f("div",{className:"search-box__title-content",children:[o("strong",{className:"search-box__title-text",children:e.searchBoxTitle}),e.searchBoxSubtitle&&o("span",{className:"search-box__title-subtitle",children:e.searchBoxSubtitle})]}),e.searchBoxBadge?o(R,{variant:"lightgray",size:"md",rounded:!0,noMargins:!0,children:e.searchBoxBadge}):null]})}),!e.shouldShowSearchInput&&e.searchBoxActions.map(t=>o("button",{className:"search-box__button search-box__button--ui-action",onClick:t.handler,type:"button","aria-label":t.label,title:t.label,children:o("i",{className:t.icon})},t.id)),o("button",{className:"search-box__button search-box__button--action",onClick:e.shouldShowSearchInput?e.shouldShowCloseButton?S:A:S,type:"button","aria-label":e.ariaLabel,children:o("i",{className:e.actionButtonIcon})})]}))}export default U;