omnipay-savings-sdk/lib/components/Button/index.js

Omnipay Savings SDK

"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FloatButton = exports.Button = exports.CustomPressable = 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 SDKConfigContext_1 = require("../../contexts/SDKConfigContext");
const SmartImage_1 = require("../Images/SmartImage");
function CustomPressable(_a) {
    var { children, style, activeOpacity } = _a, otherProps = __rest(_a, ["children", "style", "activeOpacity"]);
    const _style = (0, react_1.useCallback)(({ pressed }) => [
        { opacity: pressed ? activeOpacity : 1 },
        style && style,
    ], [style]);
    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, Object.assign({ style: _style }, otherProps, { children: children })));
}
exports.CustomPressable = CustomPressable;
exports.Button = (0, react_1.memo)((_a) => {
    var { title, loaderColor = utils_1.Colors.white, isLoading = false, outlined, style, textStyle = {
        fontSize: (0, utils_1.fontSz)(16),
        fontFamily: 'Gordita-Medium',
        fontWeight: '500',
        color: utils_1.Colors.white,
    }, fontWeight = '500', fontSize = (0, utils_1.fontSz)(16), containerStyle, prependComponent, appendComponent, disabled = false, onPress } = _a, rest = __rest(_a, ["title", "loaderColor", "isLoading", "outlined", "style", "textStyle", "fontWeight", "fontSize", "containerStyle", "prependComponent", "appendComponent", "disabled", "onPress"]);
    const { primaryColor } = (0, SDKConfigContext_1.useSDKConfig)();
    // Handle button click
    const _handleOnClick = () => {
        react_native_1.Keyboard.dismiss();
        onPress();
    };
    return ((0, jsx_runtime_1.jsx)(CustomPressable, Object.assign({ activeOpacity: 0.5, disabled: disabled || isLoading, onPress: disabled || isLoading ? () => null : _handleOnClick, style: [
            styles.btn,
            {
                backgroundColor: disabled ? utils_1.Colors.disabledButton : primaryColor,
                opacity: disabled && outlined ? 0.5 : 1,
            },
            style,
        ] }, rest, { children: !isLoading ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: {
                flexDirection: 'row',
                alignItems: 'center',
            } }, { children: [prependComponent, (0, jsx_runtime_1.jsx)(Text_1.Text, { text: title, fontSize: fontSize, color: utils_1.Colors.white, fontWeight: fontWeight, style: textStyle }), appendComponent] }))) : ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: 'small', color: loaderColor })) })));
});
exports.FloatButton = (0, react_1.memo)((_a) => {
    var { title, loaderColor = utils_1.Colors.white, isLoading = false, outlined, style, textStyle = {
        fontSize: (0, utils_1.fontSz)(16),
        fontFamily: 'Gordita-Medium',
        fontWeight: '500',
        color: utils_1.Colors.white,
    }, iconStyle = {
        width: (0, utils_1.ms)(24),
        height: (0, utils_1.ms)(24),
        tintColor: utils_1.Colors.white,
    }, fontWeight = '500', fontSize = (0, utils_1.fontSz)(16), containerStyle, prependComponent, appendComponent, disabled = false, onPress } = _a, rest = __rest(_a, ["title", "loaderColor", "isLoading", "outlined", "style", "textStyle", "iconStyle", "fontWeight", "fontSize", "containerStyle", "prependComponent", "appendComponent", "disabled", "onPress"]);
    const { primaryColor } = (0, SDKConfigContext_1.useSDKConfig)();
    // Handle button click
    const _handleOnClick = () => {
        react_native_1.Keyboard.dismiss();
        onPress();
    };
    return ((0, jsx_runtime_1.jsx)(CustomPressable, Object.assign({ activeOpacity: 0.5, disabled: disabled || isLoading, onPress: disabled || isLoading ? () => null : _handleOnClick, style: [
            styles.floatBtn,
            {
                backgroundColor: disabled ? utils_1.Colors.disabledButton : primaryColor,
                opacity: disabled && outlined ? 0.5 : 1,
            },
            style,
        ] }, rest, { children: !isLoading ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: {
                flexDirection: 'column',
                justifyContent: 'center',
                alignItems: 'center',
            } }, { children: [prependComponent !== null && prependComponent !== void 0 ? prependComponent : ((0, jsx_runtime_1.jsx)(SmartImage_1.SmartImage, { source: utils_1.Images.add, style: iconStyle })), (0, jsx_runtime_1.jsx)(Text_1.Text, { text: title, fontSize: fontSize, color: utils_1.Colors.white, fontWeight: fontWeight, style: textStyle }), appendComponent] }))) : ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: 'small', color: loaderColor })) })));
});
const styles = react_native_1.StyleSheet.create({
    btn: {
        borderRadius: (0, utils_1.ms)(8),
        width: '100%',
        height: (0, utils_1.hp)(55),
        marginTop: (0, utils_1.hp)(10),
        alignItems: 'center',
        justifyContent: 'center',
    },
    floatBtn: {
        borderRadius: (0, utils_1.ms)(80 / 2),
        width: (0, utils_1.hp)(80),
        height: (0, utils_1.hp)(80),
        marginTop: (0, utils_1.hp)(10),
        alignItems: 'center',
        justifyContent: 'center',
    },
});