@geekyhawks/react-native-ui-components
Version:
A lightweight and reusable React Native UI components library with customizable Text, TextInput, FloatingLabelTextInput, Button, and more. Built with TypeScript, fully typed, and designed for easy integration into any React Native 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