Merge pull request #87 from mendix/feat/onfocus

Add focus styles

Author: wegiswes

styles/native/ts/core/widgets/dropdown.ts

@@ -33,30 +33,36 @@ export const DropDown: DropDownType = {
     value: {
         // All TextStyle properties & placeholderTextColor are allowed
         color: input.color,
-        borderColor: input.borderColor,
-        backgroundColor: input.backgroundColor,
-
         fontSize: input.fontSize,
         fontFamily: input.fontFamily,
-        borderWidth: input.borderWidth,
-        borderRadius: input.borderRadius,
-
-        paddingHorizontal: input.paddingHorizontal,
-        paddingVertical: input.paddingVertical,
-
         placeholderTextColor: input.placeholderTextColor, // Only applied when useUniformDesign is true
     },
-    valueDisabled: {
-        // All TextStyle properties are allowed
-        ...TextBox.inputDisabled
-    },
     validationMessage: {
         // All TextStyle properties are allowed
         ...TextBox.validationMessage,
     },
     /*  New dropdown styles start */
+    valueFocused: {
+        // All TextStyle properties are allowed
+    },
+    valueDisabled: {
+        // All TextStyle properties are allowed
+        ...TextBox.inputDisabled
+    },
     valueContainer: {
-        // All ViewStyle properties & rippleColor & activeOpacity & underlayColor are allowed
+        // All ViewStyle properties & rippleColor are allowed
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        borderWidth: input.borderWidth,
+        borderRadius: input.borderRadius,
+        borderColor: input.borderColor,
+        paddingHorizontal: input.paddingHorizontal,
+        paddingVertical: input.paddingVertical,
+        backgroundColor: input.backgroundColor,
+    },
+    valueContainerFocused: {
+        // All ViewStyle properties are allowed
     },
     valueContainerDisabled: {
         // All ViewStyle properties are allowed
@@ -78,6 +84,9 @@ export const DropDown: DropDownType = {
         backgroundColor: input.backgroundColor,
         underlayColor: input.inputContainerUnderlayColor,
     },
+    iconStyle: {
+        // All TextStyle properties are allowed
+    },
     item: {
         // All TextStlye properties are allowed
         color: input.color,
@@ -115,12 +124,15 @@ export const DropDownVertical: DropDownType = {
     label: TextBoxVertical.label,
     labelDisabled: TextBoxVertical.labelDisabled,
     value: DropDown.value,
+    valueFocused: DropDown.valueFocused,
+    validationMessage: TextBoxVertical.validationMessage,
     valueContainer: DropDown.valueContainer,
+    valueContainerFocused: DropDown.valueContainerFocused,
     valueContainerDisabled: DropDown.valueContainerDisabled,
-    validationMessage: TextBoxVertical.validationMessage,
     menuWrapper: DropDown.menuWrapper,
     itemContainer: DropDown.itemContainer,
     item: DropDown.item,
+    iconStyle: DropDown.iconStyle,
     useUniformDesign: DropDown.useUniformDesign,
     pickerIOS: DropDown.pickerIOS,
     pickerItemIOS: DropDown.pickerItemIOS,

styles/native/ts/core/widgets/referenceselector.ts

@@ -1,5 +1,5 @@
 import { border, contrast, font, input } from "../variables";
-import { DropDown }                      from "./dropdown";
+import { DropDownVertical }                      from "./dropdown";
 import { TextBox, TextBoxVertical }      from "./textbox";
 import { DropDownType }                  from "../../types/widgets";
 /*
@@ -34,31 +34,37 @@ export const ReferenceSelector: DropDownType = {
     value: {
         // All TextStyle properties & placeholderTextColor are allowed
         color: input.color,
-        borderColor: input.borderColor,
-        backgroundColor: input.backgroundColor,
-
         fontSize: input.fontSize,
         fontFamily: input.fontFamily,
-        borderWidth: input.borderWidth,
-        borderRadius: input.borderRadius,
-
         overflow: "hidden",
-        paddingHorizontal: input.paddingHorizontal,
-        paddingVertical: input.paddingVertical,
-
         placeholderTextColor: input.placeholderTextColor, // Only applied when useUniformDesign is true
     },
-    valueDisabled: {
-        // All TextStyle properties are allowed
-        ...TextBox.inputDisabled
-    },
     validationMessage: {
         // All TextStyle properties are allowed
         ...TextBox.validationMessage,
     },
     /*  New dropdown styles start */
+    valueFocused: {
+        // All TextStyle properties are allowed
+    },
+    valueDisabled: {
+        // All TextStyle properties are allowed
+        ...TextBox.inputDisabled
+    },
     valueContainer: {
-        // All ViewStyle properties & rippleColor & activeOpacity & underlayColor are allowed
+        // All ViewStyle properties & rippleColor are allowed
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        borderWidth: input.borderWidth,
+        borderRadius: input.borderRadius,
+        borderColor: input.borderColor,
+        paddingHorizontal: input.paddingHorizontal,
+        paddingVertical: input.paddingVertical,
+        backgroundColor: input.backgroundColor,
+    },
+    valueContainerFocused: {
+        // All ViewStyle properties are allowed
     },
     valueContainerDisabled: {
         // All ViewStyle properties are allowed
@@ -80,6 +86,9 @@ export const ReferenceSelector: DropDownType = {
         backgroundColor: input.backgroundColor,
         underlayColor: input.inputContainerUnderlayColor,
     },
+    iconStyle: {
+        // All TextStyle properties are allowed
+    },
     item: {
         // All TextStyle properties are allowed
         color: input.color,
@@ -116,16 +125,19 @@ export const ReferenceSelectorVertical: DropDownType = {
     containerDisabled: TextBoxVertical.containerDisabled,
     label: TextBoxVertical.label,
     labelDisabled: TextBoxVertical.labelDisabled,
-    value: DropDown.value,
-    valueContainer: DropDown.valueContainer,
-    valueContainerDisabled: DropDown.valueContainerDisabled,
+    value: DropDownVertical.value,
+    valueFocused: DropDownVertical.valueFocused,
     validationMessage: TextBoxVertical.validationMessage,
-    menuWrapper: DropDown.menuWrapper,
-    itemContainer: DropDown.itemContainer,
-    item: DropDown.item,
-    useUniformDesign: DropDown.useUniformDesign,
-    pickerIOS: DropDown.pickerIOS,
-    pickerItemIOS: DropDown.pickerItemIOS,
-    pickerBackdropIOS: DropDown.pickerBackdropIOS,
-    pickerTopIOS: DropDown.pickerTopIOS,
+    valueContainer: DropDownVertical.valueContainer,
+    valueContainerFocused: DropDownVertical.valueContainerFocused,
+    valueContainerDisabled: DropDownVertical.valueContainerDisabled,
+    menuWrapper: DropDownVertical.menuWrapper,
+    itemContainer: DropDownVertical.itemContainer,
+    item: DropDownVertical.item,
+    iconStyle: DropDownVertical.iconStyle,
+    useUniformDesign: DropDownVertical.useUniformDesign,
+    pickerIOS: DropDownVertical.pickerIOS,
+    pickerItemIOS: DropDownVertical.pickerItemIOS,
+    pickerBackdropIOS: DropDownVertical.pickerBackdropIOS,
+    pickerTopIOS: DropDownVertical.pickerTopIOS,
 };

styles/native/ts/core/widgets/textarea.ts

@@ -47,6 +47,10 @@ export const TextArea: TextBoxType = {
         // autoCapitalize, placeholderTextColor, selectionColor, underlineColorAndroid and all TextStyle properties are allowed
         ...TextBox.inputError,
     },
+    inputFocused: {
+        // autoCapitalize, placeholderTextColor, selectionColor, underlineColorAndroid and all TextStyle properties are allowed
+        ...TextBox.inputFocused,
+    },
     validationMessage: {
         // All TextStyle properties are allowed
         ...TextBox.validationMessage,
@@ -65,5 +69,6 @@ export const TextAreaVertical: TextBoxType = {
     input: TextBoxVertical.input,
     inputDisabled: TextBoxVertical.inputDisabled,
     inputError: TextBoxVertical.inputError,
+    inputFocused: TextBoxVertical.inputFocused,
     validationMessage: TextBoxVertical.validationMessage,
 };

styles/native/ts/core/widgets/textbox.ts

@@ -60,6 +60,9 @@ export const TextBox: TextBoxType = {
         placeholderTextColor: input.errorColor,
         underlineColorAndroid: input.underlineColorAndroid,
     },
+    inputFocused: {
+        // autoCapitalize, placeholderTextColor, selectionColor, underlineColorAndroid and all TextStyle properties are allowed
+    },
     validationMessage: {
         // All TextStyle properties are allowed
         color: input.errorColor,
@@ -94,6 +97,7 @@ export const TextBoxVertical: TextBoxType = {
         paddingHorizontal: input.paddingHorizontal,
         paddingVertical: input.paddingVertical,
     },
+    inputFocused: TextBox.inputFocused,
     inputDisabled: TextBox.inputDisabled,
     inputError: TextBox.inputError,
     validationMessage: TextBox.validationMessage,

styles/native/ts/types/widgets.d.ts

@@ -173,13 +173,14 @@ export interface DropDownType {
     valueDisabled?: TextStyle,
     validationMessage?: TextStyle,
     /*  New dropdown styles start */
-    valueContainer?: ViewStyle & {
-        rippleColor?: string;
-        underlayColor?: string;
-        activeOpacity?: number;
-    };
+    valueContainer?: {
+                         rippleColor?: string
+                     } & ViewStyle;
+    valueContainerFocused?: ViewStyle;
     valueContainerDisabled?: ViewStyle;
+    valueFocused?: TextStyle;
     menuWrapper?: ViewStyle;
+    iconStyle?: TextStyle;
     item?: TextStyle;
     itemContainer?: ViewStyle & {
         rippleColor?: string;
@@ -451,6 +452,7 @@ export interface TextBoxType {
     input?: InputType,
     inputDisabled?: InputType,
     inputError?: InputType,
+    inputFocused?: InputType;
     validationMessage?: TextStyle
 }