The new TextField (Incubator)

demo/src/screens/MenuStructure.js

@@ -147,7 +147,8 @@ export const navigationData = {
   Incubator: {
     title: 'Incubator (Experimental)',
     screens: [
-      {title: 'Native TouchableOpacity', tags: 'touchable native', screen: 'unicorn.incubator.TouchableOpacityScreen'}
+      {title: 'Native TouchableOpacity', tags: 'touchable native', screen: 'unicorn.incubator.TouchableOpacityScreen'},
+      {title: '(New) TextField', tags: 'text field input', screen: 'unicorn.components.IncubatorTextFieldScreen'}
     ]
   },
   Inspirations: {

demo/src/screens/componentScreens/IncubatorTextFieldScreen.tsx

@@ -0,0 +1,178 @@
+import _ from 'lodash';
+import React, {Component} from 'react';
+import {TextInput, StyleSheet, ScrollView} from 'react-native';
+import {
+  Assets,
+  Colors,
+  Spacings,
+  Typography,
+  View,
+  Text,
+  Button,
+  Incubator
+} from 'react-native-ui-lib'; //eslint-disable-line
+const {TextField} = Incubator;
+
+export default class TextFieldScreen extends Component {
+  input = React.createRef<TextInput>();
+  input2 = React.createRef<TextInput>();
+  state = {
+    errorPosition: TextField.validationMessagePositions.TOP,
+    shouldDisable: false,
+    value: 'Initial Value'
+  };
+
+  componentDidMount() {
+    this.input.current?.focus();
+  }
+
+  resetFieldValue = () => {
+    this.input2.current?.clear();
+  }
+
+  render() {
+    const {errorPosition, shouldDisable} = this.state;
+    return (
+      <ScrollView keyboardShouldPersistTaps="always">
+        <View flex padding-page>
+          <Text h1>TextField</Text>
+          <Text h3 blue50 marginV-s4>
+            Default
+          </Text>
+          <TextField
+            ref={this.input}
+            label="Name"
+            placeholder="Enter first and last name"
+          />
+
+          <Text h3 blue50 marginV-s4>
+            Static vs Floating Placeholder
+          </Text>
+          <View row bottom>
+            <TextField
+              placeholder="Floating placeholder"
+              floatingPlaceholder
+              floatingPlaceholderColor={{
+                focus: Colors.grey10,
+                default: Colors.grey30
+              }}
+              // floatingPlaceholderStyle={Typography.text60}
+              // style={Typography.text60}
+              containerStyle={{flex: 1}}
+              fieldStyle={styles.withUnderline}
+            />
+            <TextField
+              placeholder="Placeholder"
+              containerStyle={{flex: 1, marginLeft: Spacings.s4}}
+              fieldStyle={styles.withUnderline}
+            />
+          </View>
+          <Text h3 blue50 marginV-s4>
+            Leading/Trailing Button
+          </Text>
+
+          <TextField
+            ref={this.input2}
+            placeholder="Enter text..."
+            leadingButton={{iconSource: Assets.icons.demo.search}}
+            trailingButton={{iconSource: Assets.icons.demo.refresh, onPress: this.resetFieldValue}}
+            fieldStyle={styles.withUnderline}
+          />
+
+          <View row marginV-s4 spread>
+            <Text h3 blue50>
+              Validation
+            </Text>
+            <Button
+              size={Button.sizes.xSmall}
+              label={`Error Position: ${_.upperCase(errorPosition)}`}
+              onPress={() =>
+                this.setState({
+                  errorPosition:
+                    errorPosition === TextField.validationMessagePositions.TOP
+                      ? TextField.validationMessagePositions.BOTTOM
+                      : TextField.validationMessagePositions.TOP
+                })
+              }
+            />
+          </View>
+
+          <TextField
+            value={this.state.value}
+            onChangeText={(value) => this.setState({value})}
+            label="Email"
+            placeholder="Enter email"
+            enableErrors
+            validationMessage="Email is invalid"
+            validationMessageStyle={Typography.text90R}
+            validationMessagePosition={errorPosition}
+            validate={'email'}
+            validateOnChange
+            // validateOnStart
+            // validateOnBlur
+            fieldStyle={styles.withUnderline}
+          />
+
+          <View row centerV spread>
+            <Text h3 blue50 marginV-s4>
+              Colors By State
+            </Text>
+            <Button
+              label={shouldDisable ? 'Enable' : 'Disable'} 
+              onPress={() => this.setState({shouldDisable: !shouldDisable})} 
+              size={Button.sizes.xSmall}
+            />
+          </View>
+
+          <TextField
+            label="Email"
+            labelColor={{default: Colors.grey10, focus: Colors.blue20, error: Colors.red30, disabled: Colors.grey40}}
+            placeholder="Enter valid email"
+            validationMessage="Email is invalid"
+            validate={'email'}
+            validateOnChange
+            fieldStyle={styles.withFrame}
+            editable={!shouldDisable}
+          />
+
+          <Text h3 blue50 marginV-s4>
+            Char Counter
+          </Text>
+
+          <TextField
+            label="Description"
+            placeholder="Enter text..."
+            multiline
+            showCharCounter
+            charCounterStyle={{color: Colors.blue30}}
+            maxLength={20}
+            fieldStyle={styles.withFrame}
+          />
+          <Text h3 blue50 marginV-s4>
+            Hint
+          </Text>
+          <TextField
+            placeholder="Enter password"
+            hint="1-6 chars including numeric chars"
+            fieldStyle={styles.withUnderline}
+          />
+        </View>
+      </ScrollView>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {},
+  withUnderline: {
+    borderBottomWidth: 1,
+    borderColor: Colors.grey40,
+    paddingBottom: 4
+  },
+  withFrame: {
+    borderWidth: 1,
+    borderColor: Colors.grey40,
+    padding: 4,
+    borderRadius: 2
+  }
+});

demo/src/screens/componentScreens/index.js

@@ -61,5 +61,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.WithScrollEnablerScreen', () => require('./WithScrollEnablerScreen').default);
   registrar('unicorn.components.WithScrollReachedScreen', () => require('./WithScrollReachedScreen').default);
   registrar('unicorn.components.FaderScreen', () => require('./FaderScreen').default);
+  // Incubator Screens
+  registrar('unicorn.components.IncubatorTextFieldScreen', () => require('./IncubatorTextFieldScreen').default);
 }
 

generatedTypes/incubator/TextField/AccessoryButton.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ButtonPropTypes } from '../../components/button';
+declare const _default: (props: ButtonPropTypes) => JSX.Element;
+export default _default;

generatedTypes/incubator/TextField/CharCounter.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { TextStyle } from 'react-native';
+export interface CharCounterProps {
+    showCharCounter?: boolean;
+    maxLength?: number;
+    charCounterStyle?: TextStyle;
+}
+declare const _default: ({ maxLength, charCounterStyle }: CharCounterProps) => JSX.Element | null;
+export default _default;

generatedTypes/incubator/TextField/FieldContext.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare type ContextType = {
+    value?: string;
+    isFocused: boolean;
+    hasValue: boolean;
+    isValid: boolean;
+    disabled: boolean;
+};
+declare const FieldContext: import("react").Context<ContextType>;
+export default FieldContext;

generatedTypes/incubator/TextField/FloatingPlaceholder.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { TextStyle } from 'react-native';
+import { ColorType } from './types';
+export interface FloatingPlaceholderProps {
+    placeholder?: string;
+    floatingPlaceholderColor?: ColorType;
+    floatingPlaceholderStyle?: TextStyle;
+}
+declare const _default: ({ placeholder, floatingPlaceholderColor, floatingPlaceholderStyle }: FloatingPlaceholderProps) => JSX.Element;
+export default _default;

generatedTypes/incubator/TextField/Icon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ImageProps } from '../../components/image';
+declare const _default: (props: ImageProps) => JSX.Element;
+export default _default;

