testing new textfield

Author: farfromrefug

demo-vue/app/examples/TextFields.vue

@@ -9,13 +9,19 @@
                     <Button text="setFocus" @tap="$refs.textField1.nativeView.requestFocus()" />
                     <Button text="setSelection" @tap="$refs.textField1.nativeView.setSelection(1, 4)" />
                 </StackLayout>
-                <StackLayout backgroundColor="red" horizontalAlignment="center">
+                <StackLayout backgroundColor="red" horizontalAlignment="center" orientation="horizontal">
+                    <Label width="20" height="20" backgroundColor="green" verticalAlignment="top"/>
                     <MDTextField
                         ref="textField1"
                         id="textField1"
-                        verticalAlignment="center"
+                        backgroundColor="blue"
+                        verticalAlignment="top"
                         variant="none"
                         width="250"
+                        height="60"
+                        paddingTop="4"
+                        paddingBottom="0"
+                        paddingLeft="0"
                         placeholderColor="green"
                         keyboardType="datetime"
                         hint="i am an hint"
@@ -32,17 +38,22 @@
                         id="textField2"
                         variant="filled"
                         hint="hint me"
+                        helper="helper text"
                         v-model="value"
                         backgroundColor="green"
                         @focus="onFocus"
                         @blur="onBlur"
                         @textChange="onTextChange"
                         @returnPress="onReturnPress"
-                        floating="false"
+                        floating="true"
                     />
                 </GridLayout>
-                <MDTextField id="textField34" hint="test" class="md-textfield-outline" variant="outline"/>
-                <MDTextField id="textField3" hint="filled" @focus="onFocus" @blur="onBlur" @textChange="onTextChange" @returnPress="onReturnPress" margin="10" editable="false" />
+                <MDTextField id="textField34" hint="test" 
+                        helper="helper text" helperColor="green" errorColor="purple"
+                        error="error text"
+                class="md-textfield-outline" variant="outline"/>
+                <MDTextField id="textField3" hint="filled" @focus="onFocus" @blur="onBlur" @textChange="onTextChange" @returnPress="onReturnPress" margin="10" 
+                text="this si a text not editable" editable="false" />
                 <MDTextField
                     id="textField4"
                     variant="outline"
@@ -53,6 +64,7 @@
                     @returnPress="onReturnPress"
                     floatingColor="red"
                     margin="10"
+                    height="100"
                     buttonColor="red"
                 >
                     <FormattedString>
@@ -90,13 +102,14 @@
                 <MDTextField
                     id="textField7"
                     variant="filled"
-                    hint="limited digits 0123456789."
+                    hint="limited 1digits 0123456789."
                     @focus="onFocus"
                     @blur="onBlur"
                     floating="false"
                     @textChange="onTextChange"
                     @returnPress="onReturnPress"
-                    digits="0123456789."
+                                      keyboardType="decimal"
+      digits="0123456789."
                     margin="10"
                 />
                 <MDTextField
@@ -105,13 +118,11 @@
                     hint="limited digits 0123456789."
                     @focus="onFocus"
                     @blur="onBlur"
-                    floating="false"
                     @textChange="onTextChange"
                     @returnPress="onReturnPress"
                     digits="0123456789."
                     strokeColor="red"
                     margin="10"
-                    padding="0"
                 />
             </StackLayout>
         </ScrollView>

packages/textfield/platforms/ios/Podfile

