Incubator.TextField - add readonly state (#2455)

* Incubator.TextField - add readonly state

* Add readonly to API

Author: M-i-k-e-l

demo/src/screens/incubatorScreens/IncubatorTextFieldScreen.tsx

@@ -14,6 +14,7 @@ export default class TextFieldScreen extends Component {
   state = {
     errorPosition: TextField.validationMessagePositions.TOP,
     shouldDisable: false,
+    isReadonly: false,
     value: 'Initial Value',
     searching: false,
     preset: 'withUnderline'
@@ -50,7 +51,7 @@ export default class TextFieldScreen extends Component {
   }
 
   render() {
-    const {errorPosition, shouldDisable, price, preset} = this.state;
+    const {errorPosition, shouldDisable, isReadonly, price, preset} = this.state;
     return (
       <ScrollView keyboardShouldPersistTaps="always">
         <View flex padding-page>
@@ -182,11 +183,19 @@ export default class TextFieldScreen extends Component {
             <Text h3 blue50 marginV-s4>
               Colors By State
             </Text>
-            <Button
-              label={shouldDisable ? 'Enable' : 'Disable'}
-              onPress={() => this.setState({shouldDisable: !shouldDisable})}
-              size={Button.sizes.xSmall}
-            />
+            <View row>
+              <Button
+                label={isReadonly ? 'Enable' : 'Readonly'}
+                onPress={() => this.setState({isReadonly: !isReadonly})}
+                size={Button.sizes.xSmall}
+                marginR-s4
+              />
+              <Button
+                label={shouldDisable ? 'Enable' : 'Disable'}
+                onPress={() => this.setState({shouldDisable: !shouldDisable})}
+                size={Button.sizes.xSmall}
+              />
+            </View>
           </View>
 
           <TextField
@@ -195,14 +204,16 @@ export default class TextFieldScreen extends Component {
               default: Colors.$textDefault,
               focus: Colors.$textGeneral,
               error: Colors.$textDangerLight,
-              disabled: Colors.$textDisabled
+              disabled: Colors.$textDisabled,
+              readonly: Colors.$textNeutral
             }}
             placeholder="Enter valid email"
             validationMessage="Email is invalid"
             validate={'email'}
             validateOnChange
             fieldStyle={styles.withFrame}
             editable={!shouldDisable}
+            readonly={isReadonly}
           />
 
           <View row spread centerV>
@@ -224,6 +235,7 @@ export default class TextFieldScreen extends Component {
               preset === 'withUnderline' ? styles.withUnderline : styles.withFrame
             }
             editable={!shouldDisable}
+            readonly={isReadonly}
           />
 
           <Text h3 blue50 marginV-s4>

src/incubator/TextField/FieldContext.ts

@@ -8,6 +8,7 @@ const FieldContext = createContext<FieldContextType>({
   isValid: true,
   failingValidatorIndex: undefined,
   disabled: false,
+  readonly: false,
   validateField: _.noop,
   checkValidity: () => true
 });

src/incubator/TextField/Input.tsx

@@ -9,7 +9,8 @@ import useImperativeInputHandle from './useImperativeInputHandle';
 
 const DEFAULT_INPUT_COLOR: ColorType = {
   default: Colors.$textDefault,
-  disabled: Colors.$textDisabled
+  disabled: Colors.$textDisabled,
+  readonly: Colors.$textNeutral
 };
 
 const Input = ({
@@ -19,6 +20,7 @@ const Input = ({
   forwardedRef,
   formatter,
   useGestureHandlerInput,
+  readonly,
   ...props
 }: InputProps & ForwardRefInjectedProps) => {
   const inputRef = useImperativeInputHandle(forwardedRef, {onChangeText: props.onChangeText});
@@ -27,6 +29,7 @@ const Input = ({
   const inputColor = getColorByState(color, context);
   const placeholderTextColor = getColorByState(props.placeholderTextColor, context);
   const value = formatter && !context.isFocused ? formatter(props.value) : props.value;
+  const disabled = props.editable === false || readonly;
 
   const TextInput = useMemo(() => {
     if (useGestureHandlerInput) {
@@ -43,13 +46,14 @@ const Input = ({
     <TextInput
       style={[styles.input, !!inputColor && {color: inputColor}, style, Constants.isWeb && styles.webStyle]}
       {...props}
+      editable={!disabled}
       value={value}
       placeholder={placeholder}
       placeholderTextColor={placeholderTextColor}
       // @ts-expect-error
       ref={inputRef}
       underlineColorAndroid="transparent"
-      accessibilityState={{disabled: props.editable === false}}
+      accessibilityState={{disabled}}
     />
   );
 };

src/incubator/TextField/Label.tsx

@@ -2,14 +2,19 @@ import React, {useContext, useMemo} from 'react';
 import {StyleSheet} from 'react-native';
 import {Colors} from '../../style';
 import Text from '../../components/text';
-import {LabelProps, ValidationMessagePosition} from './types';
+import {ColorType, LabelProps, ValidationMessagePosition} from './types';
 import {getColorByState} from './Presenter';
 import FieldContext from './FieldContext';
 
 
+const DEFAULT_LABEL_COLOR: ColorType = {
+  default: Colors.$textDefault,
+  readonly: Colors.$textNeutral
+};
+
 const Label = ({
   label,
-  labelColor = Colors.$textDefault,
+  labelColor = DEFAULT_LABEL_COLOR,
   labelStyle,
   labelProps,
   validationMessagePosition,

src/incubator/TextField/Presenter.ts

@@ -14,6 +14,8 @@ export function getColorByState(color?: ColorType, context?: FieldContextType) {
   } else if (_.isPlainObject(color)) {
     if (context?.disabled) {
       finalColor = color?.disabled;
+    } else if (context?.readonly) {
+      finalColor = color?.readonly;
     } else if (!context?.isValid) {
       finalColor = color?.error;
     } else if (context?.isFocused) {

src/incubator/TextField/TextField.driver.ts

@@ -31,7 +31,7 @@ export class TextFieldDriver extends ComponentDriver {
     if (await this.exists()) {
       return (await this.getElementProps()).accessibilityState.disabled;
     } else {
-      console.warn(`TextField component with testId:${this.testID}, is not found. So you can't get the content`);
+      console.warn(`TextField component with testId:${this.testID}, is not found. So you can't get the disabled state`);
       return null;
     }
   }

src/incubator/TextField/__tests__/index.driver.spec.tsx

@@ -16,6 +16,7 @@ interface TextFieldProps {
   validateOnChange?: boolean;
   enableErrors?: boolean;
   editable?: boolean;
+  readonly?: boolean;
   floatingPlaceholder?: boolean;
   showCharCounter?: boolean;
   maxLength?: number;
@@ -73,6 +74,22 @@ describe('TextField', () => {
     });
   });
 
+  describe('readonly', () => {
+    it('should render textField that is not readonly', async () => {
+      const component = <TestCase/>;
+      const textFieldDriver = new TextFieldDriver({component, testID: TEXT_FIELD_TEST_ID});
+
+      expect(await textFieldDriver.isDisabled()).toBe(false);
+    });
+
+    it('should be readonly', async () => {
+      const component = <TestCase readonly/>;
+      const textFieldDriver = new TextFieldDriver({component, testID: TEXT_FIELD_TEST_ID});
+
+      expect(await textFieldDriver.isDisabled()).toBe(true);
+    });
+  });
+
   describe('placeholder', () => {
     it('should render placeholder with correct text', async () => {
       const component = <TestCase placeholder={'mock placeholder'}/>;

src/incubator/TextField/index.tsx

@@ -73,14 +73,21 @@ const TextField = (props: InternalTextFieldProps) => {
     placeholder,
     children,
     centered,
+    readonly = false,
     ...others
   } = usePreset(props);
   const {ref: leadingAccessoryRef, measurements: leadingAccessoryMeasurements} = useMeasure();
   const {onFocus, onBlur, onChangeText, fieldState, validateField, checkValidity} = useFieldState(others);
 
   const context = useMemo(() => {
-    return {...fieldState, disabled: others.editable === false, validateField, checkValidity};
-  }, [fieldState, others.editable, validateField, checkValidity]);
+    return {
+      ...fieldState,
+      disabled: others.editable === false,
+      readonly,
+      validateField,
+      checkValidity
+    };
+  }, [fieldState, others.editable, readonly, validateField, checkValidity]);
 
   const leadingAccessoryClone = useMemo(() => {
     if (leadingAccessory) {
@@ -165,6 +172,7 @@ const TextField = (props: InternalTextFieldProps) => {
                 placeholderTextColor={hidePlaceholder ? 'transparent' : placeholderTextColor}
                 value={fieldState.value}
                 {...others}
+                readonly={readonly}
                 style={inputStyle}
                 onFocus={onFocus}
                 onBlur={onBlur}

src/incubator/TextField/presets/default.ts

@@ -4,7 +4,8 @@ import {Colors, Spacings, Typography} from '../../../style';
 const colorByState = {
   focus: Colors.$textPrimary,
   error: Colors.$textDangerLight,
-  disabled: Colors.$textDisabled
+  disabled: Colors.$textDisabled,
+  readonly: Colors.$textNeutral
 };
 
 const placeholderTextColorByState = {

src/incubator/TextField/textField.api.json

@@ -14,7 +14,7 @@
     {
       "name": "labelColor",
       "type": "ColorType",
-      "description": "Field label color. Either a string or color by state map ({default, focus, error, disabled})"
+      "description": "Field label color. Either a string or color by state map ({default, focus, error, disabled, readonly})"
     },
     {"name": "labelStyle", "type": "TextStyle", "description": "Custom style for the field label"},
     {"name": "labelProps", "type": "TextProps", "description": "Pass extra props to the label Text element"},
@@ -97,6 +97,11 @@
       "name": "useGestureHandlerInput",
       "type": "boolean",
       "description": "Use react-native-gesture-handler instead of react-native for the base TextInput"
+    },
+    {
+      "name": "readonly",
+      "type": "boolean",
+      "description": "A UI preset for read only state"
     }
   ],
   "snippet": [

src/incubator/TextField/types.ts

@@ -18,6 +18,7 @@ export type ColorType =
       focus?: string;
       error?: string;
       disabled?: string;
+      readonly?: string;
     };
 
 export enum ValidationMessagePosition {
@@ -51,7 +52,7 @@ export interface LabelProps {
    */
   label?: string;
   /**
-   * Field label color. Either a string or color by state map ({default, focus, error, disabled})
+   * Field label color. Either a string or color by state map ({default, focus, error, disabled, readonly})
    */
   labelColor?: ColorType;
   /**
@@ -144,6 +145,10 @@ export interface InputProps
    * Use react-native-gesture-handler instead of react-native for the base TextInput
    */
   useGestureHandlerInput?: boolean;
+  /**
+   * A UI preset for read only state
+   */
+  readonly?: boolean;
 }
 
 export type TextFieldProps = MarginModifiers &
@@ -239,6 +244,7 @@ export type FieldContextType = {
   isValid: boolean;
   failingValidatorIndex?: number;
   disabled: boolean;
+  readonly: boolean;
   validateField: () => void;
   checkValidity: () => boolean;
 };