Merge pull request #237 from NativeScript/hdeshev/setElementStyle

Implement Renderer.setElementStyle.

Author: hdeshev

.ctags-exclude

@@ -15,4 +15,4 @@ tests/lib
 tests/src/typings
 tests/typings
 web
-src/*.js
+*.js

ng-sample/app/app.ts

@@ -28,8 +28,8 @@ import {ModalTest} from "./examples/modal/modal-test";
 import {PlatfromDirectivesTest} from "./examples/platform-directives/platform-directives-test";
 import {RouterOutletTest} from "./examples/navigation/router-outlet-test";
 
-//nativeScriptBootstrap(RendererTest);
-nativeScriptBootstrap(TabViewTest);
+nativeScriptBootstrap(RendererTest);
+//nativeScriptBootstrap(TabViewTest);
 //nativeScriptBootstrap(Benchmark);
 //nativeScriptBootstrap(ListTest);
 //nativeScriptBootstrap(ListTestAsync);

ng-sample/app/examples/renderer-test.html

@@ -5,8 +5,8 @@
         <DatePicker [(ngModel)]='model.deliveryDate' ></DatePicker>
         <Label [text]='model.deliveryDate' ></Label>-->
     <SearchBar [(ngModel)]='model.search'></SearchBar>
-    <Label [text]='model.search'></Label>
-    <Label [text]='model.mydate | date:"fullDate"'></Label>
+    <Label [text]='model.search' [style.backgroundColor]="'hotpink'"></Label>
+    <Label [text]='model.mydate | date:"fullDate"' [ngStyle]="{'background-color': 'lime'}"></Label>
     <Slider [(ngModel)]='model.sliderTest'></Slider>
     <Label [text]='model.sliderTest'></Label>
     <ListPicker [items]='model.listPickerItems' [(ngModel)]='model.selectedIndex'></ListPicker>

ng-sample/package.json

@@ -23,7 +23,7 @@
 	},
 	"homepage": "https://github.com/NativeScript/template-hello-world",
 	"dependencies": {
-		"tns-core-modules": "^2.0.0",
+		"tns-core-modules": "2.0.0-angular-7",
 		"nativescript-intl": "^0.0.2",
 		"@angular/common": "2.0.0-rc.1",
 		"@angular/compiler": "2.0.0-rc.1",
@@ -64,4 +64,4 @@
 			"version": "2.0.0"
 		}
 	}
-}
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nativescript-angular",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "",
   "homepage": "http://www.telerik.com",
   "bugs": "http://www.telerik.com",
@@ -14,7 +14,7 @@
   },
   "scripts": {},
   "dependencies": {
-    "tns-core-modules": "^2.0.0",
+    "tns-core-modules": "2.0.0-angular-7",
     "nativescript-intl": "^0.0.2",
     "@angular/common": "2.0.0-rc.1",
     "@angular/compiler": "2.0.0-rc.1",
@@ -43,7 +43,7 @@
     "typescript": "^1.8.10"
   },
   "peerDependencies": {
-    "tns-core-modules": ">=2.0.0 || >=2.0.0-2016 || >=2.0.0-angular-4"
+    "tns-core-modules": ">=2.0.0 || >=2.0.0-2016 || >=2.0.0-angular-7"
   },
   "nativescript": {}
 }

src/nativescript-angular/view-util.ts

@@ -5,6 +5,9 @@ import {ContentView} from 'ui/content-view';
 import {LayoutBase} from 'ui/layouts/layout-base';
 import {ViewClass, getViewClass, getViewMeta, isKnownView, ViewExtensions, NgView, ViewClassMeta} from './element-registry';
 import {getSpecialPropertySetter} from "ui/builder/special-properties";
+import * as styleProperty from "ui/styling/style-property";
+import {StyleProperty, getPropertyByName, withStyleProperty} from "ui/styling/style-property";
+import {ValueSource} from "ui/core/dependency-observable";
 import { ActionBar, ActionItem, NavigationButton } from "ui/action-bar";
 import trace = require("trace");
 import {device, platformNames, Device} from "platform";
@@ -287,7 +290,38 @@ export class ViewUtil {
         view.cssClass = classValue;
     }
 
+    private resolveCssValue(styleValue: string): string {
+        return styleValue;
+    }
+
+    private setStyleValue(view: NgView, property: StyleProperty, value: any) {
+        try {
+            view.style._setValue(property, value, ValueSource.Local);
+        } catch (ex) {
+            trace.write("Error setting property: " + property.name + " view: " + view + " value: " + value + " " + ex, trace.categories.Style, trace.messageType.error);
+        }
+    }
+
     public setStyleProperty(view: NgView, styleName: string, styleValue: string): void {
-        throw new Error("Not implemented: setStyleProperty");
+        traceLog("setStyleProperty: " + styleName + " = " + styleValue);
+
+        let name = styleName;
+        let resolvedValue = this.resolveCssValue(styleValue);
+        withStyleProperty(name, resolvedValue, (property, value) => {
+            if (isString(property)) {
+                //Fall back to resolving property by name.
+                const propertyName = <string>property;
+                const resolvedProperty = getPropertyByName(name);
+                if (resolvedProperty) {
+                    this.setStyleValue(view, resolvedProperty, resolvedValue);
+                } else {
+                    traceLog("Unknown style property: " + styleName);
+                }
+            } else {
+                const resolvedProperty = <StyleProperty>property;
+                this.setStyleValue(view, resolvedProperty, resolvedValue);
+            }
+
+        });
     }
 }

tests/app/tests/style-properties.ts

@@ -0,0 +1,36 @@
+//make sure you import mocha-config before @angular/core
+import {assert} from "./test-config";
+import {TextField} from "ui/text-field";
+import {Red, Lime} from "color/known-colors";
+import {NativeScriptRenderer, NativeScriptRootRenderer} from "nativescript-angular/renderer";
+import {device} from "platform";
+import {RenderComponentType} from '@angular/core/src/render/api';
+import {NgView} from "nativescript-angular/view-util";
+
+describe("Setting style properties", () => {
+    let renderer: NativeScriptRenderer = null;
+    let element: NgView = null;
+
+    beforeEach(() => {
+        const rootRenderer = new NativeScriptRootRenderer(null, device);
+        const componentType = new RenderComponentType("id", "templateUrl", 0,
+                                                            null, []);
+        renderer = new NativeScriptRenderer(rootRenderer, componentType);
+        element = <NgView><any>new TextField();
+    });
+
+    it("resolves hyphenated CSS names", () => {
+        renderer.setElementStyle(element, "background-color", "red");
+        assert.equal(Red, element.style.backgroundColor.hex);
+    });
+
+    it("resolves camel-cased JavaScript names", () => {
+        renderer.setElementStyle(element, "backgroundColor", "lime");
+        assert.equal(Lime, element.style.backgroundColor.hex);
+    });
+
+    it("resolves CSS shorthand properties", () => {
+        renderer.setElementStyle(element, "font", "12");
+        assert.equal(12, element.style.fontSize);
+    });
+})

tests/package.json

@@ -31,7 +31,7 @@
 	"homepage": "http://nativescript.org",
 	"dependencies": {
 		"nativescript-unit-test-runner": "^0.3.3",
-		"tns-core-modules": "^2.0.0",
+		"tns-core-modules": "2.0.0-angular-7",
 		"nativescript-intl": "^0.0.2",
 		"@angular/common": "2.0.0-rc.1",
 		"@angular/compiler": "2.0.0-rc.1",