omnipay-savings-sdk

Version:
Omnipay Savings SDK
43 lines (42 loc) • 4.91 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_native_1 = require("react-native");
const utils_1 = require("../../../utils");
const Input_1 = __importDefault(require("../../Input"));
const currency_1 = __importDefault(require("../../Input/currency"));
const Text_1 = require("../../Text");
const CommonSavingsFields = ({ savingsColor, onColorChange, colorError, primaryColor, name, onNameChange, nameError, amount, onAmountChange, amountError, amountLabel = 'Savings Target', showAmountField = true, walletBalance = 0, showBalance = false, isLoadingBalance = false, onColorLayout, onNameLayout, onAmountLayout, }) => {
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ onLayout: onColorLayout }, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: [
                            utils_1.globalStyles.rowStart,
                            {
                                marginTop: (0, utils_1.ms)(0),
                            },
                        ] }, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(14), fontFamily: "Gordita-Regular", fontWeight: "400", text: "Select a colour for your savings", color: utils_1.Colors.inputBackgroundLight }), (0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(14), fontFamily: "Gordita-Regular", fontWeight: "400", text: " *", color: utils_1.Colors.error })] })), (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, Object.assign({ horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: [
                            { columnGap: (0, utils_1.ms)(10), marginTop: (0, utils_1.ms)(5) },
                        ] }, { children: utils_1.savingsOptionsColors.map((option, index) => {
                            const isSelected = option === savingsColor;
                            return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => onColorChange(option), style: [
                                    utils_1.globalStyles.rowBetween,
                                    {
                                        height: (0, utils_1.ms)(40),
                                        width: (0, utils_1.ms)(40),
                                        backgroundColor: option,
                                        borderRadius: (0, utils_1.ms)(40 / 2),
                                        borderColor: primaryColor,
                                        borderWidth: isSelected ? (0, utils_1.ms)(2.5) : 0,
                                    },
                                ] }, index));
                        }) })), colorError && ((0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(12), fontFamily: "Gordita-Regular", fontWeight: "400", text: colorError, color: utils_1.Colors.error, style: { marginTop: (0, utils_1.ms)(5) } }))] })), (0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ onLayout: onNameLayout }, { children: (0, jsx_runtime_1.jsx)(Input_1.default, { value: name, label: "Name", showAsterisk: true, placeholder: "Enter name", keyboardType: "default", autoCompleteType: "off", returnKeyType: "done", onChange: (value) => {
                        onNameChange(String(value));
                    }, errorMsg: nameError || '', onEndEditing: () => { }, onFocus: () => { } }) })), showAmountField && ((0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ onLayout: onAmountLayout }, { children: (0, jsx_runtime_1.jsx)(currency_1.default, { value: amount, onChangeValue: (value) => {
                        const numericValue = Number(value);
                        onAmountChange(numericValue);
                    }, ignoreNegative: false, delimiter: ",", separator: ".", precision: 2, containerStyle: { marginBottom: (0, utils_1.ms)(0) }, returnKeyType: "done", topComponent: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), walletAmount: showBalance ? walletBalance : 0, paymentAmount: Number(amount), onPressUseAllBalance: showBalance ? () => onAmountChange(walletBalance) : () => { }, onEndEditing: () => { }, onFocus: () => { }, label: amountLabel, showAsterisk: true, placeholder: "", balance: showBalance ? walletBalance : 0, wrapperStyle: {
                        borderColor: amountError ? utils_1.Colors.error : '#F4F4F4',
                    }, errorMsg: amountError !== null && amountError !== void 0 ? amountError : '', showUseAllBalance: showBalance && walletBalance > 0 && !isLoadingBalance, showCurrency: true, hideBalance: !showBalance }, showBalance ? walletBalance.toString() : undefined) })))] }));
};
exports.default = CommonSavingsFields;