# 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;