omnipay-savings-sdk
Version:
Omnipay Savings SDK
134 lines (133 loc) • 12.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CurrencyInputBase = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_native_1 = require("react-native");
const utils_1 = require("../../utils");
const Text_1 = require("../Text");
const Button_1 = require("../Button");
const SDKConfigContext_1 = require("../../contexts/SDKConfigContext");
exports.CurrencyInputBase = (0, react_1.forwardRef)((props, ref) => {
const { value, containerStyle, label, bottomLabel, placeholder, inputStyle, prependComponent, appendComponent, onChange, onEndEditing, onFocus, secureTextEntry, keyboardType = 'numeric', autoCompleteType = 'off', autoCapitalize = 'none', errorMsg = '', multiline = false, numberOfLines = 1, isLoading = false, returnKeyLabel, returnKeyType, editable = true,
//
onChangeValue, separator, delimiter, unit = '', precision = 0, maxValue, minValue, ignoreNegative, topComponent, maxLength, showAsterisk, } = props;
const toCommaNumber = (text) => {
return text.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
};
const handleChangeText = (0, react_1.useCallback)((text) => {
if (text.includes('.')) {
const decimalParts = text.split('.')[1];
const wholeNumber = text.split('.')[0].replace(/\D/g, '');
const newValue = `${wholeNumber}.${decimalParts.substring(0, 2)}`;
onChangeValue && onChangeValue(newValue);
}
else {
const newValue = text.replace(/\D/g, '');
const sanitizedValue = newValue === '0' ? '' : newValue;
onChangeValue && onChangeValue(sanitizedValue);
}
}, []);
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: Object.assign({ position: 'relative', paddingBottom: (0, utils_1.ms)(8) }, containerStyle) }, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: utils_1.globalStyles.rowBetween }, { children: [typeof label === 'string' ? ((0, jsx_runtime_1.jsxs)(react_native_1.Text, Object.assign({ style: {
fontSize: (0, utils_1.fontSz)(14),
fontFamily: 'Gordita-Regular',
fontWeight: '400',
color: utils_1.Colors.inputBackgroundLight,
} }, { children: [label, showAsterisk && ((0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(14), fontFamily: "Gordita-Regular", fontWeight: "400", text: '*', color: utils_1.Colors.debitRed }))] }))) : (label), topComponent !== null && topComponent !== void 0 ? topComponent : topComponent] })), (0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: {
flexDirection: 'row',
height: (0, utils_1.hp)(55),
paddingHorizontal: (0, utils_1.ms)(10),
marginTop: (0, utils_1.ms)(4),
borderRadius: (0, utils_1.ms)(8),
borderColor: typeof errorMsg === 'string' && (errorMsg === null || errorMsg === void 0 ? void 0 : errorMsg.length) > 0
? utils_1.Colors.error
: '#F4F4F4',
borderWidth: (0, utils_1.ms)(1),
backgroundColor: '#F4F4F4',
} }, { children: [(0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: {
justifyContent: 'center',
marginLeft: (0, utils_1.ms)(1.5),
marginRight: (0, utils_1.ms)(10),
} }, { children: (0, jsx_runtime_1.jsx)(Button_1.CustomPressable, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { color: utils_1.Colors.baseBlueText, fontWeight: "500", fontSize: (0, utils_1.fontSz)(14), fontFamily: "Gordita-Regular",
// lineHeight={fontSz(14 * 1.3)}
text: utils_1.naira }) }) })), (0, jsx_runtime_1.jsx)(react_native_1.TextInput, { style: Object.assign(Object.assign({ flex: 1 }, inputStyle), { color: utils_1.Colors.baseBlueText, fontSize: (0, utils_1.fontSz)(14), fontFamily: 'Gordita-Regular' }), placeholder: placeholder, value: value ? `${toCommaNumber(String(value))}` : '', placeholderTextColor: '#C4C4C4', onChangeText: handleChangeText, onEndEditing: text => onEndEditing(text), onFocus: text => onFocus(), secureTextEntry: secureTextEntry, keyboardType: keyboardType, autoComplete: autoCompleteType, autoCapitalize: autoCapitalize, multiline: multiline, numberOfLines: numberOfLines, returnKeyLabel: returnKeyLabel, returnKeyType: returnKeyType, editable: editable, maxLength: maxLength }), appendComponent] })), typeof errorMsg === 'string' && errorMsg.length > 0 && ((0, jsx_runtime_1.jsx)(Text_1.Text, { style: {
// paddingTop: ms(2.5),
position: 'absolute',
bottom: (0, utils_1.ms)(-10),
left: 0,
}, fontSize: (0, utils_1.fontSz)(14), fontFamily: "Gordita-Regular", fontWeight: "400", text: `${errorMsg}`, color: utils_1.Colors.error })), typeof errorMsg === 'string' && (errorMsg === null || errorMsg === void 0 ? void 0 : errorMsg.length) === 0 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: typeof bottomLabel === 'string' ? ((0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(14), fontFamily: "Gordita-Regular", fontWeight: "400", text: `${bottomLabel}`, color: utils_1.Colors.inputBackgroundLight, style: {
position: 'absolute',
bottom: (0, utils_1.ms)(-10),
width: '100%',
} })) : (bottomLabel) }))] })));
});
const CurrencyInput = (props, ref) => {
const { value, containerStyle, label, placeholder, inputStyle, prependComponent, appendComponent, onChange, onEndEditing, onFocus, secureTextEntry, keyboardType = 'numeric', autoCompleteType = 'off', autoCapitalize = 'none', errorMsg = '', multiline = false, numberOfLines = 1, isLoading = false, returnKeyLabel, returnKeyType, editable = true,
//
onChangeValue, separator, delimiter, unit = '', precision = 0, maxValue, minValue, ignoreNegative, topComponent, onPressUseAllBalance, balance, showUseAllBalance, walletAmount, paymentAmount, maxLength, showAsterisk, showCurrency, wrapperStyle, hideBalance, } = props;
const { primaryColor } = (0, SDKConfigContext_1.useSDKConfig)();
const toCommaNumber = (text) => {
return text.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
};
const handleChangeText = (0, react_1.useCallback)((text) => {
if (text.includes('.')) {
const decimalParts = text.split('.')[1];
const wholeNumber = text.split('.')[0].replace(/\D/g, '');
const newValue = `${wholeNumber}.${decimalParts.substring(0, 2)}`;
onChangeValue && onChangeValue(newValue);
}
else {
const newValue = text.replace(/\D/g, '');
const sanitizedValue = newValue === '0' ? '' : newValue;
onChangeValue && onChangeValue(sanitizedValue);
}
}, []);
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: Object.assign({ position: 'relative', paddingBottom: (0, utils_1.ms)(8) }, containerStyle) }, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: utils_1.globalStyles.rowBetween }, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.Text, Object.assign({ style: {
fontSize: (0, utils_1.fontSz)(14),
fontFamily: 'Gordita-Regular',
fontWeight: '400',
color: utils_1.Colors.inputBackgroundLight,
} }, { children: [label, showAsterisk && ((0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(14), fontFamily: "Gordita-Regular", fontWeight: "400", text: '*', color: utils_1.Colors.debitRed }))] })), topComponent !== null && topComponent !== void 0 ? topComponent : topComponent] })), (0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: [
{
flexDirection: 'row',
height: (0, utils_1.hp)(55),
paddingHorizontal: (0, utils_1.ms)(10),
marginTop: (0, utils_1.ms)(4),
borderRadius: (0, utils_1.ms)(8),
borderColor: typeof errorMsg === 'string' && errorMsg.length > 0
? utils_1.Colors.error
: '#F4F4F4',
borderWidth: (0, utils_1.ms)(1),
backgroundColor: '#F4F4F4',
},
wrapperStyle,
] }, { children: [showCurrency && ((0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: {
justifyContent: 'center',
marginLeft: (0, utils_1.ms)(1.5),
marginRight: (0, utils_1.ms)(10),
} }, { children: (0, jsx_runtime_1.jsx)(Button_1.CustomPressable, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { color: utils_1.Colors.baseBlueText, fontWeight: "500", fontSize: (0, utils_1.fontSz)(14), fontFamily: "Gordita-Regular",
// lineHeight={fontSz(14 * 1.3)}
text: utils_1.naira }) }) }))), (0, jsx_runtime_1.jsx)(react_native_1.TextInput, { style: Object.assign(Object.assign({ flex: 1 }, inputStyle), { color: utils_1.Colors.baseBlueText, fontSize: (0, utils_1.fontSz)(14), fontFamily: 'Gordita-Regular' }), placeholder: placeholder, value: value ? `${toCommaNumber(String(value))}` : '', placeholderTextColor: '#C4C4C4', onChangeText: handleChangeText, onEndEditing: text => onEndEditing(text), onFocus: text => onFocus(), secureTextEntry: secureTextEntry, keyboardType: keyboardType, autoComplete: autoCompleteType, autoCapitalize: autoCapitalize, multiline: multiline, numberOfLines: numberOfLines, returnKeyLabel: returnKeyLabel, returnKeyType: returnKeyType, editable: editable, maxLength: maxLength }), appendComponent] })), errorMsg && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: typeof errorMsg === 'string' ? ((0, jsx_runtime_1.jsx)(Text_1.Text, { style: {
// paddingTop: ms(2.5),
position: 'absolute',
bottom: (0, utils_1.ms)(-10),
left: 0,
}, fontSize: (0, utils_1.fontSz)(14), fontFamily: "Gordita-Regular", fontWeight: "400", text: `${errorMsg}`, color: utils_1.Colors.error })) : (errorMsg) })), typeof errorMsg === 'string' && errorMsg.length === 0 && !hideBalance && ((0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: [
{
position: 'absolute',
bottom: (0, utils_1.ms)(-10),
width: '100%',
// left: 0,
},
] }, { children: (0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: [utils_1.globalStyles.rowBetween, { width: '100%' }] }, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.Text, Object.assign({ style: {
fontSize: (0, utils_1.fontSz)(14),
// lineHeight: fontSz(20),
fontFamily: 'Gordita-Regular',
fontWeight: '400',
color: utils_1.Colors.disabledButton,
textAlign: 'left',
} }, { children: ["Balance", ' ', (0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(14), fontFamily: "Gordita-Regular", fontWeight: "400", text: `${(0, utils_1.formatAsCurrency)(Number(balance))}`, color: utils_1.Colors.inputBackground })] })), showUseAllBalance && ((0, jsx_runtime_1.jsx)(Button_1.CustomPressable, Object.assign({ activeOpacity: 0.9, onPress: onPressUseAllBalance, style: {
alignSelf: 'flex-end',
} }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(14), fontFamily: "Gordita-Regular", fontWeight: "400", text: `${'Use all balance'}`, color: primaryColor, textAlign: 'right' }) })))] })) })))] })));
};
exports.default = (0, react_1.forwardRef)(CurrencyInput);