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

Interactive floor plan library for expos and events

import{Fragment as F,jsx as i,jsxs as d}from"react/jsx-runtime";import"./MultiSelectGroups.scss";import v from"classnames";import{observer as I}from"mobx-react-lite";import M,{useCallback as h,useMemo as P,useState as q}from"react";import{t as N}from"../utils/i18n";import B from"./ShowMoreButton";const R=M.memo(({item:r,isSelected:s,variant:m,showCount:_,count:p,onClick:c,customRenderer:a})=>a?i(F,{children:a(r,s)}):d("button",{type:"button",className:v("multi-select-groups__item",{"is-selected":s,"is-disabled":r.disabled,[`multi-select-groups__item--${m}`]:m}),onClick:()=>!r.disabled&&c(r.id),disabled:r.disabled,"aria-pressed":s,children:[i("div",{className:"multi-select-groups__item-name",children:r.name}),_&&p>0&&i("span",{className:"multi-select-groups__item-count",children:p})]},r.id)),T=({groups:r=[],selectedIds:s=[],showItemCounts:m=!0,showGroupActions:_=!0,variant:p="default",maxItemsVisible:c=20,itemCountProvider:a,customItemRenderer:S,onChange:u})=>{const[G,x]=q(new Set),y=h(e=>{const t=s.includes(e)?s.filter(l=>l!==e):[...s,e];u(t)},[s,u]),A=h(e=>{const l=e.items.filter(n=>n.id&&!n.disabled).map(n=>n.id).filter(n=>!s.includes(n));l.length!==0&&u([...s,...l])},[s,u]),C=h(e=>{const t=new Set(e.items.map(n=>n.id)),l=s.filter(n=>!t.has(n));u(l)},[s,u]),k=h(e=>{x(t=>{const l=new Set(t);return l.has(e)?l.delete(e):l.add(e),l})},[]),j=e=>e.count!==void 0?e.count:e.countProvider?e.countProvider():a?a(e):0,f=P(()=>new Set(s),[s]);return!Array.isArray(r)||!r.length?null:i("div",{className:"multi-select-groups",children:i("div",{className:"multi-select-groups__list",children:r.map(e=>{if(!e?.groupName||!Array.isArray(e.items))return null;const t=e.items.filter(o=>o.id),l=t.filter(o=>f.has(o.id)),n=l.length===t.length&&t.length>0,E=l.length>0&&!n,g=G.has(e.groupName),b=g||t.length<=c?t:t.slice(0,c),w=t.length-b.length>0?t.slice(c).filter(o=>f.has(o.id)).length:0;return d("div",{className:v("multi-select-groups__group",{"multi-select-groups__group--full-width":e.fullWidth},e.customGroupClass),children:[d("div",{className:"multi-select-groups__group-header",children:[i("div",{className:"multi-select-groups__group-title",children:e.groupName}),_&&e.showGroupActions!==!1&&d("div",{className:"multi-select-groups__group-actions",children:[!n&&i("button",{type:"button",className:"multi-select-groups__action-btn",onClick:()=>A(e),children:N("Select all")}),(E||n)&&i("button",{type:"button",className:"multi-select-groups__action-btn",onClick:()=>C(e),children:N("Clear all")})]})]}),i("div",{className:"multi-select-groups__group-items",children:b.map(o=>i(R,{item:o,isSelected:f.has(o.id),variant:p,showCount:m,count:j(o),onClick:y,customRenderer:S},o.id))}),t.length>c&&i(B,{className:"multi-select-groups__show-more",expanded:g,onClick:()=>k(e.groupName),suffix:!g&&w>0&&d("span",{className:"multi-select-groups__show-more-badge",children:[w," ",N("selected")]})})]},e.groupName)})})})};export default I(T);