@doegis/core/widgets/TableList.js

DOE GIS API

import{_ as e}from"../chunks/tslib.es6.js";import t from"../core/Collection.js";import{eventKey as i}from"../core/events.js";import s from"../core/Handles.js";import{watch as o,on as n,initial as r}from"../core/reactiveUtils.js";import{property as a}from"../core/accessorSupport/decorators/property.js";import{cast as l}from"../core/accessorSupport/decorators/cast.js";import"../core/arrayUtils.js";import{subclass as c}from"../core/accessorSupport/decorators/subclass.js";import d from"./Widget.js";import{accessibleHandler as m}from"./support/decorators/accessibleHandler.js";import{messageBundle as h}from"./support/decorators/messageBundle.js";import{vmEvent as u}from"./support/decorators/vmEvent.js";import{tsx as g}from"./support/jsxFactory.js";import"./support/widgetUtils.js";import p from"./TableList/ListItem.js";import _ from"./TableList/TableListViewModel.js";import{findSelectedItem as b}from"./TableList/support/tableListUtils.js";import y from"sortablejs";function I(e,t,i){e.splice(i,0,e.splice(t,1)[0])}const f=t.ofType(p),v="root-tables",A="data-layer-uid",S="layerUid",w="esri-table-list",T={base:w,esriWidget:"esri-widget",esriWidgetPanel:"esri-widget--panel",noItems:`${w}__no-items`,list:`${w}__list`,listRoot:`${w}__list--root`,item:`${w}__item`,itemChosen:`${w}__item--chosen`,itemMessage:`${w}__item--has-message`,itemSelectable:`${w}__item--selectable`,itemContainer:`${w}__item-container`,actionsMenu:`${w}__item-actions-menu`,actionsMenuItem:`${w}__item-actions-menu-item`,actionsMenuItemActive:`${w}__item-actions-menu-item--active`,actions:`${w}__item-actions`,actionsList:`${w}__item-actions-list`,action:`${w}__item-action`,actionIcon:`${w}__item-action-icon`,actionImage:`${w}__item-action-image`,actionTitle:`${w}__item-action-title`,actionToggle:`${w}__action-toggle`,actionToggleOn:`${w}__action-toggle--on`,message:`${w}__item-message`,title:`${w}__item-title`,publishing:`${w}__publishing`,disabled:"esri-disabled",disabledElement:"esri-disabled-element",hidden:"esri-hidden",rotating:"esri-rotating",iconEllipses:"esri-icon-handle-horizontal",iconNoticeTriangle:"esri-icon-notice-triangle",iconLoading:"esri-icon-loading-indicator",iconDefaultAction:"esri-icon-default-action",widgetIcon:"esri-icon-table"},C={actions:"actions",actionSection:"action-section",items:"items"};function $(e){const{actionsOpen:t}=e;t&&(e.actionsOpen=!1)}const M={statusIndicators:!0,errors:!1};let E=class extends d{constructor(e,t){super(e,t),this._handles=new s,this._sortable=null,this._sortableNode=null,this._focusSortUid=null,this.visibleItems=null,this.iconClass=T.widgetIcon,this.messages=null,this.messagesCommon=null,this.multipleSelectionEnabled=!1,this.selectionEnabled=!1,this.selectedItems=new f,this.viewModel=new _,this.visibleElements={...M}}initialize(){this._setVisibleItems(this.tableItems),this.addHandles([o((()=>this.visibleElements),(()=>this._itemsChanged())),n((()=>this.viewModel.tableItems),"change",(()=>this._itemsChanged())),o((()=>this.selectionEnabled),(()=>this._toggleSorting()),r)])}destroy(){this._destroySortable(),this._handles.destroy(),this._handles=null}get label(){return this.messages?.widgetLabel??""}set label(e){this._overrideIfSome("label",e)}get listItemCreatedFunction(){return this.viewModel.listItemCreatedFunction}set listItemCreatedFunction(e){this.viewModel.listItemCreatedFunction=e}get map(){return this.viewModel.map}set map(e){this.viewModel.map=e}get tableItems(){return this.viewModel.tableItems}castVisibleElements(e){return{...M,...e}}triggerAction(e,t){return this.viewModel.triggerAction(e,t)}render(){const{visibleItems:e}=this,t=this.viewModel?.state,i={[T.hidden]:"loading"===t,[T.disabled]:"disabled"===t};return g("div",{class:this.classes(T.base,T.esriWidget,T.esriWidgetPanel,i)},e?.length?this.renderList():this.renderNoItems())}renderNoItems(){return g("div",{class:T.noItems},this.messages.noItemsToDisplay)}renderList(){const{visibleItems:e,messages:t,selectionEnabled:i}=this;return g("ul",{"aria-label":t.widgetLabel,role:i?"listbox":void 0,afterCreate:this._sortNodeCreated,afterRemoved:this._destroySortable,"data-node-ref":"_sortableNode",bind:this,class:this.classes(T.list,T.listRoot)},e.map((e=>this.renderItem(e))).toArray())}renderItem(e){const{id:t,selectionEnabled:i,selectedItems:s}=this,o=`${`${t}_${e.uid}`}__title`,n=this._hasMessage(e),r={[T.itemMessage]:!!n,[T.itemSelectable]:i};if(i){const t={[A]:e.layer?.uid};return g("li",{key:`item-with-selection-${e.uid}`,bind:this,afterCreate:this._focusListItem,afterUpdate:this._focusListItem,class:this.classes(T.item,r),"aria-labelledby":o,onclick:this._toggleSelection,onkeydown:this._selectionKeydown,"data-item":e,tabIndex:0,"aria-selected":b(e,s)?"true":"false",role:"option",...t},this.renderItemContent(e,o))}return g("li",{key:`item-no-selection-${e.uid}`,bind:this,afterCreate:this._focusListItem,afterUpdate:this._focusListItem,class:this.classes(T.item,r),"aria-labelledby":o},this.renderItemContent(e,o))}renderActionsMenuIcon(e,t){const{messagesCommon:i}=this,s={[T.actionsMenuItemActive]:e.actionsOpen};return g("div",{key:"actions-menu-toggle","data-item":e,bind:this,onclick:this._toggleActionsOpen,onkeydown:this._toggleActionsOpen,class:this.classes(T.actionsMenuItem,s),tabindex:"0",role:"button","aria-controls":t,"aria-label":i.options,title:i.options},g("span",{"aria-hidden":"true",class:T.iconEllipses}))}renderActionsMenu(e,t,i,s){const o=1===i&&this._getSingleActionButton(t),n=o?this.renderAction({item:e,action:o,singleAction:!0}):null,r=!o&&i?this.renderActionsMenuIcon(e,s):null;return r||o?g("div",{key:"actions-menu",class:T.actionsMenu},n,r):null}renderItemMessage(e){return e.error?g("div",{key:"esri-table-list__error",class:T.message,role:"alert"},g("span",{"aria-hidden":"true",class:T.iconNoticeTriangle}),this.messages.tableError):null}renderItemStatus(e){const{visibleElements:t}=this;if(!t.statusIndicators)return null;const{publishing:i}=e;return g("span",{class:this.classes({[T.publishing]:i}),key:"layer-item-status"})}renderItemContent(e,t){const{id:i}=this,s=`${`${i}_${e.uid}`}_actions`,o=this._filterActions(e.actionsSections),n=this._countActions(o);return[g("div",{key:"list-item-container",class:T.itemContainer},this.renderTitle(e,t),this.renderItemStatus(e),this.renderActionsMenu(e,o,n,s)),this.renderItemMessage(e),n?this.renderActionsSections(e,o,s):null]}renderTitle(e,t){const{messages:i}=this,s=e.title||i.untitledTable;return g("span",{key:"layer-title-container",id:t,class:T.title},s)}renderActionsSections(e,t,i){const s=t.toArray().map(((t,i)=>g("ul",{key:`${e}-action-section-${i}`,class:T.actionsList},this.renderActionSection(e,t))));return g("div",{role:"group","aria-expanded":e.actionsOpen?"true":"false",key:"actions-section",id:i,class:T.actions,hidden:!e.actionsOpen||null},s)}renderActionSection(e,t){return(t&&t.toArray()).map((t=>this.renderAction({item:e,action:t})))}renderActionIcon(e){const{active:t,className:i}=e,s=this._getIconImageStyles(e),o="button"!==e.type||e.image||i?i:T.iconDefaultAction,n={[T.actionImage]:!t&&!!s["background-image"],[T.iconLoading]:t,[T.rotating]:t};return o&&!t&&(n[o]=!0),g("span",{key:"action-icon","aria-hidden":"true",class:this.classes(T.actionIcon,n),styles:s})}renderActionTitle(e,t){return t?null:g("span",{key:"action-title",class:T.actionTitle},e)}renderAction(e){const{item:t,action:i,singleAction:s}=e,{active:o,disabled:n,title:r}=i,a={[T.actionsMenuItem]:s&&"button"===i.type,[T.action]:o||!s&&"toggle"!==i.type,[T.actionToggle]:!o&&"toggle"===i.type,[T.actionToggleOn]:!o&&"toggle"===i.type&&i.value,[T.disabledElement]:n},l=[this.renderActionIcon(i),this.renderActionTitle(r,s)];return s?g("div",{bind:this,"data-item":t,"data-action":i,role:"button",key:`single-action-${i.uid}`,onclick:this._triggerAction,onkeydown:this._triggerAction,classes:a,tabindex:"0",title:r,"aria-label":r},l):g("li",{bind:this,"data-item":t,"data-action":i,key:`action-${i.uid}`,onclick:this._triggerAction,onkeydown:this._triggerAction,classes:a,tabindex:"0",role:"button",title:r,"aria-label":r},l)}_hasMessage(e){return!!e.error}_filterActions(e){return e.map((e=>e.filter((e=>e.visible))))}_setVisibleItems(e){this.visibleItems=e?.filter((e=>!e.hidden&&(this.visibleElements.errors||!e.error)))}_destroySortable(){const{_sortable:e}=this;e&&e.destroy(),this._sortable=null}_toggleSorting(){const{_sortable:e,_sortableNode:t,selectionEnabled:i}=this;if(t)if(e)e.option("disabled",!i);else{const e=y.create(t,{dataIdAttr:A,group:v,fallbackTolerance:4,disabled:!i,onSort:()=>this._sortTablesToItems(e.toArray()),chosenClass:T.itemChosen});this._sortable=e}}_sortNodeCreated(e){this._sortableNode=e,this._toggleSorting()}_sortTablesToItems(e){const t=this.map?.tables;t&&t.sort(((t,i)=>{const s=e.indexOf(t.uid),o=e.indexOf(i.uid);return s>o?-1:s<o?1:0}))}_getSingleActionButton(e){return e.reduce((e=>e)).filter((e=>e&&"button"===e.type)).getItemAt(0)}_focusListItem(e){const{_focusSortUid:t}=this;if(!e||!t)return;e["data-item"].layer?.uid===t&&(e.focus(),this._focusSortUid=null)}_watchActionSectionChanges(e,t){const i=C.actionSection+t,s=()=>this.scheduleRender();this._handles.add(e.on("change",s),i),e.forEach((e=>this._renderOnActionChanges(e,t)))}_renderOnActionChanges(e,t){const i=C.actions+t,s=()=>this.scheduleRender();"toggle"!==e.type?"slider"!==e.type?this._handles.add([o((()=>[e.className,e.image,e.id,e.title,e.visible]),s,r)],i):this._handles.add([o((()=>[e.className,e.id,e.title,e.visible,e.value,e.displayValueEnabled,e.max,e.min,e.step]),s,r)],i):this._handles.add([o((()=>[e.className,e.image,e.id,e.title,e.visible,e.value]),s,r)],i)}_renderOnItemChanges(e){const t=e.uid,i=C.items+t,s=()=>this.scheduleRender();this._handles.add([o((()=>[e.actionsOpen,e.title,e.error,e.publishing]),s,r),o((()=>[e.hidden,e.error]),(()=>this._setVisibleItems(this.tableItems))),e.actionsSections.on("change",s)],i),e.actionsSections.forEach((e=>this._watchActionSectionChanges(e,t)))}_itemsChanged(){const{tableItems:e}=this.viewModel;this._setVisibleItems(e),this._handles.removeAll(),e.forEach((e=>this._renderOnItemChanges(e))),this.scheduleRender()}_countActions(e){return e.reduce(((e,t)=>e+t.length),0)}_getIconImageStyles(e){const t="esri.support.Action.ActionButton"===e.declaredClass||"esri.support.Action.ActionToggle"===e.declaredClass?e.image:null;return{"background-image":t?`url("${t}")`:null}}_selectionKeydown(e){const t=["ArrowDown","ArrowUp"],s=i(e);if(!t.includes(s))return void this._toggleSelection(e);e.stopPropagation();const o=e.currentTarget["data-item"],{_sortable:n,selectedItems:r}=this,a=b(o,r),l=n.toArray(),c=e.target,d=l.indexOf(c.dataset[S]);if(-1!==d){if("ArrowDown"===s){const e=d+1;if(e>=l.length)return;a?(I(l,d,e),n.sort(l),this._sortTablesToItems(n.toArray()),this._focusSortUid=o.layer?.uid):(this._focusSortUid=o.layer?.uid,this.scheduleRender())}if("ArrowUp"===s){const e=d-1;if(e<=-1)return;a?(I(l,d,e),n.sort(l),this._sortTablesToItems(n.toArray()),this._focusSortUid=o.layer?.uid):(this._focusSortUid=o.layer?.uid,this.scheduleRender())}}}_toggleActionsOpen(e){const t=e.currentTarget["data-item"],{actionsOpen:i}=t,s=!i;s&&this.tableItems.forEach((e=>$(e))),t.actionsOpen=s,e.stopPropagation()}_triggerAction(e){const t=e.currentTarget,i=t["data-action"],s=t["data-item"];"toggle"===i.type&&(i.value=!i.value),this.triggerAction(i,s),e.stopPropagation()}_toggleSelection(e){e.stopPropagation();const{multipleSelectionEnabled:t,selectedItems:i}=this,s=t&&(e.metaKey||e.ctrlKey),o=e.currentTarget["data-item"],n=b(o,i),{length:r}=i;if(!s)return r&&!(n&&1===r)?(i.removeAll(),void i.add(o)):void(n?i.remove(n):i.add(o));n?i.remove(n):i.add(o)}};e([a()],E.prototype,"visibleItems",void 0),e([a()],E.prototype,"iconClass",void 0),e([a()],E.prototype,"label",null),e([a()],E.prototype,"listItemCreatedFunction",null),e([a()],E.prototype,"map",null),e([a(),h("esri/widgets/TableList/t9n/TableList")],E.prototype,"messages",void 0),e([a(),h("esri/t9n/common")],E.prototype,"messagesCommon",void 0),e([a()],E.prototype,"multipleSelectionEnabled",void 0),e([a()],E.prototype,"selectionEnabled",void 0),e([a()],E.prototype,"selectedItems",void 0),e([a({readOnly:!0})],E.prototype,"tableItems",null),e([u("trigger-action"),a({type:_})],E.prototype,"viewModel",void 0),e([a()],E.prototype,"visibleElements",void 0),e([l("visibleElements")],E.prototype,"castVisibleElements",null),e([m()],E.prototype,"_toggleActionsOpen",null),e([m()],E.prototype,"_triggerAction",null),e([m()],E.prototype,"_toggleSelection",null),E=e([c("esri.widgets.TableList")],E);const k=E;export{k as default};