TextField - new outline preset

demo/src/screens/componentScreens/TextFieldScreen.tsx

@@ -17,7 +17,7 @@ export default class TextFieldScreen extends Component {
     isReadonly: false,
     value: 'Initial Value',
     isSearching: false,
-    customPreset: 'underline',
+    preset: TextField.presets.UNDERLINE,
     price: ''
   };
 
@@ -44,11 +44,17 @@ export default class TextFieldScreen extends Component {
   renderPresetExample() {
     return (
       <>
-        <Text h3 marginB-s1 marginT-s4>
-          Underline Preset
-        </Text>
+        <View marginV-s3>
+          <Text h3>
+            Presets
+          </Text>
+          <View row centerV>
+            <Text marginR-s4 $textPrimary>Preset:</Text>
+            <SegmentedControl segments={[{label: 'Underline'}, {label: 'Outline'}]} onChangeIndex={this.onChangeIndexFieldStyle}/>
+          </View>
+        </View>
 
-        <TextField ref={this.input} placeholder="Enter full name"/>
+        <TextField ref={this.input} placeholder="Enter full name" preset={this.state.preset}/>
       </>
     );
   }
@@ -74,6 +80,7 @@ export default class TextFieldScreen extends Component {
           />
           <TextField
             placeholder="Placeholder"
+            placeholderTextColor={Colors.$textNeutralLight}
             containerStyle={{flex: 1, marginLeft: Spacings.s6}}
           />
         </View>
@@ -175,7 +182,7 @@ export default class TextFieldScreen extends Component {
           // validateOnStart
           // validateOnBlur
         />
-        <View row spread center marginV-s3>
+        <View row spread center>
           <TextField
             ref={this.inputWithValidation}
             label="Name"
@@ -261,33 +268,50 @@ export default class TextFieldScreen extends Component {
   }
 
   onChangeIndexFieldStyle = (index: number) => {
-    this.setState({customPreset: index === 0 ? 'underline' : 'outline'});
+    this.setState({preset: index === 0 ? 'underline' : 'outline'});
+  };
+
+  getDynamicFieldStyle = (context, props) => {
+    let color = Colors.$outlineNeutral;
+
+    if (context?.isFocused) {
+      color = Colors.$outlinePrimary;
+    }
+    if (context?.hasValue && context?.isValid === false) {
+      color = Colors.$outlineDanger;
+    }
+    if (context?.hasValue && context?.isValid) {
+      color = Colors.$textSuccess;
+    }
+    if (context?.disabled) {
+      color = Colors.$outlineDefault;
+    }
+    if (context?.readonly) {
+      color = Colors.$outlineDisabled;
+    }
+
+    return props?.preset === TextField.presets.UNDERLINE ? {borderBottomColor: color} : {borderColor: color};
   };
 
   renderDynamicFieldExample() {
-    const {customPreset, isDisabled, isReadonly} = this.state;
+    const {preset, isDisabled, isReadonly} = this.state;
 
     return (
       <>
-        <View>
-          <Text h3 marginB-s3>
-            Dynamic Field Style
-          </Text>
-          <View row centerV>
-            <Text marginR-s4 $textPrimary>Custom style:</Text>
-            <SegmentedControl segments={[{label: 'Underline'}, {label: 'Outline'}]} onChangeIndex={this.onChangeIndexFieldStyle}/>
-          </View>
-        </View>
+        <Text h3 marginB-s3>
+          Dynamic Field Style
+        </Text>
 
         <TextField
-          label="Label"
-          placeholder="Enter text..."
-          preset={customPreset}
-          dynamicFieldStyle={(_state, {preset}) =>
-            preset === 'underline' ? styles.underline : styles.outline
-          }
+          label="Email"
+          placeholder="Enter valid email"
+          validate={'email'}
+          validateOnChange
+          validationMessage="Email is invalid"
+          preset={preset}
           editable={!isDisabled}
           readonly={isReadonly}
+          dynamicFieldStyle={this.getDynamicFieldStyle}
         />
       </>
     );
@@ -384,10 +408,10 @@ export default class TextFieldScreen extends Component {
           {this.renderPresetExample()}
           {this.renderPlaceholdersExample()}
           {this.renderValidationExample()}
-          {this.renderStateColorsExample()}
           {this.renderHintExample()}
           {this.renderCherCounterExample()}
           {this.renderAccessoriesExample()}
+          {this.renderStateColorsExample()}
           {this.renderDynamicFieldExample()}
           {this.renderFormatterExample()}
           {this.renderCustomAlignmentExample()}

src/components/textField/index.tsx

@@ -37,6 +37,7 @@ import CharCounter from './CharCounter';
 
 interface StaticMembers {
   validationMessagePositions: typeof ValidationMessagePosition;
+  presets: typeof Presets;
 }
 
 /**
@@ -199,7 +200,7 @@ const TextField = (props: InternalTextFieldProps) => {
           {trailingAccessory}
           {/* </View> */}
         </View>
-        <View row spread>
+        <View row spread marginT-s1>
           {validationMessagePosition === ValidationMessagePosition.BOTTOM && (
             <ValidationMessage
               enableErrors={enableErrors}

src/components/textField/presets/outline.ts

@@ -0,0 +1,18 @@
+import {StyleSheet} from 'react-native';
+import {BorderRadiuses, Colors, Spacings} from '../../../style';
+import underline from './underline';
+
+const styles = StyleSheet.create({
+  field: {
+    borderWidth: 1,
+    borderColor: Colors.$outlineDisabled,
+    borderRadius: BorderRadiuses.br20,
+    paddingHorizontal: Spacings.s3,
+    paddingVertical: Spacings.s2
+  }
+});
+
+export default {
+  ...underline,
+  fieldStyle: styles.field
+};

src/components/textField/types.ts

@@ -30,7 +30,8 @@ export enum ValidationMessagePosition {
 
 export enum Presets {
   DEFAULT = 'default', // TODO: remove
-  UNDERLINE = 'underline'
+  UNDERLINE = 'underline',
+  OUTLINE = 'outline'
 }
 
 export type ValidationMessagePositionType = `${ValidationMessagePosition}` | ValidationMessagePosition;

src/components/textField/usePreset.ts

@@ -1,9 +1,17 @@
 import underlinePreset from './presets/underline';
+import outlinePreset from './presets/outline';
 import {InternalTextFieldProps, Presets} from './types';
 
 export default function usePreset({preset, ...props}: InternalTextFieldProps) {
+  let presetConfig;
   if (preset === Presets.DEFAULT || preset === Presets.UNDERLINE) {
-    return {...underlinePreset, ...props, fieldStyle: [underlinePreset.fieldStyle, props.fieldStyle]};
+    presetConfig = underlinePreset;
+  } else if (preset === Presets.OUTLINE) {
+    presetConfig = outlinePreset;
+  }
+
+  if (presetConfig) {
+    return {...presetConfig, ...props, fieldStyle: [presetConfig.fieldStyle, props.fieldStyle]};
   }
   return props;
 }