All files / confirm/components ConfirmForm.tsx

88.89% Statements 8/9
100% Branches 4/4
50% Functions 1/2
88.89% Lines 8/9
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 933x 3x 3x         3x 3x                                                                                     3x   14x                                                                           3x  
import React from 'react';
import { View } from 'react-native';
import {
  CrossButton,
  Colors,
  ICrossButtonProps,
} from 'react-native-cross-components';
import styles from '../../styles';
import { CrossEditor } from 'react-native-cross-components';
import { IEmailProps, ICodeProps } from '../../types';
 
/**
 * Props for the {@link ConfirmForm} component.
 *
 * Required properties: {@link onConfirmPress}.
 *
 * Allows you to customize {@link ICodeProps} and {@link IEmailProps}.
 */
export interface IConfirmFormProps extends IEmailProps, ICodeProps {
  /**
   * Occurs when the user press "confirm" button. Required.
   */
  onConfirmPress: () => void;
  testID?: string;
  /**
   * Optional props for the register button. Typically used to change the `title` prop.
   *
   * Read more:
   * https://crossplatformsweden.github.io/react-native-components/interfaces/_components_buttons_crossbutton_.icrossbuttonprops.html
   *
   * @example
   *  <ConfirmForm confirmButtonProps={{title: 'Enlist'}}>
   *     <Text>Custom layouts here</Text>
   *  </ConfirmForm>
   */
  confirmButtonProps?: ICrossButtonProps | undefined;
}
 
/**
 * Allows the user to ender credentials and passes them back through prop events.
 *
 * Props are {@link IConfirmFormProps}
 *
 * @example
 *  <ConfirmForm
 *      onConfirmPress={(code) => console.log('Confirmed', code)}
 *      confirmButtonProps={{title: 'Enlist'}}
 *      codeInputProps={{label: 'WouldntYouLikeToKnow'}}>
 *     <Text>Custom layouts here</Text>
 *  </ConfirmForm>
 */
export class ConfirmForm extends React.Component<IConfirmFormProps> {
  render() {
    return (
      <View style={[styles.container]} testID={this.props.testID}>
        {this.props.children}{' '}
        <CrossEditor
          label='E-mail'
          placeholder='E-mail'
          autoCapitalize='none'
          clearButtonMode='always'
          autoCorrect={false}
          value={this.props.initialEmail || ''}
          onChangeText={(text: string) => this.props.onEmailChanged(text)}
          {...this.props.emailInputProps}
        />
        <CrossEditor
          label='Confirmation code'
          placeholder='Enter the code that was sent to you'
          autoCapitalize='none'
          clearButtonMode='always'
          autoCorrect={false}
          value={this.props.code || ''}
          onChangeText={this.props.onCodeChanged}
          {...this.props.codeInputProps}
        />
        <CrossButton
          style={styles.marginTop10}
          buttonStyle={styles.buttonStyle}
          onPress={this.props.onConfirmPress}
          mode='contained'
          title='Confirm'
          backgroundColor={Colors.NextButton}
          iconName='sign-in'
          {...this.props.confirmButtonProps}
        />
      </View>
    );
  }
}
 
export default ConfirmForm;