@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.
119 lines • 7.25 kB
JavaScript
;
/**
* Theme Provider and Context
*
* Exposes a React Context for the theme and a ThemeProvider component.
* Allows library users to wrap their app and provide custom themes or use defaults.
* Includes a `useTheme` hook for easy access to theme properties inside components.
*
* Author: Geeky Hawks FZE LLC
*/
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.ThemeProvider = exports.useTheme = void 0;
const react_1 = __importStar(require("react"));
const Theme_1 = require("./Theme");
const variants_1 = require("./variants");
/**
* ThemeContext
*
* Provides the current theme and text variants to all components
* within the app. Components can consume this context to access
* font family, colors, spacing, and text styles.
*
* Default values are `defaultLightTheme` and `defaultTextVariants`.
*/
const ThemeContext = (0, react_1.createContext)({
activityIndicatorVariants: variants_1.defaultActivityIndicatorVariants,
appBarVariants: variants_1.defaultAppBarVariants,
buttonShapeVariants: variants_1.defaultButtonShapeVariants,
buttonSizeVariants: variants_1.defaultButtonSizeVariants,
checkBoxColorVariants: variants_1.defaultCheckBoxColorVariants,
checkBoxSizeVariants: variants_1.defaultCheckBoxSizeVariants,
floatingLabelTextInputSizeVariants: variants_1.defaultFloatingLabelTextInputSizeVariants,
floatingLabelTextInputStyleVariants: variants_1.defaultFloatingLabelTextInputStyleVariants,
loaderModalVariants: variants_1.defaultLoaderModalVariants,
radioColorVariants: variants_1.defaultRadioColorVariants,
radioSizeVariants: variants_1.defaultRadioSizeVariants,
statusBarVariants: variants_1.defaultStatusBarVariants,
switchColorVariants: variants_1.defaultSwitchColorVariants,
textInputSizeVariants: variants_1.defaultTextInputSizeVariants,
textInputStyleVariants: variants_1.defaultTextInputStyleVariants,
textVariants: variants_1.defaultTextVariants,
theme: Theme_1.defaultLightTheme,
});
/**
* useTheme
*
* Hook to access theme and textVariants in components.
*/
const useTheme = () => {
const context = (0, react_1.useContext)(ThemeContext);
if (!context)
throw new Error("useTheme must be used inside ThemeProvider");
return context;
};
exports.useTheme = useTheme;
/**
* ThemeProvider
*
* Wrap your app and optionally pass a custom theme, variants, or spacing.
* Only **replaces** the default values — no automatic merging.
* If users want defaults, they need to explicitly spread them.
*/
const ThemeProvider = ({ activityIndicatorVariants, appBarVariants, buttonShapeVariants, buttonSizeVariants, checkBoxColorVariants, checkBoxSizeVariants, children, floatingLabelTextInputSizeVariants, floatingLabelTextInputStyleVariants, loaderModalVariants, radioColorVariants, radioSizeVariants, statusBarVariants, switchColorVariants, textInputSizeVariants, textInputStyleVariants, textVariants, theme, }) => {
const appliedTheme = {
activityIndicatorVariants: activityIndicatorVariants !== null && activityIndicatorVariants !== void 0 ? activityIndicatorVariants : variants_1.defaultActivityIndicatorVariants,
appBarVariants: appBarVariants !== null && appBarVariants !== void 0 ? appBarVariants : variants_1.defaultAppBarVariants,
buttonShapeVariants: buttonShapeVariants !== null && buttonShapeVariants !== void 0 ? buttonShapeVariants : variants_1.defaultButtonShapeVariants,
buttonSizeVariants: buttonSizeVariants !== null && buttonSizeVariants !== void 0 ? buttonSizeVariants : variants_1.defaultButtonSizeVariants,
checkBoxColorVariants: checkBoxColorVariants !== null && checkBoxColorVariants !== void 0 ? checkBoxColorVariants : variants_1.defaultCheckBoxColorVariants,
checkBoxSizeVariants: checkBoxSizeVariants !== null && checkBoxSizeVariants !== void 0 ? checkBoxSizeVariants : variants_1.defaultCheckBoxSizeVariants,
floatingLabelTextInputSizeVariants: floatingLabelTextInputSizeVariants !== null && floatingLabelTextInputSizeVariants !== void 0 ? floatingLabelTextInputSizeVariants : variants_1.defaultFloatingLabelTextInputSizeVariants,
floatingLabelTextInputStyleVariants: floatingLabelTextInputStyleVariants !== null && floatingLabelTextInputStyleVariants !== void 0 ? floatingLabelTextInputStyleVariants : variants_1.defaultFloatingLabelTextInputStyleVariants,
loaderModalVariants: loaderModalVariants !== null && loaderModalVariants !== void 0 ? loaderModalVariants : variants_1.defaultLoaderModalVariants,
radioColorVariants: radioColorVariants !== null && radioColorVariants !== void 0 ? radioColorVariants : variants_1.defaultRadioColorVariants,
radioSizeVariants: radioSizeVariants !== null && radioSizeVariants !== void 0 ? radioSizeVariants : variants_1.defaultRadioSizeVariants,
statusBarVariants: statusBarVariants !== null && statusBarVariants !== void 0 ? statusBarVariants : variants_1.defaultStatusBarVariants,
switchColorVariants: switchColorVariants !== null && switchColorVariants !== void 0 ? switchColorVariants : variants_1.defaultSwitchColorVariants,
textInputSizeVariants: textInputSizeVariants !== null && textInputSizeVariants !== void 0 ? textInputSizeVariants : variants_1.defaultTextInputSizeVariants,
textInputStyleVariants: textInputStyleVariants !== null && textInputStyleVariants !== void 0 ? textInputStyleVariants : variants_1.defaultTextInputStyleVariants,
textVariants: textVariants !== null && textVariants !== void 0 ? textVariants : variants_1.defaultTextVariants,
theme: theme !== null && theme !== void 0 ? theme : Theme_1.defaultLightTheme,
};
return react_1.default.createElement(ThemeContext.Provider, { value: appliedTheme }, children);
};
exports.ThemeProvider = ThemeProvider;
//# sourceMappingURL=ThemeContext.js.map