@geekyhawks/react-native-ui-components
Version:
Lightweight, reusable React Native UI components with built-in theming — including Text, TextInput, FloatingLabelTextInput, Button, and more. Fully typed with TypeScript and easy to integrate into any project.
79 lines • 4.53 kB
JavaScript
"use strict";
/**
* AppBar
*
* A customizable application top bar component.
* - Supports theme-based variants (`default`, `transparent`, `elevated`)
* or custom variants defined in the `ThemeProvider`.
* - Provides optional left icon, right icon, centered title and optional subTitle.
* - Ensures title (+ subTitle if provided) always remain horizontally centered regardless of icons.
*
* Author: Geeky Hawks FZE LLC
*/
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const react_native_1 = require("react-native");
const ThemeContext_1 = require("../../theme/ThemeContext");
const Text_1 = require("../Text");
const resolveThemeColor_1 = require("../../theme/utils/resolveThemeColor");
/**
* AppBar
*
* Renders a themed top application bar.
* - Left section: optional left icon.
* - Center section: title, always horizontally centered.
* - Right section: optional right icon.
*
* Uses `resolveThemeColor` to map theme tokens (e.g., `primary`, `onPrimary`)
* into actual color values from the active theme.
*/
const AppBar = ({ containerStyle, leftIcon, leftIconStyle, onLeftIconPress, onRightIconPress, rightIcon, rightIconStyle, subTitle, subTitleTextStyle, title, titleTextStyle, variant = "default", }) => {
var _a, _b, _c;
const { theme, appBarVariants } = (0, ThemeContext_1.useTheme)();
const variantConfig = appBarVariants[variant] || {};
// Resolve theme-driven colors
const resolvedContainer = Object.assign(Object.assign({}, variantConfig.container), { backgroundColor: (0, resolveThemeColor_1.resolveThemeColor)((_a = variantConfig.container) === null || _a === void 0 ? void 0 : _a.backgroundColor, theme) });
const resolvedTitle = Object.assign(Object.assign({}, variantConfig.title), { color: (0, resolveThemeColor_1.resolveThemeColor)((_b = variantConfig.title) === null || _b === void 0 ? void 0 : _b.color, theme) });
const resolvedSubTitle = Object.assign(Object.assign({}, variantConfig.subTitle), { color: (0, resolveThemeColor_1.resolveThemeColor)((_c = variantConfig.subTitle) === null || _c === void 0 ? void 0 : _c.color, theme) });
return (react_1.default.createElement(react_native_1.View, { style: [resolvedContainer, containerStyle] },
react_1.default.createElement(react_native_1.View, { style: { minWidth: 48, justifyContent: "center", alignItems: "flex-start" } }, leftIcon ? (react_1.default.createElement(react_native_1.Pressable, { onPress: onLeftIconPress, style: ({ pressed }) => {
var _a;
return [
(_a = variantConfig.leftIcon) === null || _a === void 0 ? void 0 : _a.container,
leftIconStyle,
pressed && { opacity: 0.6 },
];
} }, leftIcon)) : null),
react_1.default.createElement(react_native_1.View, { style: {
position: "absolute",
left: 0,
right: 0,
top: 0,
bottom: 0,
alignItems: "center",
justifyContent: "center",
}, pointerEvents: "none" }, (title || subTitle) ? (react_1.default.createElement(react_native_1.View, { style: { alignItems: "center" } },
title ? (react_1.default.createElement(Text_1.Text, { style: [
{ fontFamily: theme.fontFamily },
resolvedTitle,
titleTextStyle,
] }, title)) : null,
subTitle ? (react_1.default.createElement(Text_1.Text, { style: [
{ fontFamily: theme.fontFamily },
resolvedSubTitle,
subTitleTextStyle,
] }, subTitle)) : null)) : null),
react_1.default.createElement(react_native_1.View, { style: { minWidth: 48, justifyContent: "center", alignItems: "flex-end" } }, rightIcon ? (react_1.default.createElement(react_native_1.Pressable, { onPress: onRightIconPress, style: ({ pressed }) => {
var _a;
return [
(_a = variantConfig.rightIcon) === null || _a === void 0 ? void 0 : _a.container,
rightIconStyle,
pressed && { opacity: 0.6 },
];
} }, rightIcon)) : null)));
};
exports.default = AppBar;
//# sourceMappingURL=AppBar.js.map