feat: padding support

Author: farfromrefug

src/ui-pager/index.android.ts

@@ -1,4 +1,19 @@
-import { ChangeType, ContentView, Device, KeyedTemplate, Property, ProxyViewContainer, StackLayout, Utils, View, ViewBase } from '@nativescript/core';
+import {
+    ChangeType,
+    ContentView,
+    CoreTypes,
+    Device,
+    KeyedTemplate,
+    Property,
+    ProxyViewContainer,
+    Utils,
+    View,
+    ViewBase,
+    paddingBottomProperty,
+    paddingLeftProperty,
+    paddingRightProperty,
+    paddingTopProperty
+} from '@nativescript/core';
 import { isString } from '@nativescript/core/utils/types';
 import {
     ItemEventData,
@@ -311,6 +326,47 @@ export class Pager extends PagerBase {
         this.setObservableArrayInstance(value);
     }
 
+    private _setPadding(newPadding: { top?: number; right?: number; bottom?: number; left?: number }) {
+        const nativeView = this.nativeViewProtected;
+        const padding = {
+            top: nativeView.getPaddingTop(),
+            right: nativeView.getPaddingRight(),
+            bottom: nativeView.getPaddingBottom(),
+            left: nativeView.getPaddingLeft()
+        };
+        // tslint:disable-next-line:prefer-object-spread
+        const newValue = Object.assign(padding, newPadding);
+        nativeView.setClipToPadding(false);
+        nativeView.setPadding(newValue.left, newValue.top, newValue.right, newValue.bottom);
+    }
+    [paddingTopProperty.getDefault](): CoreTypes.LengthType {
+        return { value: this._defaultPaddingTop, unit: 'px' };
+    }
+    [paddingTopProperty.setNative](value: CoreTypes.LengthType) {
+        this._setPadding({ top: this.effectivePaddingTop });
+    }
+
+    [paddingRightProperty.getDefault](): CoreTypes.LengthType {
+        return { value: this._defaultPaddingRight, unit: 'px' };
+    }
+    [paddingRightProperty.setNative](value: CoreTypes.LengthType) {
+        this._setPadding({ right: this.effectivePaddingRight });
+    }
+
+    [paddingBottomProperty.getDefault](): CoreTypes.LengthType {
+        return { value: this._defaultPaddingBottom, unit: 'px' };
+    }
+    [paddingBottomProperty.setNative](value: CoreTypes.LengthType) {
+        this._setPadding({ bottom: this.effectivePaddingBottom });
+    }
+
+    [paddingLeftProperty.getDefault](): CoreTypes.LengthType {
+        return { value: this._defaultPaddingLeft, unit: 'px' };
+    }
+    [paddingLeftProperty.setNative](value: CoreTypes.LengthType) {
+        this._setPadding({ left: this.effectivePaddingLeft });
+    }
+
     private _updateScrollPosition() {
         const index = this.circularMode ? this.selectedIndex + 1 : this.selectedIndex;
         const nativeView = this.nativeViewProtected;

src/ui-pager/index.common.ts

@@ -110,6 +110,41 @@ export abstract class PagerBase extends View implements AddChildFromBuilder {
 
     protected mObservableArrayInstance: ObservableArray<any>;
 
+    get padding(): string | CoreTypes.LengthType {
+        return this.style.padding;
+    }
+    set padding(value: string | CoreTypes.LengthType) {
+        this.style.padding = value;
+    }
+
+    get paddingTop(): CoreTypes.LengthType {
+        return this.style.paddingTop;
+    }
+    set paddingTop(value: CoreTypes.LengthType) {
+        this.style.paddingTop = value;
+    }
+
+    get paddingRight(): CoreTypes.LengthType {
+        return this.style.paddingRight;
+    }
+    set paddingRight(value: CoreTypes.LengthType) {
+        this.style.paddingRight = value;
+    }
+
+    get paddingBottom(): CoreTypes.LengthType {
+        return this.style.paddingBottom;
+    }
+    set paddingBottom(value: CoreTypes.LengthType) {
+        this.style.paddingBottom = value;
+    }
+
+    get paddingLeft(): CoreTypes.LengthType {
+        return this.style.paddingLeft;
+    }
+    set paddingLeft(value: CoreTypes.LengthType) {
+        this.style.paddingLeft = value;
+    }
+
     abstract refresh(): void;
 
     public static registerTransformer(key: string, transformer) {

src/ui-pager/index.ios.ts

@@ -1,4 +1,5 @@
-import { ChangeType, EventData, KeyedTemplate, Observable, Property, ProxyViewContainer, StackLayout, Utils, View, ViewBase, profile } from '@nativescript/core';
+import { ChangeType, CoreTypes, EventData, KeyedTemplate, Observable, Property, ProxyViewContainer, StackLayout, Utils, View, ViewBase, profile } from '@nativescript/core';
+import { paddingBottomProperty, paddingLeftProperty, paddingRightProperty, paddingTopProperty } from '@nativescript/core/ui/styling/style-properties';
 import {
     ItemEventData,
     Orientation,
@@ -338,6 +339,34 @@ export class Pager extends PagerBase {
         }
     }
 
+    private _setPadding(newPadding: { top?: number; right?: number; bottom?: number; left?: number }) {
+        const layout = this.nativeViewProtected;
+        const sectionInset = layout['contentInset'];
+        const padding = {
+            top: sectionInset.top,
+            right: sectionInset.right,
+            bottom: sectionInset.bottom,
+            left: sectionInset.left
+        };
+        const newValue = Object.assign(padding, newPadding);
+        layout['contentInset'] = newValue;
+    }
+    [paddingTopProperty.setNative](value: CoreTypes.LengthType) {
+        this._setPadding({ top: Utils.layout.toDeviceIndependentPixels(this.effectivePaddingTop) });
+    }
+
+    [paddingRightProperty.setNative](value: CoreTypes.LengthType) {
+        this._setPadding({ right: Utils.layout.toDeviceIndependentPixels(this.effectivePaddingRight) });
+    }
+
+    [paddingBottomProperty.setNative](value: CoreTypes.LengthType) {
+        this._setPadding({ bottom: Utils.layout.toDeviceIndependentPixels(this.effectivePaddingBottom) });
+    }
+
+    [paddingLeftProperty.setNative](value: CoreTypes.LengthType) {
+        this._setPadding({ left: Utils.layout.toDeviceIndependentPixels(this.effectivePaddingLeft) });
+    }
+
     protected _observableArrayHandler = (args) => {
         if (!this.nativeViewProtected) {
             return;