@nexara/nativeflow/lib/module/components/CheckBox/CheckBox.js

Beautiful, responsive, and customizable UI components for React Native – built for performance and seamless experiences.

"use strict";

import React, { useEffect, useMemo, useRef, useState } from "react";
import { StyleSheet, TouchableWithoutFeedback, Animated } from "react-native";
import { StyledText, StyledView } from "../StyledComponents/index.js";
import { useTheme } from "../../hooks/index.js";
import { horizontalScale, verticalScale } from "../../helpers/ResponsiveCalculations.js";
import { Check } from "../../assets/svg/index.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const CheckBox = ({
  variant = 'square',
  isChecked = false,
  defaultValue = false,
  activeBgColor,
  inActiveBgColor = 'transparent',
  iconColor,
  disableBuiltInState = false,
  disabled = false,
  text,
  fs,
  textVariant = 'h6',
  size = 20,
  iconSize,
  containerStyle,
  textStyle,
  checkBoxStyle,
  onPress
}) => {
  const [isCheckboxChecked, setIsCheckboxChecked] = useState(defaultValue);
  useEffect(() => {
    setIsCheckboxChecked(defaultValue);
  }, [defaultValue]);
  const STYLES = useMemo(Styles, []);
  const scaleVal = useRef(new Animated.Value(1)).current;
  const {
    colors
  } = useTheme();
  activeBgColor = disabled ? colors.disable : activeBgColor ?? colors.primary;
  iconSize = iconSize ?? size / 1.5;
  const bgColor = !disableBuiltInState && isCheckboxChecked || disableBuiltInState && isChecked ? activeBgColor : inActiveBgColor;
  const textColor = disabled ? colors.textDisable : colors.textPrimary;
  const dynamicMainContStyles = {
    height: verticalScale(size),
    width: verticalScale(size),
    borderColor: disabled ? colors.disable : activeBgColor,
    borderRadius: variant === 'square' ? 5 : verticalScale(size),
    backgroundColor: bgColor
  };
  const animatedStyle = {
    transform: [{
      scale: scaleVal
    }]
  };
  const animateScale = toValue => {
    Animated.spring(scaleVal, {
      toValue,
      speed: 20,
      bounciness: 8,
      useNativeDriver: true
    }).start();
  };
  const onUserClick = () => {
    if (!disableBuiltInState) {
      onPress?.(!isCheckboxChecked);
      setIsCheckboxChecked(!isCheckboxChecked);
    } else {
      onPress?.(!isChecked);
    }
  };
  return /*#__PURE__*/_jsx(StyledView, {
    children: /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
      onPressIn: () => animateScale(0.8),
      onPressOut: () => animateScale(1),
      onPress: onUserClick,
      disabled: disabled,
      children: /*#__PURE__*/_jsxs(StyledView, {
        style: [STYLES.CONTAINER, containerStyle],
        children: [/*#__PURE__*/_jsx(Animated.View, {
          style: [STYLES.CHECKBOX_PARENT_CONT, dynamicMainContStyles, checkBoxStyle, animatedStyle],
          children: (disableBuiltInState ? isChecked : isCheckboxChecked) && /*#__PURE__*/_jsx(Check, {
            color: iconColor ?? colors.iconSecondary,
            size: verticalScale(iconSize)
          })
        }), text && /*#__PURE__*/_jsx(StyledText, {
          style: textStyle,
          fs: fs,
          color: textColor,
          variant: textVariant,
          primary: true,
          children: text
        })]
      })
    })
  });
};
export default CheckBox;
const Styles = () => StyleSheet.create({
  CONTAINER: {
    flexDirection: 'row',
    gap: horizontalScale(10),
    alignItems: 'center'
  },
  CHECKBOX_PARENT_CONT: {
    borderWidth: 0.8,
    alignItems: 'center',
    justifyContent: 'center',
    padding: verticalScale(7)
  }
});
//# sourceMappingURL=CheckBox.js.map