@nativescript-community/ui-pager/index.common.js

A NativeScript Pager / Carousel component that allows the user to swipe left and right through pages of data.

var PagerBase_1;
import { Builder, CSSType, CoercibleProperty, GridLayout, Label, ObservableArray, Property, Trace, Utils, View, makeParser, makeValidator } from '@nativescript/core';
export var knownTemplates;
(function (knownTemplates) {
    knownTemplates.itemTemplate = 'itemTemplate';
})(knownTemplates || (knownTemplates = {}));
export var knownMultiTemplates;
(function (knownMultiTemplates) {
    knownMultiTemplates.itemTemplates = 'itemTemplates';
})(knownMultiTemplates || (knownMultiTemplates = {}));
export var knownCollections;
(function (knownCollections) {
    knownCollections.items = 'items';
})(knownCollections || (knownCollections = {}));
export const pagerTraceCategory = 'ns-pager';
export function PagerLog(message) {
    Trace.write(message, pagerTraceCategory);
}
export function PagerError(message) {
    Trace.write(message, pagerTraceCategory, Trace.messageType.error);
}
const autoEffectiveItemHeight = 100;
const autoEffectiveItemWidth = 100;
export var Transformer;
(function (Transformer) {
    Transformer["SCALE"] = "scale";
})(Transformer || (Transformer = {}));
const booleanConverter = (v) => String(v) === 'true';
let UNIQUE_VIEW_TYPE = 0;
let PagerBase = PagerBase_1 = class PagerBase extends View {
    constructor() {
        super(...arguments);
        this.canGoRight = true;
        this.canGoLeft = true;
        this.preserveIndexOnItemsChange = false;
        this.loadMoreCount = 1;
        this.disableSwipe = false;
        this._itemTemplateSelectorBindable = new Label();
        this._defaultTemplate = {
            key: 'default',
            createView: () => {
                if (this.itemTemplate) {
                    return Builder.parse(this.itemTemplate, this);
                }
                return undefined;
            }
        };
        this._itemTemplatesInternal = new Array(this._defaultTemplate);
        this._itemIdGenerator = (_item, index) => index;
        // abstract _onItemsChanged(oldValue: any, newValue: any): void;
    }
    get padding() {
        return this.style.padding;
    }
    set padding(value) {
        this.style.padding = value;
    }
    get paddingTop() {
        return this.style.paddingTop;
    }
    set paddingTop(value) {
        this.style.paddingTop = value;
    }
    get paddingRight() {
        return this.style.paddingRight;
    }
    set paddingRight(value) {
        this.style.paddingRight = value;
    }
    get paddingBottom() {
        return this.style.paddingBottom;
    }
    set paddingBottom(value) {
        this.style.paddingBottom = value;
    }
    get paddingLeft() {
        return this.style.paddingLeft;
    }
    set paddingLeft(value) {
        this.style.paddingLeft = value;
    }
    static registerTransformer(key, transformer) {
        PagerBase_1.mRegisteredTransformers[key] = transformer;
    }
    setIndicator(indicator) {
        this.indicator = indicator;
    }
    disposeNativeView() {
        this._childrenViews = [];
        if (this.mObservableArrayInstance) {
            this.mObservableArrayInstance.off(ObservableArray.changeEvent, this._observableArrayHandler);
            this.mObservableArrayInstance = null;
        }
        super.disposeNativeView();
    }
    setObservableArrayInstance(value) {
        if (this.mObservableArrayInstance) {
            this.mObservableArrayInstance.off(ObservableArray.changeEvent, this._observableArrayHandler);
            this.mObservableArrayInstance = null;
        }
        if (value instanceof ObservableArray) {
            this.mObservableArrayInstance = value;
            this.mObservableArrayInstance.on(ObservableArray.changeEvent, this._observableArrayHandler);
            // } else {
        }
        this.refresh();
        if (this.preserveIndexOnItemsChange) {
            this[selectedIndexProperty.setNative](this.selectedIndex, false /* disableAnimation */, true /* requestTransform(Android) */);
        }
        else {
            selectedIndexProperty.coerce(this);
        }
    }
    getChildView(index) {
        return this._childrenViews && this._childrenViews[index]?.view;
    }
    _removeView(view) {
        // inside the recyclerview we wrap the PagerItem in a StackLayout
        // so we need to call remove on that stacklayout
        super._removeView(view);
        if (view instanceof PagerItem && this._childrenViews) {
            const index = this._childrenViews.findIndex((s) => s.view === view);
            if (index !== -1) {
                // this._removeChildView(index);
                if (this.isLoaded && this._isAddedToNativeVisualTree) {
                    this.refresh();
                }
            }
        }
    }
    _removeChildView(index) {
        this._childrenViews.splice(index, 1);
    }
    _addChildView(view, type) {
        this._childrenViews.push({ view, type });
    }
    _addChildFromBuilder(name, value) {
        if (value instanceof PagerItem && value.parent !== this) {
            if (!this._childrenViews) {
                this._childrenViews = [];
            }
            this._addChildView(value, UNIQUE_VIEW_TYPE++);
            if (this.isLoaded) {
                this.refresh();
            }
        }
    }
    get itemIdGenerator() {
        return this._itemIdGenerator;
    }
    set itemIdGenerator(generatorFn) {
        this._itemIdGenerator = generatorFn;
    }
    get itemTemplateSelector() {
        return this._itemTemplateSelector;
    }
    set itemTemplateSelector(value) {
        if (typeof value === 'string') {
            this._itemTemplateSelectorBindable.bind({
                sourceProperty: null,
                targetProperty: 'templateKey',
                expression: value
            });
            this._itemTemplateSelector = (item, index, items) => {
                item['$index'] = index;
                if (this._itemTemplateSelectorBindable.bindingContext === item) {
                    this._itemTemplateSelectorBindable.bindingContext = null;
                }
                this._itemTemplateSelectorBindable.bindingContext = item;
                return this._itemTemplateSelectorBindable.get('templateKey');
            };
        }
        else if (typeof value === 'function') {
            this._itemTemplateSelector = value;
        }
    }
    onItemViewLoaderChanged() { }
    get itemViewLoader() {
        return this._itemViewLoader;
    }
    set itemViewLoader(value) {
        if (this._itemViewLoader !== value) {
            this._itemViewLoader = value;
            this.onItemViewLoaderChanged();
        }
    }
    _getItemTemplateKey(index) {
        let templateKey = 'default';
        if (this.itemTemplateSelector) {
            const dataItem = this._getDataItem(index);
            templateKey = this._itemTemplateSelector(dataItem, index, this.items);
        }
        return templateKey;
    }
    _getItemTemplate(index) {
        const templateKey = this._getItemTemplateKey(index);
        const length = this._itemTemplatesInternal.length;
        for (let i = 0; i < length; i++) {
            if (this._itemTemplatesInternal[i].key === templateKey) {
                return this._itemTemplatesInternal[i];
            }
        }
        // This is the default template
        return this._itemTemplatesInternal[0];
    }
    _prepareItem(item, index) {
        if (this.items && item) {
            item.bindingContext = this._getDataItem(index);
        }
    }
    _getDataItem(index) {
        const thisItems = this.items;
        if (thisItems) {
            return thisItems && thisItems.getItem ? thisItems.getItem(index) : thisItems[index];
        }
    }
    _getDefaultItemContent(index) {
        const lbl = new Label();
        lbl.bind({
            targetProperty: 'text',
            sourceProperty: '$value'
        });
        return lbl;
    }
    onLayout(left, top, right, bottom) {
        super.onLayout(left, top, right, bottom);
        this._effectiveItemWidth = this.getMeasuredWidth() - this.effectivePaddingLeft - this.effectivePaddingRight;
        this._effectiveItemHeight = this.getMeasuredHeight() - this.effectivePaddingTop - this.effectivePaddingBottom;
    }
    convertToSize(length) {
        let size = 0;
        if (this.orientation === 'horizontal') {
            size = __IOS__ ? Utils.layout.getMeasureSpecSize(this._currentWidthMeasureSpec) : this.getMeasuredWidth();
        }
        else {
            size = __IOS__ ? Utils.layout.getMeasureSpecSize(this._currentHeightMeasureSpec) : this.getMeasuredHeight();
        }
        let converted = 0;
        if (length && length.unit === 'px') {
            converted = length.value;
        }
        else if (length && length.unit === 'dip') {
            converted = Utils.layout.toDevicePixels(length.value);
        }
        else if (length && length.unit === '%') {
            converted = size * length.value;
        }
        else if (typeof length === 'string') {
            if (length.indexOf('px') > -1) {
                converted = parseFloat(length.replace('px', ''));
            }
            else if (length.indexOf('dip') > -1) {
                converted = Utils.layout.toDevicePixels(parseInt(length.replace('dip', ''), 10));
            }
            else if (length.indexOf('%') > -1) {
                converted = size * (parseFloat(length.replace('%', '')) / 100);
            }
            else {
                converted = Utils.layout.toDevicePixels(parseFloat(length));
            }
        }
        else if (typeof length === 'number') {
            converted = Utils.layout.toDevicePixels(length);
        }
        if (isNaN(converted)) {
            return 0;
        }
        return converted;
    }
};
PagerBase.mRegisteredTransformers = {};
// This one works along with existing NS property change event system
PagerBase.selectedIndexChangeEvent = 'selectedIndexChange';
PagerBase.scrollEvent = 'scroll';
PagerBase.swipeEvent = 'swipe';
PagerBase.swipeStartEvent = 'swipeStart';
PagerBase.swipeOverEvent = 'swipeOver';
PagerBase.swipeEndEvent = 'swipeEnd';
PagerBase.loadMoreItemsEvent = 'loadMoreItems';
PagerBase.itemLoadingEvent = 'itemLoading';
PagerBase.itemDisposingEvent = 'itemDisposing';
PagerBase.knownFunctions = ['itemTemplateSelector', 'itemIdGenerator']; // See component-builder.ts isKnownFunction
PagerBase = PagerBase_1 = __decorate([
    CSSType('Pager')
], PagerBase);
export { PagerBase };
export class PagerItem extends GridLayout {
}
// function onItemsChanged(pager: PagerBase, oldValue, newValue) {
//     if (oldValue instanceof Observable) {
//         removeWeakEventListener(oldValue, ObservableArray.changeEvent, pager.refresh, pager);
//     }
//     if (newValue instanceof Observable && !(newValue instanceof ObservableArray)) {
//         addWeakEventListener(newValue, ObservableArray.changeEvent, pager.refresh, pager);
//     }
//     // pager.refresh();
// }
function onItemTemplateChanged(pager, oldValue, newValue) {
    pager.itemTemplateUpdated(oldValue, newValue);
}
export const circularModeProperty = new Property({
    name: 'circularMode',
    defaultValue: false,
    valueConverter: booleanConverter
});
circularModeProperty.register(PagerBase);
export const selectedIndexProperty = new CoercibleProperty({
    name: 'selectedIndex',
    defaultValue: -1,
    // affectsLayout: __IOS__,
    coerceValue: (target, value) => {
        const items = target._childrenCount;
        if (items) {
            const max = items - 1;
            if (value < 0) {
                value = 0;
            }
            if (value > max) {
                value = max;
            }
        }
        else {
            value = -1;
        }
        return value;
    },
    valueConverter: (v) => parseInt(v, 10)
});
selectedIndexProperty.register(PagerBase);
export const spacingProperty = new Property({
    name: 'spacing',
    defaultValue: { value: 0, unit: 'dip' },
    affectsLayout: true
});
spacingProperty.register(PagerBase);
export const peakingProperty = new Property({
    name: 'peaking',
    defaultValue: { value: 0, unit: 'dip' },
    affectsLayout: true
});
peakingProperty.register(PagerBase);
export const itemsProperty = new Property({
    name: 'items',
    affectsLayout: true
    // valueChanged: onItemsChanged
});
itemsProperty.register(PagerBase);
export const itemTemplateProperty = new Property({
    name: 'itemTemplate',
    affectsLayout: true,
    valueChanged: (target) => {
        target.refresh();
    }
});
itemTemplateProperty.register(PagerBase);
export const itemTemplatesProperty = new Property({
    name: 'itemTemplates',
    affectsLayout: true,
    valueConverter: (value) => {
        if (typeof value === 'string') {
            return Builder.parseMultipleTemplates(value);
        }
        return value;
    }
});
itemTemplatesProperty.register(PagerBase);
export const canGoRightProperty = new Property({
    name: 'canGoRight',
    defaultValue: false,
    valueConverter: booleanConverter
});
canGoRightProperty.register(PagerBase);
export const canGoLeftProperty = new Property({
    name: 'canGoLeft',
    defaultValue: false,
    valueConverter: booleanConverter
});
canGoLeftProperty.register(PagerBase);
const converter = makeParser(makeValidator('horizontal', 'vertical'));
export const orientationProperty = new Property({
    name: 'orientation',
    defaultValue: 'horizontal',
    affectsLayout: true,
    valueChanged: (target, oldValue, newValue) => {
        target.refresh();
    },
    valueConverter: converter
});
orientationProperty.register(PagerBase);
export const disableSwipeProperty = new Property({
    name: 'disableSwipe',
    defaultValue: false,
    valueConverter: booleanConverter
});
disableSwipeProperty.register(PagerBase);
export const perPageProperty = new Property({
    name: 'perPage',
    defaultValue: 1,
    valueConverter: (value) => Number(value)
});
perPageProperty.register(PagerBase);
export const transformersProperty = new Property({
    name: 'transformers'
});
transformersProperty.register(PagerBase);
export const showIndicatorProperty = new Property({
    name: 'showIndicator',
    defaultValue: false,
    valueConverter: booleanConverter
});
showIndicatorProperty.register(PagerBase);
export const autoPlayProperty = new Property({
    name: 'autoPlay',
    defaultValue: false,
    valueConverter: booleanConverter
});
autoPlayProperty.register(PagerBase);
export const autoplayDelayProperty = new Property({
    name: 'autoPlayDelay',
    defaultValue: 3000
});
autoplayDelayProperty.register(PagerBase);
//# sourceMappingURL=index.common.js.map