UNPKG

@expofp/floorplan

Version:

Interactive floor plan library for expos and events

2 lines (1 loc) • 2.29 kB
import{jsx as a,jsxs as p}from"react/jsx-runtime";import"./BaseFilterModal.scss";import{observer as v,useLocalStore as O}from"mobx-react-lite";import{useMemo as g,useState as u}from"react";import{filterGroups as M}from"../utils/filter-groups.js";import{t as n}from"../utils/i18n.js";import{ModalContainer as N}from"./index.js";import w from"./MultiSelectGroupsContainer.js";const E=10;export const BaseFilterModal=v(({store:e,rootStore:d,title:f,groups:i})=>{const r=O(()=>({get pendingSelectedIds(){return e.state.pendingItems.map(t=>t.id)},get totalItemsCount(){return e.state.pendingItems.length===0?e.getFilteredItems().length:d.exhibitorStore.exhibitors.filter(t=>t.categories.some(s=>e.state.pendingItems.some(l=>l.id===s.id))).length}})),[o,c]=u(""),h=g(()=>M(i,o),[i,o]),b=g(()=>i.reduce((t,s)=>t+s.items.length,0)>E,[i]),[m,I]=u({isOpen:e.state.isOpen,groups:i});(m.isOpen!==e.state.isOpen||m.groups!==i)&&(I({isOpen:e.state.isOpen,groups:i}),c(""));const S=t=>{const s=i.flatMap(l=>l.items).filter(l=>t.includes(l.id));e.setPendingItems(s)},C=()=>{e.applyFilter()},_=()=>{e.closeFilter()},y=()=>{e.clearPendingItems()},x=()=>e.state.isOpen;return p(N,{open:e.state.isOpen,title:f,onClose:_,footerLeft:[{label:n("Clear all"),onClick:y,variant:"gray",disabled:r.pendingSelectedIds.length===0}],footerRight:[{label:r.pendingSelectedIds.length>0?n("Show #{{count}}# Matching Exhibitors",{count:r.totalItemsCount}):n("Show All Exhibitors"),onClick:C,variant:"primary",withBadge:!0,disabled:!x()}],children:[b&&p("div",{className:"efp-filter-modal__search",children:[a("i",{className:"icon-search efp-filter-modal__search-icon","aria-hidden":"true"}),a("input",{type:"search",className:"efp-filter-modal__search-input",value:o,placeholder:n("Search..."),"aria-label":n("Search..."),onChange:t=>c(t.target.value)}),o&&a("button",{type:"button",className:"efp-filter-modal__search-clear","aria-label":n("Clear search"),onClick:()=>c(""),children:a("i",{className:"icon-close","aria-hidden":"true"})})]}),h.length>0?a(w,{groups:h,selectedIds:r.pendingSelectedIds,variant:"categories",onChange:S,itemCountProvider:t=>d.categoryStore.categoryById.get(Number(t.id))?.exhibitors?.length||0}):a("p",{className:"efp-filter-modal__empty",role:"status",children:n("Oops, nothing found")})]})});