generatedTypes/incubator/TextField/Input.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TextInput, TextInputProps } from 'react-native';
+import { ForwardRefInjectedProps } from '../../commons/new';
+export interface InputProps extends TextInputProps, React.ComponentPropsWithRef<typeof TextInput> {
+    hint?: string;
+}
+declare const Input: ({ style, hint, forwardedRef, ...props }: InputProps & ForwardRefInjectedProps) => JSX.Element;
+export default Input;

generatedTypes/incubator/TextField/Label.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { TextStyle } from 'react-native';
+import { TextPropTypes } from '../../components/text';
+import { ColorType, ValidationMessagePosition } from './types';
+export interface LabelProps {
+    label?: string;
+    labelColor?: ColorType;
+    labelStyle?: TextStyle;
+    labelProps?: TextPropTypes;
+    validationMessagePosition?: ValidationMessagePosition;
+}
+declare const _default: ({ label, labelColor, labelStyle, labelProps, validationMessagePosition }: LabelProps) => JSX.Element | null;
+export default _default;

generatedTypes/incubator/TextField/Presenter.d.ts

@@ -0,0 +1,3 @@
+import { ContextType } from './FieldContext';
+import { ColorType } from './types';
+export declare function getColorByState(color: ColorType, context?: ContextType): string | undefined;

