@janiscommerce/ui-native/dist/components/molecules/Input/index.js

components library for Janis app

import React, { forwardRef, useState, useRef } from 'react';
import { StyleSheet, View, TouchableWithoutFeedback, Keyboard } from 'react-native';
import BaseInput from '../../atoms/BaseInput';
import { palette } from '../../../theme/palette';
import { moderateScale, scaledForDevice } from '../../../scale';
import handleChangeText from './utils/handleChangeText';
import Typography from '../../atoms/Typography';
import typography from '../../../theme/typography';
var InputType;
(function (InputType) {
    InputType["currency"] = "numeric";
    InputType["number"] = "numeric";
    InputType["default"] = "default";
    InputType["text"] = "default";
    InputType["email"] = "email-address";
    InputType["phone"] = "phone-pad";
    InputType["weightable"] = "numeric";
    InputType["amountTotal"] = "numeric";
    InputType["numeric"] = "numeric";
})(InputType || (InputType = {}));
const Input = forwardRef(({ style, type, variant = 'default', totalValue, onChangeText, ...props }, ref) => {
    const [value, setValue] = useState('');
    const isAmountTotalVariant = variant === 'amountTotal';
    const internalRef = useRef(null);
    const inputRef = ref ?? internalRef;
    if (isAmountTotalVariant && typeof totalValue !== 'number') {
        return null;
    }
    const styles = StyleSheet.create({
        container: {
            padding: 0,
            height: scaledForDevice(70, moderateScale),
            borderColor: palette.primary.main,
            borderWidth: 2,
            borderRadius: 8,
            backgroundColor: palette.white.light,
            justifyContent: 'center',
            alignItems: 'center',
            flexDirection: 'row',
            position: 'relative',
            width: '100%',
        },
        input: {
            ...typography.display.medium,
            color: palette.black.main,
            height: '100%',
            textAlign: 'center',
            textAlignVertical: 'center',
            includeFontPadding: false,
            paddingVertical: 0,
        },
        totalValue: {
            color: palette.primary.main,
        },
    });
    const getTextAlignment = () => {
        if (value) {
            return isAmountTotalVariant ? 'right' : 'center';
        }
        return 'left';
    };
    const changeTextCb = (text) => {
        const transformedText = handleChangeText(text, variant);
        setValue(transformedText);
        if (onChangeText) {
            onChangeText(transformedText);
        }
    };
    const handlePress = () => {
        // istanbul ignore next
        if (inputRef && 'current' in inputRef && inputRef.current) {
            Keyboard.dismiss();
            inputRef.current.focus();
        }
    };
    const resolvedKeyboardType = (() => {
        if (type && type in InputType) {
            return InputType[type];
        }
        if (variant && variant in InputType) {
            return InputType[variant];
        }
        return InputType.default;
    })();
    return (<TouchableWithoutFeedback onPress={handlePress}>
				<View style={[styles.container, style]}>
					<BaseInput testID="input" style={styles.input} textAlign={getTextAlignment()} ref={inputRef} value={value} keyboardType={resolvedKeyboardType} onChangeText={changeTextCb} {...props}/>
					{isAmountTotalVariant && (<Typography style={styles.totalValue} type="display">
							{`/${totalValue?.toString()}`}
						</Typography>)}
				</View>
			</TouchableWithoutFeedback>);
});
export default Input;