@gaddario98/react-native-core
Version:
```bash npm install @gaddario98/native ```
486 lines (484 loc) • 19.6 kB
JavaScript
import {jsx,jsxs}from'react/jsx-runtime';import {TabTrigger,Tabs as Tabs$1,TabSlot,TabList}from'expo-router/ui';import React,{useState,useEffect,memo,useMemo}from'react';import {Animated,Pressable,View,Text,Platform}from'react-native';import {useSafeAreaInsets}from'react-native-safe-area-context';import {c}from'react/compiler-runtime';import {useTranslation}from'../localization/index.mjs';function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function _arrayWithHoles(r) {
if (Array.isArray(r)) return r;
}
function _arrayWithoutHoles(r) {
if (Array.isArray(r)) return _arrayLikeToArray(r);
}
function _iterableToArray(r) {
if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
}
function _iterableToArrayLimit(r, l) {
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = true,
o = false;
try {
if (i = (t = t.call(r)).next, 0 === l) {
if (Object(t) !== t) return;
f = false;
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = true);
} catch (r) {
o = true, n = r;
} finally {
try {
if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
} finally {
if (o) throw n;
}
}
return a;
}
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _slicedToArray(r, e) {
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
}
function _toConsumableArray(r) {
return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
}
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}var activeTabName = "";
var listeners = [];
var setActiveTabName = function setActiveTabName(name) {
activeTabName = name;
listeners.forEach(function (cb) {
return cb(name);
});
};
var useActiveTab = function useActiveTab() {
var $ = c(2);
var _useState = useState(activeTabName),
_useState2 = _slicedToArray(_useState, 2),
tab = _useState2[0],
setTab = _useState2[1];
var t0;
var t1;
if ($[0] === Symbol["for"]("react.memo_cache_sentinel")) {
t0 = function t0() {
var cb = function cb(name) {
return setTab(name);
};
listeners.push(cb);
return function () {
var idx = listeners.indexOf(cb);
if (idx !== -1) {
listeners.splice(idx, 1);
}
};
};
t1 = [];
$[0] = t0;
$[1] = t1;
} else {
t0 = $[0];
t1 = $[1];
}
useEffect(t0, t1);
return tab;
};function __rest(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;
}
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};var DEFAULT_COLORS$1 = {
primary: "#6200ee",
onSurfaceVariant: "#999999",
secondary: "#03dac6",
onSecondary: "#000000",
surface: "#1e1e1e"
};
var AnimatedTabButton = function AnimatedTabButton(_a) {
var _b_0, _c_0, _d_0, _e, _f, _g;
var tab = _a.tab,
isFocused = _a.isFocused,
_onPress = _a.onPress,
onPressIn = _a.onPressIn,
onPressOut = _a.onPressOut,
_a$translateTitles = _a.translateTitles,
translateTitles = _a$translateTitles === void 0 ? true : _a$translateTitles,
ns = _a.ns,
onTabChange = _a.onTabChange,
_a$cfg = _a.cfg,
cfg = _a$cfg === void 0 ? {} : _a$cfg,
rest = __rest(_a, ["tab", "isFocused", "onPress", "onPressIn", "onPressOut", "translateTitles", "ns", "onTabChange", "cfg"]);
var _useTranslation = useTranslation(ns),
t = _useTranslation.t;
var activeTab = useActiveTab();
var focused = useMemo(function () {
return !!isFocused;
}, [isFocused]);
var _React$useState = React.useState(function () {
return new Animated.Value(1);
}),
_React$useState2 = _slicedToArray(_React$useState, 1),
scaleAnim = _React$useState2[0];
var _React$useState3 = React.useState(function () {
return new Animated.Value(0);
}),
_React$useState4 = _slicedToArray(_React$useState3, 1),
glowAnim = _React$useState4[0];
var displayTitle = useMemo(function () {
return translateTitles ? t(tab.title || tab.name) : tab.title || tab.name;
}, [tab.title, tab.name, t, translateTitles]);
var currentColors = useMemo(function () {
var _a_0, _b, _c, _d;
return {
iconColor: focused ? ((_a_0 = cfg.colors) === null || _a_0 === void 0 ? void 0 : _a_0.activeTint) || DEFAULT_COLORS$1.primary : ((_b = cfg.colors) === null || _b === void 0 ? void 0 : _b.inactiveTint) || DEFAULT_COLORS$1.onSurfaceVariant,
textColor: focused ? ((_c = cfg.colors) === null || _c === void 0 ? void 0 : _c.activeTint) || DEFAULT_COLORS$1.primary : ((_d = cfg.colors) === null || _d === void 0 ? void 0 : _d.inactiveTint) || DEFAULT_COLORS$1.onSurfaceVariant
};
}, [(_b_0 = cfg.colors) === null || _b_0 === void 0 ? void 0 : _b_0.activeTint, (_c_0 = cfg.colors) === null || _c_0 === void 0 ? void 0 : _c_0.inactiveTint, focused]);
React.useEffect(function () {
Animated.spring(scaleAnim, {
toValue: focused ? 1.08 : 1,
useNativeDriver: true,
tension: 200,
friction: 10
}).start();
Animated.timing(glowAnim, {
toValue: focused ? 1 : 0,
duration: 250,
useNativeDriver: true
}).start();
}, [focused, glowAnim, scaleAnim]);
return jsx(Pressable, Object.assign({
onPress: function onPress(e) {
_onPress === null || _onPress === void 0 ? void 0 : _onPress(e);
setActiveTabName(tab.name);
onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange(activeTab, tab.name);
},
onPressIn: onPressIn,
onPressOut: onPressOut,
style: {
flex: 1
},
accessibilityRole: "tab",
accessibilityState: {
selected: focused
}
}, rest, {
children: jsxs(Animated.View, {
style: cfg.itemStyle,
children: [jsx(Animated.View, {
style: [{
opacity: glowAnim.interpolate({
inputRange: [0, 1],
outputRange: [0, 0.15]
})
}].concat(_toConsumableArray(cfg === null || cfg === void 0 ? void 0 : cfg.glowItemStyle))
}), tab.tabBarIcon && jsx(View, {
style: {
marginBottom: 2
},
children: tab.tabBarIcon({
focused: focused,
color: currentColors.iconColor,
size: 24
})
}), jsx(Text, {
style: [{
fontSize: cfg.compact ? 9 : 10,
fontWeight: "700",
letterSpacing: 0.6,
textTransform: "uppercase",
marginTop: 1,
color: currentColors.textColor,
textAlign: "center",
maxWidth: "100%"
}, cfg.labelStyle],
numberOfLines: 1,
children: displayTitle
}), tab.badge && jsx(View, {
style: {
position: "relative",
top: -2,
right: 2,
backgroundColor: tab.badgeColor || ((_d_0 = cfg.colors) === null || _d_0 === void 0 ? void 0 : _d_0.secondary) || DEFAULT_COLORS$1.secondary,
borderRadius: 10,
minWidth: 18,
height: 18,
justifyContent: "center",
alignItems: "center",
paddingHorizontal: 5,
borderWidth: 2,
borderColor: ((_e = cfg.colors) === null || _e === void 0 ? void 0 : _e.background) || DEFAULT_COLORS$1.surface,
shadowColor: tab.badgeColor || ((_f = cfg.colors) === null || _f === void 0 ? void 0 : _f.secondary) || DEFAULT_COLORS$1.secondary,
shadowOpacity: 0.3,
shadowRadius: 3,
shadowOffset: {
height: 1,
width: 0
},
elevation: 3
},
children: jsx(Text, {
style: {
color: tab.badgeTextColor || ((_g = cfg.colors) === null || _g === void 0 ? void 0 : _g.onSecondary) || DEFAULT_COLORS$1.onSecondary,
fontSize: 8,
fontWeight: "800",
textAlign: "center"
},
children: typeof tab.badge === "number" && tab.badge > 99 ? "99+" : tab.badge
})
})]
})
}));
};
var AnimatedTabButton$1 = /*#__PURE__*/memo(AnimatedTabButton);var DEFAULT_COLORS = {
surface: "#1e1e1e",
onPrimary: "#ffffff",
onSurfaceVariant: "#999999",
outline: "#444444",
shadow: "#000000",
secondary: "#03dac6",
onSecondary: "#000000"
};
var hexToRgba = function hexToRgba(hex, alpha) {
if (!hex || typeof hex !== "string") return hex;
var cleaned = hex.replace("#", "");
if (cleaned.length === 8) return hex;
if (cleaned.length !== 6) return hex;
var r = parseInt(cleaned.substring(0, 2), 16);
var g = parseInt(cleaned.substring(2, 4), 16);
var b = parseInt(cleaned.substring(4, 6), 16);
return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
};
var TabLayout = function TabLayout(_ref) {
var tabs = _ref.tabs,
_ref$ns = _ref.ns,
ns = _ref$ns === void 0 ? "tabs" : _ref$ns,
initialRouteName = _ref.initialRouteName,
_ref$translateTitles = _ref.translateTitles,
translateTitles = _ref$translateTitles === void 0 ? true : _ref$translateTitles,
onTabChange = _ref.onTabChange,
bar = _ref.bar;
var insets = useSafeAreaInsets();
var cfg = useMemo(function () {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
var barDefaults = {
height: 64,
position: "absolute",
margin: {
bottom: 12,
horizontal: 16
},
padding: {
top: 8,
bottom: 0,
horizontal: 20
},
rounded: true,
radius: undefined,
colors: {
background: (_b = (_a = bar === null || bar === void 0 ? void 0 : bar.colors) === null || _a === void 0 ? void 0 : _a.background) !== null && _b !== void 0 ? _b : DEFAULT_COLORS.surface,
activeTint: (_d = (_c = bar === null || bar === void 0 ? void 0 : bar.colors) === null || _c === void 0 ? void 0 : _c.activeTint) !== null && _d !== void 0 ? _d : DEFAULT_COLORS.onPrimary,
inactiveTint: (_f = (_e = bar === null || bar === void 0 ? void 0 : bar.colors) === null || _e === void 0 ? void 0 : _e.inactiveTint) !== null && _f !== void 0 ? _f : DEFAULT_COLORS.onSurfaceVariant,
border: (_h = (_g = bar === null || bar === void 0 ? void 0 : bar.colors) === null || _g === void 0 ? void 0 : _g.border) !== null && _h !== void 0 ? _h : DEFAULT_COLORS.outline + "30",
shadow: (_k = (_j = bar === null || bar === void 0 ? void 0 : bar.colors) === null || _j === void 0 ? void 0 : _j.shadow) !== null && _k !== void 0 ? _k : DEFAULT_COLORS.shadow,
surface: (_m = (_l = bar === null || bar === void 0 ? void 0 : bar.colors) === null || _l === void 0 ? void 0 : _l.surface) !== null && _m !== void 0 ? _m : DEFAULT_COLORS.surface,
secondary: (_p = (_o = bar === null || bar === void 0 ? void 0 : bar.colors) === null || _o === void 0 ? void 0 : _o.secondary) !== null && _p !== void 0 ? _p : DEFAULT_COLORS.secondary,
onSecondary: (_r = (_q = bar === null || bar === void 0 ? void 0 : bar.colors) === null || _q === void 0 ? void 0 : _q.onSecondary) !== null && _r !== void 0 ? _r : DEFAULT_COLORS.onSecondary
},
shadow: true,
border: true,
glass: false,
compact: false,
useSafeAreaInset: true,
style: undefined,
itemStyle: {
flex: 1,
alignItems: "center",
justifyContent: "center",
position: "relative"
},
glowItemStyle: {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
borderRadius: 22,
backgroundColor: (_t = (_s = bar === null || bar === void 0 ? void 0 : bar.colors) === null || _s === void 0 ? void 0 : _s.activeTint) !== null && _t !== void 0 ? _t : DEFAULT_COLORS.onPrimary
},
labelStyle: undefined
};
var config = Object.assign(Object.assign({}, barDefaults), bar || {});
config.margin = Object.assign(Object.assign({}, barDefaults.margin), (bar === null || bar === void 0 ? void 0 : bar.margin) || {});
config.padding = Object.assign(Object.assign({}, barDefaults.padding), (bar === null || bar === void 0 ? void 0 : bar.padding) || {});
config.colors = Object.assign(Object.assign({}, barDefaults.colors), (bar === null || bar === void 0 ? void 0 : bar.colors) || {});
config.itemStyle = [barDefaults.itemStyle, (_u = bar === null || bar === void 0 ? void 0 : bar.itemStyle) !== null && _u !== void 0 ? _u : {}];
config.glowItemStyle = [barDefaults.glowItemStyle, (_v = bar === null || bar === void 0 ? void 0 : bar.glowItemStyle) !== null && _v !== void 0 ? _v : {}];
if (config.compact) {
config.height = Math.max(52, (config.height || 64) - 12);
config.padding = Object.assign(Object.assign({}, config.padding), {
top: 4,
bottom: 12
});
}
return config;
}, [bar]);
var getBorderRadiusStyle = useMemo(function () {
if (cfg.radius) {
if (typeof cfg.radius === "number") return {
borderRadius: cfg.radius
};
return {
borderTopLeftRadius: cfg.radius.topLeft,
borderTopRightRadius: cfg.radius.topRight,
borderBottomLeftRadius: cfg.radius.bottomLeft,
borderBottomRightRadius: cfg.radius.bottomRight
};
}
if (typeof cfg.rounded === "number") return {
borderRadius: cfg.rounded
};
if (cfg.rounded) return {
borderRadius: 18
};
return {};
}, [cfg.radius, cfg.rounded]);
var getShadowStyle = useMemo(function () {
var _a_0, _b_0, _c_0, _d_0;
if (!cfg.shadow) return {};
var shadowConfig = (typeof cfg.shadow === "boolean" ? {} : cfg.shadow) || {};
return Platform.select({
ios: {
shadowColor: shadowConfig.color || cfg.colors.shadow,
shadowOpacity: (_a_0 = shadowConfig.opacity) !== null && _a_0 !== void 0 ? _a_0 : 0.18,
shadowRadius: (_b_0 = shadowConfig.radius) !== null && _b_0 !== void 0 ? _b_0 : 16,
shadowOffset: (_c_0 = shadowConfig.offset) !== null && _c_0 !== void 0 ? _c_0 : {
height: 6,
width: 0
}
},
android: {
elevation: (_d_0 = shadowConfig.elevation) !== null && _d_0 !== void 0 ? _d_0 : 12
}
});
}, [cfg.shadow, cfg.colors.shadow]);
var getBorderStyle = useMemo(function () {
var _a_1;
if (!cfg.border) return {};
var borderConfig = (typeof cfg.border === "boolean" ? {} : cfg.border) || {};
var base = {
borderWidth: (_a_1 = borderConfig.width) !== null && _a_1 !== void 0 ? _a_1 : 0.5,
borderColor: borderConfig.color || cfg.colors.border
};
if (borderConfig.topOnly) {
return {
borderTopWidth: base.borderWidth,
borderTopColor: base.borderColor
};
}
return base;
}, [cfg.border, cfg.colors.border]);
var safeAreaExtra = useMemo(function () {
return cfg.useSafeAreaInset ? insets.bottom : 0;
}, [cfg.useSafeAreaInset, insets.bottom]);
var height = useMemo(function () {
return cfg.height + (cfg.padding.bottom || 0) + (cfg.padding.top || 0);
}, [cfg.height, cfg.padding.bottom, cfg.padding.top]);
var tabBarStyle = useMemo(function () {
var _a_2, _b_1, _c_1;
var additionalStyles = {};
if (cfg.glass) {
var alpha = _typeof(cfg.glass) === "object" && "alpha" in cfg.glass
// eslint-disable-next-line @typescript-eslint/no-explicit-any
? (_a_2 = cfg.glass.alpha) !== null && _a_2 !== void 0 ? _a_2 : 0.7 : 0.7;
additionalStyles = Object.assign({}, Platform.select({
web: {
backdropFilter: "blur(20px)"
// eslint-disable-next-line @typescript-eslint/no-explicit-any
},
ios: {
backgroundColor: "rgba(255, 255, 255, 0.1)"
},
android: {
backgroundColor: hexToRgba((_b_1 = cfg.colors.surface) !== null && _b_1 !== void 0 ? _b_1 : DEFAULT_COLORS.surface, alpha + 0.1)
}
}));
}
return [Object.assign(Object.assign(Object.assign({
backgroundColor: cfg.colors.background,
borderTopWidth: 0,
height: height,
paddingBottom: cfg.padding.bottom || 0,
paddingTop: cfg.padding.top,
paddingHorizontal: cfg.padding.horizontal,
position: cfg.position,
left: 0,
right: 0,
bottom: (cfg.position === "absolute" ? (_c_1 = cfg.margin.bottom) !== null && _c_1 !== void 0 ? _c_1 : 0 : 0) + safeAreaExtra,
marginHorizontal: cfg.margin.horizontal,
flexDirection: "row",
justifyContent: "space-around",
alignItems: "center",
overflow: "hidden"
}, getBorderRadiusStyle), cfg.glass ? additionalStyles : getShadowStyle), getBorderStyle), cfg.style];
}, [cfg, getBorderRadiusStyle, getShadowStyle, getBorderStyle, safeAreaExtra, height]);
React.useEffect(function () {
if (initialRouteName) {
setActiveTabName(initialRouteName);
}
}, [initialRouteName]);
var tabItems = useMemo(function () {
return tabs.map(function (tab) {
return jsx(TabTrigger, {
name: tab.name,
href: tab.href || "/".concat(tab.name),
asChild: true,
accessibilityLabel: tab.accessibilityLabel || (tab.title ? translateTitles ? tab.title : tab.title : undefined),
style: {
flex: 1
},
children: jsx(AnimatedTabButton$1, {
tab: tab,
cfg: cfg,
translateTitles: translateTitles,
ns: ns,
onTabChange: onTabChange
}, tab.name)
}, tab.name);
});
}, [tabs, cfg, translateTitles, ns, onTabChange]);
return jsxs(Tabs$1, {
children: [jsx(TabSlot, {}), jsx(TabList, {
style: tabBarStyle,
children: tabItems
})]
});
};
var Tabs = /*#__PURE__*/memo(TabLayout);export{Tabs as TabLayout,useActiveTab};//# sourceMappingURL=index.mjs.map