All files / register/components RegisterForm.tsx

100% Statements 9/9
100% Branches 6/6
100% Functions 4/4
100% Lines 9/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 643x 3x 3x                                       3x       9x                   1x                   1x               1x               3x  
import React from 'react';
import { View } from 'react-native';
import { CrossEditor, styles } from 'react-native-cross-components';
import { IPhoneProps, IEmailProps, IPasswordProps } from '../../types';
 
/**
 * Props for the {@link RegisterForm} components. Extends {@link ILoginFormProps}
 *
 * Required props are callbacks {@link IEmailProps.onEmailChanged}, {@link IPhoneProps.onPhoneChanged} and {@link IPasswordProps.onPasswordChanged}.
 *
 * Allows you to customize {@link IEmailProps.initialEmail} / phone / password as well as {@link IEmailProps.emailInputProps}.
 */
export interface IRegisterFormProps
  extends IEmailProps,
    IPasswordProps,
    IPhoneProps {}
 
/**
 * Allows the user to enter user info and passes them back through prop events.
 *
 * Props are {@link IRegisterFormProps}
 */
export class RegisterForm extends React.Component<IRegisterFormProps> {
  render() {
    // TODO: Country selector
    // maskProps={{ type: 'cel-phone', options: { dddMask: '(46)' } }}
    return (
      <View style={[styles.container]}>
        {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
          keyboardType='phone-pad'
          label='Phone'
          autoCorrect={false}
          placeholder='+NN NNN NNN NNN NNN'
          value={this.props.initialPhone || ''}
          onChangeText={(text: string) => this.props.onPhoneChanged(text)}
          {...this.props.phoneInputProps}
        />
        <CrossEditor
          label='Password'
          clearButtonMode='always'
          secureTextEntry
          value={this.props.initialPassword || ''}
          onChangeText={(text: string) => this.props.onPasswordChanged(text)}
          {...this.props.passwordInputProps}
        />
      </View>
    );
  }
}
 
export default RegisterForm;