@@ -1,7 +1,7 @@
-# pod 'MaterialComponents/TextControls+FilledTextFields'
-# pod 'MaterialComponents/TextControls+UnderlinedTextFields'
-# pod 'MaterialComponents/TextControls+OutlinedTextFields'
-# pod 'MaterialComponents/TextControls+FilledTextFieldsTheming'
-# pod 'MaterialComponents/TextControls+UnderlinedTextFieldsTheming'
-# pod 'MaterialComponents/TextControls+OutlinedTextFieldsTheming'
-pod 'MaterialComponents/TextFields+Theming'
+pod 'MaterialComponents/TextControls+FilledTextFields'
+pod 'MaterialComponents/TextControls+UnderlinedTextFields'
+pod 'MaterialComponents/TextControls+OutlinedTextFields'
+pod 'MaterialComponents/TextControls+FilledTextFieldsTheming'
+pod 'MaterialComponents/TextControls+UnderlinedTextFieldsTheming'
+pod 'MaterialComponents/TextControls+OutlinedTextFieldsTheming'
+# pod 'MaterialComponents/TextFields+Theming'

packages/textview/platforms/ios/Podfile

@@ -1 +1,6 @@
-pod 'MaterialComponents/TextFields+Theming'
+pod 'MaterialComponents/TextFields+Theming'
+
+pod 'MaterialComponents/TextControls+FilledTextAreas'
+pod 'MaterialComponents/TextControls+OutlinedTextAreas'
+pod 'MaterialComponents/TextControls+FilledTextAreasTheming'
+pod 'MaterialComponents/TextControls+OutlinedTextAreasTheming'

src/core/cssproperties.ts

