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

Interactive floor plan library for expos and events

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