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