@arcgis/core/widgets/FeatureTable/FieldColumn.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 t from"../../core/Logger.js";import{on as i,sync as n}from"../../core/reactiveUtils.js";import{renderingSanitizer as o}from"../../core/sanitizerUtils.js";import{property as l}from"../../core/accessorSupport/decorators/property.js";import"../../core/has.js";import"../../core/RandomLCG.js";import{subclass as r}from"../../core/accessorSupport/decorators/subclass.js";import{convertDateFormatToIntlOptions as s}from"../../intl/date.js";import{convertNumberFormatToIntlOptions as a,formatNumber as u}from"../../intl/number.js";import{isEditableLayer as p}from"../../layers/support/editableLayers.js";import{computeDomainFromTypes as d}from"../../layers/support/featureLayerUtils.js";import c from"../../layers/support/Field.js";import{validateFieldValue as m,isDateField as f,isTimeOnlyField as h,isIntegerField as g,isNumericField as y,isStringField as v,isDateOnlyField as F,isTimestampOffsetField as _}from"../../layers/support/fieldUtils.js";import{isAnyDateField as C}from"../../smartMapping/support/utils.js";import{system as b}from"../../time/constants.js";import{getTimeZoneFormattingOptions as D}from"../../time/timeZoneUtils.js";import I from"../FeatureForm/FieldInput.js";import x from"./Grid/EditorColumn.js";import{isEmptyStringOrWhitespace as w}from"./support/tableUtils.js";import{dateFieldsWithStringFieldValue as T,getLabelForDateFieldValue as V,valueIsInRange as E,dateTimeIsInRange as O,getUnixFieldValueFromDateComponents as Z,getISOFieldValueFromDateComponents as j,normalizeTimeOnlyString as L,prepareISOFieldValueForDateComponents as R,prepareUnixFieldValueForDateComponents as S}from"../support/dateUtils.js";import{setFocus as N}from"../support/widgetUtils.js";const U={cancelEdit:"Escape"},A=Symbol(),q="esri-column",k={input:`${q}__cell-input`,inputContainer:`${q}__cell__input-container`},z=s("short-date-short-time"),B=s("short-date"),H={useGrouping:!0,maximumFractionDigits:20};let P=class extends x{constructor(e){super(e),this._activeFieldInput=null,this.cellValueFormatFunction=({root:e,rowData:t,value:i})=>{const{formatFunction:n}=this;if(n&&t){const{index:l,item:{attachments:r,feature:s,relatedRecords:a}}=t;return n({attachments:r,column:this,feature:s,field:this.field,index:l,relatedRecords:a,value:o.sanitize(i),virtualIndex:this.getVirtualRowIndex(e)})}if(null===i)return"&nbsp;";const{field:l}=this,r=this._getDomainForFeature(t?.item?.feature);if(r){const e=this._getComputedDomain(i,r);if("date"===l.type&&"range"===r.type)return this._formatDateValueForDisplay(l,e);if(this._isNumericField&&"range"===r.type){const e=this.template?.format,t=e?a(e):H;return u(parseFloat(i),t)}return T.has(l.type)?"range"===r.type?o.sanitize(V(l,e)):o.sanitize(e):e}if("date"===l.type||T.has(l.type))return this._formatDateValueForDisplay(l,i);if(this._isNumericField){const e=this.template?.format,t=e?a(e):H;return u(parseFloat(i),t)}return o.sanitize(i)},this.cellValueValidatorFunction=({oldValue:e,value:i})=>{const{_effectiveRange:n,field:o}=this,{max:l,min:r}=n;if(this.effectiveRequired&&(null==i||""===i))return!1;if(this._isNumericField&&(m(o,i)||!E({max:l,min:r,value:i})))return t.getLogger(this).warn("value-exceeds-valid-range","Field value exceeds valid range. Attempted edit was rejected."),!1;if(this._isAnyDateOrTimeField){const e=o.type;if(!O({type:e,range:n,value:i}))return!1}return e!==i},this.field=null,this.formatFunction=null,this.inputRenderFunction=async({root:e,column:i,rowData:n})=>{if(this.editInfo||!this.effectiveEditable)return;const o=this.getCellValue(n),{field:l}=this;if("big-integer"===l.type&&m(l,o))return void t.getLogger(this).warn("value-exceeds-valid-range","Field value is beyond supported limit. Editing is disabled for this field value.");const r=n?.item.feature;if(!r)return;this._activeFieldInput=this._setUpFieldInput(r,o);const s=document.createElement("div");s.classList.add(k.inputContainer);const a=[],u="coded-value"===this._effectiveDomain?.type;if(this._isAnyDateOrTimeField&&!u){const e=document.createElement("div"),t=this._setUpDateComponents(o),i=this._setUpDateActionBar();t.forEach((t=>e.appendChild(t))),s.appendChild(e),s.appendChild(i),a.push(...t)}else{const e=this.createInputElement({value:o});s.appendChild(e),a.push(e)}this._set("editInfo",{column:i,inputs:a,root:e,rowData:n,oldValue:o}),this.removeCellContent(e),e.appendChild(s),this._syncRowEditingState(e,!0),this.grid?.generateCellPartNames();const p=a[0];await N(p),"selectText"in p&&await p.selectText()},this.layer=null,this.parseInputValueFunction=({inputs:e})=>{const{editInfo:t,field:i,includeTime:n}=this;if(!t||!e.length)return null;const o=e[0];if(this._isAnyDateOrTimeField){if("coded-value"===this._effectiveDomain?.type){if(null==o.value||""===o.value)return null;const e=String(o.value);return f(i)?parseFloat(e):e}const{timeZone:l}=this.effectiveTimeZoneOptions,r=t.oldValue??void 0;switch(i.type){case"date-only":{const e=o.value;return""!==e?e:null}case"time-only":{const e=L(o.value);return""!==e?e:null}case"timestamp-offset":{const t=n?e[1]:void 0,i=e.at(-1);return j({oldValue:r,dateComponent:o,timeComponent:t,timeZoneComponent:i,defaultTimeZone:l})}case"date":{const{max:t,min:i}=this._effectiveRange;return Z({oldValue:r,dateComponent:o,timeComponent:e[1],timeZone:l,max:t,min:i})}}return null}const l=o.value,{effectiveRequired:r}=this;return r||null!=l&&""!==l?this._isNumericField?parseFloat(l):this._isStringField?l.trim():l:null},this.sortable=!0,this.store=null,this.template=null,this.view=null}get _effectiveDomain(){const e=this._activeFieldInput?.feature;return e?this._getDomainForFeature(e):null}get _effectiveRange(){return this._activeFieldInput?.range??{max:null,min:null}}get _isAnyDateOrTimeField(){const{field:e}=this;return C(e)||h(e)}get _isIntegerField(){return g(this.field)}get _isNumericField(){return y(this.field)}get _isStringField(){return v(this.field)}get _isSubtypeField(){const{layer:e}=this;if(e?.subtypeField){const{subtypeField:t,fieldsIndex:i}=e;return(i.get(t)?.name??t)===this.fieldName}return!1}get alias(){return this.field?.alias}get defaultValue(){return this.field?.defaultValue}get effectiveDescription(){const{description:e,field:t}=this,i=t.description,n=w(e)?w(i)?null:i:e;return null==n?null:o.sanitize(n)}get effectiveEditable(){const{editable:e,field:t,layer:i,tableEditingEnabled:n}=this;if(!t||!i)return!1;const o=p(i),l=i.effectiveCapabilities??i.capabilities,r=l?.operations?.supportsUpdate;return!!(t.editable&&o&&r&&"oid"!==t.type&&n)&&e}get effectiveLabel(){return o.sanitize(this.label||this.alias||this.fieldName)}get effectiveRequired(){return!this.nullable||this._isSubtypeField||this._activeFieldInput?.required||this.required}get effectiveTimeZoneOptions(){const{layer:e,field:t}=this;if(!e||"date"!==t?.type&&"timestamp-offset"!==t?.type)return{timeZone:void 0,timeZoneName:void 0};const{tableTimeZone:i,timeZone:n,view:o}=this;return D(e.preferredTimeZone||null,!!e.datesInUnknownTimezone,n??i??o?.timeZone??b,s("short-time"),t.type)}get includeTime(){const{field:e,template:t}=this;return"time-only"===e.type||"date-only"!==e.type&&(!t?.input||"includeTime"in t.input&&!1!==t.input.includeTime)}get loadingMessage(){return this.messages?.loading||"..."}get maxLength(){const{field:e,template:t}=this,i=e?.length??-1,n=t?.input&&"maxLength"in t.input?t.input.maxLength:null;return null!=n&&!isNaN(n)&&n>=-1&&(-1===i||n<=i)?n:i}get minLength(){const{template:e,maxLength:t}=this,i=e?.input&&"minLength"in e.input?e.input.minLength:null;return t&&i<=t?i:null}get name(){return this.field?.name}get nullable(){return!1!==this.field.nullable}get shouldShowPrompt(){return this._isSubtypeField}createInputElement({value:e}){const{_effectiveDomain:t,maxLength:o,minLength:l,effectiveRequired:r}=this;let s;if("coded-value"===t?.type)s=this.createCalciteSelect(e,t.codedValues.map((({code:e,name:t})=>({value:e,name:t})))),this.addHandles([i((()=>s),"calciteSelectChange",(()=>this.onInputBlur()),n)],A);else if(this._isNumericField){const{_effectiveRange:{max:t,min:i}}=this;s=document.createElement("calcite-input"),s.type="number",this._isIntegerField&&(s.step=1),null!=t&&(s.max=t),null!=i&&(s.min=i),s.status=E({max:t,min:i,value:e})?"idle":"invalid"}else s=document.createElement("calcite-input"),this.addHandles([i((()=>s),"calciteInputChange",(()=>this.onInputBlur()),n)],A),o>-1&&(s.maxLength=o),l>0&&(s.minLength=l);return s.classList.add(k.input),s.required=r,s.value=null!=e?e.toString():"",this.addHandles([i((()=>s),"keydown",(e=>{e.key===U.cancelEdit&&this.onInputBlur(!0)}),n),i((()=>s),"blur",(()=>this.onInputBlur()),n)],A),s}onInputBlur(e=!1){this.removeHandles(A),super.onInputBlur(e)}onEditComplete(){const e=this.editInfo?.root;e&&this._syncRowEditingState(e,!1),this._activeFieldInput=null,super.onEditComplete()}_clearActiveEditValues(){this.editInfo?.inputs?.forEach((e=>e.value=""))}_setUpDateActionBar(){const{messagesCommon:e}=this,t=e?.cancel??"",i=e?.clear??"",n=e?.save??"",o=document.createElement("calcite-action-bar");return o.expandDisabled=!0,o.layout="horizontal",o.appendChild(this.createCalciteAction({text:n,icon:"save",onclick:()=>this.submit()})),this.effectiveRequired||o.appendChild(this.createCalciteAction({text:i,icon:"trash",onclick:()=>{this._clearActiveEditValues(),this.submit()}})),o.appendChild(this.createCalciteAction({text:t,icon:"x",onclick:()=>this.cancel()})),o}_formatDateValueForDisplay(e,t){const{timeZone:i,timeZoneName:n}=this.effectiveTimeZoneOptions;return null!=t?V(e,t,{...this._getDateFormatOptions(),timeZone:i,timeZoneName:n}):null}_setUpDateComponents(e){const{_effectiveRange:{max:t,min:n,rawMax:o,rawMin:l},field:r,effectiveRequired:s}=this,a=this._getDateFieldValuesForComponents(r,e),u=[];if(C(r)){const e=this.createDateComponent(),p=F(r)||_(r)?o:t,d=F(r)||_(r)?l:n,c=this._getDateFieldValuesForComponents(r,p??null),m=this._getDateFieldValuesForComponents(r,d??null);e.value=a.date??"",e.max=c.date??"",e.min=m.date??"",e.required=s,this.addHandles([i((()=>e),"calciteInputDatePickerOpen",(()=>this._onDateComponentOpen(e)))],A),u.push(e)}if(this.includeTime){const e=this.createTimeComponent();e.value=a.time??"",e.required=s,this.addHandles([i((()=>e),"calciteInputTimePickerOpen",(()=>this._onDateComponentOpen(e)))],A),u.push(e)}if("timestamp-offset"===r.type){const e=this.createTimeZoneComponent();e.value=a.timeZoneOffset??"0",this.addHandles([i((()=>e),"calciteInputTimeZoneOpen",(()=>this._onDateComponentOpen(e)))],A),u.push(e)}return u}_onDateComponentOpen(e){this.editInfo?.inputs.forEach((t=>{t!==e&&"open"in t&&(t.open=!1)}))}_syncRowEditingState(e,t=!1){const i=this.grid?.getRowContainingNode(e);i&&(t?i.setAttribute("editing","true"):i.removeAttribute("editing"))}_getDateFieldValuesForComponents(e,t){switch(e.type){case"date":return S(t,this.effectiveTimeZoneOptions.timeZone);case"date-only":return{date:t};case"time-only":return{time:t};case"timestamp-offset":return R(t);default:return{}}}_setUpFieldInput(e,t){const{field:i,layer:n,effectiveTimeZoneOptions:{timeZone:o}}=this,l=new I({feature:e,field:i,initialFeature:e.clone(),layer:n,timeZone:o});return l.set("value",t),l}_isDomainCompatible(e){if(!e)return!1;const{_isNumericField:t,_isStringField:i}=this,{type:n}=e;if("coded-value"===n){const n=typeof e.codedValues[0].code;if("string"===n&&i||"number"===n&&t)return!0}return!("range"!==n||!t)}_getDomainForFeature(e){const{fieldName:t,layer:i,template:n}=this;if(!e||!i?.getFieldDomain)return null;if("wfs"===i.type||"geojson"===i.type||"csv"===i.type||"knowledge-graph-sublayer"===i.type)return null;if(n?.domain&&this._isDomainCompatible(n.domain))return n.domain;if("feature"!==i.type&&"subtype-group"!==i.type&&null==i.getField(t)?.domain){const e=d(i,t);if(e)return e}return i.getFieldDomain(t,{feature:e})}_getComputedDomain(e,t){if(!t)return null;if("range"===t.type)return e;if("coded-value"===t.type){const i=t.codedValues.filter((t=>t.hasOwnProperty("code")&&t.code===e));return i&&i.length?i[0].name:e}return null}_getDateFormatOptions(){const{template:e}=this,t=e?.format?.dateFormat;return t?s(t):e?.input&&"includeTime"in e.input&&!1===e.input.includeTime?B:z}};e([l()],P.prototype,"_effectiveDomain",null),e([l()],P.prototype,"_activeFieldInput",void 0),e([l()],P.prototype,"_effectiveRange",null),e([l()],P.prototype,"_isAnyDateOrTimeField",null),e([l()],P.prototype,"_isIntegerField",null),e([l()],P.prototype,"_isNumericField",null),e([l()],P.prototype,"_isStringField",null),e([l()],P.prototype,"_isSubtypeField",null),e([l({readOnly:!0})],P.prototype,"alias",null),e([l()],P.prototype,"cellValueFormatFunction",void 0),e([l()],P.prototype,"cellValueValidatorFunction",void 0),e([l({readOnly:!0})],P.prototype,"defaultValue",null),e([l()],P.prototype,"effectiveDescription",null),e([l()],P.prototype,"effectiveEditable",null),e([l()],P.prototype,"effectiveLabel",null),e([l()],P.prototype,"effectiveRequired",null),e([l()],P.prototype,"effectiveTimeZoneOptions",null),e([l({type:c})],P.prototype,"field",void 0),e([l()],P.prototype,"formatFunction",void 0),e([l()],P.prototype,"includeTime",null),e([l()],P.prototype,"inputRenderFunction",void 0),e([l()],P.prototype,"layer",void 0),e([l({readOnly:!0})],P.prototype,"loadingMessage",null),e([l()],P.prototype,"maxLength",null),e([l()],P.prototype,"minLength",null),e([l({readOnly:!0})],P.prototype,"name",null),e([l({readOnly:!0})],P.prototype,"nullable",null),e([l()],P.prototype,"parseInputValueFunction",void 0),e([l()],P.prototype,"shouldShowPrompt",null),e([l()],P.prototype,"sortable",void 0),e([l()],P.prototype,"store",void 0),e([l()],P.prototype,"template",void 0),e([l()],P.prototype,"view",void 0),P=e([r("esri.widgets.FeatureTable.FieldColumn")],P);const M=P;export{M as default};