@mescius/wijmo.grid.detail/es2015-esm.js

UI library for pure JS, Angular, React, Vue and more...

/*!
    *
    * Wijmo Library 5.20261.50
    * https://developer.mescius.com/wijmo
    *
    * Copyright(c) MESCIUS inc. All rights reserved.
    *
    * Licensed under the End-User License Agreement For MESCIUS Wijmo Software.
    * us.sales@mescius.com
    * https://developer.mescius.com/wijmo/licensing
    *
    */

import{Row,FlexGrid,MergeManager,CellRange,CellType,_NewRowTemplate,GroupRow,FlexGridClsNames}from"@mescius/wijmo.grid";import{Key,Control,_addCultureInfo,culture,copy,asEnum,asNumber,asBoolean,asFunction,isFunction,isNumber,animate,setCss,closest,closestClass,addClass,hasClass,setAriaLabel,setAttribute,ControlClsNames,InputFormElementsClsNames,GlyphClsNames,format,_registerModule}from"@mescius/wijmo";import*as selfModule from"@mescius/wijmo.grid.detail";export class DetailRow extends Row{constructor(e){super();this.isReadOnly=!0}get detail(){return this._detail}set detail(e){this._detail=e}}export class DetailMergeManager extends MergeManager{constructor(e){super();this._originalMergeManager=e.mergeManager}getMergedRange(e,t,i,l=!0){switch(e.cellType){case CellType.Cell:if(e.rows[t]instanceof DetailRow){e.columns._frozenInternal>0&&e.grid&&(e.grid.cloneFrozenCells=!1);return new CellRange(t,0,t,e.columns.length-1)}break;case CellType.RowHeader:{let l=_isFrozen(e,t),s=_isNew(e,t),o=e.rows[t].dataItem;!o&&t>0&&e.rows[t]instanceof DetailRow&&(o=e.rows[t-1].dataItem);let a=t;for(;a>0&&e.rows[a-1].dataItem==o&&_isFrozen(e,a-1)==l&&_isNew(e,a-1)==s;)a--;let r=t;for(;r<e.rows.length-1&&e.rows[r+1].dataItem==o&&_isFrozen(e,r+1)==l&&_isNew(e,r+1)==s;)r++;r<e.rows.length-1&&e.rows[r+1]instanceof DetailRow&&_isFrozen(e,r+1)==l&&_isNew(e,r+1)==s&&r++;return a!=r?new CellRange(a,i,r,i):null}}return this._originalMergeManager.getMergedRange(e,t,i,l)}}function _isFrozen(e,t){return t<e.rows._frozenInternal}function _isNew(e,t){return e.rows[t]instanceof _NewRowTemplate}export const FlexGridDetailProviderClsNames={detail:"wj-detail",detailRow:"wj-detail-row",elemDetail:"wj-elem-detail"};_addCultureInfo("FlexGridDetailProvider",{ariaLabels:{toggleDetail:"Toggle Row Detail"},accessibilityHelperMessage:{showDetail:"Show detail row: {rowIndex}",hideDetail:"Hide detail row: {rowIndex}"}});export var KeyAction;!function(e){e[e.None=0]="None";e[e.ToggleDetail=1]="ToggleDetail"}(KeyAction||(KeyAction={}));export var DetailVisibilityMode;!function(e){e[e.Code=0]="Code";e[e.Selection=1]="Selection";e[e.ExpandSingle=2]="ExpandSingle";e[e.ExpandMulti=3]="ExpandMulti"}(DetailVisibilityMode||(DetailVisibilityMode={}));export class FlexGridDetailProvider{constructor(e,t){this._maxHeight=null;this._mode=DetailVisibilityMode.ExpandSingle;this._animated=!1;this._keyActionEnter=KeyAction.None;this._g=e;e.mergeManager=new DetailMergeManager(e);e.addEventListener(e.rowHeaders.hostElement,"click",this._hdrClick.bind(this));e.addEventListener(e.rowHeaders.hostElement,"mousedown",t=>{const i=e.editableCollectionView;if(e.activeEditor||i&&i.currentEditItem){this._hdrClick(t);t.preventDefault()}});setTimeout(()=>{e.formatItem.addHandler(this._formatItem,this)},100);e.selectionChanged.addHandler(this._selectionChanged,this);e.resizedRow.addHandler(this._resizedRow,this);e.loadingRows.addHandler(()=>this.hideDetail());e.deletingRow.addHandler((e,t)=>{this.hideDetail(t.row)});e.updatedView.addHandler(this._handleFrozenCells,this);e.cloneFrozenCells=!1;e.draggingRow.addHandler((e,t)=>{if(t.row<e.rows.length-1&&e.rows[t.row+1]instanceof DetailRow){t.cancel=!0;this.hideDetail(t.row)}});e.addEventListener(e.hostElement,"keydown",e=>{if(e.keyCode==Key.Enter&&this._keyActionEnter==KeyAction.ToggleDetail){const t=this._g.selection.row,i=this._g.activePanel.cellType;this._toggleRowDetail(t)&&i===CellType.Cell&&e.preventDefault()}},!0);e._root.addEventListener("scroll",()=>{hasClass(e.activeCell,FlexGridDetailProviderClsNames.detail)&&Control.sharedState.InvalidScroll||Control.refreshAll(e._root)});copy(this,t)}dispose(){if(this._toSel){clearTimeout(this._toSel);this._toSel=null}}get grid(){return this._g}get detailVisibilityMode(){return this._mode}set detailVisibilityMode(e){if((e=asEnum(e,DetailVisibilityMode))!=this._mode){this._mode=e;this.hideDetail();this._g.invalidate()}}get maxHeight(){return this._maxHeight}set maxHeight(e){if((e=asNumber(e,!0))!=this._maxHeight){this._maxHeight=e;this.hideDetail()}}get isAnimated(){return this._animated}set isAnimated(e){e!=this._animated&&(this._animated=asBoolean(e))}get keyActionEnter(){return this._keyActionEnter}set keyActionEnter(e){this._keyActionEnter=asEnum(e,KeyAction)}get createDetailCell(){return this._createDetailCellFn}set createDetailCell(e){this._createDetailCellFn=asFunction(e,!0)}get disposeDetailCell(){return this._disposeDetailCellFn}set disposeDetailCell(e){this._disposeDetailCellFn=asFunction(e,!0)}get rowHasDetail(){return this._rowHasDetailFn}set rowHasDetail(e){if((e=asFunction(e,!0))!=this._rowHasDetailFn){this._rowHasDetailFn=e;this.hideDetail();this._g.invalidate()}}getDetailRow(e){let t=this._g.rows,i=this._toIndex(e),l=t[i]?t[i].dataItem:void 0;for(;i<t.length;i++){const e=t[i];if(e instanceof DetailRow)return e;if(e.dataItem!=l)return null}return null}isDetailVisible(e){return null!=this.getDetailRow(e)}isDetailAvailable(e){e=this._toIndex(e);return this._hasDetail(e)}hideDetail(e){const t=this._g,i=t.rows;let l=culture.FlexGridDetailProvider.accessibilityHelperMessage.hideDetail;if(null==e){for(let e=0;e<i.length;e++)i[e]instanceof DetailRow&&this.hideDetail(e);return}let s=this._toIndex(e);if(t.rows._frozenInternal>0&&s<=t.rows._frozenInternal-1){t.rows.frozenDetailChildren-=1;t.rows._frozenInternal-=1}else if(t.rows._frozenInternal<0&&t.rows.isFrozen(s)){t.rows.frozenDetailChildren-=1;t.rows._frozenInternal+=1}for(;!(i[s]instanceof DetailRow)&&s<i.length-1;)s++;const o=i[s];if(o instanceof DetailRow){const e=o.detail.parentElement;if(e){const i=e.querySelectorAll("."+ControlClsNames.hostElement);for(let e=0;e<i.length;e++){const l=Control.getControl(i[e]);l&&l.containsFocus()&&t.focus(!0)}}const a=this.disposeDetailCell;!!a&&a(o)||Control.disposeAll(o.detail);i.removeAt(s);l=format(l,{rowIndex:s});t.announceShortcut(l)}}showDetail(e,t=!1){const i=this._g,l=i.rows;let s=culture.FlexGridDetailProvider.accessibilityHelperMessage.showDetail,o=this._toIndex(e);if(i.rows._frozenInternal>0&&o<=i.rows._frozenInternal-1){i.rows.frozenDetailChildren+=1;i.rows._frozenInternal+=1}else if(i.rows._frozenInternal<0&&i.rows.isFrozen(o)){i.rows.frozenDetailChildren+=1;i.rows._frozenInternal-=1}o>0&&l[o]instanceof DetailRow&&o--;const a=l[o].dataItem;for(;o<l.length-1&&l[o+1].dataItem==a;)o++;if(t){let e=i.selection,t=!1;for(let i=0;i<l.length-1;i++)if(i!=o&&l[i+1]instanceof DetailRow){this.hideDetail(i);i<o&&o--;if(i<e.row){e.row--;e.row2--;t=!0}}t&&i.select(e,!1)}if(!this.isDetailVisible(o)&&this._hasDetail(o)){const e=new DetailRow(l[o]),t=this._createDetailCell(l[o]);e.detail=t;if(t){l.insert(o+1,e);s=format(s,{rowIndex:o+1});i.announceShortcut(s);const a=i.containsFocus();if(this._animated){const e=t.style;e.transform="translateY(-100%)";e.opacity="0";animate(l=>{if(l<1){e.transform=`translateY(${(100*-(1-l)).toFixed(0)}%)`;e.opacity=(l*l).toString()}else{e.transform=e.opacity="";Control.invalidateAll(t);a&&i.hostElement&&i.scrollIntoView(o,-1)}})}else a&&i.scrollIntoView(o,-1,!0)}}}_sizeDetailRow(e,t=!1){const i=this._g,l=e.detail;Control.refreshAll(l);const s=t?l.scrollHeight:l.offsetHeight;let o=s+i._cellPadVert+1,a=this._maxHeight;isNumber(a)&&a>0&&o>a&&(o=a);e.height=o;l.style.height||(l.style.height="100%");const r=l.querySelector("."+FlexGridClsNames.hostElement);r&&!r.style.height&&(r.style.height="100%");return s}_handleFrozenCells(){const e=this._g,t=e.hostElement,i="."+FlexGridClsNames.hostElement,l=Control.getControl(t.querySelector(i));if(l instanceof FlexGrid&&(l.rows._frozenInternal||l.columns._frozenInternal)){setCss([e._eTL,e._eBL,e._eCFtr,e._eRHdr,e._eMarquee],{zIndex:"13"});setCss(e._eCHdr,{zIndex:"14"});const l=t.querySelectorAll("."+FlexGridClsNames.frozen);for(let e=0;e<l.length;e++){const s=l[e];if(closest(s,i)==t){const e=parseInt(s.style.zIndex);s.style.zIndex=(e%10+10).toString()}}}}_toIndex(e){return e instanceof Row?e.index:asNumber(e)}_hdrClick(e){if(!e.defaultPrevented&&0==e.button&&closestClass(e.target,FlexGridDetailProvider._WJC_DETAIL)){const t=DetailVisibilityMode;switch(this._mode){case t.ExpandMulti:case t.ExpandSingle:{let t=this._g,i=t.hostElement,l=i&&i.offsetHeight&&i.offsetWidth,s=t.hitTest(e.target);s.panel||(s=t.hitTest(e));s.panel&&l&&this._toggleRowDetail(s.row)&&e.preventDefault();break}}}}_toggleRowDetail(e){if(e>-1){if(this.isDetailVisible(e)){this.hideDetail(e);return!0}if(this._hasDetail(e)){this.showDetail(e,this._mode==DetailVisibilityMode.ExpandSingle);return!0}}return!1}_selectionChanged(e,t){if(this._mode==DetailVisibilityMode.Selection){this._toSel&&clearTimeout(this._toSel);this._toSel=setTimeout(()=>{if(!e._selHdl||!e._selHdl.selection)return;const t=e._selHdl.selection.row;t>-1?this.showDetail(t,!0):this.hideDetail()},300)}}_formatItem(e,t){const i=this._g,l=t.cell,s=t.getRow(),o=DetailVisibilityMode;if(t.panel==i.cells&&s instanceof DetailRow&&null!=s.detail&&!hasClass(l,FlexGridDetailProviderClsNames.detail)){addClass(l,FlexGridDetailProviderClsNames.detail);addClass(l.parentElement,FlexGridDetailProviderClsNames.detailRow);l.textContent="";l.style.textAlign="";l.className=l.className.replace(/wj-align-[\S]+/g,"");l.appendChild(s.detail);null==s.height?0===this._sizeDetailRow(s)&&setTimeout(()=>{this._sizeDetailRow(s,!0)},1):Control.refreshAll(s.detail)}if(t.panel==i.rowHeaders&&0==t.col&&this._hasDetail(t.row)){l.style.cursor="";switch(this._mode){case o.ExpandMulti:case o.ExpandSingle:{const e=this.isDetailVisible(t.row),i=e?"minus":"plus",s=FlexGridDetailProvider._WJC_DETAIL;l.innerHTML=`<div class="${InputFormElementsClsNames.btn} ${GlyphClsNames.btnGlyph} `+s+'" role="button" tabindex="-1">'+`<span class="${GlyphClsNames.glyph}-`+i+'"></span></div>';const o=l.children[0],a=culture.FlexGridDetailProvider.ariaLabels.toggleDetail;setAriaLabel(o,a);setAttribute(o,"aria-expanded",e)}}}}_resizedRow(e,t){const i=t.getRow();i instanceof DetailRow&&i.detail&&Control.refreshAll(i.detail)}_hasDetail(e){const t=this._g.rows[e];return isFunction(this._rowHasDetailFn)?this._rowHasDetailFn(t):this._isRegularRow(t)}_isRegularRow(e){return!(e instanceof _NewRowTemplate||e instanceof DetailRow)&&!(e instanceof GroupRow&&!this._g.childItemsPath)}_createDetailCell(e){return this.createDetailCell?this.createDetailCell(e):null}}FlexGridDetailProvider._WJC_DETAIL=FlexGridDetailProviderClsNames.elemDetail;_registerModule("wijmo.grid.detail",selfModule);