Implements #7: Scroll Horizontally (#24)

* chor: start implementing horizontal scroll

* fix: tslint

* chor: follow up on PR-review

Author: m-abs

demo-ng/app/item/items.component.html

@@ -23,10 +23,17 @@
 core theme, such as p-20, btn, h2, and list-group. You can view a full list of the
 class names available for styling your app at https://docs.nativescript.org/ui/theme.
 -->
-<GridLayout class="page">
-  <GridView [items]="items" colWidth="30%" rowHeight="100">
+<GridLayout class="page" rows="*, *">
+  <GridView row="0" [items]="items" colWidth="33%" rowHeight="100" orientation="vertical">
     <ng-template let-item="item" let-odd="odd">
-      <StackLayout margin="10" [nsRouterLink]="['/item', item.id]" borderColor="blue" borderWidth="2" borderRadius="5" verticalAlignment="stretch" class="list-group-item" [class.odd]="odd">
+      <StackLayout [nsRouterLink]="['/item', item.id]" borderColor="blue" borderWidth="2" borderRadius="5" verticalAlignment="stretch" class="list-group-item" [class.odd]="odd">
+        <Label verticalAlignment="center" [text]="item.name" class="list-group-item-text" textWrap="true"></Label>
+      </StackLayout>
+    </ng-template>
+  </GridView>
+  <GridView row="1" [items]="items" colWidth="33%" rowHeight="100" orientation="horizontal">
+    <ng-template let-item="item" let-odd="odd">
+      <StackLayout [nsRouterLink]="['/item', item.id]" borderColor="blue" borderWidth="2" borderRadius="5" verticalAlignment="stretch" class="list-group-item" [class.odd]="odd">
         <Label verticalAlignment="center" [text]="item.name" class="list-group-item-text" textWrap="true"></Label>
       </StackLayout>
     </ng-template>

demo-ng/package.json

@@ -22,27 +22,27 @@
     "nativescript-theme-core": "^1.0.4",
     "reflect-metadata": "~0.1.8",
     "rxjs": "~5.4.0",
-    "tns-core-modules": "~3.1.0",
+    "tns-core-modules": "^3.1.0",
     "zone.js": "~0.8.2"
   },
   "devDependencies": {
     "@angular/compiler-cli": "~4.1.0",
-    "@ngtools/webpack": "~1.4.0",
+    "@ngtools/webpack": "~1.5.0",
     "babel-traverse": "6.25.0",
     "babel-types": "6.25.0",
     "babylon": "6.17.4",
     "copy-webpack-plugin": "~4.0.1",
-    "extract-text-webpack-plugin": "~2.1.0",
+    "extract-text-webpack-plugin": "~3.0.0",
     "lazy": "1.0.11",
     "nativescript-css-loader": "~0.26.0",
     "nativescript-dev-sass": "^1.2.0",
     "nativescript-dev-typescript": "~0.5.0",
     "nativescript-dev-webpack": "^0.7.2",
     "raw-loader": "~0.5.1",
-    "resolve-url-loader": "~2.0.2",
+    "resolve-url-loader": "~2.1.0",
     "tns-platform-declarations": "^3.1.0",
-    "typescript": "~2.3.0",
-    "webpack": "~2.6.0",
+    "typescript": "~2.3.4",
+    "webpack": "~3.2.0",
     "webpack-bundle-analyzer": "^2.8.2",
     "webpack-sources": "~1.0.1"
   },

grid-view-common.ts

@@ -16,10 +16,11 @@ limitations under the License.
 
 import { ObservableArray } from "data/observable-array";
 import { parse } from "ui/builder";
+import { makeParser, makeValidator } from "ui/content-view";
 import { CoercibleProperty, Length, PercentLength, Property, Template, View } from "ui/core/view";
 import { addWeakEventListener, removeWeakEventListener } from "ui/core/weak-event-listener";
 import { ItemsSource } from "ui/list-view";
-import { GridView as GridViewDefinition } from ".";
+import { GridView as GridViewDefinition, Orientation } from ".";
 
 const autoEffectiveRowHeight = 100;
 const autoEffectiveColWidth = 100;
