diff options
author | Thomas F. K. Jorna <[email protected]> | 2021-07-14 15:10:31 +0200 |
---|---|---|
committer | Thomas F. K. Jorna <[email protected]> | 2021-07-14 15:10:31 +0200 |
commit | e5021187e96b78b53203bd95d08d6818aea47d17 (patch) | |
tree | 37ec45d00eb963db53cd4bb4f04a770414b351cc /app/components/text-field/text-field.tsx |
New Ignite 7.0.6 app
Diffstat (limited to 'app/components/text-field/text-field.tsx')
-rw-r--r-- | app/components/text-field/text-field.tsx | 98 |
1 files changed, 98 insertions, 0 deletions
diff --git a/app/components/text-field/text-field.tsx b/app/components/text-field/text-field.tsx new file mode 100644 index 0000000..eea1a70 --- /dev/null +++ b/app/components/text-field/text-field.tsx @@ -0,0 +1,98 @@ +import React from "react" +import { StyleProp, TextInput, TextInputProps, TextStyle, View, ViewStyle } from "react-native" +import { color, spacing, typography } from "../../theme" +import { translate, TxKeyPath } from "../../i18n" +import { Text } from "../text/text" + +// the base styling for the container +const CONTAINER: ViewStyle = { + paddingVertical: spacing[3], +} + +// the base styling for the TextInput +const INPUT: TextStyle = { + fontFamily: typography.primary, + color: color.text, + minHeight: 44, + fontSize: 18, + backgroundColor: color.palette.white, +} + +// currently we have no presets, but that changes quickly when you build your app. +const PRESETS: { [name: string]: ViewStyle } = { + default: {}, +} + +export interface TextFieldProps extends TextInputProps { + /** + * The placeholder i18n key. + */ + placeholderTx?: TxKeyPath + + /** + * The Placeholder text if no placeholderTx is provided. + */ + placeholder?: string + + /** + * The label i18n key. + */ + labelTx?: TxKeyPath + + /** + * The label text if no labelTx is provided. + */ + label?: string + + /** + * Optional container style overrides useful for margins & padding. + */ + style?: StyleProp<ViewStyle> + + /** + * Optional style overrides for the input. + */ + inputStyle?: StyleProp<TextStyle> + + /** + * Various look & feels. + */ + preset?: keyof typeof PRESETS + + forwardedRef?: any +} + +/** + * A component which has a label and an input together. + */ +export function TextField(props: TextFieldProps) { + const { + placeholderTx, + placeholder, + labelTx, + label, + preset = "default", + style: styleOverride, + inputStyle: inputStyleOverride, + forwardedRef, + ...rest + } = props + + const containerStyles = [CONTAINER, PRESETS[preset], styleOverride] + const inputStyles = [INPUT, inputStyleOverride] + const actualPlaceholder = placeholderTx ? translate(placeholderTx) : placeholder + + return ( + <View style={containerStyles}> + <Text preset="fieldLabel" tx={labelTx} text={label} /> + <TextInput + placeholder={actualPlaceholder} + placeholderTextColor={color.palette.lighterGrey} + underlineColorAndroid={color.transparent} + {...rest} + style={inputStyles} + ref={forwardedRef} + /> + </View> + ) +} |