Skip to content

Commit 015d5aa

Browse files
farfromrefugfarfromrefug
authored
Merge pull request #115 from flypapertech/fix-ios-textfield-textview-stroke
[TextField & TextView] Add ability to style inactive stroke and floating placeholder color
2 parents 62cdb4a + d353306 commit 015d5aa

File tree

16 files changed

+165
-134
lines changed

16 files changed

+165
-134
lines changed

‎README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ Build beautiful, usable products using Material Components for NativeScript.
88

99
- [Button](./packages/nativescript-material-button/README.md)
1010
- [Floating Action Button](./packages/nativescript-material-floatingactionbutton/README.md)
11-
- [Textfield](./packages/nativescript-material-textfield/README.md)
11+
- [TextField](./packages/nativescript-material-textfield/README.md)
12+
- [TextView](./packages/nativescript-material-textview/README.md)
1213
- [CardView](./packages/nativescript-material-cardview/README.md)
1314
- [Slider](./packages/nativescript-material-slider/README.md)
1415
- [Progress](./packages/nativescript-material-progress/README.md)

‎packages/nativescript-material-button/platforms/android/include.gradle

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
dependencies {
2-
def androidxVersion = project.hasProperty("androidxVersion") ? project.androidxVersion : "1.0.0"
2+
def androidxVersion = project.hasProperty("androidxVersion") ? project.androidxVersion : "1.1.0"
33

44
compile "androidx.appcompat:appcompat:$androidxVersion"
5-
compile "com.google.android.material:material:1.1.0-alpha07"
5+
compile "com.google.android.material:material:1.1.0"
66
}

‎packages/nativescript-material-core/platforms/android/include.gradle

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

