Skip to content

Commit 3df91bf

Browse files
farfromrefugfarfromrefug
committed
testing new textfield
1 parent bbf6747 commit 3df91bf

File tree

10 files changed

+3625
-3339
lines changed

10 files changed

+3625
-3339
lines changed

‎demo-vue/app/examples/TextFields.vue‎

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,19 @@
99
<Button text="setFocus" @tap="$refs.textField1.nativeView.requestFocus()" />
1010
<Button text="setSelection" @tap="$refs.textField1.nativeView.setSelection(1, 4)" />
1111
</StackLayout>
12-
<StackLayout backgroundColor="red" horizontalAlignment="center">
12+
<StackLayout backgroundColor="red" horizontalAlignment="center" orientation="horizontal">
13+
<Label width="20" height="20" backgroundColor="green" verticalAlignment="top"/>
1314
<MDTextField
1415
ref="textField1"
1516
id="textField1"
16-
verticalAlignment="center"
17+
backgroundColor="blue"
18+
verticalAlignment="top"
1719
variant="none"
1820
width="250"
21+
height="60"
22+
paddingTop="4"
23+
paddingBottom="0"
24+
paddingLeft="0"
1925
placeholderColor="green"
2026
keyboardType="datetime"
2127
hint="i am an hint"
@@ -32,17 +38,22 @@
3238
id="textField2"
3339
variant="filled"
3440
hint="hint me"
41+
helper="helper text"
3542
v-model="value"
3643
backgroundColor="green"
3744
@focus="onFocus"
3845
@blur="onBlur"
3946
@textChange="onTextChange"
4047
@returnPress="onReturnPress"
41-
floating="false"
48+
floating="true"
4249
/>
4350
</GridLayout>
44-
<MDTextField id="textField34" hint="test" class="md-textfield-outline" variant="outline"/>
45-
<MDTextField id="textField3" hint="filled" @focus="onFocus" @blur="onBlur" @textChange="onTextChange" @returnPress="onReturnPress" margin="10" editable="false" />
51+
<MDTextField id="textField34" hint="test"
52+
helper="helper text" helperColor="green" errorColor="purple"
53+
error="error text"
54+
class="md-textfield-outline" variant="outline"/>
55+
<MDTextField id="textField3" hint="filled" @focus="onFocus" @blur="onBlur" @textChange="onTextChange" @returnPress="onReturnPress" margin="10"
56+
text="this si a text not editable" editable="false" />
4657
<MDTextField
4758
id="textField4"
4859
variant="outline"
@@ -53,6 +64,7 @@
5364
@returnPress="onReturnPress"
5465
floatingColor="red"
5566
margin="10"
67+
height="100"
5668
buttonColor="red"
5769
>
5870
<FormattedString>
@@ -90,13 +102,14 @@
90102
<MDTextField
91103
id="textField7"
92104
variant="filled"
93-
hint="limited digits 0123456789."
105+
hint="limited 1digits 0123456789."
94106
@focus="onFocus"
95107
@blur="onBlur"
96108
floating="false"
97109
@textChange="onTextChange"
98110
@returnPress="onReturnPress"
99-
digits="0123456789."
111+
keyboardType="decimal"
112+
digits="0123456789."
100113
margin="10"
101114
/>
102115
<MDTextField
@@ -105,13 +118,11 @@
105118
hint="limited digits 0123456789."
106119
@focus="onFocus"
107120
@blur="onBlur"
108-
floating="false"
109121
@textChange="onTextChange"
110122
@returnPress="onReturnPress"
111123
digits="0123456789."
112124
strokeColor="red"
113125
margin="10"
114-
padding="0"
115126
/>
116127
</StackLayout>
117128
</ScrollView>

