@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.
45 lines • 2.21 kB
JavaScript
;
/**
* Radio
*
* A single radio button component built on top of the `SelectionControl` base.
* - Shape: fixed to `circle` for radio button semantics.
* - Selection state: determined by either a `RadioGroup` context
* or a standalone `selectedValue` prop.
* - Label: optional text displayed next to the radio button.
*
* 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 RadioContext_1 = require("./RadioContext");
const SelectionControl_1 = require("../../base/SelectionControl/SelectionControl");
const theme_1 = require("../../theme");
/**
* Radio
*
* Renders a themed radio button for single-choice selection.
* - Integrates with `RadioGroup` for group selection behavior.
* - Can be used standalone with `selectedValue` and `onChange`.
* - Uses size and color variants (`radioSizeVariants`, `radioColorVariants`)
* provided by the active theme for consistent styling.
*
* Built on the `SelectionControl` base component with `circle` shape.
*/
const Radio = ({ value, label, selectedValue, onChange, disabled, size = "md", color = "primary", }) => {
const { theme, radioSizeVariants, radioColorVariants } = (0, theme_1.useTheme)();
const group = (0, RadioContext_1.useRadioGroupContext)();
const isSelected = (group === null || group === void 0 ? void 0 : group.selectedValue) !== undefined ? group.selectedValue === value : selectedValue === value;
const handlePress = () => {
if (group === null || group === void 0 ? void 0 : group.onValueChange)
group.onValueChange(value);
else if (onChange)
onChange(value);
};
return (react_1.default.createElement(SelectionControl_1.SelectionControl, { selected: isSelected, onPress: handlePress, disabled: disabled, label: label, shape: "circle", size: size, color: color, sizeVariants: radioSizeVariants, colorVariants: radioColorVariants, theme: theme }));
};
exports.default = Radio;
//# sourceMappingURL=Radio.js.map