Skip to content

Commit 84819f6

Browse files
author
vakrilov
committed
Implemented placeholder-color for text-view IOS
1 parent 629eb6e commit 84819f6

File tree

6 files changed

+104
-25
lines changed

6 files changed

+104
-25
lines changed

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { Page } from "tns-core-modules/ui/page";
2+
import { unsetValue } from "tns-core-modules/ui/core/view";
3+
import { TextView } from "tns-core-modules/ui/text-view";
4+
import { TextField } from "tns-core-modules/ui/text-field";
5+
6+
function exectuteOnAll(page: Page, callback: (txt: TextView | TextField) => void) {
7+
page.getViewById("container").eachChild((child) => {
8+
if(child instanceof TextView || child instanceof TextField) {
9+
callback(child);
10+
}
11+
return true;
12+
})
13+
}
14+
15+
export function setText(args) {
16+
exectuteOnAll(args.object.page, (txt) => {
17+
txt.text = "set text";
18+
})
19+
}
20+
21+
export function resetStyles(args) {
22+
exectuteOnAll(args.object.page, (txt) => {
23+
txt.style.color = unsetValue;
24+
txt.style.placeholderColor = unsetValue;
25+
})
26+
}
27+
28+
export function resetText(args) {
29+
exectuteOnAll(args.object.page, (txt) => {
30+
txt.text = "";
31+
})
32+
}

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<Page>
2+
<Page.actionBar>
3+
<ActionBar title="TextView hint color"/>
4+
</Page.actionBar>
5+
<StackLayout id="container">
6+
<Label text="TextView:" />
7+
<TextView hint="nothing" fontSize="18" />
8+
<TextView hint="placeholder-color" style="placeholder-color: green;" fontSize="18" />
9+
<TextView hint="color" style="color: blue;" fontSize="18" />
10+
<TextView hint="both" style="color: blue; placeholder-color: green;" fontSize="18" />
11+
12+
<Label text="TextField:" />
13+
<TextField hint="nothing" fontSize="18" />
14+
<TextField hint="placeholder-color" style="placeholder-color: green;" fontSize="18" />
15+
<TextField hint="color" style="color: blue;" fontSize="18" />
16+
<TextField hint="both" style="color: blue; placeholder-color: green;" fontSize="18" />
17+
18+
<StackLayout orientation="horizontal">
19+
<Button id="btnSetText" text="set text" tap="setText" width="80"/>
20+
<Button id="btnResetStyles" text="reset style" tap="resetStyles" width="80"/>
21+
<Button id="btnClearText" text="reset text" tap="resetText" width="80"/>
22+
</StackLayout>
23+
</StackLayout>
24+
</Page>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ export function pageLoaded(args: EventData) {
4343
examples.set("padding-and-border", "css/padding-and-border");
4444
examples.set("border-playground", "css/border-playground");
4545
examples.set("textview-hint-color", "css/textview-hint-color");
46+
examples.set("hint-text-color", "css/hint-text-color");
4647

4748
let viewModel = new SubMainPageViewModel(wrapLayout, examples);
4849
page.bindingContext = viewModel;

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,13 @@
55
<StackLayout>
66
<Label text="Should change text and color" />
77
<TextView id="tv1Hint" hint="hint1 pink" text="" color="pink" fontSize="32" />
8+
89
<Label text="Should change apply text" />
910
<TextView id="tv2Hint" hint="hint2 orange" color="orange" fontSize="32" />
11+
1012
<Label text="Should change only color of hint" />
1113
<TextView id="tv3Hint" hint="hint3 blue" color="blue" fontSize="32" />
14+
1215
<Button id="btn" text="Change text and color" tap="changeTextAndColor"/>
1316
</StackLayout>
1417
</Page>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ if (platform.device.os === platform.platformNames.ios) {
8787
helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array<viewModule.View>) {
8888
var textView = <textViewModule.TextView>views[0];
8989
textView.color = new colorModule.Color("red");
90-
TKUnit.assertEqual(textView.color.ios.CGColor, textView.ios.tintColor.CGColor, "textView.color");
90+
TKUnit.assertEqual(textView.color.ios.CGColor, textView.ios.textColor.CGColor, "textView.color");
9191
});
9292
}
9393
}

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