22
dependencies {
33
def androidXAppCompatVersion = project.hasProperty("androidXAppCompatVersion") ? project.androidXAppCompatVersion : "1.1.0"
4-
def androidXMaterial = project.hasProperty("androidXMaterial") ? project.androidXMaterial : "1.1.0-beta01"
4+
def androidXMaterial = project.hasProperty("androidXMaterial") ? project.androidXMaterial : "1.1.0"
55

66
compile "androidx.appcompat:appcompat:$androidXAppCompatVersion"
77
compile "com.google.android.material:material:$androidXMaterial"

‎packages/nativescript-material-textfield/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,10 @@ Be sure to run a new build after adding plugins to avoid any issues.
4343
mdctextfield {
4444
ripple-color: blue;
4545
elevation: 4;
46+
stroke-color: blue; // the border color when active
47+
stroke-inactive-color: green; // the border color when inactive
48+
floating-color: blue; // the floating placeholder color when active
49+
floating-inactive-color: green; // the floating placeholder color when inactive
4650
}
4751
```
4852

‎packages/nativescript-material-textfield/platforms/android/include.gradle

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

22
dependencies {
33
def androidXAppCompatVersion = project.hasProperty("androidXAppCompatVersion") ? project.androidXAppCompatVersion : "1.1.0"
4-
def androidXMaterial = project.hasProperty("androidXMaterial") ? project.androidXMaterial : "1.1.0-beta01"
4+
def androidXMaterial = project.hasProperty("androidXMaterial") ? project.androidXMaterial : "1.1.0"
55

66
compile "androidx.appcompat:appcompat:$androidXAppCompatVersion"
77
compile "com.google.android.material:material:$androidXMaterial"

‎packages/nativescript-material-textview/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,10 @@ Be sure to run a new build after adding plugins to avoid any issues.
4343
mdctextview {
4444
ripple-color: blue;
4545
elevation: 4;
46+
stroke-color: blue; // the border color when active
47+
stroke-inactive-color: green; // the border color when inactive
48+
floating-color: blue; // the floating placeholder color when active
49+
floating-inactive-color: green; // the floating placeholder color when inactive
4650
}
4751
```
4852

‎packages/nativescript-material-textview/platforms/android/include.gradle

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

22
dependencies {
33
def androidXAppCompatVersion = project.hasProperty("androidXAppCompatVersion") ? project.androidXAppCompatVersion : "1.1.0"
4-
def androidXMaterial = project.hasProperty("androidXMaterial") ? project.androidXMaterial : "1.1.0-beta01"
4+
def androidXMaterial = project.hasProperty("androidXMaterial") ? project.androidXMaterial : "1.1.0"
55

66
compile "androidx.appcompat:appcompat:$androidXAppCompatVersion"
77
compile "com.google.android.material:material:$androidXMaterial"

‎src/core/textbase/cssproperties.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,27 @@ export const floatingColorProperty = new CssProperty<Style, Color>({
3939
valueConverter: v => new Color(v)
4040
});
4141
floatingColorProperty.register(Style);
42+
export const floatingInactiveColorProperty = new CssProperty<Style, Color>({
43+
name: 'floatingInactiveColor',
44+
cssName: 'floating-inactive-color',
45+
equalityComparer: Color.equals,
46+
valueConverter: v => new Color(v)
47+
});
48+
floatingInactiveColorProperty.register(Style);
4249
export const strokeColorProperty = new CssProperty<Style, Color>({
4350
name: 'strokeColor',
4451
cssName: 'stroke-color',
4552
equalityComparer: Color.equals,
4653
valueConverter: v => new Color(v)
4754
});
4855
strokeColorProperty.register(Style);
56+
export const strokeInactiveColorProperty = new CssProperty<Style, Color>({
57+
name: 'strokeInactiveColor',
58+
cssName: 'stroke-inactive-color',
59+
equalityComparer: Color.equals,
60+
valueConverter: v => new Color(v)
61+
});
62+
strokeInactiveColorProperty.register(Style);
4963
export const buttonColorProperty = new CssProperty<Style, Color>({
5064
name: 'buttonColor',
5165
cssName: 'button-color',

‎src/textfield/textfield.android.ts

Lines changed: 46 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,17 @@ import { backgroundInternalProperty, borderBottomLeftRadiusProperty, hintPropert
44
import { Background } from '@nativescript/core/ui/styling/background';
55
import { ad } from '@nativescript/core/utils/utils';
66
import { TextFieldBase } from './textfield.common';
7-
import { errorColorProperty, errorProperty, floatingColorProperty, floatingProperty, helperProperty, maxLengthProperty, strokeColorProperty } from 'nativescript-material-core/textbase/cssproperties';
8-
7+
import {
8+
errorColorProperty,
9+
errorProperty,
10+
floatingColorProperty,
11+
floatingInactiveColorProperty,
12+
floatingProperty,
13+
helperProperty,
14+
maxLengthProperty,
15+
strokeColorProperty,
16+
strokeInactiveColorProperty
17+
} from 'nativescript-material-core/textbase/cssproperties';
918

1019
interface TextInputEditText extends com.google.android.material.textfield.TextInputEditText {
1120
// tslint:disable-next-line:no-misused-new
@@ -42,13 +51,13 @@ export function initTextInputEditText() {
4251
TextInputEditText = TextInputEditTextImpl as any;
4352
}
4453

45-
export function getDefaultHintTextColorStateList(pressedColor: number, color = 1627389952) {
54+
function getColorStateList(activeColor: number, inactiveColor = 1627389952) {
4655
const states = Array.create('[I', 2);
4756
states[0] = stateSets.FOCUSED_STATE_SET;
4857
states[1] = Array.create('int', 0);
4958
const colors = Array.create('int', 2);
50-
colors[0] = pressedColor;
51-
colors[1] = color;
59+
colors[0] = activeColor;
60+
colors[1] = inactiveColor;
5261
return new android.content.res.ColorStateList(states, colors);
5362
}
5463

@@ -114,12 +123,20 @@ export class TextField extends TextFieldBase {
114123
const placeholderColor = value instanceof Color ? value.android : value;
115124
const floatingColor = this.floatingColor instanceof Color ? this.floatingColor.android : placeholderColor;
116125

117-
this.layoutView.setDefaultHintTextColor(getDefaultHintTextColorStateList(floatingColor, placeholderColor));
126+
this.layoutView.setDefaultHintTextColor(getColorStateList(floatingColor, placeholderColor));
118127
}
128+
119129
[floatingColorProperty.setNative](value: Color) {
120130
const floatingColor = value instanceof Color ? value.android : value;
121131
const placeholderColor = this.placeholderColor instanceof Color ? this.placeholderColor.android : undefined;
122-
this.layoutView.setDefaultHintTextColor(getDefaultHintTextColorStateList(floatingColor, placeholderColor));
132+
this.layoutView.setDefaultHintTextColor(getColorStateList(floatingColor, placeholderColor));
133+
}
134+
135+
[floatingInactiveColorProperty.setNative](value: Color) {
136+
const placeholderColor = value instanceof Color ? value.android : value;
137+
const floatingColor =
138+
this.floatingColor instanceof Color ? this.floatingColor.android : this.layoutView.getDefaultHintTextColor().getColorForState(stateSets.FOCUSED_STATE_SET, placeholderColor);
139+
this.layoutView.setDefaultHintTextColor(getColorStateList(floatingColor, placeholderColor));
123140
}
124141

125142
public requestFocus() {
@@ -165,11 +182,32 @@ export class TextField extends TextFieldBase {
165182
this.layoutView.setHintEnabled(!!value);
166183
}
167184

185+
[strokeInactiveColorProperty.setNative](value: Color) {
186+
const color = value instanceof Color ? value.android : value;
187+
// @ts-ignore This check can be removed once this package is updated to rely on 1.2.0 of material components
188+
if (this.layoutView.setBoxStrokeColorStateList) {
189+
const activeColor = this.strokeColor instanceof Color ? this.strokeColor.android : this.layoutView.getBoxStrokeColor();
190+
const colorStateList = getColorStateList(activeColor, color);
191+
// @ts-ignore
192+
this.layoutView.setBoxStrokeColorStateList(colorStateList);
193+
}
194+
// this.editText.setBackgroundTintList(android.content.res.ColorStateList.valueOf(color));
195+
}
196+
168197
[strokeColorProperty.setNative](value: Color) {
169198
const color = value instanceof Color ? value.android : value;
170-
this.layoutView.setBoxStrokeColor(color);
199+
// @ts-ignore This check can be removed once this package is updated to rely on 1.2.0 of material components
200+
if (this.layoutView.setBoxStrokeColorStateList) {
201+
const inactiveColor = this.strokeInactiveColor instanceof Color ? this.strokeInactiveColor.android : undefined;
202+
const colorStateList = getColorStateList(color, inactiveColor);
203+
// @ts-ignore
204+
this.layoutView.setBoxStrokeColorStateList(colorStateList);
205+
} else {
206+
this.layoutView.setBoxStrokeColor(color);
207+
}
171208
// this.editText.setBackgroundTintList(android.content.res.ColorStateList.valueOf(color));
172209
}
210+
173211
[backgroundInternalProperty.setNative](value: Background) {
174212
switch (this.variant) {
175213
case 'none':

‎src/textfield/textfield.common.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ export abstract class TextFieldBase extends NTextField {
1717
@cssProperty variant: 'outline' | 'underline' | 'filled' | 'none' = 'filled';
1818
@cssProperty error: string;
1919
@cssProperty strokeColor: Color;
20+
@cssProperty strokeInactiveColor: Color;
2021
@cssProperty floatingColor: Color;
22+
@cssProperty floatingInactiveColor: Color;
2123
@cssProperty buttonColor: Color;
2224
}

0 commit comments

Comments
 (0)