Skip to content

Instantly share code, notes, and snippets.

@sibelius
Last active February 25, 2020 12:43
Show Gist options
  • Save sibelius/c564ded5bfd39534cf035e0460f2ee9a to your computer and use it in GitHub Desktop.
Save sibelius/c564ded5bfd39534cf035e0460f2ee9a to your computer and use it in GitHub Desktop.
import React from 'react';
import {
View,
Text,
} from 'react-native';
import { TextInputMask } from 'react-native-masked-text'
export default function maskedInputTemplate(locals) {
if (locals.hidden) {
return null;
}
const stylesheet = locals.stylesheet;
let formGroupStyle = stylesheet.formGroup.normal;
let controlLabelStyle = stylesheet.controlLabel.normal;
let textboxStyle = stylesheet.textbox.normal;
let helpBlockStyle = stylesheet.helpBlock.normal;
const errorBlockStyle = stylesheet.errorBlock;
if (locals.hasError) {
formGroupStyle = stylesheet.formGroup.error;
controlLabelStyle = stylesheet.controlLabel.error;
textboxStyle = stylesheet.textbox.error;
helpBlockStyle = stylesheet.helpBlock.error;
}
if (locals.editable === false) {
textboxStyle = stylesheet.textbox.notEditable;
}
const label = locals.label ? <Text style={controlLabelStyle}>{locals.label}</Text> : null;
const help = locals.help ? <Text style={helpBlockStyle}>{locals.help}</Text> : null;
const error = locals.hasError && locals.error ? <Text accessibilityLiveRegion="polite" style={errorBlockStyle}>{locals.error}</Text> : null;
let maskType = 'money';
let maskOptions = {};
if (locals.config) {
if (locals.config.mask) {
maskType = locals.config.mask;
}
if (locals.config.options) {
maskOptions = locals.config.options;
}
}
return (
<View style={formGroupStyle}>
{label}
<TextInputMask
type={maskType}
options={maskOptions}
accessibilityLabel={locals.label}
ref="input"
autoCapitalize={locals.autoCapitalize}
autoCorrect={locals.autoCorrect}
autoFocus={locals.autoFocus}
blurOnSubmit={locals.blurOnSubmit}
editable={locals.editable}
keyboardType={locals.keyboardType}
maxLength={locals.maxLength}
multiline={locals.multiline}
onBlur={locals.onBlur}
onEndEditing={locals.onEndEditing}
onFocus={locals.onFocus}
onLayout={locals.onLayout}
onSelectionChange={locals.onSelectionChange}
onSubmitEditing={locals.onSubmitEditing}
placeholderTextColor={locals.placeholderTextColor}
secureTextEntry={locals.secureTextEntry}
selectTextOnFocus={locals.selectTextOnFocus}
selectionColor={locals.selectionColor}
numberOfLines={locals.numberOfLines}
underlineColorAndroid={locals.underlineColorAndroid}
clearButtonMode={locals.clearButtonMode}
clearTextOnFocus={locals.clearTextOnFocus}
enablesReturnKeyAutomatically={locals.enablesReturnKeyAutomatically}
keyboardAppearance={locals.keyboardAppearance}
onKeyPress={locals.onKeyPress}
returnKeyType={locals.returnKeyType}
selectionState={locals.selectionState}
onChangeText={(value) => locals.onChange(value)}
onChange={locals.onChangeNative}
placeholder={locals.placeholder}
style={textboxStyle}
value={locals.value}
/>
{help}
{error}
</View>
);
}
@sibelius
Copy link
Author

Use Formik instead

@Otik133040040
Copy link

Use Formik instead

mean use transformers and factory from tcomb-form-native?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment