Merge pull request #3774 from NativeScript/placeholder-color-ios

Implemented placeholder-color for text-view IOS

apps/app/ui-tests-app/css/hint-text-color.ts

@@ -0,0 +1,32 @@
+import { Page } from "tns-core-modules/ui/page";
+import { unsetValue } from "tns-core-modules/ui/core/view";
+import { TextView } from "tns-core-modules/ui/text-view";
+import { TextField } from "tns-core-modules/ui/text-field";
+
+function exectuteOnAll(page: Page, callback: (txt: TextView | TextField) => void) { 
+    page.getViewById("container").eachChild((child) => {
+        if(child instanceof TextView || child instanceof TextField) {
+            callback(child);
+        }
+        return true;
+    })
+}
+
+export function setText(args) {
+    exectuteOnAll(args.object.page, (txt) => {
+        txt.text = "set text";
+    })
+}
+
+export function resetStyles(args) {
+    exectuteOnAll(args.object.page, (txt) => {
+        txt.style.color = unsetValue;
+        txt.style.placeholderColor = unsetValue;
+    })
+}
+
+export function resetText(args) {
+    exectuteOnAll(args.object.page, (txt) => {
+        txt.text = "";
+    })
+}

apps/app/ui-tests-app/css/hint-text-color.xml

@@ -0,0 +1,24 @@
+<Page>
+  <Page.actionBar>
+      <ActionBar title="TextView hint color"/>
+  </Page.actionBar>
+    <StackLayout id="container">
+        <Label text="TextView:" />
+        <TextView hint="nothing" fontSize="18" />
+        <TextView hint="placeholder-color"  style="placeholder-color: green;" fontSize="18" />
+        <TextView hint="color" style="color: blue;" fontSize="18" />
+        <TextView hint="both" style="color: blue; placeholder-color: green;" fontSize="18" />
+
+        <Label text="TextField:" />
+        <TextField hint="nothing" fontSize="18" />
+        <TextField hint="placeholder-color"  style="placeholder-color: green;" fontSize="18" />
+        <TextField hint="color" style="color: blue;" fontSize="18" />
+        <TextField hint="both" style="color: blue; placeholder-color: green;" fontSize="18" />
+
+        <StackLayout orientation="horizontal">
+        <Button id="btnSetText" text="set text" tap="setText" width="80"/>
+        <Button id="btnResetStyles" text="reset style" tap="resetStyles" width="80"/>
+        <Button id="btnClearText" text="reset text" tap="resetText" width="80"/>
+        </StackLayout>
+    </StackLayout>
+</Page>

apps/app/ui-tests-app/css/main-page.ts

@@ -43,6 +43,7 @@ export function pageLoaded(args: EventData) {
     examples.set("padding-and-border", "css/padding-and-border");
     examples.set("border-playground", "css/border-playground");
     examples.set("textview-hint-color", "css/textview-hint-color");
+    examples.set("hint-text-color", "css/hint-text-color");
 
     let viewModel = new SubMainPageViewModel(wrapLayout, examples);
     page.bindingContext = viewModel;

apps/app/ui-tests-app/css/textview-hint-color.xml

@@ -5,10 +5,13 @@
     <StackLayout>
         <Label text="Should change text and color" />
         <TextView id="tv1Hint" hint="hint1 pink" text="" color="pink" fontSize="32" />
+
         <Label text="Should change apply text" />
         <TextView id="tv2Hint" hint="hint2 orange" color="orange" fontSize="32" />
+
         <Label text="Should change only color of hint" />
         <TextView id="tv3Hint" hint="hint3 blue" color="blue" fontSize="32" />
+
         <Button id="btn" text="Change text and color" tap="changeTextAndColor"/>
     </StackLayout>
 </Page>

tests/app/ui/text-view/text-view-tests.ts

@@ -87,7 +87,7 @@ if (platform.device.os === platform.platformNames.ios) {
         helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array<viewModule.View>) {
             var textView = <textViewModule.TextView>views[0];
             textView.color = new colorModule.Color("red");
-            TKUnit.assertEqual(textView.color.ios.CGColor, textView.ios.tintColor.CGColor, "textView.color");
+            TKUnit.assertEqual(textView.color.ios.CGColor, textView.ios.textColor.CGColor, "textView.color");
         });
     }
 }

