@arcgis/core/views/interactive/tooltip/content/TooltipContent.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 t}from"tslib";import{prefersReducedMotion as e}from"../../../../core/a11yUtils.js";import{on as o}from"../../../../core/events.js";import"../../../../core/has.js";import{memoize as i}from"../../../../core/memoize.js";import{throwIfNotAbortError as s,throwIfAborted as n,after as r}from"../../../../core/promiseUtils.js";import{waitAnimationFrame as a,waitTick as l}from"../../../../core/scheduling.js";import{unitName as c}from"../../../../core/unitFormatUtils.js";import{defaultAreaUnit as p,defaultVerticalLengthUnit as d,defaultLengthUnit as u}from"../../../../core/units.js";import{property as h,subclass as m}from"../../../../core/accessorSupport/decorators.js";import{getDefaultUnitForView as f}from"../../../../support/getDefaultUnitForView.js";import{tooltipKeys as _}from"../../keybindings.js";import{table as g,contentHeader as y,contentHeaderSpacer as v,contentHeaderActions as b,contentInputMode as w,content as I,helpMessageText as k,helpMessageIcon as A,helpMessage as C,drawContentHeaderActions as D}from"../css.js";import{getFormatters as M}from"../fields/parsingAndFormattingUtils.js";import U from"../../../../widgets/Widget.js";import{loadCalciteComponents as F}from"../../../../widgets/support/componentsUtils.js";import{messageBundle as j,tsx as x,tsxFragment as E,classes as T}from"../../../../widgets/support/widget.js";const H=Symbol("dragHandles");let N=class extends U{constructor(){super(...arguments),this._focusAbortController=new AbortController,this._transitionInfo=null,this._mode="feedback",this._getFormatters=i(M),this._onHeaderPointerDown=t=>{const e=t.target;if(!(e instanceof HTMLElement)||"calcite-button"===e?.tagName?.toLowerCase())return;this.removeHandles(H),t.preventDefault(),t.stopPropagation();const i="test"!==process.env.NODE_ENV;i&&e.setPointerCapture(t.pointerId),this.tooltip.onDragStart(t.clientX,t.clientY),this.addHandles([o(e,"pointermove",({clientX:t,clientY:e})=>{this.tooltip.onDrag(t,e)}),o(e,["pointerup","pointercancel"],o=>{this.removeHandles(H),i&&e.releasePointerCapture(t.pointerId),this.tooltip.onDragEnd()}),o(e,"touchstart",t=>t.preventDefault())],H)},this._onDiscard=()=>{this.destroyed||(this.tooltip.emit("discard"),this.info.clearInputValues(),this.exitInputMode())},this._onCommit=(t,e)=>{if(this.destroyed)return;if(this.tooltip.emit("commit",{type:e}),"commit-and-exit"===e)return void this.exitInputMode();if("commit-on-blur"===e)return;const o=this._getFocusableElements(),i=o.length,s=o.indexOf(t);if(-1===s)return void this.exitInputMode();const n=((s+("commit-and-next"===e?1:-1))%i+i)%i;O(o.at(n))},this._onKeyDown=t=>{switch(t.code){case _.next:return this._onNextKey(t);case _.discard:return t.stopPropagation(),this._onDiscard()}}}get mode(){return this._mode}get _displayUnits(){const{displayUnits:t}=this.info.sketchOptions.values,e=f(this.tooltip.view);return{length:t.length??e,verticalLength:t.verticalLength??e,area:t.area??e}}get _inputUnitInfos(){const t=this._messagesUnits,e=e=>({unit:e,abbreviation:c(t,e,"abbr")}),{inputUnits:o}=this.info.sketchOptions.values,i=f(this.tooltip.view),s=o.length??i,n=o.verticalLength??i,r=o.area??i;return{length:e(u(s)),verticalLength:e(d(n)),area:e(p(r)),angle:e("degrees")}}get _formatters(){return this._getFormatters(this._messagesUnits,this._displayUnits)}get fieldContext(){return{formatters:this._formatters,inputUnitInfos:this._inputUnitInfos,messages:this._messagesTooltip,sketchOptions:this.info.sketchOptions,onCommit:this._onCommit,onDiscard:this._onDiscard}}render(){const{visibleElements:t}=this.info.sketchOptions.tooltips,e=this._renderedContent,o=this._renderedActions,i=this._renderedHelpMessage,s=e.length>0,n=s||!!i,r="input"===this.mode;return x("div",{class:T(I,r&&w),onkeydown:this._onKeyDown,tabIndex:-1},r&&n&&t.header?x("div",{class:y,"data-testid":"tooltip-header",key:"header",onpointerdown:this._onHeaderPointerDown},x("calcite-button",{appearance:"transparent","data-testid":"tooltip-back-button",iconFlipRtl:"both",iconStart:"chevron-left",key:"discard-button",kind:"neutral",onclick:this._onDiscard,scale:"s",tabIndex:-1}),o.length>0?x(E,null,x("div",{class:v,key:"spacer"}),x("div",{class:b,key:"actions"},o)):null):null,s?x("div",{class:g,key:"content"},...e):null,i)}destroy(){this._focusAbortController.abort(),this._transitionInfo?.transition.skipTransition()}_renderActions(){return null}loadDependencies(){return F({button:()=>import("@esri/calcite-components/dist/components/calcite-button"),icon:()=>import("@esri/calcite-components/dist/components/calcite-icon"),input:()=>import("@esri/calcite-components/dist/components/calcite-input")})}async enterInputMode(t,e){try{await this._transitionTo("input",e),await this._focusField(t)}catch(o){s(o)}}async exitInputMode({focusOnView:t=!0}={}){try{const{container:e,info:o}=this;o.clearInputValues();const i=t?e?.closest(".esri-view")?.querySelector(".esri-view-surface"):null;await this._transitionTo("feedback"),i instanceof HTMLElement&&i.focus()}catch(e){s(e)}}_onNextKey(t){const e=this._getFocusableElements(),o=e.at(0),i=e.at(-1);o&&i&&(t.shiftKey?document.activeElement===o&&(t.preventDefault(),t.stopPropagation(),O(i)):document.activeElement===i&&(t.preventDefault(),t.stopPropagation(),O(o)))}get _renderedContent(){return S(this._renderContent())}get _renderedActions(){return S(this._renderActions())}get _renderedHelpMessage(){const{sketchOptions:t,visibleElements:e}=this.info;if(!e.helpMessage)return null;const o=t.tooltips.helpMessage??this._defaultHelpMessage;if(!o)return null;const i=t.tooltips.helpMessageIcon??"information";return x("div",{class:C,key:"help-message"},i?x("calcite-icon",{class:A,icon:i,scale:"s"}):null,x("div",{class:k},o))}get _defaultHelpMessage(){const{helpMessage:t,viewType:e}=this.info;if(null==t)return null;const o="3d"===e?"helpMessages3d":"helpMessages2d";return this._messagesTooltip?.sketch?.[o]?.[t]}async _focusField(t){this._focusAbortController?.abort(),this._focusAbortController=new AbortController;const{signal:e}=this._focusAbortController;await this._waitForInputs(),n(e);const o=this._getFocusableInputs(),i=t?o.find(e=>e.getAttribute("data-field-name")===t):o.at(0);await O(i)}async _transitionTo(t,o){if(this._mode===t&&!this._transitionInfo)return;if(this._transitionInfo?.mode===t)return this._transitionInfo.transition.finished;this._transitionInfo?.transition.skipTransition();const i=async()=>{this.destroyed||(this._mode=t,await l(),this.destroyed||(this.renderNow(),await l(),this.destroyed||o?.()))};if("test"===process.env.NODE_ENV||!this.domNode?.firstChild||!document.startViewTransition||e())return void await i();this.autoRenderingEnabled=!1;const s=this._transitionInfo={transition:document.startViewTransition(async()=>{this.destroyed||s!==this._transitionInfo||(this.autoRenderingEnabled=!0,await i())}),mode:t};try{await s.transition.finished}finally{s===this._transitionInfo&&(this._transitionInfo=null)}}async _waitForInputs(){const t=()=>Array.from(this.domNode?.querySelectorAll("calcite-input")??[]);for(;0===t().length;)await r(P);await a()}_getFocusableInputs(){return Array.from(this.domNode?.querySelectorAll("calcite-input:not([read-only]):not([disabled])")??[])}_getFocusableElements(){const t=this.domNode?.querySelector(`.${D}`);return[...Array.from(t?.querySelectorAll(`.${b} calcite-button:not([disabled])`)??[]),...this._getFocusableInputs()]}};async function O(t){await(t?.setFocus())}function S(t){return(Array.isArray(t)?t:[t]).flat(10).filter(t=>!!t)}t([j("esri/core/t9n/Units"),h()],N.prototype,"_messagesUnits",void 0),t([j("esri/views/interactive/tooltip/t9n/Tooltip"),h()],N.prototype,"_messagesTooltip",void 0),t([h()],N.prototype,"info",void 0),t([h()],N.prototype,"tooltip",void 0),t([h()],N.prototype,"_mode",void 0),t([h()],N.prototype,"mode",null),t([h()],N.prototype,"_displayUnits",null),t([h()],N.prototype,"_inputUnitInfos",null),t([h()],N.prototype,"_formatters",null),t([h()],N.prototype,"fieldContext",null),t([h()],N.prototype,"_renderedContent",null),t([h()],N.prototype,"_renderedActions",null),t([h()],N.prototype,"_renderedHelpMessage",null),t([h()],N.prototype,"_defaultHelpMessage",null),N=t([m("esri.views.interactive.tooltip.content.TooltipContent")],N);const P=20;export{N as TooltipContent};