@arcgis/core/widgets/FeatureTable/Grid/Grid.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{_ as e}from"../../../chunks/tslib.es6.js";import"@vaadin/grid/vaadin-grid.js";import"@vaadin/grid/vaadin-grid-column-group.js";import"@vaadin/grid/vaadin-grid-selection-column.js";import"@vaadin/grid/vaadin-grid-sorter.js";import{isSome as t}from"../../../core/arrayUtils.js";import{on as i}from"../../../core/events.js";import{assertIsSome as r}from"../../../core/maybe.js";import{on as o,watch as n}from"../../../core/reactiveUtils.js";import{renderingSanitizer as l}from"../../../core/sanitizerUtils.js";import{property as s}from"../../../core/accessorSupport/decorators/property.js";import"../../../core/has.js";import"../../../core/Logger.js";import{subclass as d}from"../../../core/accessorSupport/decorators/subclass.js";import a from"../../Widget.js";import h from"./GridViewModel.js";import{globalCss as u}from"../../support/globalCss.js";import"../../support/widgetUtils.js";import{messageBundle as g}from"../../support/decorators/messageBundle.js";import{tsx as m}from"../../support/jsxFactory.js";const c="esri-grid",p="compact column-borders",_={base:c,content:`${c}__content`,grid:`${c}__grid`,noDataMessage:`${c}__no-data-message`},f={sort:["Enter"," "]};let v=class extends a{constructor(e,t){super(e,t),this._columnElements=[],this._grid=null,this._temporaryHighlightId=null,this.itemIdPath="objectId",this.messages=null,this.selectionColumnEnabled=!0,this.viewModel=new h,this._onSelectedItemsChange=this._onSelectedItemsChange.bind(this)}initialize(){this.addHandles([this.columns.on("before-changes",(()=>this.renderNow())),this.columns.on("change",(()=>this.onColumnChange())),o((()=>this.highlightIds),"before-add",(({target:e})=>{!this.multipleSelectionEnabled&&e.length&&e.removeAll()})),this.rowHighlightIds.on("change",(()=>this.generateCellPartNames())),n((()=>this.effectiveSize),(()=>this._updateGridSize())),n((()=>this.isEditing),(()=>{this.generateCellPartNames(),this.requestContentUpdate()})),n((()=>this.store?.state),((e,t)=>{"ready"!==e||"loaded"!==t&&"error"!==t||this.refreshPageCache()})),o((()=>this._table),"scroll",(()=>this.viewModel.closeColumnMenus())),i(window,"resize",(()=>this._updateColumnBorderStyles())),o((()=>this._table),"scrollend",(()=>{this.paginationEnabled||(this.pageIndex=this.getVirtualPageIndex()),this._updateColumnBorderStyles()})),n((()=>this.multipleSelectionEnabled),(e=>{!e&&this.highlightIds.length>1&&this.highlightIds.removeAll()}))])}destroy(){this.resetColumns(),this.columns.destroyed||this.columns.destroy()}resetColumns(){this.columns.drain((e=>!e.destroyed&&e.destroy()))}get _columnRendering(){return this.columnPerformanceModeEnabled?"lazy":"eager"}get _selectedItems(){const{highlightIds:e,store:t}=this;return e.toArray().map((e=>t?.getItemByObjectId(e)??{objectId:e}))}get _gridIsDisabled(){return 0===this.viewModel.allVisibleColumns.length||this.hasInvalidColumnConfiguration}get _noDataMessage(){return l.sanitize(this.noDataMessage)}get _table(){return this._grid?.$?.table}get cellPartNameGenerator(){return this.viewModel.cellPartNameGenerator}set cellPartNameGenerator(e){this.viewModel.cellPartNameGenerator=e}get columns(){return this.viewModel.columns}set columns(e){this.viewModel.columns=e}get columnPerformanceModeEnabled(){return this.viewModel.columnPerformanceModeEnabled}set columnPerformanceModeEnabled(e){this.viewModel.columnPerformanceModeEnabled=e}get columnReorderingEnabled(){return this.viewModel.columnReorderingEnabled}set columnReorderingEnabled(e){this.viewModel.columnReorderingEnabled=e}get dataProvider(){return this.viewModel.dataProvider}set dataProvider(e){this.viewModel.dataProvider=e}get editingEnabled(){return this.viewModel.editingEnabled}set editingEnabled(e){this.viewModel.editingEnabled=e}get effectiveSize(){return this.viewModel.effectiveSize}get groupColumns(){return this.viewModel.groupColumns}get hasInvalidColumnConfiguration(){return this.viewModel.hasInvalidColumnConfiguration}get highlightIds(){return this.viewModel.highlightIds}set highlightIds(e){this.viewModel.highlightIds=e}get temporaryHighlightId(){return this._temporaryHighlightId}get isEditing(){return this.viewModel.isEditing}get isReady(){return!!this._grid}get label(){return this.messages?.widgetLabel??""}set label(e){this._overrideIfSome("label",e)}get multipleSelectionEnabled(){return this.viewModel.multipleSelectionEnabled}set multipleSelectionEnabled(e){this.viewModel.multipleSelectionEnabled=e}get multiSortEnabled(){return this.viewModel.multiSortEnabled}set multiSortEnabled(e){this.viewModel.multiSortEnabled=e}get noDataMessage(){return this.viewModel.noDataMessage}set noDataMessage(e){this.viewModel.noDataMessage=e}get pageIndex(){return this.viewModel.pageIndex}set pageIndex(e){this.viewModel.pageIndex=e}get multipleSortPriority(){return this.viewModel.multipleSortPriority}set multipleSortPriority(e){this.viewModel.multipleSortPriority=e}get pageSize(){return this.viewModel.pageSize}set pageSize(e){this.viewModel.pageSize=e}get paginationEnabled(){return this.viewModel.paginationEnabled}set paginationEnabled(e){this.viewModel.paginationEnabled=e}get rowDetailsRenderer(){return this.viewModel.rowDetailsRenderer}set rowDetailsRenderer(e){this.viewModel.rowDetailsRenderer=e}get rowHighlightIds(){return this.viewModel.rowHighlightIds}set rowHighlightIds(e){this.viewModel.rowHighlightIds=e}get size(){return this.viewModel.size}get sortOrders(){return this._grid?._sorters?this._grid._sorters.filter((e=>!!e&&e.path)).map((({direction:e,path:t})=>({direction:e,path:t}))):[]}get store(){return this.viewModel.store}set store(e){this.viewModel.store=e}get state(){return this.viewModel.state}addSorter(e){this._grid?.__updateSorter(e,!1,!1),this.notifyChange("sortOrders")}getColumnProps(e,t){const{id:i}=this,{autoWidth:r,direction:o,fieldName:n,flexGrow:l,frozen:s,frozenToEnd:d,hidden:a,label:h,resizable:u,textAlign:g,width:m}=e,c=`${i}_${n}_${t}`,{renderFunction:p,footerRenderFunction:_,headerRenderFunction:f}=e,v=_?(e,t)=>_({root:e,column:t}):void 0,y=f?(e,t)=>f({root:e,column:t}):void 0,C=p?(e,t,i)=>p({root:e,column:t,rowData:i}):void 0;let w="";return e.direction&&(w+=" direction"),e.invalid&&(w+=" invalid"),{footerRenderer:v,headerRenderer:y,renderer:C,autoWidth:r,direction:o,flexGrow:l,frozen:s,frozenToEnd:d,headerPartName:w,key:c,resizable:u,bind:this,"data-fieldName":n,header:h,hidden:this.hasInvalidColumnConfiguration||a,path:n,"text-align":g,width:"number"==typeof m?`${m}px`:m,afterCreate:this._afterColumnCreate,afterRemoved:this._afterColumnRemoved}}clearSelection(){this._clearSelection(),this.scheduleRender()}clearSort(){let e=!1;if(this._grid){if(this._grid._sorters?.length&&(this._grid._sorters.forEach((e=>{e._order=null,e.direction=null})),e=!0),this.columns.length){this.columns.some((e=>!!e.direction))&&(this.columns.forEach((e=>e.direction=null)),e=!0)}e&&(this.notifyChange("sortOrders"),this.scheduleRender())}}findColumn(e){return this.viewModel.findColumn(e)}generateCellPartNames(){this._grid?.generateCellPartNames()}getFirstVisibleRowIndex(){return this._grid?._firstVisibleIndex||0}getVirtualPageIndex(){return Math.floor(this.getFirstVisibleRowIndex()/this.pageSize)}getLastVisibleRowIndex(){return this._grid?._lastVisibleIndex||0}getVisibleItemsCount(){return this._grid?._visibleItemsCount||0}getRowContainingNode(e){try{return this._grid?._getRowContainingNode(e)}catch{return null}}getSlotElementByName(e){return this._grid?.shadowRoot?.querySelector(`slot[name='${e}']`)??null}hasSorter(e){return this._grid?._sorters?.includes(e)||!1}hideColumn(e){this.viewModel.hideColumn(e)}recalculateColumnWidths(){this._grid?.recalculateColumnWidths()}async reset(){this._clearSelection(),await(this.store?.reset()),this.scrollToTop()}refreshPageCache(){this._grid?.clearCache(),this._temporaryHighlightId=null}requestContentUpdate(){this._grid?.requestContentUpdate(),this._temporaryHighlightId=null}selectRows(e){const{itemIdPath:t}=this,i=e?.filter((e=>!this.highlightIds.includes(e[t]))),r=i.map((e=>e[t]));r.length&&(this.multipleSelectionEnabled||(this.highlightIds.removeAll(),r.splice(1)),this.highlightIds.addMany(r))}deselectRows(e){const{itemIdPath:t}=this,i=e?.map((e=>e[t]))||[];i.length&&this.highlightIds.removeMany(i)}showColumn(e){this.viewModel.showColumn(e)}sort({path:e,direction:t}){this.viewModel.sortColumn(e,t),this.notifyChange("sortOrders")}scrollToIndex(e){0!==this.size&&(this._grid?.isConnected&&this._grid?.scrollToIndex(e),this._temporaryHighlightId=null)}scrollToTop(){this.scrollToIndex(0)}scrollToBottom(){this.scrollToIndex(1/0)}scrollLeft(e){const{_table:t}=this;t&&(t.scrollLeft=e)}toggleColumnVisibility(e){this.viewModel.toggleColumnVisibility(e)}onColumnChange(){this._columnElements.forEach((e=>this._applyRenderersToColumnElement(e))),this.requestContentUpdate()}render(){return m("div",{bind:this,class:this.classes(_.base,u.widget)},m("div",{bind:this,class:_.content},this._renderGrid()))}_renderGrid(){return m("vaadin-grid",{afterCreate:this._afterGridCreate,afterUpdate:this._afterGridUpdate,bind:this,cellPartNameGenerator:this.cellPartNameGenerator,class:_.grid,columnRendering:this._columnRendering,columnReorderingAllowed:this.columnReorderingEnabled,dataProvider:this.dataProvider,disabled:this._gridIsDisabled,id:`${this.id}_grid`,itemIdPath:this.itemIdPath,multiSort:this.multiSortEnabled,multiSortPriority:this.multipleSortPriority,pageSize:this.pageSize,ref:"grid",rowDetailsRenderer:this.rowDetailsRenderer,selectedItems:this._selectedItems,size:this.effectiveSize},this._renderAllColumns(),this._renderEmptyState())}_renderAllColumns(){return"disabled"!==this.state&&this.columns.length?[this._renderSelectionColumn(),this._renderColumns()]:null}_renderSelectionColumn(){return m("vaadin-grid-selection-column",{_selectAllHidden:!0,autoWidth:!1,bind:this,dragSelect:!0,frozen:!0,hidden:this.hasInvalidColumnConfiguration||!this.selectionColumnEnabled,selectAll:!1,sortable:!1,textAlign:"center"})}_renderColumns(){return Array.from(this.columns,((e,t)=>"columns"in e?this._renderGroupColumn(e,t):m("vaadin-grid-column",{...this.getColumnProps(e,t)}))).filter(t)}_renderGroupColumn(e,t){const i=this.getColumnProps(e,t);if(i.hidden||!e.columns)return null;const r=e.columns.filter((({hidden:e})=>!e));return r.length?m("vaadin-grid-column-group",{...i},r.map((e=>m("vaadin-grid-column",{...this.getColumnProps(e,t)})))):null}_renderEmptyState(){const e=this.viewModel;if("loaded"===e.state&&!e.isQueryingOrSyncing)return m("div",{class:_.noDataMessage,slot:"empty-state"},this._noDataMessage??this.messages.noDataFound)}_afterGridCreate(e){const t=this._grid=e;t.setAttribute("theme",p),customElements.whenDefined("vaadin-grid").then((()=>{this._appendStyles(),this._addGridEventListeners()})),t.__updateSorter=(e,i,r)=>{const o=t._sorters,n=!o.includes(e),{multiSort:l,multiSortOnShiftClick:s,multiSortPriority:d}=t,a=o.filter((t=>t!==e)),h=l&&(!s||!r)||s&&i;e._order=null,e.direction?h?null!=e._initialOrder?(n?o[e._initialOrder]=e:o.splice(e._initialOrder,0,e),e._initialOrder=null):"append"===d&&n?t._sorters=[...a,e]:"prepend"===d&&(t._sorters=[e,...a]):(e.direction||s)&&(t._sorters=e.direction?[e]:[],a.forEach((e=>{e._order=null,e.direction=null}))):n||(t._sorters=[...a])},t.__removeSorters=e=>{if(0===e.length)return;const i=new Set(e.filter((e=>!e.direction)));t._sorters=t._sorters.filter((e=>!i.has(e))),t.__applySorters()}}_appendStyles(){const e=this._grid?.shadowRoot,t=document.createElement("style");e&&(t.textContent='\n      #items [part~="row"][editing],\n      #items [part~="row"][editing][selected] {\n        z-index: 2;\n      }\n\n      #items [part~="editing"],\n      #items [part~="editing"][selected] {\n        z-index: 3;\n      }\n\n      [frozen], [frozen-to-end] {\n        z-index: 4;\n      }\n\n      [last-frozen] {\n        overflow: visible;\n      }\n\n      [part~=\'cell\'] ::slotted(vaadin-grid-cell-content) {\n        align-items: center;\n        box-sizing: border-box !important;\n        height: 100%;\n        line-height: 2em;\n        min-height: 40px;\n      }\n\n      #items [part~="text-wrap"] {\n        text-wrap: wrap;\n      }\n    ',e.appendChild(t))}_afterGridUpdate(e){this._grid||(this._grid=e)}_afterColumnCreate(e){this._columnElements.push(e)}_afterColumnRemoved(e){const t=this._columnElements.indexOf(e,0);t>-1&&this._columnElements.splice(t,1)}_updateGridSize(){this._grid&&(this._grid.size=this.effectiveSize,this.scheduleRender())}_addGridEventListeners(){const e=this._grid;r(e),this.addHandles([i(e,["click","dblclick","keydown","pointerover","pointerout"],(e=>this._onGridInteraction(e))),i(e,["pointerover","pointerout","cell-focus"],(e=>this._onTransientGridInteraction(e))),i(e,"selected-items-changed",this._onSelectedItemsChange),i(e,"sorter-changed",(()=>{this.notifyChange("sortOrders"),this._updateColumnBorderStyles()})),i(e,"column-resize",(e=>{const t=e.detail.resizedColumn,i=t.getAttribute("data-fieldName"),r=this.findColumn(i);r?.set({width:t.width}),this._updateColumnBorderStyles()})),i(e,"column-reorder",(()=>this._onColumnOrderChange()))])}_onGridInteraction(e){const t=this._grid;if(r(t),("pointerover"===e.type||"pointerout"===e.type)&&e.relatedTarget!==t){const{target:t,relatedTarget:i}=e;if(!this._isGridCellContentNode(t)||!this._isGridCellContentNode(i))return}let i=null;try{i=t.getEventContext(e)}catch(a){}if(!i)return;const{column:o,index:n,item:l,section:s}=i;if(!s)return;if("header"===s&&"keydown"===e.type&&o?.path){const t=e.key;f.sort.includes(t)&&this.findColumn(o.path)?.sort()}const d=`cell-${e.type}`;this.emit(d,{type:d,context:i,index:n,item:l,native:e,path:o?.path??void 0})}_onTransientGridInteraction(e){if("pointerout"===e.type)return void(this._temporaryHighlightId=null);const t=this._grid;if(t)try{const{item:i}=t.getEventContext(e);this._temporaryHighlightId=i?.objectId}catch{this._temporaryHighlightId=null}}_isGridCellContentNode(e){return!!(e&&e instanceof HTMLElement&&"vaadin-grid-cell-content"===e.localName)}_onColumnOrderChange(){const e=this._grid;r(e);const t=e._getColumnsInOrder(0),i=[],o=(this.viewModel.groupColumns.length?e._getColumnsInOrder(1):t).map((e=>e.getAttribute("data-fieldName")));t?.forEach((e=>{const t=e.getAttribute("data-fieldName");if(null!=t){const e=this.findColumn(t);i.push(t),e&&"columns"in e&&e.columns?.length&&e.columns.sort(((e,t)=>o.indexOf(e.fieldName)>o.indexOf(t.fieldName)?1:-1))}})),this.columns.sort(((e,t)=>i.indexOf(e.fieldName)>i.indexOf(t.fieldName)?1:-1)),this.notifyChange("sortOrders"),this.emit("column-reorder",{type:"column-reorder"})}_clearSelection(){this.highlightIds.removeAll(),this._temporaryHighlightId=null}_onSelectedItemsChange(e){const{highlightIds:t,itemIdPath:i}=this,r=e.detail.value.map((e=>e[i])),o=r.filter((e=>!t.includes(e)));if(!this.multipleSelectionEnabled&&o.length&&t.length)t.removeAll(),t.add(o[0]);else{const e=t.filter((e=>!r.includes(e)));t.removeMany(e),t.addMany(o)}}_applyRenderersToColumnElement(e){const t=e?.path,i=null!=t?this.findColumn(t):void 0;if(i)try{const{renderFunction:t,footerRenderFunction:r,headerRenderFunction:o}=i;t&&"renderer"in e&&(e.renderer=(e,i,r)=>t({root:e,column:i,rowData:r})),r&&(e.footerRenderer=(e,t)=>r({root:e,column:t})),o&&(e.headerRenderer=(e,t)=>o({root:e,column:t}))}catch(r){}}_updateColumnBorderStyles(){try{this._grid?._updateFirstAndLastColumn()}catch(e){}}};e([s()],v.prototype,"_columnElements",void 0),e([s()],v.prototype,"_columnRendering",null),e([s()],v.prototype,"_selectedItems",null),e([s()],v.prototype,"_grid",void 0),e([s()],v.prototype,"_gridIsDisabled",null),e([s()],v.prototype,"_noDataMessage",null),e([s()],v.prototype,"_table",null),e([s()],v.prototype,"_temporaryHighlightId",void 0),e([s()],v.prototype,"cellPartNameGenerator",null),e([s()],v.prototype,"columns",null),e([s()],v.prototype,"columnPerformanceModeEnabled",null),e([s()],v.prototype,"columnReorderingEnabled",null),e([s()],v.prototype,"dataProvider",null),e([s()],v.prototype,"editingEnabled",null),e([s()],v.prototype,"effectiveSize",null),e([s()],v.prototype,"groupColumns",null),e([s()],v.prototype,"hasInvalidColumnConfiguration",null),e([s()],v.prototype,"highlightIds",null),e([s()],v.prototype,"temporaryHighlightId",null),e([s()],v.prototype,"isEditing",null),e([s()],v.prototype,"isReady",null),e([s()],v.prototype,"itemIdPath",void 0),e([s()],v.prototype,"label",null),e([s(),g("esri/widgets/FeatureTable/t9n/FeatureTable")],v.prototype,"messages",void 0),e([s()],v.prototype,"multipleSelectionEnabled",null),e([s()],v.prototype,"multiSortEnabled",null),e([s()],v.prototype,"noDataMessage",null),e([s()],v.prototype,"pageIndex",null),e([s()],v.prototype,"multipleSortPriority",null),e([s()],v.prototype,"pageSize",null),e([s()],v.prototype,"paginationEnabled",null),e([s()],v.prototype,"rowDetailsRenderer",null),e([s()],v.prototype,"rowHighlightIds",null),e([s()],v.prototype,"selectionColumnEnabled",void 0),e([s()],v.prototype,"size",null),e([s({readOnly:!0})],v.prototype,"sortOrders",null),e([s()],v.prototype,"store",null),e([s()],v.prototype,"state",null),e([s()],v.prototype,"viewModel",void 0),v=e([d("esri.widgets.FeatureTable.Grid.Grid")],v);const y=v;export{y as default};