@mescius/wijmo.grid.detail
Version:
UI library for pure JS, Angular, React, Vue and more...
14 lines (13 loc) • 11.4 kB
JavaScript
/*!
*
* 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
*
*/
"use strict";var __importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var i in e)Object.hasOwnProperty.call(e,i)&&(t[i]=e[i]);t.default=e;return t};Object.defineProperty(exports,"__esModule",{value:!0});const wijmo_grid_1=require("@mescius/wijmo.grid"),wijmo_1=require("@mescius/wijmo"),selfModule=__importStar(require("@mescius/wijmo.grid.detail"));class DetailRow extends wijmo_grid_1.Row{constructor(e){super();this.isReadOnly=!0}get detail(){return this._detail}set detail(e){this._detail=e}}exports.DetailRow=DetailRow;class DetailMergeManager extends wijmo_grid_1.MergeManager{constructor(e){super();this._originalMergeManager=e.mergeManager}getMergedRange(e,t,i,l=!0){switch(e.cellType){case wijmo_grid_1.CellType.Cell:if(e.rows[t]instanceof DetailRow){e.columns._frozenInternal>0&&e.grid&&(e.grid.cloneFrozenCells=!1);return new wijmo_grid_1.CellRange(t,0,t,e.columns.length-1)}break;case wijmo_grid_1.CellType.RowHeader:{let l=_isFrozen(e,t),o=_isNew(e,t),s=e.rows[t].dataItem;!s&&t>0&&e.rows[t]instanceof DetailRow&&(s=e.rows[t-1].dataItem);let r=t;for(;r>0&&e.rows[r-1].dataItem==s&&_isFrozen(e,r-1)==l&&_isNew(e,r-1)==o;)r--;let a=t;for(;a<e.rows.length-1&&e.rows[a+1].dataItem==s&&_isFrozen(e,a+1)==l&&_isNew(e,a+1)==o;)a++;a<e.rows.length-1&&e.rows[a+1]instanceof DetailRow&&_isFrozen(e,a+1)==l&&_isNew(e,a+1)==o&&a++;return r!=a?new wijmo_grid_1.CellRange(r,i,a,i):null}}return this._originalMergeManager.getMergedRange(e,t,i,l)}}exports.DetailMergeManager=DetailMergeManager;function _isFrozen(e,t){return t<e.rows._frozenInternal}function _isNew(e,t){return e.rows[t]instanceof wijmo_grid_1._NewRowTemplate}exports.FlexGridDetailProviderClsNames={detail:"wj-detail",detailRow:"wj-detail-row",elemDetail:"wj-elem-detail"};wijmo_1._addCultureInfo("FlexGridDetailProvider",{ariaLabels:{toggleDetail:"Toggle Row Detail"},accessibilityHelperMessage:{showDetail:"Show detail row: {rowIndex}",hideDetail:"Hide detail row: {rowIndex}"}});var KeyAction,DetailVisibilityMode;!function(e){e[e.None=0]="None";e[e.ToggleDetail=1]="ToggleDetail"}(KeyAction=exports.KeyAction||(exports.KeyAction={}));!function(e){e[e.Code=0]="Code";e[e.Selection=1]="Selection";e[e.ExpandSingle=2]="ExpandSingle";e[e.ExpandMulti=3]="ExpandMulti"}(DetailVisibilityMode=exports.DetailVisibilityMode||(exports.DetailVisibilityMode={}));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==wijmo_1.Key.Enter&&this._keyActionEnter==KeyAction.ToggleDetail){const t=this._g.selection.row,i=this._g.activePanel.cellType;this._toggleRowDetail(t)&&i===wijmo_grid_1.CellType.Cell&&e.preventDefault()}},!0);e._root.addEventListener("scroll",()=>{wijmo_1.hasClass(e.activeCell,exports.FlexGridDetailProviderClsNames.detail)&&wijmo_1.Control.sharedState.InvalidScroll||wijmo_1.Control.refreshAll(e._root)});wijmo_1.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=wijmo_1.asEnum(e,DetailVisibilityMode))!=this._mode){this._mode=e;this.hideDetail();this._g.invalidate()}}get maxHeight(){return this._maxHeight}set maxHeight(e){if((e=wijmo_1.asNumber(e,!0))!=this._maxHeight){this._maxHeight=e;this.hideDetail()}}get isAnimated(){return this._animated}set isAnimated(e){e!=this._animated&&(this._animated=wijmo_1.asBoolean(e))}get keyActionEnter(){return this._keyActionEnter}set keyActionEnter(e){this._keyActionEnter=wijmo_1.asEnum(e,KeyAction)}get createDetailCell(){return this._createDetailCellFn}set createDetailCell(e){this._createDetailCellFn=wijmo_1.asFunction(e,!0)}get disposeDetailCell(){return this._disposeDetailCellFn}set disposeDetailCell(e){this._disposeDetailCellFn=wijmo_1.asFunction(e,!0)}get rowHasDetail(){return this._rowHasDetailFn}set rowHasDetail(e){if((e=wijmo_1.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=wijmo_1.culture.FlexGridDetailProvider.accessibilityHelperMessage.hideDetail;if(null==e){for(let e=0;e<i.length;e++)i[e]instanceof DetailRow&&this.hideDetail(e);return}let o=this._toIndex(e);if(t.rows._frozenInternal>0&&o<=t.rows._frozenInternal-1){t.rows.frozenDetailChildren-=1;t.rows._frozenInternal-=1}else if(t.rows._frozenInternal<0&&t.rows.isFrozen(o)){t.rows.frozenDetailChildren-=1;t.rows._frozenInternal+=1}for(;!(i[o]instanceof DetailRow)&&o<i.length-1;)o++;const s=i[o];if(s instanceof DetailRow){const e=s.detail.parentElement;if(e){const i=e.querySelectorAll("."+wijmo_1.ControlClsNames.hostElement);for(let e=0;e<i.length;e++){const l=wijmo_1.Control.getControl(i[e]);l&&l.containsFocus()&&t.focus(!0)}}const r=this.disposeDetailCell;!!r&&r(s)||wijmo_1.Control.disposeAll(s.detail);i.removeAt(o);l=wijmo_1.format(l,{rowIndex:o});t.announceShortcut(l)}}showDetail(e,t=!1){const i=this._g,l=i.rows;let o=wijmo_1.culture.FlexGridDetailProvider.accessibilityHelperMessage.showDetail,s=this._toIndex(e);if(i.rows._frozenInternal>0&&s<=i.rows._frozenInternal-1){i.rows.frozenDetailChildren+=1;i.rows._frozenInternal+=1}else if(i.rows._frozenInternal<0&&i.rows.isFrozen(s)){i.rows.frozenDetailChildren+=1;i.rows._frozenInternal-=1}s>0&&l[s]instanceof DetailRow&&s--;const r=l[s].dataItem;for(;s<l.length-1&&l[s+1].dataItem==r;)s++;if(t){let e=i.selection,t=!1;for(let i=0;i<l.length-1;i++)if(i!=s&&l[i+1]instanceof DetailRow){this.hideDetail(i);i<s&&s--;if(i<e.row){e.row--;e.row2--;t=!0}}t&&i.select(e,!1)}if(!this.isDetailVisible(s)&&this._hasDetail(s)){const e=new DetailRow(l[s]),t=this._createDetailCell(l[s]);e.detail=t;if(t){l.insert(s+1,e);o=wijmo_1.format(o,{rowIndex:s+1});i.announceShortcut(o);const r=i.containsFocus();if(this._animated){const e=t.style;e.transform="translateY(-100%)";e.opacity="0";wijmo_1.animate(l=>{if(l<1){e.transform=`translateY(${(100*-(1-l)).toFixed(0)}%)`;e.opacity=(l*l).toString()}else{e.transform=e.opacity="";wijmo_1.Control.invalidateAll(t);r&&i.hostElement&&i.scrollIntoView(s,-1)}})}else r&&i.scrollIntoView(s,-1,!0)}}}_sizeDetailRow(e,t=!1){const i=this._g,l=e.detail;wijmo_1.Control.refreshAll(l);const o=t?l.scrollHeight:l.offsetHeight;let s=o+i._cellPadVert+1,r=this._maxHeight;wijmo_1.isNumber(r)&&r>0&&s>r&&(s=r);e.height=s;l.style.height||(l.style.height="100%");const a=l.querySelector("."+wijmo_grid_1.FlexGridClsNames.hostElement);a&&!a.style.height&&(a.style.height="100%");return o}_handleFrozenCells(){const e=this._g,t=e.hostElement,i="."+wijmo_grid_1.FlexGridClsNames.hostElement,l=wijmo_1.Control.getControl(t.querySelector(i));if(l instanceof wijmo_grid_1.FlexGrid&&(l.rows._frozenInternal||l.columns._frozenInternal)){wijmo_1.setCss([e._eTL,e._eBL,e._eCFtr,e._eRHdr,e._eMarquee],{zIndex:"13"});wijmo_1.setCss(e._eCHdr,{zIndex:"14"});const l=t.querySelectorAll("."+wijmo_grid_1.FlexGridClsNames.frozen);for(let e=0;e<l.length;e++){const o=l[e];if(wijmo_1.closest(o,i)==t){const e=parseInt(o.style.zIndex);o.style.zIndex=(e%10+10).toString()}}}}_toIndex(e){return e instanceof wijmo_grid_1.Row?e.index:wijmo_1.asNumber(e)}_hdrClick(e){if(!e.defaultPrevented&&0==e.button&&wijmo_1.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,o=t.hitTest(e.target);o.panel||(o=t.hitTest(e));o.panel&&l&&this._toggleRowDetail(o.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,o=t.getRow(),s=DetailVisibilityMode;if(t.panel==i.cells&&o instanceof DetailRow&&null!=o.detail&&!wijmo_1.hasClass(l,exports.FlexGridDetailProviderClsNames.detail)){wijmo_1.addClass(l,exports.FlexGridDetailProviderClsNames.detail);wijmo_1.addClass(l.parentElement,exports.FlexGridDetailProviderClsNames.detailRow);l.textContent="";l.style.textAlign="";l.className=l.className.replace(/wj-align-[\S]+/g,"");l.appendChild(o.detail);null==o.height?0===this._sizeDetailRow(o)&&setTimeout(()=>{this._sizeDetailRow(o,!0)},1):wijmo_1.Control.refreshAll(o.detail)}if(t.panel==i.rowHeaders&&0==t.col&&this._hasDetail(t.row)){l.style.cursor="";switch(this._mode){case s.ExpandMulti:case s.ExpandSingle:{const e=this.isDetailVisible(t.row),i=e?"minus":"plus",o=FlexGridDetailProvider._WJC_DETAIL;l.innerHTML=`<div class="${wijmo_1.InputFormElementsClsNames.btn} ${wijmo_1.GlyphClsNames.btnGlyph} `+o+'" role="button" tabindex="-1">'+`<span class="${wijmo_1.GlyphClsNames.glyph}-`+i+'"></span></div>';const s=l.children[0],r=wijmo_1.culture.FlexGridDetailProvider.ariaLabels.toggleDetail;wijmo_1.setAriaLabel(s,r);wijmo_1.setAttribute(s,"aria-expanded",e)}}}}_resizedRow(e,t){const i=t.getRow();i instanceof DetailRow&&i.detail&&wijmo_1.Control.refreshAll(i.detail)}_hasDetail(e){const t=this._g.rows[e];return wijmo_1.isFunction(this._rowHasDetailFn)?this._rowHasDetailFn(t):this._isRegularRow(t)}_isRegularRow(e){return!(e instanceof wijmo_grid_1._NewRowTemplate||e instanceof DetailRow)&&!(e instanceof wijmo_grid_1.GroupRow&&!this._g.childItemsPath)}_createDetailCell(e){return this.createDetailCell?this.createDetailCell(e):null}}FlexGridDetailProvider._WJC_DETAIL=exports.FlexGridDetailProviderClsNames.elemDetail;exports.FlexGridDetailProvider=FlexGridDetailProvider;wijmo_1._registerModule("wijmo.grid.detail",selfModule);