generatedTypes/incubator/TextField/ValidationMessage.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { TextStyle } from 'react-native';
+export interface ValidationMessageProps {
+    enableErrors?: boolean;
+    validationMessage?: string;
+    validationMessageStyle?: TextStyle;
+    retainSpace?: boolean;
+}
+declare const _default: ({ validationMessage, enableErrors, validationMessageStyle, retainSpace }: ValidationMessageProps) => JSX.Element | null;
+export default _default;

generatedTypes/incubator/TextField/index.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+import { ButtonPropTypes } from '../../components/button';
+import { ValidationMessagePosition } from './types';
+import { InputProps } from './Input';
+import { ValidationMessageProps } from './ValidationMessage';
+import { LabelProps } from './Label';
+import { FieldStateProps } from './withFieldState';
+import { FloatingPlaceholderProps } from './FloatingPlaceholder';
+import { CharCounterProps } from './CharCounter';
+interface TextFieldProps extends InputProps, LabelProps, FloatingPlaceholderProps, FieldStateProps, ValidationMessageProps, Omit<CharCounterProps, 'maxLength'> {
+    leadingButton?: ButtonPropTypes;
+    trailingButton?: ButtonPropTypes;
+    floatingPlaceholder?: boolean;
+    floatingPlaceholderStyle?: TextStyle;
+    validationMessagePosition?: ValidationMessagePosition;
+    fieldStyle?: ViewStyle;
+    containerStyle?: ViewStyle;
+}
+interface StaticMembers {
+    validationMessagePositions: typeof ValidationMessagePosition;
+}
+declare const _default: React.ComponentClass<TextFieldProps & {
+    useCustomTheme?: boolean | undefined;
+}, any> & StaticMembers;
+export default _default;

generatedTypes/incubator/TextField/types.d.ts

@@ -0,0 +1,10 @@
+export declare type ColorType = string | {
+    default?: string;
+    focus?: string;
+    error?: string;
+    disabled?: string;
+};
+export declare enum ValidationMessagePosition {
+    TOP = "top",
+    BOTTOM = "bottom"
+}

generatedTypes/incubator/TextField/validators.d.ts

@@ -0,0 +1,8 @@
+declare const validators: {
+    required: (value: string) => boolean;
+    email: (value: string) => boolean;
+    url: (value: string) => boolean;
+    number: (value: string) => boolean;
+    price: (value: string) => boolean;
+};
+export default validators;

generatedTypes/incubator/TextField/withFieldState.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { TextInputProps } from 'react-native';
+import validators from './validators';
+export declare type Validator = Function | keyof typeof validators;
+interface FieldState {
+    value?: string;
+    isFocused: boolean;
+    isValid: boolean;
+    hasValue: boolean;
+}
+export interface FieldStateInjectedProps {
+    fieldState: FieldState;
+    onFocus: Function;
+    onBlur: Function;
+    ref?: any;
+}
+export interface FieldStateProps extends TextInputProps {
+    validateOnStart?: boolean;
+    validateOnChange?: boolean;
+    validateOnBlur?: boolean;
+    validate?: Validator | Validator[];
+}
+declare function withFieldState(WrappedComponent: React.ComponentType<FieldStateInjectedProps & TextInputProps>): {
+    ({ validate, validateOnBlur, validateOnChange, validateOnStart, ...props }: FieldStateProps): JSX.Element;
+    displayName: string | undefined;
+};
+export default withFieldState;

generatedTypes/incubator/index.d.ts

@@ -1,2 +1,3 @@
 export { default as TabController } from './TabController';
+export { default as TextField } from './TextField';
 export { default as TouchableOpacity } from './TouchableOpacity';

src/incubator/TextField/AccessoryButton.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import Button, {ButtonPropTypes} from '../../components/button';
+
+export default (props: ButtonPropTypes) => {
+  return (
+    <Button link grey10 activeOpacity={props.onPress ? 0.6 : 1} {...props} />
+  );
+};

src/incubator/TextField/CharCounter.tsx

@@ -0,0 +1,32 @@
+import React, {useContext} from 'react';
+import {TextStyle, StyleSheet} from 'react-native';
+import _ from 'lodash';
+import Text from '../../components/text';
+import FieldContext from './FieldContext';
+
+export interface CharCounterProps {
+  showCharCounter?: boolean;
+  maxLength?: number;
+  charCounterStyle?: TextStyle;
+}
+
+export default ({maxLength, charCounterStyle}: CharCounterProps) => {
+  const {value} = useContext(FieldContext);
+
+  if (_.isUndefined(maxLength)) {
+    return null;
+  }
+
+  return (
+    <Text grey30 style={[styles.container, charCounterStyle]}>
+      {`${_.size(value)}/${maxLength}`}
+    </Text>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    textAlign: 'right'
+  }
+});