@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.
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