Skip to content

Commit

Permalink
feat(): single / static item support
Browse files Browse the repository at this point in the history 
closes : #80
closes : #53
close #42
  • Loading branch information
@triniwiz
triniwiz committed Dec 8, 2018
1 parent a6beaeb commit 2b0a753
Show file tree
Hide file tree
Showing 8 changed files with 348 additions and 142 deletions.
72 changes: 39 additions & 33 deletions src/angular/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,53 @@
import {
ElementRef,
IterableDiffers,
Component,
ChangeDetectionStrategy,
forwardRef,
NgModule,
NO_ERRORS_SCHEMA
ChangeDetectionStrategy,
Component,
Directive,
ElementRef,
forwardRef,
IterableDiffers,
NgModule,
NO_ERRORS_SCHEMA
} from '@angular/core';

import { Pager } from '../';
import {
TEMPLATED_ITEMS_COMPONENT,
TemplatedItemsComponent,
TemplateKeyDirective
PagerItemDirective,
TEMPLATED_ITEMS_COMPONENT,
TemplatedItemsComponent,
TemplateKeyDirective
} from './pager-items-comp';

@Component({
selector: 'Pager',
template: `
<DetachedContainer>
<Placeholder #loader></Placeholder>
</DetachedContainer>`,
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{
provide: TEMPLATED_ITEMS_COMPONENT,
useExisting: forwardRef(() => PagerComponent)
}
]
selector: 'Pager',
template: `
<DetachedContainer>
<Placeholder #loader></Placeholder>
</DetachedContainer>`,
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{
provide: TEMPLATED_ITEMS_COMPONENT,
useExisting: forwardRef(() => PagerComponent)
}
]
})

export class PagerComponent extends TemplatedItemsComponent {
public get nativeElement(): Pager {
return this.templatedItemsView;
}
public get nativeElement(): Pager {
return this.templatedItemsView;
}

protected templatedItemsView: Pager;
protected templatedItemsView: Pager;

constructor(_elementRef: ElementRef, _iterableDiffers: IterableDiffers) {
super(_elementRef, _iterableDiffers);
}
constructor(_elementRef: ElementRef, _iterableDiffers: IterableDiffers) {
super(_elementRef, _iterableDiffers);
}
}

@NgModule({
declarations: [PagerComponent, TemplateKeyDirective],
exports: [PagerComponent, TemplateKeyDirective],
schemas: [NO_ERRORS_SCHEMA]
declarations: [PagerComponent, TemplateKeyDirective, PagerItemDirective],
exports: [PagerComponent, TemplateKeyDirective, PagerItemDirective],
schemas: [NO_ERRORS_SCHEMA]
})
export class PagerModule {}
export class PagerModule {
}
51 changes: 48 additions & 3 deletions src/angular/pager-items-comp.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
IterableDiffer,
IterableDiffers,
OnDestroy,
OnInit,
Output,
TemplateRef,
ViewChild,
Expand All @@ -25,13 +26,14 @@ import { EventData, LayoutBase, Template } from 'tns-core-modules/ui/layouts/lay
import { ObservableArray } from 'tns-core-modules/data/observable-array';
import { profile } from 'tns-core-modules/profiling';

import { getSingleViewRecursive, registerElement } from 'nativescript-angular/element-registry';
import { getSingleViewRecursive, InvisibleNode, registerElement } from 'nativescript-angular/element-registry';
import { isEnabled as isLogEnabled } from 'tns-core-modules/trace';
import { PagerError, PagerLog } from '../pager.common';
import { PagerError, PagerItem, PagerLog } from '../pager.common';
import { Pager } from '../';
import { isBlank } from 'nativescript-angular/lang-facade';

registerElement('Pager', () => Pager);
registerElement('PagerItem', () => PagerItem);

const NG_VIEW = '_ngViewRef';