Lines changed: 43 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import { TextView as TextViewDefinition } from ".";
22
import {
3-
EditableTextBase, editableProperty, hintProperty, textProperty, colorProperty,
3+
EditableTextBase, editableProperty, hintProperty, textProperty, colorProperty, placeholderColorProperty,
44
borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty,
55
paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty,
66
Length, _updateCharactersInRangeReplacementString, Color, layout
77
} from "../editable-text-base";
88

9-
import { ios } from "../../utils/utils";
10-
119
export * from "../editable-text-base";
1210

1311
class UITextViewDelegateImpl extends NSObject implements UITextViewDelegate {
@@ -108,18 +106,44 @@ export class TextView extends EditableTextBase implements TextViewDefinition {
108106
}
109107
}
110108

109+
private _refreshColor() {
110+
if (this._isShowingHint) {
111+
const placeholderColor = this.style.placeholderColor;
112+
const color = this.style.color;
113+
114+
if (placeholderColor) {
115+
this.nativeView.textColor = placeholderColor.ios;
116+
} else if (color) {
117+
// Use semi-transparent vesion of color for back-compatibility
118+
this.nativeView.textColor = color.ios.colorWithAlphaComponent(0.22);
119+
} else {
120+
this.nativeView.textColor = UIColor.blackColor.colorWithAlphaComponent(0.22);
121+
}
122+
} else {
123+
const color = this.style.color;
124+
125+
if (color) {
126+
this.nativeView.textColor = color.ios;
127+
} else {
128+
this.nativeView.textColor = UIColor.blackColor;
129+
}
130+
}
131+
}
132+
111133
public showHint(hint: string) {
112134
const nativeView = this.nativeView;
113-
nativeView.textColor = nativeView.textColor ? nativeView.textColor.colorWithAlphaComponent(0.22) : ios.getter(UIColor, UIColor.blackColor).colorWithAlphaComponent(0.22);
135+
136+
this._isShowingHint = true;
137+
this._refreshColor();
138+
114139
const hintAsString: string = (hint === null || hint === undefined) ? '' : hint.toString();
115140
nativeView.text = hintAsString;
116-
this._isShowingHint = true;
117141
}
118142

119143
public showText() {
120-
this.nativeView.textColor = this.color ? this.color.ios : null;
121-
this._setNativeText();
122144
this._isShowingHint = false;
145+
this._refreshColor();
146+
this._setNativeText();
123147
}
124148

125149
get [textProperty.native](): string {
@@ -144,23 +168,18 @@ export class TextView extends EditableTextBase implements TextViewDefinition {
144168
}
145169

146170
get [colorProperty.native](): UIColor {
147-
let textView = this.nativeView;
148-
if (this._isShowingHint && textView.textColor) {
149-
return textView.textColor.colorWithAlphaComponent(1);
150-
}
151-
else {
152-
return textView.textColor;
153-
}
171+
return null;
154172
}
155-
set [colorProperty.native](color: UIColor | Color) {
156-
let textView = this.nativeView;
157-
let uiColor = color instanceof Color ? color.ios : color;
158-
if (this._isShowingHint && uiColor) {
159-
textView.textColor = uiColor.colorWithAlphaComponent(0.22);
160-
} else {
161-
textView.textColor = uiColor;
162-
textView.tintColor = uiColor;
163-
}
173+
set [colorProperty.native](color: Color) {
174+
this._refreshColor();
175+
176+
}
177+
178+
get [placeholderColorProperty.native](): Color {
179+
return null;
180+
}
181+
set [placeholderColorProperty.native](value: Color) {
182+
this._refreshColor();
164183
}
165184

166185
get [borderTopWidthProperty.native](): Length {
@@ -246,7 +265,7 @@ export class TextView extends EditableTextBase implements TextViewDefinition {
246265
let bottom = layout.toDeviceIndependentPixels(this.effectivePaddingBottom + this.effectiveBorderBottomWidth);
247266
this.nativeView.textContainerInset = { top: inset.top, left: inset.left, bottom: bottom, right: inset.right };
248267
}
249-
268+
250269
get [paddingLeftProperty.native](): Length {
251270
return {
252271
value: this.nativeView.textContainerInset.left,

0 commit comments

Comments
 (0)