@@ -36,6 +37,7 @@ export abstract class GridViewBase extends View implements GridViewDefinition {
     public static itemTapEvent = "itemTap";
     public static loadMoreItemsEvent = "loadMoreItems";
 
+    public orientation: Orientation;
     public itemTemplate: string | Template;
     public items: any[] | ItemsSource;
     public isItemsSourceIn: boolean;
@@ -53,10 +55,10 @@ export abstract class GridViewBase extends View implements GridViewDefinition {
     public onLayout(left: number, top: number, right: number, bottom: number) {
         super.onLayout(left, top, right, bottom);
 
-        this._innerWidth = right - this.effectivePaddingLeft - this.effectivePaddingRight;
+        this._innerWidth = right - left - this.effectivePaddingLeft - this.effectivePaddingRight;
         this._effectiveColWidth = PercentLength.toDevicePixels(this.colWidth, autoEffectiveColWidth, this._innerWidth); // We cannot use 0 for auto as it throws for android. 
 
-        this._innerHeight = bottom - this.effectivePaddingTop - this.effectivePaddingBottom;
+        this._innerHeight = bottom - top - this.effectivePaddingTop - this.effectivePaddingBottom;
         this._effectiveRowHeight = PercentLength.toDevicePixels(this.rowHeight, autoEffectiveRowHeight, this._innerHeight);
     }
 
@@ -141,4 +143,13 @@ export const colWidthProperty = new CoercibleProperty<GridViewBase, PercentLengt
         target.refresh();
     }
 });
-colWidthProperty.register(GridViewBase);
+colWidthProperty.register(GridViewBase);
+
+const converter = makeParser<Orientation>(makeValidator("horizontal", "vertical"));
+export const orientationProperty = new Property<GridViewBase, Orientation>({
+    name: "orientation", defaultValue: "vertical", affectsLayout: true,
+    valueChanged: (target: GridViewBase, oldValue: Orientation, newValue: Orientation) => {
+        target.refresh();
+    },
+    valueConverter: converter
+});

grid-view.android.ts

@@ -20,14 +20,15 @@ import * as utils from "utils/utils";
 import {
     GridViewBase,
     colWidthProperty,
+    orientationProperty,
     paddingBottomProperty,
     paddingLeftProperty,   
     paddingRightProperty,
     paddingTopProperty,
     rowHeightProperty,
 } from "./grid-view-common";
 
-import { GridItemEventData } from ".";
+import { GridItemEventData, Orientation } from ".";
 
 export * from "./grid-view-common";
 
