@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.
66 lines • 3.82 kB
JavaScript
"use strict";
/**
* ActivityIndicator
*
* A theme-aware wrapper around React Native’s `ActivityIndicator`.
* - Supports theme-based variants for size and color.
* - Allows overriding size and color manually.
* - Variants can be extended or overridden via ThemeProvider.
* - Optionally shows text (e.g. "Loading...") alongside the spinner.
*
* 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 resolveThemeColor_1 = require("../../theme/utils/resolveThemeColor");
const Text_1 = require("../Text");
/**
* ActivityIndicator
*
* - A themed wrapper around React Native’s `ActivityIndicator`.
* - Renders a spinner with optional loading text positioned around it.
* - Supports theme-driven variants for size, color, text color, and container styling.
* - Text color is resolved via theme tokens or overridden via `textColor` prop.
* - Allows full customization with containerStyle, textStyle, size, and color props.
*/
const ActivityIndicator = ({ color, containerStyle, size, text, textColor, textPosition = "right", textStyle, variant = "default", }) => {
var _a, _b, _c, _d;
const { theme, activityIndicatorVariants } = (0, ThemeContext_1.useTheme)();
const variantConfig = activityIndicatorVariants[variant] || {};
// Resolve theme-driven colors
const resolvedSpinnerColor = (0, resolveThemeColor_1.resolveThemeColor)((_a = color !== null && color !== void 0 ? color : variantConfig.color) !== null && _a !== void 0 ? _a : "primary", theme);
const resolvedTextColor = (0, resolveThemeColor_1.resolveThemeColor)((_b = textColor !== null && textColor !== void 0 ? textColor : variantConfig.textColor) !== null && _b !== void 0 ? _b : "text", theme);
const isHorizontal = textPosition === "left" || textPosition === "right";
const flexDirection = isHorizontal ? "row" : "column";
const renderSpinnerFirst = textPosition === "right" || textPosition === "bottom";
return (react_1.default.createElement(react_native_1.View, { style: [
{ flexDirection, alignItems: "center", justifyContent: "center" },
variantConfig.container,
containerStyle,
] }, renderSpinnerFirst ? (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(react_native_1.ActivityIndicator, { size: (_c = size !== null && size !== void 0 ? size : variantConfig.size) !== null && _c !== void 0 ? _c : "large", color: resolvedSpinnerColor }),
text ? (react_1.default.createElement(Text_1.Text, { style: [
{
color: resolvedTextColor,
marginLeft: isHorizontal ? 8 : 0,
marginTop: !isHorizontal ? 4 : 0,
},
textStyle,
] }, text)) : null)) : (react_1.default.createElement(react_1.default.Fragment, null,
text ? (react_1.default.createElement(Text_1.Text, { style: [
{
color: resolvedTextColor,
marginRight: isHorizontal ? 8 : 0,
marginBottom: !isHorizontal ? 4 : 0,
},
textStyle,
] }, text)) : null,
react_1.default.createElement(react_native_1.ActivityIndicator, { size: (_d = size !== null && size !== void 0 ? size : variantConfig.size) !== null && _d !== void 0 ? _d : "large", color: resolvedSpinnerColor })))));
};
exports.default = ActivityIndicator;
//# sourceMappingURL=ActivityIndicator.js.map