@arcgis/core/widgets/TableList.js

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

/* COPYRIGHT Esri - https://js.arcgis.com/5.0.8/LICENSE.txt */
import{__decorate as e}from"tslib";import t from"../core/Collection.js";import{deprecateWidget as i}from"../core/deprecate.js";import{IdentifiableMixin as o}from"../core/Identifiable.js";import s from"../core/Logger.js";import{on as l,initial as r,watch as n}from"../core/reactiveUtils.js";import{property as a,subclass as d}from"../core/accessorSupport/decorators.js";import c from"./Widget.js";import m from"./LayerList/LayerListItem.js";import{minDragEnabledItems as p,minFilterItems as h,getLayerType as u,removeDestroyedListItems as g,setFilterPredicate as f}from"./LayerList/support/layerListUtils.js";import{loadCalciteComponents as I}from"./support/componentsUtils.js";import{globalCss as b}from"./support/globalCss.js";import{calciteListFilterProps as _}from"./support/listUtils.js";import{tsx as v,messageBundle as w,vmEvent as y}from"./support/widget.js";import{setFocus as L}from"./support/widgetUtils.js";import{css as E}from"./TableList/css.js";import C from"./TableList/ListItem.js";import F from"./TableList/TableListViewModel.js";import M from"./TableList/TableListVisibleElements.js";import{getItem as P,sortTablesToIds as D}from"./TableList/support/tableListUtils.js";const T="nested",U=t.ofType(C);let j=class extends(o(c)){constructor(e,t){super(e,t),this._rootListEl=null,this._focusRootFlowItem=!1,this._focusPanelFlowItem=!1,this._lastDragDetail=null,this._selectedDragItemLayerUid=null,this._rootGroupUid=`table-${this.uid}`,this.collapsed=!1,this.dragEnabled=!1,this.filterPlaceholder="",this.filterPredicate=null,this.filterText="",this.headingLevel=2,this.listItemCanGiveFunction=null,this.listItemCanReceiveFunction=null,this.messages=null,this.messagesCommon=null,this.minDragEnabledItems=p,this.minFilterItems=h,this.selectedItems=new U,this.selectionMode="none",this.viewModel=new F,this.visibleElements=new M,this._canMove=({dragEl:e,fromEl:t,toEl:i},o)=>{const s="pull"===o?this.listItemCanGiveFunction:this.listItemCanReceiveFunction,l=P(e);if(!l?.sortable)return!1;const r=P(t),n=u(t),a=P(i),d=u(i),c=!!n&&!!d&&n===d,m={selected:l,from:r,to:a},p=t.group,h=i.group;return p&&h&&"function"==typeof s?s.call(null,m):c},this._onCalciteListOrderChange=e=>{const{_lastDragDetail:t}=this,{toEl:i,fromEl:o,dragEl:s,newIndex:l}=e;if(!o||!i||t?.newIndex===l&&t?.dragEl===s&&t?.toEl===i&&t?.fromEl===o)return;this._lastDragDetail=e,this._selectedDragItemLayerUid=s.value;const r=Array.from(o.children).filter(e=>e?.matches("calcite-list-item")).map(e=>e.value);D(this.map?.tables,r)},this._onSelectedDragItemLayerUidChange=e=>{this._selectedDragItemLayerUid=e},this._onTriggerAction=(e,t)=>{this.triggerAction(e,t)},this._onPanelOpen=()=>{this._focusPanelFlowItem=!0},this.announceDeprecation=()=>{i(s.getLogger(this),"Table List","arcgis-table-list",{version:"5.0"})}}initialize(){this.addHandles([l(()=>this.viewModel.tableItems,"change",()=>g(this.selectedItems),r),n(()=>[this.filterPredicate,this._rootListEl],()=>f(this._rootListEl,this.filterPredicate))])}loadDependencies(){return I({button:()=>import("@esri/calcite-components/dist/components/calcite-button"),flow:()=>import("@esri/calcite-components/dist/components/calcite-flow"),"flow-item":()=>import("@esri/calcite-components/dist/components/calcite-flow-item"),list:()=>import("@esri/calcite-components/dist/components/calcite-list"),notice:()=>import("@esri/calcite-components/dist/components/calcite-notice")})}get _dragEnabled(){return this.viewModel.totalItems>=this.minDragEnabledItems&&this.dragEnabled}get _filterEnabled(){return this.viewModel.totalItems>=this.minFilterItems&&this.visibleElements.filter}get _visibleItems(){return this.tableItems?.filter(e=>!e.hidden&&(this.visibleElements.errors||!e.error))}get _openedPanelItems(){return this._visibleItems.filter(({hidden:e,panel:t})=>!e&&t?.open&&!t.disabled&&t.flowEnabled)}get icon(){return"table"}set icon(e){this._overrideIfSome("icon",e)}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}get tables(){return this.viewModel.tables}set tables(e){this.viewModel.tables=e}triggerAction(e,t){return this.viewModel.triggerAction(e,t)}render(){const e=this.viewModel?.state,t={[b.hidden]:"loading"===e,[b.disabled]:"disabled"===e};return v("div",{class:this.classes(E.base,b.widget,b.panel,t)},this._renderItems())}_renderNoItemsMessage(){return v("div",{slot:"message"},this.messages.noItemsToDisplay)}_renderNoItems(){return v("div",{class:E.itemMessage,key:"esri-layer-list__no-items"},v("calcite-notice",{icon:"information",kind:"info",open:!0,width:"full"},this._renderNoItemsMessage()))}_renderPanelFlowItems(){const{_openedPanelItems:e}=this;return e.toArray().map(({title:t,panel:i},o)=>{const s=()=>this._handlePanelFlowItemBack(i);return v("calcite-flow-item",{afterCreate:this._focusPanelFlowItemNode,afterUpdate:this._focusPanelFlowItemNode,bind:this,description:t,heading:i.title,headingLevel:this.headingLevel,key:`flow-panel-${i.uid}`,selected:o===e.length-1,onCalciteFlowItemBack:e=>{e.preventDefault(),s()}},i.render(),v("calcite-button",{appearance:"transparent",onclick:s,slot:"footer-start",width:"full"},this.messagesCommon.back))})}_handlePanelFlowItemBack(e){e.open=!1,this._focusRootFlowItem=!0}_focusRootFlowItemNode(e){this._focusRootFlowItem&&(this._focusRootFlowItem=!1,L(e))}_focusPanelFlowItemNode(e){this._focusPanelFlowItem&&(this._focusPanelFlowItem=!1,L(e))}_renderItems(){const{visible:e,collapsed:t,visibleElements:{closeButton:i,collapseButton:o,heading:s,flow:l},_dragEnabled:r,_visibleItems:n,_filterEnabled:a,_rootGroupUid:d,_openedPanelItems:c,selectionMode:m,messages:p,filterPlaceholder:h,filterText:u}=this,g=[v("calcite-flow-item",{afterCreate:this._focusRootFlowItemNode,afterUpdate:this._focusRootFlowItemNode,bind:this,closable:i,closed:!e,collapsed:t,collapsible:o,heading:s?p.widgetLabel:void 0,headingLevel:this.headingLevel,key:"root-flow-item",selected:!c.length,onCalciteFlowItemClose:()=>this.visible=!1},n?.length?null:this._renderNoItems(),v("calcite-list",{afterCreate:e=>{this._rootListEl=e},afterRemoved:()=>{this._rootListEl=null},canPull:e=>this._canMove(e,"pull"),canPut:e=>this._canMove(e,"put"),"data-layer-type":d,displayMode:T,dragEnabled:r,filterEnabled:a,filterPlaceholder:h,filterProps:_,filterText:a?u:"",group:d,key:"root-list",label:p.widgetLabel,selectionAppearance:"border",selectionMode:m,onCalciteListChange:e=>this._handleCalciteListChange(e),onCalciteListDragEnd:e=>this._handleCalciteListDragEnd(e.detail),onCalciteListFilter:e=>this.filterText=e.currentTarget?.filterText??"",onCalciteListOrderChange:e=>this._onCalciteListOrderChange(e.detail)},n.toArray().map(e=>this._renderItem(e)),a?v("div",{class:E.filterNoResults,slot:"filter-no-results"},v("calcite-notice",{kind:"info",open:!0,width:"full"},this._renderNoItemsMessage())):null)),this._renderPanelFlowItems()];return e?l?v("calcite-flow",{key:"root-flow"},g):g:null}_handleCalciteListDragEnd(e){const{fromEl:t,dragEl:i,oldIndex:o}=e;t.insertBefore(i,t.children[o])}_renderItem(e){return v(m,{canMove:this._canMove,css:E,displayMode:T,dragEnabled:this.dragEnabled,item:e,key:`layerListItem-${e.layer.uid}`,listModeDisabled:this.viewModel.listModeDisabled,messages:this.messages,messagesCommon:this.messagesCommon,rootGroupUid:this._rootGroupUid,selectedDragItemLayerUid:this._selectedDragItemLayerUid,selectedItems:this.selectedItems,selectionMode:this.selectionMode,visibleElements:this.visibleElements,onAction:this._onTriggerAction,onPanelOpen:this._onPanelOpen,onSelectedDragItemLayerUidChange:this._onSelectedDragItemLayerUidChange})}_handleCalciteListChange(e){const{selectionMode:t,selectedItems:i}=this;if("none"===t)return;const o=e.target.selectedItems.map(e=>P(e)).filter(Boolean);i.removeAll(),i.addMany(o)}};e([a()],j.prototype,"_rootListEl",void 0),e([a()],j.prototype,"_focusRootFlowItem",void 0),e([a()],j.prototype,"_focusPanelFlowItem",void 0),e([a()],j.prototype,"_dragEnabled",null),e([a()],j.prototype,"_filterEnabled",null),e([a()],j.prototype,"_visibleItems",null),e([a()],j.prototype,"_openedPanelItems",null),e([a()],j.prototype,"collapsed",void 0),e([a()],j.prototype,"dragEnabled",void 0),e([a()],j.prototype,"filterPlaceholder",void 0),e([a()],j.prototype,"filterPredicate",void 0),e([a()],j.prototype,"filterText",void 0),e([a()],j.prototype,"headingLevel",void 0),e([a()],j.prototype,"icon",null),e([a()],j.prototype,"label",null),e([a()],j.prototype,"listItemCanGiveFunction",void 0),e([a()],j.prototype,"listItemCanReceiveFunction",void 0),e([a()],j.prototype,"listItemCreatedFunction",null),e([a()],j.prototype,"map",null),e([a(),w("esri/widgets/TableList/t9n/TableList")],j.prototype,"messages",void 0),e([a(),w("esri/t9n/common")],j.prototype,"messagesCommon",void 0),e([a()],j.prototype,"minDragEnabledItems",void 0),e([a()],j.prototype,"minFilterItems",void 0),e([a({type:U})],j.prototype,"selectedItems",void 0),e([a()],j.prototype,"selectionMode",void 0),e([a({readOnly:!0})],j.prototype,"tableItems",null),e([a()],j.prototype,"tables",null),e([y("trigger-action"),a({type:F})],j.prototype,"viewModel",void 0),e([a({type:M,nonNullable:!0})],j.prototype,"visibleElements",void 0),j=e([d("esri.widgets.TableList")],j);const k=j;export{k as default};