import React , { Component } from 'react' ; import { StyleProp , TextStyle , View , ViewStyle } from 'react-native' ; const t = require ( '@brandingbrand/tcomb-form-native' ) ; import { Form } from './Form' ; import { Button } from './Button' ; import FSI18n , { translationKeys } from '@brandingbrand/fsi18n' ; const componentTranslationKeys = translationKeys . flagship . changePassword ; import { Dictionary } from '@brandingbrand/fsfoundation' ; export interface ChangePasswordState { value : any ; } export interface FormValues { currentPassword : string ; confirmPassword : string ; newPassword : string ; } export interface ChangePasswordProps { fieldsStyleConfig ? : Dictionary ; onSubmit ? : ( values : FormValues ) => void ; submitButtonStyle ? : StyleProp < ViewStyle > ; submitTextStyle ? : StyleProp < TextStyle > ; submitText ? : string ; style ? : StyleProp < ViewStyle > ; fieldsOptions ? : Dictionary ; value ? : any ; } const PasswordType = t . refinement ( t . String , ( str ) => { return str . length >= 6 ; } ) ; export class ChangePassword extends Component < ChangePasswordProps , ChangePasswordState > { form ? : Form | null ; fieldsStyleConfig : Dictionary ; fieldsTypes : Dictionary ; fieldsOptions : Dictionary ; constructor ( props ) { super ( props ) ; this . state = { value : props . value } ; const ConfirmPasswordType = t . refinement ( t . String , ( value ) => { return value === this . state . value . password ; } ) ; ConfirmPasswordType . getValidationErrorMessage = ( s ) => { return FSI18n . string ( componentTranslationKeys . form . errors . password . mismatch ) ; } ; PasswordType . getValidationErrorMessage = ( s ) => { if ( s . length < 6 ) { return FSI18n . string ( componentTranslationKeys . form . errors . password . tooShort , { minCharacters : 6 } ) ; } else { return FSI18n . string ( componentTranslationKeys . form . errors . password . invalid ) ; } } ; this . fieldsTypes = t . struct ( { currentPassword : PasswordType , newPassword : PasswordType , confirmPassword : ConfirmPasswordType } ) ; this . fieldsOptions = { currentPassword : { label : FSI18n . string ( componentTranslationKeys . form . currentPassword . label ) , returnKeyType : 'next' , autoCorrect : false , autoCapitalize : 'none' , onSubmitEditing : ( ) => this . focusField ( 'newPassword' ) , secureTextEntry : true } , newPassword : { label : FSI18n . string ( componentTranslationKeys . form . newPassword . label ) , returnKeyType : 'next' , autoCorrect : false , autoCapitalize : 'none' , onSubmitEditing : ( ) => this . focusField ( 'confirmPassword' ) , secureTextEntry : true , onChange : ( e ) => { const currentVal = this . state . value ; const newVal = { ... currentVal , password : e . nativeEvent . text } ; this . setState ( { value : newVal } ) ; } } , confirmPassword : { label : FSI18n . string ( componentTranslationKeys . form . confirmPassword . label ) , returnKeyType : 'next' , autoCorrect : false , autoCapitalize : 'none' , secureTextEntry : true } , ... props . fieldsOptions } ; this . fieldsStyleConfig = { textbox : { normal : { borderRadius : 15 , fontSize : 12 , color : '#000' } , error : { borderRadius : 15 , fontSize : 12 , color : '#7f0000' } } , errorBlock : { fontSize : 11 } , ... props . fieldsStyleConfig } ; } componentDidMount ( ) { console . warn ( 'ChangePasswordComponent is deprecated and will be removed in the next version of Flagship.' ) ; } handleSubmit = ( ) => { const value = this . form ?. getValue ( ) ; if ( value && this . props . onSubmit ) { this . props . onSubmit ( value ) ; } } ; focusField = ( fieldName ) => { const field = this . form ?. getComponent ( fieldName ) ; const ref = field . refs . input ; if ( ref . focus ) { ref . focus ( ) ; } } ; handleChange = ( value ) => { this . setState ( { value } ) ; } ; render ( ) { return ( < View > < Form ref = { ref => ( this . form = ref ) } fieldsTypes = { this . fieldsTypes } fieldsOptions = { this . fieldsOptions } fieldsStyleConfig = { this . fieldsStyleConfig } value = { this . state . value } onChange = { this . handleChange } / > < Button title = { FSI18n . string ( componentTranslationKeys . actions . submit . actionBtn ) } onPress = { this . handleSubmit } style = { { backgroundColor : '#867CDD' , borderRadius : 5 , borderColor : '#473BC7' } } /> < /View>); } }