sv-tree-view
Version:
<p align="center"> <img style="text-align: center" src="https://angular-shortcode.web.app/assets/icons/logo-128.png"/> <h1 align="center">Angular Shortcode</h1> </p>
132 lines (126 loc) • 6.69 kB
JavaScript
import { EventEmitter, Component, ChangeDetectorRef, Input, Output, NgModule } from '@angular/core';
import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
import { MatIconModule } from '@angular/material/icon';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { CommonModule } from '@angular/common';
class SvTreeViewComponent {
constructor(cdr) {
this.cdr = cdr;
this.fieldName = 'label';
this.checkbox = false;
this.draggable = false;
this.autoCheck = false;
this.rowClick = new EventEmitter();
this.rowExpand = new EventEmitter();
this.rowSelect = new EventEmitter();
this.changeRowIndeterminateStatus = new EventEmitter();
}
ngOnInit() {
}
ngAfterContentChecked() {
this.cdr.detectChanges();
}
expandRow(row) {
row.expanded = !row.expanded;
this.rowExpand.emit(row);
}
clickRow(row) {
if (!this.checkbox) {
this.rowClick.emit(row);
}
}
drop(event) {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
}
else {
transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
}
}
rowSelected(row) {
var _a;
row.selected = !row.selected;
if (((_a = row.children) === null || _a === void 0 ? void 0 : _a.length) && this.autoCheck) {
this.checkNestedList(row.children, row.selected);
}
if (this.autoCheck) {
this.checkEntireList(this.treeList);
}
this.rowSelect.emit(row);
}
checkNestedList(list, value) {
list.forEach(x => {
var _a;
x.selected = value;
if ((_a = x.children) === null || _a === void 0 ? void 0 : _a.length) {
this.checkNestedList(x.children, value);
}
});
}
checkIndeterminate(row) {
if (this.autoCheck) {
this.checkEntireList(this.treeList);
if (row.hasOwnProperty('indeterminate')) {
this.changeRowIndeterminateStatus.emit(row);
}
}
}
checkEntireList(list) {
list.forEach(item => {
var _a;
if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
item.indeterminate = !item.children.every(i => i.selected) && item.children.some(i => i.selected);
item.selected = item.children.every(x => x.selected);
this.checkEntireList(item.children);
}
});
}
}
SvTreeViewComponent.decorators = [
{ type: Component, args: [{
selector: 'sv-tree-view',
template: "<div class=\"sv-tree\" cdkDropListGroup>\n <ng-container [ngTemplateOutlet]=\"tree\" [ngTemplateOutletContext]=\"{list: treeList}\"></ng-container>\n</div>\n\n<ng-template #tree let-list=\"list\">\n <div class=\"sv-tree-list\"\n cdkDropList\n [cdkDropListData]=\"list\"\n [cdkDropListDisabled]=\"!draggable\"\n (cdkDropListDropped)=\"drop($event)\">\n <div class=\"sv-tree-content\"\n cdkDrag\n *ngFor=\"let item of list\">\n <div class=\"sv-tree-content-row\"\n [style.cursor]=\"checkbox ? null : 'pointer'\"\n (click)=\"clickRow(item)\">\n <div class=\"sv-tree-content-row-expand\" (click)=\"expandRow(item)\">\n <mat-icon *ngIf=\"item.children?.length\">{{item.expanded ? 'expand_less' : 'expand_more'}}</mat-icon>\n </div>\n <div class=\"sv-tree-content-row-checkbox\" *ngIf=\"checkbox\">\n <mat-checkbox\n [indeterminate]=\"item.indeterminate\"\n [checked]=\"item.selected\"\n [disabled]=\"item.disabled\"\n (indeterminateChange)=\"checkIndeterminate(item)\"\n (change)=\"rowSelected(item)\">\n </mat-checkbox>\n </div>\n <ng-container *ngIf=\"!customTemplate\">\n <label>{{item[fieldName]}}</label>\n </ng-container>\n <ng-container *ngIf=\"customTemplate\">\n <ng-template [ngTemplateOutlet]=\"customTemplate\" [ngTemplateOutletContext]=\"{data: item}\"></ng-template>\n </ng-container>\n </div>\n <div *ngIf=\"item?.children?.length && item.expanded\" [style.marginLeft]=\"'24px'\">\n <ng-container [ngTemplateOutlet]=\"tree\" [ngTemplateOutletContext]=\"{list: item.children}\"></ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n",
styles: [".sv-tree{height:100%}.sv-tree,.sv-tree-content{width:100%;display:flex;flex-direction:column}.sv-tree-content-row{height:38px;display:flex;align-items:center;border-radius:4px}.sv-tree-content-row:hover{background-color:#ececec}.sv-tree-content-row-checkbox,.sv-tree-content-row-expand{width:24px;height:24px}.cdk-drag-preview{background-color:hsla(0,0%,98%,.8313725490196079);box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.sv-tree-content:last-child{border:none}.sv-tree-list.cdk-drop-list-dragging .sv-tree-content:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}"]
},] }
];
SvTreeViewComponent.ctorParameters = () => [
{ type: ChangeDetectorRef }
];
SvTreeViewComponent.propDecorators = {
treeList: [{ type: Input }],
fieldName: [{ type: Input }],
checkbox: [{ type: Input }],
draggable: [{ type: Input }],
autoCheck: [{ type: Input }],
customTemplate: [{ type: Input }],
rowClick: [{ type: Output }],
rowExpand: [{ type: Output }],
rowSelect: [{ type: Output }],
changeRowIndeterminateStatus: [{ type: Output }]
};
class SvTreeViewModule {
}
SvTreeViewModule.decorators = [
{ type: NgModule, args: [{
declarations: [
SvTreeViewComponent
],
imports: [
CommonModule,
MatIconModule,
MatCheckboxModule,
DragDropModule
],
exports: [
SvTreeViewComponent
]
},] }
];
/*
* Public API Surface of sv-tree-view
*/
/**
* Generated bundle index. Do not edit.
*/
export { SvTreeViewComponent, SvTreeViewModule };
//# sourceMappingURL=sv-tree-view.js.map