From 1c25afc0f82b2a2fa91d9f5496184e64be849a4e Mon Sep 17 00:00:00 2001 From: Dmitriy Schekhovtsov Date: Tue, 17 Jan 2017 22:31:49 +0200 Subject: [PATCH] fix(sortable): prop made public for AoT --- src/sortable/sortable.component.ts | 398 +++++++++++++++-------------- 1 file changed, 203 insertions(+), 195 deletions(-) diff --git a/src/sortable/sortable.component.ts b/src/sortable/sortable.component.ts index fbf882ee21..630fc3db6e 100644 --- a/src/sortable/sortable.component.ts +++ b/src/sortable/sortable.component.ts @@ -1,213 +1,221 @@ -import { Component, Input, Output, EventEmitter, Inject, forwardRef, animate, style, state, transition, keyframes, trigger } from '@angular/core'; +import { + Component, Input, Output, EventEmitter, forwardRef +} from '@angular/core'; import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'; -import 'rxjs/add/operator/first'; - import { DraggableItem } from './draggable-item'; import { DraggableItemService } from './draggable-item.service'; -const nullCallback = (arg?: any): void => { return void 0; }; - /* tslint:disable */ @Component({ - selector: 'bs-sortable', - exportAs: 'bs-sortable', - template: ` -
-
{{placeholderItem}}
-
{{item.value}}
-
`, - providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SortableComponent), multi: true }], + selector: 'bs-sortable', + exportAs: 'bs-sortable', + template: ` +
+
{{placeholderItem}}
+
{{item.value}}
+
`, + providers: [{ + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => SortableComponent), + multi: true + }], }) /* tslint:enable */ export class SortableComponent implements ControlValueAccessor { - private static globalZoneIndex: number = 0; - - /** field name if input array consists of objects */ - @Input() public fieldName: string; - - /** class name for items wrapper */ - @Input() public wrapperClass: string = ''; - - /** style object for items wrapper */ - @Input() public wrapperStyle: { [key: string]: string } = {}; - - /** class name for item */ - @Input() public itemClass: string = ''; - - /** style object for item */ - @Input() public itemStyle: { [key: string]: string } = {}; - - /** class name for active item */ - @Input() public itemActiveClass: string = ''; - - /** style object for active item */ - @Input() public itemActiveStyle: { [key: string]: string } = {}; - - /** class name for placeholder */ - @Input() public placeholderClass: string = ''; - - /** style object for placeholder */ - @Input() public placeholderStyle: { [key: string]: string } = {}; - - /** placeholder item which will be shown if collection is empty */ - @Input() public placeholderItem: string = ''; - - /** fired on array change (reordering, insert, remove), same as ngModelChange. - * Returns new items collection as a payload. - */ - @Output() public onChange: EventEmitter = new EventEmitter(); - - public showPlaceholder: boolean = false; - - private _items: SortableItem[]; - - private get items(): SortableItem[] { - return this._items; - } - - private set items(value: SortableItem[]) { - this._items = value; - let out = this.items.map((x: SortableItem) => x.initData); - this.onChanged(out); - this.onChange.emit(out); - } - - private onTouched: () => void = nullCallback; - private onChanged: (_: any) => void = nullCallback; - - private transfer: DraggableItemService; - private currentZoneIndex: number; - private activeItem: number = -1; - - public constructor(transfer: DraggableItemService) { - this.transfer = transfer; - this.currentZoneIndex = SortableComponent.globalZoneIndex++; - this.transfer.onCaptureItem().subscribe((item: DraggableItem) => this.onDrop(item)); - } - - public onItemDragstart(event: DragEvent, item: SortableItem, i: number): void { - this.initDragstartEvent(event); - this.onTouched(); - this.transfer.dragStart({ - event, - item, - i, - initialIndex: i, - lastZoneIndex: this.currentZoneIndex, - overZoneIndex: this.currentZoneIndex - }); - } - - public onItemDragover(event: DragEvent, i: number): void { - if (!this.transfer.getItem()) { - return; - } - event.preventDefault(); - let dragItem = this.transfer.captureItem(this.currentZoneIndex, this.items.length); - let newArray: any[] = []; - if (!this.items.length) { - newArray = [ dragItem.item ]; - } else if (dragItem.i > i) { - newArray = [ - ...this.items.slice(0, i), - dragItem.item, - ...this.items.slice(i, dragItem.i), - ...this.items.slice(dragItem.i + 1) - ]; - } else { // this.draggedItem.i < i - newArray = [ - ...this.items.slice(0, dragItem.i), - ...this.items.slice(dragItem.i + 1, i + 1), - dragItem.item, - ...this.items.slice(i + 1) - ]; - } - this.items = newArray; - dragItem.i = i; - this.activeItem = i; - this.updatePlaceholderState(); - } - - public cancelEvent(event: DragEvent): void { - if (!this.transfer.getItem() || !event) { - return; - } - event.preventDefault(); - } - - public onDrop(item: DraggableItem): void { - if (item && - item.overZoneIndex !== this.currentZoneIndex && - item.lastZoneIndex === this.currentZoneIndex - ) { - this.items = this.items.filter((x: SortableItem, i: number) => i !== item.i); - this.updatePlaceholderState(); - } - this.resetActiveItem(undefined); + private static globalZoneIndex: number = 0; + + /** field name if input array consists of objects */ + @Input() public fieldName: string; + + /** class name for items wrapper */ + @Input() public wrapperClass: string = ''; + + /** style object for items wrapper */ + @Input() public wrapperStyle: {[key: string]: string} = {}; + + /** class name for item */ + @Input() public itemClass: string = ''; + + /** style object for item */ + @Input() public itemStyle: {[key: string]: string} = {}; + + /** class name for active item */ + @Input() public itemActiveClass: string = ''; + + /** style object for active item */ + @Input() public itemActiveStyle: {[key: string]: string} = {}; + + /** class name for placeholder */ + @Input() public placeholderClass: string = ''; + + /** style object for placeholder */ + @Input() public placeholderStyle: {[key: string]: string} = {}; + + /** placeholder item which will be shown if collection is empty */ + @Input() public placeholderItem: string = ''; + + /** fired on array change (reordering, insert, remove), same as ngModelChange. + * Returns new items collection as a payload. + */ + @Output() public onChange: EventEmitter = new EventEmitter(); + + public showPlaceholder: boolean = false; + public activeItem: number = -1; + + public get items(): SortableItem[] { + return this._items; + } + + public set items(value: SortableItem[]) { + this._items = value; + let out = this.items.map((x: SortableItem) => x.initData); + this.onChanged(out); + this.onChange.emit(out); + } + + public onTouched: any = Function.prototype; + public onChanged: any = Function.prototype; + + private transfer: DraggableItemService; + private currentZoneIndex: number; + private _items: SortableItem[]; + + public constructor(transfer: DraggableItemService) { + this.transfer = transfer; + this.currentZoneIndex = SortableComponent.globalZoneIndex++; + this.transfer.onCaptureItem() + .subscribe((item: DraggableItem) => this.onDrop(item)); + } + + public onItemDragstart(event: DragEvent, item: SortableItem, i: number): void { + this.initDragstartEvent(event); + this.onTouched(); + this.transfer.dragStart({ + event, + item, + i, + initialIndex: i, + lastZoneIndex: this.currentZoneIndex, + overZoneIndex: this.currentZoneIndex + }); + } + + public onItemDragover(event: DragEvent, i: number): void { + if (!this.transfer.getItem()) { + return; } - - public resetActiveItem(event: DragEvent): void { - this.cancelEvent(event); - this.activeItem = -1; - } - - public registerOnChange(callback: (_: any) => void): void { - this.onChanged = callback; - } - - public registerOnTouched(callback: () => void): void { - this.onTouched = callback; + event.preventDefault(); + let dragItem = this.transfer.captureItem(this.currentZoneIndex, this.items.length); + let newArray: any[] = []; + if (!this.items.length) { + newArray = [dragItem.item]; + } else if (dragItem.i > i) { + newArray = [ + ...this.items.slice(0, i), + dragItem.item, + ...this.items.slice(i, dragItem.i), + ...this.items.slice(dragItem.i + 1) + ]; + } else { // this.draggedItem.i < i + newArray = [ + ...this.items.slice(0, dragItem.i), + ...this.items.slice(dragItem.i + 1, i + 1), + dragItem.item, + ...this.items.slice(i + 1) + ]; } - - public writeValue(value: any[]): void { - if (value) { - this.items = value.map((x: any, i: number) => ({ id: i, initData: x, value: this.fieldName ? x[this.fieldName] : x })); - } else { - this.items = []; - } - this.updatePlaceholderState(); + this.items = newArray; + dragItem.i = i; + this.activeItem = i; + this.updatePlaceholderState(); + } + + public cancelEvent(event: DragEvent): void { + if (!this.transfer.getItem() || !event) { + return; } - - public updatePlaceholderState(): void { - this.showPlaceholder = !this._items.length; + event.preventDefault(); + } + + public onDrop(item: DraggableItem): void { + if (item && + item.overZoneIndex !== this.currentZoneIndex && + item.lastZoneIndex === this.currentZoneIndex + ) { + this.items = this.items.filter((x: SortableItem, i: number) => i !== item.i); + this.updatePlaceholderState(); } - - public getItemStyle(isActive: boolean): {} { - return isActive ? Object.assign({}, this.itemStyle, this.itemActiveStyle) : this.itemStyle; - } - - private initDragstartEvent(event: DragEvent): void { - // it is necessary for mozilla - // data type should be 'Text' instead of 'text/plain' to keep compatibility with IE - event.dataTransfer.setData('Text', 'placeholder'); + this.resetActiveItem(undefined); + } + + public resetActiveItem(event: DragEvent): void { + this.cancelEvent(event); + this.activeItem = -1; + } + + public registerOnChange(callback: (_: any) => void): void { + this.onChanged = callback; + } + + public registerOnTouched(callback: () => void): void { + this.onTouched = callback; + } + + public writeValue(value: any[]): void { + if (value) { + this.items = value.map((x: any, i: number) => ({ + id: i, + initData: x, + value: this.fieldName ? x[this.fieldName] : x + })); + } else { + this.items = []; } + this.updatePlaceholderState(); + } + + public updatePlaceholderState(): void { + this.showPlaceholder = !this._items.length; + } + + public getItemStyle(isActive: boolean): {} { + return isActive + ? Object.assign({}, this.itemStyle, this.itemActiveStyle) + : this.itemStyle; + } + + private initDragstartEvent(event: DragEvent): void { + // it is necessary for mozilla + // data type should be 'Text' instead of 'text/plain' to keep compatibility + // with IE + event.dataTransfer.setData('Text', 'placeholder'); + } } export declare interface SortableItem { - id: number; - value: string; - initData: any; + id: number; + value: string; + initData: any; }