@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 { useEffect, useMemo, useRef, useState } from "react";
import { StyleSheet, TouchableWithoutFeedback, Animated, TouchableOpacity } from "react-native";
import { StyledText, StyledView } from "../StyledComponents/index.js";
import { useTheme } from "../../hooks/index.js";
import { horizontalScale, verticalScale } from "../../helpers/index.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,
  label = 'Checkbox',
  fScale = 'xs',
  fs,
  ff,
  size = 20,
  iconSize,
  containerStyle,
  labelStyle,
  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.states.disabled : activeBgColor ?? colors.brand.primary;
  iconSize = iconSize ?? size / 1.5;
  const bgColor = !disableBuiltInState && isCheckboxChecked || disableBuiltInState && isChecked ? activeBgColor : inActiveBgColor;
  const textColor = disabled ? colors.typography.disabled : colors.typography.primary;
  const dynamicMainContStyles = {
    height: verticalScale(size),
    width: verticalScale(size),
    borderColor: disabled ? colors.border.default : activeBgColor,
    borderRadius: verticalScale(variant === 'square' ? 5 : 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__*/_jsxs(StyledView, {
    style: [STYLES.CONTAINER, containerStyle],
    children: [/*#__PURE__*/_jsx(TouchableWithoutFeedback, {
      onPressIn: () => animateScale(0.8),
      onPressOut: () => animateScale(1),
      onPress: onUserClick,
      disabled: disabled,
      children: /*#__PURE__*/_jsx(Animated.View, {
        style: [STYLES.CHECKBOX_PARENT_CONT, dynamicMainContStyles, checkBoxStyle, animatedStyle],
        children: (disableBuiltInState ? isChecked : isCheckboxChecked) && /*#__PURE__*/_jsx(Check, {
          color: disabled ? colors.states.disabled : iconColor ?? colors.brand.onPrimary,
          size: verticalScale(iconSize)
        })
      })
    }), /*#__PURE__*/_jsx(TouchableOpacity, {
      onPressIn: () => animateScale(0.8),
      onPressOut: () => animateScale(1),
      onPress: onUserClick,
      disabled: disabled,
      children: label && /*#__PURE__*/_jsx(StyledText, {
        style: labelStyle,
        fs: fs,
        ff: ff,
        color: textColor,
        fScale: fScale,
        children: label
      })
    })]
  });
};
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: horizontalScale(7)
  }
});
//# sourceMappingURL=CheckBox.js.map