55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { StyleSheet, Text, View } from 'react-native';
|
|
import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
|
|
|
|
import sharedStyles from '../../views/Styles';
|
|
import { themes } from '../../constants/colors';
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
marginBottom: 16
|
|
},
|
|
label: {
|
|
fontSize: 14,
|
|
marginVertical: 10,
|
|
...sharedStyles.textSemibold
|
|
},
|
|
description: {
|
|
marginBottom: 10,
|
|
fontSize: 15,
|
|
...sharedStyles.textRegular
|
|
},
|
|
error: {
|
|
marginTop: 8,
|
|
fontSize: 14,
|
|
...sharedStyles.textRegular,
|
|
...sharedStyles.textAlignCenter
|
|
},
|
|
hint: {
|
|
fontSize: 14,
|
|
...sharedStyles.textRegular
|
|
}
|
|
});
|
|
|
|
interface IInput {
|
|
element: object;
|
|
parser: any;
|
|
label: string;
|
|
description: string;
|
|
error: string;
|
|
hint: string;
|
|
theme: string;
|
|
}
|
|
|
|
export const Input = ({ element, parser, label, description, error, hint, theme }: IInput) => (
|
|
<View style={styles.container}>
|
|
{label ? (
|
|
<Text style={[styles.label, { color: error ? themes[theme].dangerColor : themes[theme].titleText }]}>{label}</Text>
|
|
) : null}
|
|
{description ? <Text style={[styles.description, { color: themes[theme].auxiliaryText }]}>{description}</Text> : null}
|
|
{parser.renderInputs({ ...element }, BLOCK_CONTEXT.FORM, parser)}
|
|
{error ? <Text style={[styles.error, { color: themes[theme].dangerColor }]}>{error}</Text> : null}
|
|
{hint ? <Text style={[styles.hint, { color: themes[theme].auxiliaryText }]}>{hint}</Text> : null}
|
|
</View>
|
|
);
|