omnipay-savings-sdk
Version:
Omnipay Savings SDK
111 lines (110 loc) • 4.84 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tab = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_native_1 = require("react-native");
const SDKConfigContext_1 = require("../../contexts/SDKConfigContext");
const utils_1 = require("../../utils");
const Button_1 = require("../Button");
const Text_1 = require("../Text");
const Tab = ({ active, label, onPress, unstyled, twoPane, }) => {
const { primaryColor } = (0, SDKConfigContext_1.useSDKConfig)();
switch (unstyled) {
case true:
return ((0, jsx_runtime_1.jsx)(Button_1.CustomPressable, Object.assign({ style: [
styles.pill,
{
backgroundColor: utils_1.Colors.transparent,
width: twoPane ? '50%' : '33%',
height: '100%',
borderRadius: (0, utils_1.ms)(0),
borderBottomWidth: (0, utils_1.ms)(2),
borderBottomColor: active ? primaryColor : utils_1.Colors.transparent,
},
], onPress: onPress }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { style: [
{
color: active ? primaryColor : utils_1.Colors.tabInactiveText,
fontSize: (0, utils_1.fontSz)(14),
lineHeight: (0, utils_1.fontSz)(14 * 1.72),
},
], fontWeight: '500', fontFamily: 'Gordita-Medium', text: label.toUpperCase() }) })));
case false:
return ((0, jsx_runtime_1.jsx)(Button_1.CustomPressable, Object.assign({ style: [
styles.pill,
{
backgroundColor: active ? utils_1.Colors.white : utils_1.Colors.tabBg,
width: twoPane ? '50%' : '33%',
height: '100%',
},
], onPress: onPress }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { style: [
{
color: active ? primaryColor : utils_1.Colors.tabInactiveText,
fontSize: (0, utils_1.fontSz)(14),
},
], fontWeight: '500', fontFamily: 'Gordita-Medium', text: label }) })));
default:
return null;
}
};
exports.Tab = Tab;
const ThreePaneToggleTabs = ({ selectedTab, currentTab, firstLabel = '', secondLabel = '', thirdLabel = '', unstyled = false, }) => {
const [first, setFirst] = (0, react_1.useState)(true);
const [second, setSecond] = (0, react_1.useState)(false);
const [third, setThird] = (0, react_1.useState)(false);
(0, react_1.useEffect)(() => {
setFirst(currentTab === 0 ? true : false);
setSecond(currentTab === 1 ? true : false);
setThird(currentTab === 2 ? true : false);
selectedTab(currentTab);
}, [currentTab]);
const toggle = (e) => {
if (e === 0) {
selectedTab(0);
setFirst(true);
setSecond(false);
setThird(false);
}
else if (e === 1) {
selectedTab(1);
setFirst(false);
setSecond(true);
setThird(false);
}
else if (e === 2) {
selectedTab(2);
setFirst(false);
setSecond(false);
setThird(true);
}
else {
return;
}
};
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: [
styles.container,
{
width: '100%',
backgroundColor: unstyled ? utils_1.Colors.transparent : utils_1.Colors.tabBg,
paddingVertical: (0, utils_1.ms)(4),
marginBottom: (0, utils_1.ms)(2.5),
},
] }, { children: [(0, jsx_runtime_1.jsx)(exports.Tab, { unstyled: unstyled, active: first, label: firstLabel, onPress: () => toggle(0) }), (0, jsx_runtime_1.jsx)(exports.Tab, { unstyled: unstyled, active: second, label: secondLabel, onPress: () => toggle(1) }), (0, jsx_runtime_1.jsx)(exports.Tab, { unstyled: unstyled, active: third, label: thirdLabel, onPress: () => toggle(2) })] })));
};
const styles = react_native_1.StyleSheet.create({
container: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: (0, utils_1.ms)(4),
height: (0, utils_1.hp)(45),
borderRadius: (0, utils_1.ms)(8),
},
pill: {
borderRadius: (0, utils_1.ms)(8),
justifyContent: 'center',
alignItems: 'center',
},
});
exports.default = ThreePaneToggleTabs;