tns-core-modules/ui/text-view/text-view.ios.ts

@@ -1,13 +1,11 @@
 import { TextView as TextViewDefinition } from ".";
 import {
-    EditableTextBase, editableProperty, hintProperty, textProperty, colorProperty,
+    EditableTextBase, editableProperty, hintProperty, textProperty, colorProperty, placeholderColorProperty,
     borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty,
     paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty, 
     Length, _updateCharactersInRangeReplacementString, Color, layout
 } from "../editable-text-base";
 
-import { ios } from "../../utils/utils";
-
 export * from "../editable-text-base";
 
 class UITextViewDelegateImpl extends NSObject implements UITextViewDelegate {
@@ -108,18 +106,44 @@ export class TextView extends EditableTextBase implements TextViewDefinition {
         }
     }
 
+    private _refreshColor() {
+        if (this._isShowingHint) {
+            const placeholderColor = this.style.placeholderColor;
+            const color = this.style.color;
+
+            if (placeholderColor) {
+                this.nativeView.textColor = placeholderColor.ios;
+            } else if (color) {
+                // Use semi-transparent vesion of color for back-compatibility 
+                this.nativeView.textColor = color.ios.colorWithAlphaComponent(0.22);
+            } else {
+                this.nativeView.textColor = UIColor.blackColor.colorWithAlphaComponent(0.22);
+            }
+        } else {
+            const color = this.style.color;
+
+            if (color) {
+                this.nativeView.textColor = color.ios;
+            } else {
+                this.nativeView.textColor = UIColor.blackColor;
+            }
+        }
+    }
+
     public showHint(hint: string) {
         const nativeView = this.nativeView;
-        nativeView.textColor = nativeView.textColor ? nativeView.textColor.colorWithAlphaComponent(0.22) : ios.getter(UIColor, UIColor.blackColor).colorWithAlphaComponent(0.22);
+
+        this._isShowingHint = true;
+        this._refreshColor();
+
         const hintAsString: string = (hint === null || hint === undefined) ? '' : hint.toString();
         nativeView.text = hintAsString;
-        this._isShowingHint = true;
     }
 
     public showText() {
-        this.nativeView.textColor = this.color ? this.color.ios : null;
-        this._setNativeText();
         this._isShowingHint = false;
+        this._refreshColor();
+        this._setNativeText();
     }
 
     get [textProperty.native](): string {
@@ -144,23 +168,18 @@ export class TextView extends EditableTextBase implements TextViewDefinition {
     }
 
     get [colorProperty.native](): UIColor {
-        let textView = this.nativeView;
+        return null;
-        if (this._isShowingHint && textView.textColor) {
-            return textView.textColor.colorWithAlphaComponent(1);
-        }
-        else {
-            return textView.textColor;
-        }
     }
-    set [colorProperty.native](color: UIColor | Color) {
+    set [colorProperty.native](color: Color) {
-        let textView = this.nativeView;
+        this._refreshColor();
-        let uiColor = color instanceof Color ? color.ios : color;
+
-        if (this._isShowingHint && uiColor) {
+    }
-            textView.textColor = uiColor.colorWithAlphaComponent(0.22);
+
-        } else {
+    get [placeholderColorProperty.native](): Color {
-            textView.textColor = uiColor;
+        return null;
-            textView.tintColor = uiColor;
+    }
-        }
+    set [placeholderColorProperty.native](value: Color) {
+        this._refreshColor();
     }
 
     get [borderTopWidthProperty.native](): Length {
@@ -246,7 +265,7 @@ export class TextView extends EditableTextBase implements TextViewDefinition {
         let bottom = layout.toDeviceIndependentPixels(this.effectivePaddingBottom + this.effectiveBorderBottomWidth);
         this.nativeView.textContainerInset = { top: inset.top, left: inset.left, bottom: bottom, right: inset.right };
     }
-    
+
     get [paddingLeftProperty.native](): Length {
         return {
             value: this.nativeView.textContainerInset.left,