@@ -43,8 +44,11 @@ export class GridView extends GridViewBase {
         recyclerView.setAdapter(adapter);
         (recyclerView as any).adapter = adapter;
 
+        const orientation = this._getLayoutManagarOrientation();
+
         const layoutManager = new android.support.v7.widget.GridLayoutManager(this._context, 1);
         recyclerView.setLayoutManager(layoutManager);
+        layoutManager.setOrientation(orientation);
         (recyclerView as any).layoutManager = layoutManager;
 
         const scrollListener = new GridViewScrollListener(new WeakRef(this));
@@ -120,6 +124,23 @@ export class GridView extends GridViewBase {
         this._setPadding({ left: this.effectivePaddingLeft });
     }
 
+    public [orientationProperty.getDefault](): Orientation {
+        const layoutManager = this.nativeView.getLayoutManager() as android.support.v7.widget.GridLayoutManager;
+        if (layoutManager.getOrientation() === android.support.v7.widget.LinearLayoutManager.HORIZONTAL) {
+            return "horizontal";
+        }
+
+        return "vertical";
+    }
+    public [orientationProperty.setNative](value: Orientation) {
+        const layoutManager = this.nativeView.getLayoutManager() as android.support.v7.widget.GridLayoutManager;
+        if (value === "horizontal") {
+            layoutManager.setOrientation(android.support.v7.widget.LinearLayoutManager.HORIZONTAL);
+        } else {
+            layoutManager.setOrientation(android.support.v7.widget.LinearLayoutManager.VERTICAL);
+        }
+    }
+
     public eachChildView(callback: (child: View) => boolean): void {
         this._realizedItems.forEach((view, key) => {
             callback(view);
@@ -137,9 +158,16 @@ export class GridView extends GridViewBase {
         }
 
         const layoutManager = this.nativeView.getLayoutManager() as android.support.v7.widget.GridLayoutManager;
-        const spanCount = Math.max(Math.floor(this._innerWidth / this._effectiveColWidth), 1) || 1;
+        let spanCount: number;
+
+        if (this.orientation === "horizontal") {
+          spanCount = Math.max(Math.floor(this._innerHeight / this._effectiveRowHeight), 1) || 1;
+        } else {
+          spanCount = Math.max(Math.floor(this._innerWidth / this._effectiveColWidth), 1) || 1;
+        }
 
         layoutManager.setSpanCount(spanCount);
+
         this.nativeView.getAdapter().notifyDataSetChanged();
     }
 
@@ -163,6 +191,15 @@ export class GridView extends GridViewBase {
         const newValue = Object.assign(padding, newPadding);
         nativeView.setPadding(newValue.left, newValue.top, newValue.right, newValue.bottom);
     }
+
+    private _getLayoutManagarOrientation() {
+        let orientation = android.support.v7.widget.LinearLayoutManager.VERTICAL;
+        if (this.orientation === "horizontal") {
+            orientation = android.support.v7.widget.LinearLayoutManager.HORIZONTAL;
+        }
+
+        return orientation;
+    }
 }
 
 class GridViewScrollListener extends android.support.v7.widget.RecyclerView.OnScrollListener {
@@ -258,8 +295,12 @@ class GridViewAdapter extends android.support.v7.widget.RecyclerView.Adapter {
             index,
             view: vh.view
         });
-        
-        vh.view.height = utils.layout.toDeviceIndependentPixels(owner._effectiveRowHeight);
+      
+        if (owner.orientation === "horizontal") {
+            vh.view.width = utils.layout.toDeviceIndependentPixels(owner._effectiveColWidth);
+        } else {
+            vh.view.height = utils.layout.toDeviceIndependentPixels(owner._effectiveRowHeight);
+        }
 
         owner._prepareItem(vh.view, index);
     }    

grid-view.d.ts

@@ -18,6 +18,8 @@ import { PercentLength, Template, View } from "ui/core/view";
 import { ItemsSource } from "ui/list-view";
 import { EventData } from "data/observable";
 
+export type Orientation = "horizontal" | "vertical"
+
 export class GridView extends View {
     public static itemLoadingEvent: string;
     public static itemTapEvent: string;
@@ -27,6 +29,7 @@ export class GridView extends View {
     public itemTemplate: string | Template;
     public rowHeight: PercentLength;
     public colWidth: PercentLength;
+    public orientation: Orientation;
 
     public ios: any; /* UICollectionView */
     public android: any; /* android.support.v7.widget.RecyclerView */

grid-view.ios.ts

@@ -20,13 +20,14 @@ import * as utils from "utils/utils";
 
 import {
     GridViewBase,
+    orientationProperty,
     paddingBottomProperty,
     paddingLeftProperty,
     paddingRightProperty,
-    paddingTopProperty
+    paddingTopProperty,
 } from "./grid-view-common";
 
-import { GridItemEventData } from ".";
+import { GridItemEventData, Orientation } from ".";
 
 export * from "./grid-view-common";
 
@@ -108,6 +109,21 @@ export class GridView extends GridViewBase {
         this._setPadding({ left: utils.layout.toDeviceIndependentPixels(this.effectivePaddingLeft) });
     }
 
+    public [orientationProperty.getDefault](): Orientation {
+        if (this._layout.scrollDirection === UICollectionViewScrollDirection.Horizontal) {
+            return "horizontal";
+        }
+
+        return "vertical";
+    }
+    public [orientationProperty.setNative](value: Orientation) {
+        if (value === "horizontal") {
+            this._layout.scrollDirection = UICollectionViewScrollDirection.Horizontal;
+        } else {
+            this._layout.scrollDirection = UICollectionViewScrollDirection.Vertical;
+        }
+    }
+
     public eachChildView(callback: (child: View) => boolean): void {
         this._map.forEach((view, key) => {
             callback(view);
@@ -316,4 +332,4 @@ class UICollectionViewDelegateImpl extends NSObject implements UICollectionViewD
 
         return indexPath;
     }
-}
+}