UNPKG

ag-grid

Version:

Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components

92 lines (67 loc) 2.63 kB
import {ICellRenderer} from "./iCellRenderer"; import {Utils as _} from "../../utils"; import {Component} from "../../widgets/component"; export class AnimateSlideCellRenderer extends Component implements ICellRenderer { private static TEMPLATE = '<span>' + '<span class="ag-value-slide-current"></span>' + '</span>'; private params: any; private eCurrent: HTMLElement; private ePrevious: HTMLElement; private lastValue: any; private refreshCount = 0; constructor() { super(AnimateSlideCellRenderer.TEMPLATE); this.eCurrent = this.queryForHtmlElement('.ag-value-slide-current'); } public init(params: any): void { this.params = params; this.refresh(params); } public addSlideAnimation(): void { this.refreshCount++; // below we keep checking this, and stop working on the animation // if it no longer matches - this means another animation has started // and this one is stale. let refreshCountCopy = this.refreshCount; // if old animation, remove it if (this.ePrevious) { this.getGui().removeChild(this.ePrevious); } this.ePrevious = _.loadTemplate('<span class="ag-value-slide-previous ag-value-slide-out"></span>'); this.ePrevious.innerHTML = this.eCurrent.innerHTML; this.getGui().insertBefore(this.ePrevious, this.eCurrent); // having timeout of 0 allows use to skip to the next css turn, // so we know the previous css classes have been applied. so the // complex set of setTimeout below creates the animation setTimeout( ()=> { if (refreshCountCopy !== this.refreshCount) { return; } _.addCssClass(this.ePrevious, 'ag-value-slide-out-end'); }, 50); setTimeout( ()=> { if (refreshCountCopy !== this.refreshCount) { return; } this.getGui().removeChild(this.ePrevious); this.ePrevious = null; }, 3000); } public refresh(params: any): boolean { let value = params.value; if (_.missing(value)) { value = ''; } if (value === this.lastValue) { return; } this.addSlideAnimation(); this.lastValue = value; if (_.exists(params.valueFormatted)) { this.eCurrent.innerHTML = params.valueFormatted; } else if (_.exists(params.value)) { this.eCurrent.innerHTML = value; } else { this.eCurrent.innerHTML = ''; } return true; } }