feat: allow to register custom transformers

Author: farfromrefug

packages/ui-pager/blueprint.md

@@ -112,4 +112,20 @@ Vue.use(Pager);
 - [Static Pager](demo-snippets/vue/StaticPager.vue)
   - A simple pager example using static content.
 - [Basic Pager](demo-snippets/vue/BasicPager.vue)
-  - A simple pager example using dynamic content.
+  - A simple pager example using dynamic content.
+
+
+## Custom Transformer
+
+You can define custom transformer for iOS/Android
+
+You can follow the `Scale` example for [iOS](src/ui-pager/transformers/Scale.ios.ts) and [Android](src/ui-pager/transformers/Scale.android.ts) to create your custom transformer.
+
+Then you can register your transformer on app start with (this example registered the included but not registered Scale transformer): 
+```ts
+import { Pager } from '@nativescript-community/ui-pager';
+import transformer from '@nativescript-community/ui-pager/transformers/Scale';
+
+Pager.registerTransformer('scale', transformer)
+```
+Then you can use that transformer with the `transformer` property of `Pager`

src/ui-pager/index.android.ts

@@ -58,11 +58,9 @@ export class Pager extends PagerBase {
     lastEvent = 0;
     private _lastSpacing = 0;
     private _lastPeaking = 0;
-    private compositeTransformer: any;
-    private marginTransformer: any;
-    private _transformers: any[];
-    private _selectedIndexBeforeLoad = 0;
-    // private _pager: androidx.viewpager2.widget.ViewPager2;
+    private compositeTransformer: androidx.viewpager2.widget.CompositePageTransformer;
+    private marginTransformer: androidx.viewpager2.widget.MarginPageTransformer;
+    private _transformers: androidx.viewpager2.widget.ViewPager2.PageTransformer[];
 
     constructor() {
         super();
@@ -216,9 +214,9 @@ export class Pager extends PagerBase {
             this.compositeTransformer.removeTransformer(transformer);
         });
         for (const transformer of transformsArray) {
-            if (transformer === Transformer.SCALE) {
-                initZoomOutPageTransformer();
-                const nativeTransformer = new ZoomOutPageTransformer();
+            const nativeTransformerClass = Pager.mRegisteredTransformers[transformer];
+            if (nativeTransformerClass) {
+                const nativeTransformer = new nativeTransformerClass();
                 nativeTransformer.owner = new WeakRef<Pager>(this);
                 this._transformers.push(nativeTransformer);
                 this.compositeTransformer.addTransformer(nativeTransformer);
@@ -1000,66 +998,3 @@ function initPagerViewHolder() {
 
     PagerViewHolder = PagerViewHolderImpl as any;
 }
-
-let ZoomOutPageTransformer;
-
-function initZoomOutPageTransformer() {
-    if (ZoomOutPageTransformer) {
-        return;
-    }
-
-    @NativeClass
-    @Interfaces([androidx.viewpager2.widget.ViewPager2.PageTransformer])
-    class ZoomOutPageTransformerImpl extends java.lang.Object {
-        owner: WeakRef<Pager>;
-
-        constructor() {
-            super();
-            return global.__native(this);
-        }
-
-        public transformPage(view, position) {
-            const MIN_SCALE = 0.85;
-            if (position <= 1 || position >= -1) {
-                const scale = Math.max(MIN_SCALE, 1 - Math.abs(position));
-                view.setScaleX(scale);
-                view.setScaleY(scale);
-            } else {
-                view.setScaleX(1);
-                view.setScaleY(1);
-            }
-        }
-    }
-
-    ZoomOutPageTransformer = ZoomOutPageTransformerImpl as any;
-}
-
-let ZoomInPageTransformer;
-
-function initZoomInPageTransformer() {
-    if (ZoomInPageTransformer) {
-        return;
-    }
-
-    @NativeClass
-    @Interfaces([androidx.viewpager2.widget.ViewPager2.PageTransformer])
-    class ZoomInPageTransformerImpl extends java.lang.Object {
-        owner: WeakRef<Pager>;
-
-        constructor() {
-            super();
-            return global.__native(this);
-        }
-
-        public transformPage(view, position) {
-            const scale = position < 0 ? position + 1.0 : Math.abs(1.0 - position);
-            view.setScaleX(scale);
-            view.setScaleY(scale);
-            view.setPivotX(view.getWidth() * 0.5);
-            view.setPivotY(view.getHeight() * 0.5);
-            view.setAlpha(view < -1.0 || position > 1.0 ? 0.0 : 1.0 - (scale - 1.0));
-        }
-    }
-
-    ZoomInPageTransformer = ZoomInPageTransformerImpl as any;
-}

src/ui-pager/index.common.ts

@@ -109,6 +109,11 @@ export abstract class PagerBase extends ContainerView implements AddChildFromBui
 
     abstract refresh(): void;
 
+    static mRegisteredTransformers = {};
+    public static registerTransformer(key: string, transformer) {
+        PagerBase.mRegisteredTransformers[key] = transformer;
+    }
+
     public indicator: {
         setProgress(position: number, progress: number);
         setSelection(index: number, animated?: boolean);

src/ui-pager/index.ios.ts

@@ -1117,26 +1117,29 @@ class UICollectionViewFlowLinearLayoutImpl extends UICollectionViewFlowLayout {
         const owner = this._owner ? this._owner.get() : null;
         const originalLayoutAttribute = super.layoutAttributesForElementsInRect(rect);
         const visibleLayoutAttributes = [];
-        if (owner) {
-            if (owner.transformers && owner.transformers.indexOf('scale') > -1) {
+        if (owner && owner.transformers) {
+            const transformsArray = owner.transformers
+                .split(' ')
+                .map((s) => Pager.mRegisteredTransformers[s])
+                .filter((s) => !!s);
+            if (transformsArray.length) {
+                const collectionView = this.collectionView;
                 const count = originalLayoutAttribute.count;
                 for (let i = 0; i < count; i++) {
                     const attributes = originalLayoutAttribute.objectAtIndex(i);
                     visibleLayoutAttributes[i] = attributes;
-                    const frame = attributes.frame;
-                    const width = attributes.frame.size.width * 0.75;
-                    const height = attributes.frame.size.height * 0.75;
-                    attributes.frame.size.width = width;
-                    attributes.frame.size.height = height;
-                    const spacing = owner.convertToSize(owner.spacing);
-                    const distance = Math.abs(this.collectionView.contentOffset.x + this.collectionView.contentInset.left + spacing - frame.origin.x);
-                    const scale = Math.min(Math.max(1 - distance / this.collectionView.bounds.size.width, 0.75), 1);
-                    attributes.transform = CGAffineTransformScale(attributes.transform, 1, scale);
+                    for (const transformer of transformsArray) {
+                        const nativeTransformer = Pager.mRegisteredTransformers[transformer];
+                        if (nativeTransformer) {
+                            nativeTransformer(i, attributes, owner, collectionView);
+                        }
+                    }
                 }
-            } else {
-                return originalLayoutAttribute;
             }
+        } else {
+            return originalLayoutAttribute;
         }
+
         return visibleLayoutAttributes as any;
     }
 

src/ui-pager/transformers/Scale.android.ts

@@ -0,0 +1,24 @@
+import { Pager } from '..';
+
+@NativeClass
+@Interfaces([androidx.viewpager2.widget.ViewPager2.PageTransformer])
+export default class Scale extends java.lang.Object {
+    owner: WeakRef<Pager>;
+
+    constructor() {
+        super();
+        return global.__native(this);
+    }
+
+    public transformPage(view, position) {
+        const MIN_SCALE = 0.85;
+        if (position <= 1 || position >= -1) {
+            const scale = Math.max(MIN_SCALE, 1 - Math.abs(position));
+            view.setScaleX(scale);
+            view.setScaleY(scale);
+        } else {
+            view.setScaleX(1);
+            view.setScaleY(1);
+        }
+    }
+}

src/ui-pager/transformers/Scale.ios.ts

@@ -0,0 +1,11 @@
+export default function (i, attributes, owner, collectionView) {
+    const frame = attributes.frame;
+    const width = attributes.frame.size.width * 0.75;
+    const height = attributes.frame.size.height * 0.75;
+    attributes.frame.size.width = width;
+    attributes.frame.size.height = height;
+    const spacing = owner.convertToSize(owner.spacing);
+    const distance = Math.abs(collectionView.contentOffset.x + collectionView.contentInset.left + spacing - frame.origin.x);
+    const scale = Math.min(Math.max(1 - distance / collectionView.bounds.size.width, 0.75), 1);
+    attributes.transform = CGAffineTransformScale(attributes.transform, 1, scale);
+}

src/ui-pager/transformers/ZoomInPageTransformer.ts

@@ -0,0 +1,21 @@
+import { Pager } from '..';
+
+@NativeClass
+@Interfaces([androidx.viewpager2.widget.ViewPager2.PageTransformer])
+export default class ZoomInPageTransformer extends java.lang.Object {
+    owner: WeakRef<Pager>;
+
+    constructor() {
+        super();
+        return global.__native(this);
+    }
+
+    public transformPage(view, position) {
+        const scale = position < 0 ? position + 1.0 : Math.abs(1.0 - position);
+        view.setScaleX(scale);
+        view.setScaleY(scale);
+        view.setPivotX(view.getWidth() * 0.5);
+        view.setPivotY(view.getHeight() * 0.5);
+        view.setAlpha(view < -1.0 || position > 1.0 ? 0.0 : 1.0 - (scale - 1.0));
+    }
+}