Expand Down Expand Up @@ -72,6 +74,7 @@ export interface SetupItemViewArgs {
export abstract class TemplatedItemsComponent
implements DoCheck, OnDestroy, AfterContentInit {
public abstract get nativeElement(): Pager;

private viewInitialized: true;
protected templatedItemsView: Pager;
protected _items: any;
Expand Down Expand Up @@ -144,7 +147,6 @@ export abstract class TemplatedItemsComponent
if (isLogEnabled()) {
PagerLog('TemplatedItemsView.ngAfterContentInit()');
}

this.setItemTemplates();
}

Expand All @@ -153,6 +155,7 @@ export abstract class TemplatedItemsComponent
}

private setItemTemplates() {
if (!this.items) return;
// The itemTemplateQuery may be changed after list items are added that contain <template> inside,
// so cache and use only the original template to avoid errors.
this.itemTemplate = this.itemTemplateQuery;
Expand Down Expand Up @@ -193,6 +196,8 @@ export abstract class TemplatedItemsComponent
return;
}

if (!this.items) return;

const index = args.index;
const items = (<any>args.object).items;
const currentItem =
Expand Down Expand Up @@ -325,6 +330,46 @@ export function getItemViewRoot(

export const TEMPLATED_ITEMS_COMPONENT = new InjectionToken<TemplatedItemsComponent>('TemplatedItemsComponent');

@Directive({
selector: '[pagerItem]'
})
export class PagerItemDirective implements OnInit {
private item: PagerItem;

constructor(
private templateRef: TemplateRef<any>,
@Inject(TEMPLATED_ITEMS_COMPONENT)
@Host()
private owner: TemplatedItemsComponent,
private viewContainer: ViewContainerRef
) {
}

private ensureItem() {
if (!this.item) {
this.item = new PagerItem();
}
}

private applyConfig() {
this.ensureItem();
}

ngOnInit() {
this.applyConfig();

const viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
// Filter out text nodes and comments
const realViews = viewRef.rootNodes.filter(node =>
!(node instanceof InvisibleNode));

if (realViews.length > 0) {
const view = realViews[0];
this.owner.nativeElement._addChildFromBuilder('PagerItem', view);
}
}
}

@Directive({selector: '[pagerTemplateKey]'})
export class TemplateKeyDirective {
constructor(
Expand Down
43 changes: 40 additions & 3 deletions src/pager.android.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ export class Pager extends PagerBase {
constructor() {
super();
pagers.set(this._domId, new WeakRef<Pager>(this));
this._childrenViews = new Map<number, View>();
}

get views() {
Expand Down Expand Up @@ -170,7 +171,7 @@ export class Pager extends PagerBase {
}

get _childrenCount(): number {
return this.items ? this.items.length : 0;
return this.items ? this.items.length : this._childrenViews ? this._childrenViews.size : 0;
}

[itemsProperty.getDefault](): any {
Expand All @@ -184,6 +185,16 @@ export class Pager extends PagerBase {
}
}

onLoaded(): void {
super.onLoaded();
if (!this.items && this._childrenCount > 0) {
selectedIndexProperty.coerce(this);
setTimeout(() => {
this._android.setCurrentItem(this.selectedIndex, false);
}, 0);
}
}

[selectedIndexProperty.setNative](value: number) {
if (this._android) {
this._android.setCurrentItem(value, !this.disableAnimation);
Expand Down Expand Up @@ -248,6 +259,12 @@ export class Pager extends PagerBase {
this.nativeViewProtected.setAdapter(this._pagerAdapter);
this.refresh();
}

_addChildFromBuilder(name: string, value: any): void {
if (name === 'PagerItem') {
this._childrenViews.set(this._childrenCount, value);
}
}
}

export const pagesCountProperty = new Property<Pager, number>({
Expand Down Expand Up @@ -293,6 +310,20 @@ export class PagerFragment extends android.support.v4.app.Fragment {
return null;
}
const owner = this.owner.get();
if (owner && owner._childrenCount > 0 && !owner.items) {
const view = owner._childrenViews.get(this.position);
if (view) {
if (!view.parent) {
owner._addView(view);
}
}
this.view = view;
if (view.nativeView && !view.nativeView.getParent()) {
owner._android.addView(view.nativeView);
}
return view.nativeView;
}

if (this.position === owner.items.length - owner.loadMoreCount) {
owner.notify({eventName: LOADMOREITEMS, object: owner});
}
Expand Down Expand Up @@ -373,7 +404,7 @@ export class PagerStateAdapter extends android.support.v4.view.PagerAdapter {

const owner = this.owner ? this.owner.get() : null;
if (owner) {
if (position === owner.items.length - 1) {
if (owner.items && position === owner.items.length - 1) {
owner.notify({eventName: LOADMOREITEMS, object: owner});
}
}
Expand Down Expand Up @@ -457,6 +488,12 @@ export class PagerStateAdapter extends android.support.v4.view.PagerAdapter {
private getViewByPosition(position: number): View {
let cachedView = null;
const owner = this.owner.get();


if (owner && owner._childrenCount > 0 && !owner.items) {
return owner._childrenViews.get(this.position);
}

const template = owner._getItemTemplate(position);
if (owner._viewMap.has(`${position}-${template.key}`)) {
cachedView = <View>owner._viewMap.get(`${position}-${template.key}`);
Expand All @@ -474,7 +511,7 @@ export class PagerStateAdapter extends android.support.v4.view.PagerAdapter {
getCount(): number {
const owner = this.owner ? this.owner.get() : null;
if (!owner) return 0;
return owner.items ? owner.items.length : 0;
return owner.items ? owner.items.length : owner._childrenCount;
}

getItem(position: number): PagerFragment {
Expand Down
22 changes: 19 additions & 3 deletions src/pager.common.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import {
AddChildFromBuilder,
booleanConverter,
CoercibleProperty,
ContainerView,
Expand All @@ -21,6 +22,7 @@ import { Observable } from 'tns-core-modules/data/observable';
import { addWeakEventListener, removeWeakEventListener } from 'tns-core-modules/ui/core/weak-event-listener';
import { ItemsSource } from 'tns-core-modules/ui/list-view/list-view';
import { ObservableArray } from 'tns-core-modules/data/observable-array';
import { StackLayout } from 'tns-core-modules/ui/layouts/stack-layout';

export type Orientation = 'horizontal' | 'vertical';

Expand Down Expand Up @@ -73,7 +75,7 @@ export enum Transformer {
}

@CSSType('Pager')
export abstract class PagerBase extends ContainerView {
export abstract class PagerBase extends ContainerView implements AddChildFromBuilder {
public items: any[] | ItemsSource;
public selectedIndex: number;
public showNativePageIndicator: boolean;
Expand All @@ -93,6 +95,8 @@ export abstract class PagerBase extends ContainerView {
public _effectiveItemWidth: number;
public transformer: Transformer;
public loadMoreCount: number = 1;
public _childrenViews: Map<number, View>;
_childrenCount: number;
// TODO: get rid of such hacks.
public static knownFunctions = ['itemTemplateSelector']; // See component-builder.ts isKnownFunction

Expand Down Expand Up @@ -260,6 +264,18 @@ export abstract class PagerBase extends ContainerView {
}
return converted;
}

abstract _addChildFromBuilder(name: string, value: any): void;
}

export class PagerItem extends StackLayout {
constructor() {
super();
}

onLoaded(): void {
super.onLoaded();
}
}

function onItemsChanged(pager: PagerBase, oldValue, newValue) {
Expand Down Expand Up @@ -299,9 +315,9 @@ export const selectedIndexProperty = new CoercibleProperty<PagerBase, number>({
valueChanged: onSelectedIndexChanged,
affectsLayout: isIOS,
coerceValue: (target, value) => {
let items = target.items;
let items = target._childrenCount;
if (items) {
let max = items.length - 1;
let max = items - 1;
if (value < 0) {
value = 0;
}
Expand Down
2 changes: 2 additions & 0 deletions src/pager.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,4 +23,6 @@ export declare class Pager extends PagerBase {
disableAnimation: boolean;

requestLayout(): void;

_addChildFromBuilder(name: string, value: Array<any>): void;
}
Loading

0 comments on commit 2b0a753

Please sign in to comment.