‎packages/textfield/platforms/ios/Podfile‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
# pod 'MaterialComponents/TextControls+FilledTextFields'
2-
# pod 'MaterialComponents/TextControls+UnderlinedTextFields'
3-
# pod 'MaterialComponents/TextControls+OutlinedTextFields'
4-
# pod 'MaterialComponents/TextControls+FilledTextFieldsTheming'
5-
# pod 'MaterialComponents/TextControls+UnderlinedTextFieldsTheming'
6-
# pod 'MaterialComponents/TextControls+OutlinedTextFieldsTheming'
7-
pod 'MaterialComponents/TextFields+Theming'
1+
pod 'MaterialComponents/TextControls+FilledTextFields'
2+
pod 'MaterialComponents/TextControls+UnderlinedTextFields'
3+
pod 'MaterialComponents/TextControls+OutlinedTextFields'
4+
pod 'MaterialComponents/TextControls+FilledTextFieldsTheming'
5+
pod 'MaterialComponents/TextControls+UnderlinedTextFieldsTheming'
6+
pod 'MaterialComponents/TextControls+OutlinedTextFieldsTheming'
7+
# pod 'MaterialComponents/TextFields+Theming'

‎packages/textview/platforms/ios/Podfile‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,6 @@
1-
pod 'MaterialComponents/TextFields+Theming'
1+
pod 'MaterialComponents/TextFields+Theming'
2+
3+
pod 'MaterialComponents/TextControls+FilledTextAreas'
4+
pod 'MaterialComponents/TextControls+OutlinedTextAreas'
5+
pod 'MaterialComponents/TextControls+FilledTextAreasTheming'
6+
pod 'MaterialComponents/TextControls+OutlinedTextAreasTheming'

‎src/core/cssproperties.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Color, CssProperty, InheritedCssProperty, Length, Style, makeParser, makeValidator, LengthType } from '@nativescript/core';
1+
import { Color, CoreTypes, CssProperty, Style } from '@nativescript/core';
22

