UNPKG

@arcgis/core

Version:

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

js.arcgis.com

6 lines (5 loc) • 4.45 kB
1
2
3
4
5
6
/* All material copyright ESRI, All Rights Reserved, unless otherwise specified. See https://js.arcgis.com/4.32/esri/copyright.txt for details. */ import{_ as e}from"../../../../chunks/tslib.es6.js";import{property as t}from"../../../../core/accessorSupport/decorators/property.js";import"../../../../core/has.js";import"../../../../core/Logger.js";import"../../../../core/RandomLCG.js";import{subclass as o}from"../../../../core/accessorSupport/decorators/subclass.js";import n from"../../../Widget.js";import s from"./ButtonMenuViewModel.js";import{loadCalciteComponents as i}from"../../../support/componentsUtils.js";import{globalCss as r}from"../../../support/globalCss.js";import{storeNode as l,renderingSanitizer as a,isActivationKey as d}from"../../../support/widgetUtils.js";import{tsx as c}from"../../../support/jsxFactory.js";const p="esri-button-menu",m={base:p,content:`${p}__content`,itemWrapper:`${p}__item-wrapper`,label:`${p}__label`,icon:`${p}__icon`,item:`${p}__item`,itemLabel:`${p}__item-label`,itemLabelContent:`${p}__item-label-content`,selectableMenuItem:`${p}__item--selectable`,selectedMenuItem:`${p}__item--selected`,checkbox:`${p}__checkbox`,embeddedContentWrapper:`${p}__embedded-content-wrapper`,button:`${p}__button`,buttonSelected:`${p}__button--selected`};let u=class extends n{constructor(e,t){super(e,t),this._popover=null,this.disabled=!1,this.viewModel=new s}loadDependencies(){return i({button:()=>import("@esri/calcite-components/dist/components/calcite-button"),popover:()=>import("@esri/calcite-components/dist/components/calcite-popover")})}destroy(){this._popover=null}get items(){return this.viewModel.items}set items(e){this.viewModel.items=e}get open(){return this.viewModel.open}set open(e){this.viewModel.open=e}render(){const{open:e}=this,t=`${this.id}-button`;return c("div",{class:this.classes(m.base,r.widget),key:"menu"},c("calcite-button",{appearance:"transparent",bind:this,class:this.classes(m.button,e&&m.buttonSelected),disabled:this.disabled,iconStart:e?"x":"ellipsis",id:t,kind:"neutral",label:this.label||"button",onclick:()=>this._toggleOpen(e),tabIndex:0}),c("calcite-popover",{afterCreate:l,afterUpdate:()=>this._popover?.reposition(),autoClose:!0,bind:this,"data-node-ref":"_popover",label:this.label||"menu",open:e,overlayPositioning:"fixed",pointerDisabled:!0,referenceElement:t,onCalcitePopoverClose:this._onPopoverClose},this._renderMenuContent()))}_onPopoverClose(){this.open=!1}_renderMenuContent(){const{id:e,open:t}=this;return c("div",{afterCreate:this._afterMenuContentNodeCreate,bind:this,class:m.content,hidden:!t,key:"esri-button-menu-content"},c("ul",{"aria-labelledby":`${e}-button`,bind:this,class:m.itemWrapper,id:`${e}-menu`,role:"menu"},this.items?.length?this._renderItems():null))}_renderItems(){return this.items?.map(((e,t)=>this._renderItem(e,t)))}_renderItem(e,t,o){const n=null!=o?`${this.id}-menu-item-${t}-${o}`:`${this.id}-menu-item-${t}`,s=`${n}-label`,i=this.classes(m.item,e.selectionEnabled?m.selectableMenuItem:null,e.selectionEnabled&&e.selected?m.selectedMenuItem:null);return c("li",{afterCreate:this._afterMenuItemCreate,bind:this,class:i,"data-item-index":t,"data-item-subIndex":o,for:n,key:n,onclick:t=>this._handleMenuItemInteraction(t,e),onkeydown:t=>this._handleMenuItemKeydown(t,e),role:"menuitem",tabIndex:this.disabled?-1:0},c("input",{checked:e.selected,class:m.checkbox,disabled:!0,id:n,name:n,tabIndex:-1,type:"checkbox"}),c("label",{class:m.itemLabel,for:n,id:s},c("span",{"aria-hidden":"true",class:m.icon}),c("span",{class:m.itemLabelContent},a.sanitize(e.label))),c("ul",{"aria-labelledby":s,class:m.embeddedContentWrapper,id:`${this.id}-submenu`,role:"menu"},e?.items?.map(((e,o)=>this._renderItem(e,t,o)))))}_handleMenuItemInteraction(e,t){t.selected=!t.selected,t.open=!(!t.selected||!t.items),t.autoCloseMenu&&this.set("open",!1),t.clickFunction&&t.clickFunction({event:e,item:t}),e.stopPropagation()}_handleMenuItemKeydown(e,t){const{key:o}=e;d(o)&&this._handleMenuItemInteraction(e,t),"Escape"===o&&(this.open=!1,e.preventDefault(),e.stopPropagation())}_afterMenuContentNodeCreate(e){e.focus()}_toggleOpen(e){this.open=!e}_afterMenuItemCreate(e){0===e["data-item-index"]&&e.focus()}};e([t()],u.prototype,"disabled",void 0),e([t()],u.prototype,"items",null),e([t()],u.prototype,"open",null),e([t()],u.prototype,"viewModel",void 0),u=e([o("esri.widgets.FeatureTable.Grid.support.ButtonMenu")],u);const b=u;export{b as default};