@arcgis/core/widgets/support/ItemList.js

ArcGIS Maps SDK for JavaScript: A complete 2D and 3D mapping and data visualization API

/*
All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.33/esri/copyright.txt for details.
*/
import{Heading as e}from"./Heading.js";import{classes as t}from"./widgetUtils.js";import{tsx as n}from"./jsxFactory.js";const l="esri-item-list",i=`${l}__list-item`,r={filterContainerSticky:`${l}__filter-container--sticky`,group:`${l}__group`,groupHeader:`${l}__group__header`,item:i,itemDisabled:`${i}--disabled`,itemIcon:`${i}-icon`,itemContentEnd:`${i}-content-end`,noMatchesMessage:`${l}__no-matches-message`,scroller:`${l}__scroller`,scrollerEnabled:`${l}__scroller--enabled`},o=4;function s(e){const{disabled:t,filterText:l="",id:i,messages:r,onFilterChange:o,...s}=e;return n("div",{key:i},e.filterEnabled??1?c({disabled:t,filterText:l,id:i,messages:r,onFilterChange:o}):null,d({...s,disabled:t,enableListScroll:e.enableListScroll??!0,filterText:l,messages:r}))}function a(e){return!!e.items}function d(e){const{headingLevel:l,items:i,...o}=e;return 0===i.length?n("div",{class:r.noMatchesMessage,key:"no-matches"},e.messages.noMatches):n("div",{class:t({[r.scroller]:!0,[r.scrollerEnabled]:!!e.enableListScroll}),key:"item-container"},i.map((e=>a(e)?g({...o,group:e,headingLevel:l}):m({...o,grouped:!0,item:e}))))}function c(e){const{disabled:t,messages:l,filterText:i,enableListScroll:o}=e;return n("div",{class:o?void 0:r.filterContainerSticky,key:"filter"},n("calcite-input",{disabled:t,placeholder:l.filterPlaceholder,type:"search",value:i,onCalciteInputInput:t=>{const n=t.currentTarget;e.onFilterChange&&e.onFilterChange(n.value)}}))}function m(e){const{disabled:l,identify:i,item:o,onItemMouseEnter:s,onItemMouseLeave:a,onItemSelect:d,renderIcon:c,renderCustomItem:m,renderItemContent:g,renderItemContentEnd:p,renderItemLabel:f,renderItemDescription:v,renderItemActionEnd:_,renderItemTitle:h,selectedItem:I}=e,y=u(o,i),C=y===u(I,i),k=m?.(e);if(k)return k;const $=g?.(o),L=p?.(o),M=_?.(o),E=!(!o.disabled&&!l),S=c?.(o);return n("calcite-list-item",{afterUpdate:e=>{e.selected=C},class:t({[r.item]:!0,[r.itemDisabled]:E}),"data-item":o,description:$?void 0:v?.(o)??void 0,disabled:E,key:y,label:$?void 0:f?.(o)??o.label??void 0,onblur:e=>a?.(b(e)),onfocus:e=>s?.(b(e)),onmouseenter:e=>s?.(b(e)),onmouseleave:e=>a?.(b(e)),selected:C,title:h?.(o)??void 0,onCalciteListItemSelect:e=>{e.preventDefault(),d?.(b(e))}},S?n("div",{class:r.itemIcon,key:"content-start",slot:"content-start"},S):void 0,$?n("div",{key:"content",slot:"content"},$):null,L?n("div",{class:r.itemContentEnd,key:"content-end",slot:"content-end"},L):null,M??null)}function u(e,t){return e?`${t?.(e)||e.id}__${e.label}`:""}function b(e){return e.currentTarget["data-item"]}function g(t){const{disabled:l,group:i,headingLevel:s=o,selectionMode:a="none",renderCustomGroupContent:d,...c}=t,u=d?.(t);return n("div",{class:r.group,key:i.label??void 0},n(e,{class:r.groupHeader,level:s},i.label),u||n("calcite-list",{disabled:l,label:i.label??"",selectionAppearance:"border",selectionMode:a},i.items.map((e=>m({...c,disabled:l,item:e,grouped:!0})))))}export{s as ItemList,g as renderGroup,m as renderItem};