@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.
53 lines • 2.75 kB
JavaScript
;
/**
* CheckBox
*
* A single checkbox component built on top of the `SelectionControl` base.
* - Shape: fixed to `square` for checkbox semantics.
* - Selection state: determined by either a `CheckBoxGroup` context
* or a standalone `selectedValues` prop.
* - Label: optional text displayed next to the checkbox.
*
* 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 CheckBoxContext_1 = require("./CheckBoxContext");
const SelectionControl_1 = require("../../base/SelectionControl/SelectionControl");
const theme_1 = require("../../theme");
/**
* CheckBox
*
* Renders a themed checkbox for multiple-choice selection.
* - Integrates with `CheckBoxGroup` for grouped selection behavior.
* - Can be used standalone with `selectedValues` and `onChange`.
* - Uses size and color variants (`checkBoxSizeVariants`, `checkBoxColorVariants`)
* provided by the active theme for consistent styling.
*
* Built on the `SelectionControl` base component with `square` shape.
*/
const CheckBox = ({ accessibilityLabel, color = "primary", containerStyle, disabled, label, labelTextStyle, onChange, selectedValues, size = "md", value, }) => {
var _a;
const { theme, checkBoxSizeVariants, checkBoxColorVariants } = (0, theme_1.useTheme)();
const group = (0, CheckBoxContext_1.useCheckBoxGroupContext)();
const isSelected = group
? group.selectedValues.includes(value)
: (_a = selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(value)) !== null && _a !== void 0 ? _a : false;
const handlePress = () => {
if (group === null || group === void 0 ? void 0 : group.onValueChange) {
const newValues = isSelected
? group.selectedValues.filter((v) => v !== value)
: [...group.selectedValues, value];
group.onValueChange(newValues);
}
else if (onChange) {
onChange(value, !isSelected);
}
};
return (react_1.default.createElement(SelectionControl_1.SelectionControl, { accessibilityLabel: accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : label, color: color, colorVariants: checkBoxColorVariants, containerStyle: containerStyle, disabled: disabled, label: label, labelTextStyle: labelTextStyle, onPress: handlePress, selected: isSelected, shape: "square", size: size, sizeVariants: checkBoxSizeVariants, theme: theme }));
};
exports.default = CheckBox;
//# sourceMappingURL=CheckBox.js.map