Browse Source

feat(components/tree): add drop position to drop event

pull/4793/head
mehmet-erim 6 years ago
parent
commit
a998df79c8
  1. 16
      npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts

16
npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts

@ -7,9 +7,11 @@ import {
TemplateRef, TemplateRef,
ViewEncapsulation, ViewEncapsulation,
} from '@angular/core'; } from '@angular/core';
import { NzFormatEmitEvent } from 'ng-zorro-antd/tree'; import { NzFormatEmitEvent, NzFormatBeforeDropEvent } from 'ng-zorro-antd/tree';
import { of } from 'rxjs'; import { of } from 'rxjs';
export type DropEvent = NzFormatEmitEvent & { pos: -1 | 0 | 1 };
@Component({ @Component({
selector: 'abp-tree', selector: 'abp-tree',
templateUrl: 'tree.component.html', templateUrl: 'tree.component.html',
@ -20,11 +22,13 @@ import { of } from 'rxjs';
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
}) })
export class TreeComponent { export class TreeComponent {
dropPosition: -1 | 0 | 1;
@ContentChild('menu') menu: TemplateRef<any>; @ContentChild('menu') menu: TemplateRef<any>;
@Output() readonly checkedKeysChange = new EventEmitter(); @Output() readonly checkedKeysChange = new EventEmitter();
@Output() readonly expandedKeysChange = new EventEmitter<string[]>(); @Output() readonly expandedKeysChange = new EventEmitter<string[]>();
@Output() readonly selectedNodeChange = new EventEmitter(); @Output() readonly selectedNodeChange = new EventEmitter();
@Output() readonly dropOver = new EventEmitter<NzFormatEmitEvent>(); @Output() readonly dropOver = new EventEmitter<DropEvent>();
@Input() draggable: boolean; @Input() draggable: boolean;
@Input() checkable: boolean; @Input() checkable: boolean;
@Input() checkStrictly: boolean; @Input() checkStrictly: boolean;
@ -33,7 +37,10 @@ export class TreeComponent {
@Input() expandedKeys: string[] = []; @Input() expandedKeys: string[] = [];
@Input() selectedNode: any; @Input() selectedNode: any;
@Input() isNodeSelected = node => this.selectedNode?.id === node.key; @Input() isNodeSelected = node => this.selectedNode?.id === node.key;
@Input() beforeDrop = () => of(false); @Input() beforeDrop = (event: NzFormatBeforeDropEvent) => {
this.dropPosition = event.pos;
return of(false);
};
onSelectedNodeChange(node) { onSelectedNodeChange(node) {
this.selectedNode = node.origin.entity; this.selectedNode = node.origin.entity;
@ -50,9 +57,10 @@ export class TreeComponent {
this.expandedKeysChange.emit(event.keys); this.expandedKeysChange.emit(event.keys);
} }
onDrop(event: NzFormatEmitEvent) { onDrop(event: DropEvent) {
event.event.stopPropagation(); event.event.stopPropagation();
event.event.preventDefault(); event.event.preventDefault();
event.pos = this.dropPosition;
this.dropOver.emit(event); this.dropOver.emit(event);
} }

Loading…
Cancel
Save