33
function createGetter(key) {
44
return function () {
@@ -27,14 +27,14 @@ export const rippleColorProperty = new CssProperty<Style, Color>({
2727
valueConverter: (v) => new Color(v)
2828
});
2929
rippleColorProperty.register(Style);
30-
export const elevationProperty = new CssProperty<Style, LengthType>({
30+
export const elevationProperty = new CssProperty<Style, CoreTypes.LengthType>({
3131
name: 'elevation',
3232
cssName: 'elevation',
3333

3434
valueConverter: parseFloat
3535
});
3636
elevationProperty.register(Style);
37-
export const dynamicElevationOffsetProperty = new CssProperty<Style, LengthType>({
37+
export const dynamicElevationOffsetProperty = new CssProperty<Style, CoreTypes.LengthType>({
3838
name: 'dynamicElevationOffset',
3939
cssName: 'dynamic-elevation-offset',
4040

‎src/core/textbase/cssproperties.ts‎

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { Color, CssProperty, Style, booleanConverter } from '@nativescript/core';
1+
import { Color, CoreTypes, CssProperty, Length, Style, booleanConverter } from '@nativescript/core';
22

33
export const errorColorProperty = new CssProperty<Style, Color>({
44
name: 'errorColor',
55
cssName: 'error-color',
66
equalityComparer: Color.equals,
7-
valueConverter: v => new Color(v)
7+
valueConverter: (v) => new Color(v)
88
});
99
errorColorProperty.register(Style);
1010
export const helperProperty = new CssProperty<Style, string>({
@@ -16,7 +16,7 @@ export const helperColorProperty = new CssProperty<Style, Color>({
1616
name: 'helperColor',
1717
cssName: 'helper-color',
1818
equalityComparer: Color.equals,
19-
valueConverter: v => new Color(v),
19+
valueConverter: (v) => new Color(v)
2020
});
2121
helperColorProperty.register(Style);
2222
export const errorProperty = new CssProperty<Style, string>({
@@ -27,7 +27,7 @@ errorProperty.register(Style);
2727
export const counterMaxLengthProperty = new CssProperty<Style, number>({
2828
name: 'counterMaxLength',
2929
cssName: 'counter-max-length',
30-
valueConverter: v => parseFloat(v)
30+
valueConverter: (v) => parseFloat(v)
3131
});
3232
counterMaxLengthProperty.register(Style);
3333
export const floatingProperty = new CssProperty<Style, boolean>({
@@ -40,46 +40,58 @@ export const floatingColorProperty = new CssProperty<Style, Color>({
4040
name: 'floatingColor',
4141
cssName: 'floating-color',
4242
equalityComparer: Color.equals,
43-
valueConverter: v => new Color(v)
43+
valueConverter: (v) => new Color(v)
4444
});
4545
floatingColorProperty.register(Style);
4646
export const floatingInactiveColorProperty = new CssProperty<Style, Color>({
4747
name: 'floatingInactiveColor',
4848
cssName: 'floating-inactive-color',
4949
equalityComparer: Color.equals,
50-
valueConverter: v => new Color(v)
50+
valueConverter: (v) => new Color(v)
5151
});
5252
floatingInactiveColorProperty.register(Style);
5353
export const strokeColorProperty = new CssProperty<Style, Color>({
5454
name: 'strokeColor',
5555
cssName: 'stroke-color',
5656
equalityComparer: Color.equals,
57-
valueConverter: v => new Color(v)
57+
valueConverter: (v) => new Color(v)
5858
});
5959
strokeColorProperty.register(Style);
6060
export const strokeInactiveColorProperty = new CssProperty<Style, Color>({
6161
name: 'strokeInactiveColor',
6262
cssName: 'stroke-inactive-color',
6363
equalityComparer: Color.equals,
64-
valueConverter: v => new Color(v)
64+
valueConverter: (v) => new Color(v)
6565
});
6666
strokeInactiveColorProperty.register(Style);
6767
export const strokeDisabledColorProperty = new CssProperty<Style, Color>({
6868
name: 'strokeDisabledColor',
6969
cssName: 'stroke-disabled-color',
7070
equalityComparer: Color.equals,
71-
valueConverter: v => new Color(v)
71+
valueConverter: (v) => new Color(v)
7272
});
7373
strokeDisabledColorProperty.register(Style);
7474
export const buttonColorProperty = new CssProperty<Style, Color>({
7575
name: 'buttonColor',
7676
cssName: 'button-color',
7777
equalityComparer: Color.equals,
78-
valueConverter: v => new Color(v)
78+
valueConverter: (v) => new Color(v)
7979
});
8080
buttonColorProperty.register(Style);
8181
export const digitsProperty = new CssProperty<Style, string>({
8282
name: 'digits',
8383
cssName: 'digits'
8484
});
8585
digitsProperty.register(Style);
86+
export const strokeWidthProperty = new CssProperty<Style, CoreTypes.LengthType>({
87+
name: 'strokeWidth',
88+
cssName: 'stroke-width',
89+
valueConverter: Length.parse
90+
});
91+
strokeWidthProperty.register(Style);
92+
export const strokeWidthFocusedProperty = new CssProperty<Style, CoreTypes.LengthType>({
93+
name: 'strokeWidthFocused',
94+
cssName: 'stroke-width-focused',
95+
valueConverter: Length.parse
96+
});
97+
strokeWidthFocusedProperty.register(Style);

‎src/textfield/textfield.android.ts‎

Lines changed: 41 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@ import {
1313
helperProperty,
1414
strokeColorProperty,
1515
strokeDisabledColorProperty,
16-
strokeInactiveColorProperty
16+
strokeInactiveColorProperty,
17+
strokeWidthFocusedProperty,
18+
strokeWidthProperty
1719
} from '@nativescript-community/ui-material-core/textbase/cssproperties';
1820
import {
1921
Background,
@@ -24,6 +26,7 @@ import {
2426
Utils,
2527
backgroundInternalProperty,
2628
borderBottomLeftRadiusProperty,
29+
editableProperty,
2730
fontInternalProperty,
2831
hintProperty,
2932
paddingBottomProperty,
@@ -36,6 +39,7 @@ import {
3639
} from '@nativescript/core';
3740
import { secureProperty } from '@nativescript/core/ui/text-field';
3841
import { TextFieldBase } from './textfield.common';
42+
import { layout } from '@nativescript/core/utils';
3943

4044
let LayoutInflater: typeof android.view.LayoutInflater;
4145
let FrameLayoutLayoutParams: typeof android.widget.FrameLayout.LayoutParams;
@@ -109,7 +113,10 @@ export class TextField extends TextFieldBase {
109113
if (needsTransparent) {
110114
layoutView.setBoxBackgroundColor(0); // android.graphics.Color.TRANSPARENT
111115
editText.setBackground(null);
116+
layoutView.setHintEnabled(false);
112117
}
118+
119+
layoutView.setErrorIconDrawable(null);
113120
// layoutView.setFocusableInTouchMode(true); // to prevent focus on view creation
114121
return layoutView;
115122
}
@@ -179,7 +186,9 @@ export class TextField extends TextFieldBase {
179186

180187
[errorColorProperty.setNative](value: Color) {
181188
const color = value instanceof Color ? value.android : value;
182-
(this.layoutView as any).setErrorTextColor(android.content.res.ColorStateList.valueOf(color));
189+
const nColor = android.content.res.ColorStateList.valueOf(color);
190+
this.layoutView.setErrorTextColor(nColor);
191+
this.layoutView.setBoxStrokeErrorColor(nColor);
183192
}
184193

185194
[helperProperty.setNative](value: string) {
@@ -215,6 +224,14 @@ export class TextField extends TextFieldBase {
215224
}
216225
}
217226

227+
[strokeWidthProperty.setNative](value: CoreTypes.LengthType) {
228+
this.layoutView.setBoxStrokeWidth(Length.toDevicePixels(value, 0));
229+
}
230+
231+
[strokeWidthFocusedProperty.setNative](value: CoreTypes.LengthType) {
232+
this.layoutView.setBoxStrokeWidthFocused(Length.toDevicePixels(value, 0));
233+
}
234+
218235
[strokeColorProperty.setNative](value: Color) {
219236
const color = value instanceof Color ? value.android : value;
220237
if (this.layoutView.setBoxStrokeColorStateList) {
@@ -293,16 +310,28 @@ export class TextField extends TextFieldBase {
293310
}
294311
}
295312
[paddingTopProperty.setNative](value: CoreTypes.LengthType) {
296-
org.nativescript.widgets.ViewHelper.setPaddingTop(this.nativeViewProtected, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderTopWidth, 0));
313+
org.nativescript.widgets.ViewHelper.setPaddingTop(
314+
this.nativeTextViewProtected,
315+
layout.toDeviceIndependentPixels(Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderTopWidth, 0))
316+
);
297317
}
298318
[paddingRightProperty.setNative](value: CoreTypes.LengthType) {
299-
org.nativescript.widgets.ViewHelper.setPaddingRight(this.nativeViewProtected, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderRightWidth, 0));
319+
org.nativescript.widgets.ViewHelper.setPaddingRight(
320+
this.nativeTextViewProtected,
321+
layout.toDeviceIndependentPixels(Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderRightWidth, 0))
322+
);
300323
}
301324
[paddingBottomProperty.setNative](value: CoreTypes.LengthType) {
302-
org.nativescript.widgets.ViewHelper.setPaddingBottom(this.nativeViewProtected, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderBottomWidth, 0));
325+
org.nativescript.widgets.ViewHelper.setPaddingBottom(
326+
this.nativeTextViewProtected,
327+
layout.toDeviceIndependentPixels(Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderBottomWidth, 0))
328+
);
303329
}
304330
[paddingLeftProperty.setNative](value: CoreTypes.LengthType) {
305-
org.nativescript.widgets.ViewHelper.setPaddingLeft(this.nativeViewProtected, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderLeftWidth, 0));
331+
org.nativescript.widgets.ViewHelper.setPaddingLeft(
332+
this.nativeTextViewProtected,
333+
layout.toDeviceIndependentPixels(Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderLeftWidth, 0))
334+
);
306335
}
307336
[textAlignmentProperty.setNative](value: CoreTypes.TextAlignmentType) {
308337
this.nativeTextViewProtected.setGravity(getHorizontalGravity(value) | getVerticalGravity(this.verticalTextAlignment));
@@ -311,5 +340,11 @@ export class TextField extends TextFieldBase {
311340
// TODO: not working for now
312341
this.nativeTextViewProtected.setGravity(getHorizontalGravity(this.textAlignment) | getVerticalGravity(value));
313342
}
343+
344+
[editableProperty.setNative](value: boolean) {
345+
super[editableProperty.setNative](value);
346+
const nativeView = this.nativeTextViewProtected;
347+
nativeView.setFocusable(value);
348+
}
314349
}
315350
//

0 commit comments

Comments
 (0)