@@ -1,4 +1,4 @@
-import { Color, CssProperty, InheritedCssProperty, Length, Style, makeParser, makeValidator, LengthType } from '@nativescript/core';
+import { Color, CoreTypes, CssProperty, Style } from '@nativescript/core';
 
 function createGetter(key) {
     return function () {
@@ -27,14 +27,14 @@ export const rippleColorProperty = new CssProperty<Style, Color>({
     valueConverter: (v) => new Color(v)
 });
 rippleColorProperty.register(Style);
-export const elevationProperty = new CssProperty<Style, LengthType>({
+export const elevationProperty = new CssProperty<Style, CoreTypes.LengthType>({
     name: 'elevation',
     cssName: 'elevation',
 
     valueConverter: parseFloat
 });
 elevationProperty.register(Style);
-export const dynamicElevationOffsetProperty = new CssProperty<Style, LengthType>({
+export const dynamicElevationOffsetProperty = new CssProperty<Style, CoreTypes.LengthType>({
     name: 'dynamicElevationOffset',
     cssName: 'dynamic-elevation-offset',
 

src/core/textbase/cssproperties.ts

@@ -1,10 +1,10 @@
-import { Color, CssProperty, Style, booleanConverter } from '@nativescript/core';
+import { Color, CoreTypes, CssProperty, Length, Style, booleanConverter } from '@nativescript/core';
 
 export const errorColorProperty = new CssProperty<Style, Color>({
     name: 'errorColor',
     cssName: 'error-color',
     equalityComparer: Color.equals,
-    valueConverter: v => new Color(v)
+    valueConverter: (v) => new Color(v)
 });
 errorColorProperty.register(Style);
 export const helperProperty = new CssProperty<Style, string>({
@@ -16,7 +16,7 @@ export const helperColorProperty = new CssProperty<Style, Color>({
     name: 'helperColor',
     cssName: 'helper-color',
     equalityComparer: Color.equals,
-    valueConverter: v => new Color(v),
+    valueConverter: (v) => new Color(v)
 });
 helperColorProperty.register(Style);
 export const errorProperty = new CssProperty<Style, string>({
@@ -27,7 +27,7 @@ errorProperty.register(Style);
 export const counterMaxLengthProperty = new CssProperty<Style, number>({
     name: 'counterMaxLength',
     cssName: 'counter-max-length',
-    valueConverter: v => parseFloat(v)
+    valueConverter: (v) => parseFloat(v)
 });
 counterMaxLengthProperty.register(Style);
 export const floatingProperty = new CssProperty<Style, boolean>({
@@ -40,46 +40,58 @@ export const floatingColorProperty = new CssProperty<Style, Color>({
     name: 'floatingColor',
     cssName: 'floating-color',
     equalityComparer: Color.equals,
-    valueConverter: v => new Color(v)
+    valueConverter: (v) => new Color(v)
 });
 floatingColorProperty.register(Style);
 export const floatingInactiveColorProperty = new CssProperty<Style, Color>({
     name: 'floatingInactiveColor',
     cssName: 'floating-inactive-color',
     equalityComparer: Color.equals,
-    valueConverter: v => new Color(v)
+    valueConverter: (v) => new Color(v)
 });
 floatingInactiveColorProperty.register(Style);
 export const strokeColorProperty = new CssProperty<Style, Color>({
     name: 'strokeColor',
     cssName: 'stroke-color',
     equalityComparer: Color.equals,
-    valueConverter: v => new Color(v)
+    valueConverter: (v) => new Color(v)
 });
 strokeColorProperty.register(Style);
 export const strokeInactiveColorProperty = new CssProperty<Style, Color>({
     name: 'strokeInactiveColor',
     cssName: 'stroke-inactive-color',
     equalityComparer: Color.equals,
-    valueConverter: v => new Color(v)
+    valueConverter: (v) => new Color(v)
 });
 strokeInactiveColorProperty.register(Style);
 export const strokeDisabledColorProperty = new CssProperty<Style, Color>({
     name: 'strokeDisabledColor',
     cssName: 'stroke-disabled-color',
     equalityComparer: Color.equals,
-    valueConverter: v => new Color(v)
+    valueConverter: (v) => new Color(v)
 });
 strokeDisabledColorProperty.register(Style);
 export const buttonColorProperty = new CssProperty<Style, Color>({
     name: 'buttonColor',
     cssName: 'button-color',
     equalityComparer: Color.equals,
-    valueConverter: v => new Color(v)
+    valueConverter: (v) => new Color(v)
 });
 buttonColorProperty.register(Style);
 export const digitsProperty = new CssProperty<Style, string>({
     name: 'digits',
     cssName: 'digits'
 });
 digitsProperty.register(Style);
+export const strokeWidthProperty = new CssProperty<Style, CoreTypes.LengthType>({
+    name: 'strokeWidth',
+    cssName: 'stroke-width',
+    valueConverter: Length.parse
+});
+strokeWidthProperty.register(Style);
+export const strokeWidthFocusedProperty = new CssProperty<Style, CoreTypes.LengthType>({
+    name: 'strokeWidthFocused',
+    cssName: 'stroke-width-focused',
+    valueConverter: Length.parse
+});
+strokeWidthFocusedProperty.register(Style);

src/textfield/textfield.android.ts

@@ -13,7 +13,9 @@ import {
     helperProperty,
     strokeColorProperty,
     strokeDisabledColorProperty,
-    strokeInactiveColorProperty
+    strokeInactiveColorProperty,
+    strokeWidthFocusedProperty,
+    strokeWidthProperty
 } from '@nativescript-community/ui-material-core/textbase/cssproperties';
 import {
     Background,
@@ -24,6 +26,7 @@ import {
     Utils,
     backgroundInternalProperty,
     borderBottomLeftRadiusProperty,
+    editableProperty,
     fontInternalProperty,
     hintProperty,
     paddingBottomProperty,
@@ -36,6 +39,7 @@ import {
 } from '@nativescript/core';
 import { secureProperty } from '@nativescript/core/ui/text-field';
 import { TextFieldBase } from './textfield.common';
+import { layout } from '@nativescript/core/utils';
 
 let LayoutInflater: typeof android.view.LayoutInflater;
 let FrameLayoutLayoutParams: typeof android.widget.FrameLayout.LayoutParams;
@@ -109,7 +113,10 @@ export class TextField extends TextFieldBase {
         if (needsTransparent) {
             layoutView.setBoxBackgroundColor(0); // android.graphics.Color.TRANSPARENT
             editText.setBackground(null);
+            layoutView.setHintEnabled(false);
         }
+
+        layoutView.setErrorIconDrawable(null);
         // layoutView.setFocusableInTouchMode(true); // to prevent focus on view creation
         return layoutView;
     }
@@ -179,7 +186,9 @@ export class TextField extends TextFieldBase {
 
     [errorColorProperty.setNative](value: Color) {
         const color = value instanceof Color ? value.android : value;
-        (this.layoutView as any).setErrorTextColor(android.content.res.ColorStateList.valueOf(color));
+        const nColor = android.content.res.ColorStateList.valueOf(color);
+        this.layoutView.setErrorTextColor(nColor);
+        this.layoutView.setBoxStrokeErrorColor(nColor);
     }
 
     [helperProperty.setNative](value: string) {
@@ -215,6 +224,14 @@ export class TextField extends TextFieldBase {
         }
     }
 
+    [strokeWidthProperty.setNative](value: CoreTypes.LengthType) {
+        this.layoutView.setBoxStrokeWidth(Length.toDevicePixels(value, 0));
+    }
+
+    [strokeWidthFocusedProperty.setNative](value: CoreTypes.LengthType) {
+        this.layoutView.setBoxStrokeWidthFocused(Length.toDevicePixels(value, 0));
+    }
+
     [strokeColorProperty.setNative](value: Color) {
         const color = value instanceof Color ? value.android : value;
         if (this.layoutView.setBoxStrokeColorStateList) {
@@ -293,16 +310,28 @@ export class TextField extends TextFieldBase {
         }
     }
     [paddingTopProperty.setNative](value: CoreTypes.LengthType) {
-        org.nativescript.widgets.ViewHelper.setPaddingTop(this.nativeViewProtected, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderTopWidth, 0));
+        org.nativescript.widgets.ViewHelper.setPaddingTop(
+            this.nativeTextViewProtected,
+            layout.toDeviceIndependentPixels(Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderTopWidth, 0))
+        );
     }
     [paddingRightProperty.setNative](value: CoreTypes.LengthType) {
-        org.nativescript.widgets.ViewHelper.setPaddingRight(this.nativeViewProtected, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderRightWidth, 0));
+        org.nativescript.widgets.ViewHelper.setPaddingRight(
+            this.nativeTextViewProtected,
+            layout.toDeviceIndependentPixels(Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderRightWidth, 0))
+        );
     }
     [paddingBottomProperty.setNative](value: CoreTypes.LengthType) {
-        org.nativescript.widgets.ViewHelper.setPaddingBottom(this.nativeViewProtected, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderBottomWidth, 0));
+        org.nativescript.widgets.ViewHelper.setPaddingBottom(
+            this.nativeTextViewProtected,
+            layout.toDeviceIndependentPixels(Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderBottomWidth, 0))
+        );
     }
     [paddingLeftProperty.setNative](value: CoreTypes.LengthType) {
-        org.nativescript.widgets.ViewHelper.setPaddingLeft(this.nativeViewProtected, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderLeftWidth, 0));
+        org.nativescript.widgets.ViewHelper.setPaddingLeft(
+            this.nativeTextViewProtected,
+            layout.toDeviceIndependentPixels(Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderLeftWidth, 0))
+        );
     }
     [textAlignmentProperty.setNative](value: CoreTypes.TextAlignmentType) {
         this.nativeTextViewProtected.setGravity(getHorizontalGravity(value) | getVerticalGravity(this.verticalTextAlignment));
@@ -311,5 +340,11 @@ export class TextField extends TextFieldBase {
         // TODO: not working for now
         this.nativeTextViewProtected.setGravity(getHorizontalGravity(this.textAlignment) | getVerticalGravity(value));
     }
+
+    [editableProperty.setNative](value: boolean) {
+        super[editableProperty.setNative](value);
+        const nativeView = this.nativeTextViewProtected;
+        nativeView.setFocusable(value);
+    }
 }
 //