react-native-tree-multi-select/lib/module/components/CheckboxView.js

A super-fast, customizable tree view component for React Native with multi-selection, checkboxes, and search filtering capabilities.

"use strict";

import React from "react";
import { Platform, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { Checkbox } from "react-native-paper";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function arePropsEqual(prevProps, nextProps) {
  return prevProps.value === nextProps.value && prevProps.text === nextProps.text;
}
export const CheckboxView = /*#__PURE__*/React.memo(_CheckboxView, arePropsEqual);
function _CheckboxView(props) {
  const {
    value,
    onValueChange,
    text,
    outermostParentViewStyle = defaultCheckboxViewStyles.mainView,
    checkboxParentViewStyle = defaultCheckboxViewStyles.checkboxView,
    textTouchableStyle,
    checkboxProps,
    textProps = {
      style: defaultCheckboxViewStyles.checkboxTextStyle,
      numberOfLines: 1,
      ellipsizeMode: "middle"
    }
  } = props;
  const customCheckboxValueTypeToRNPaperType = React.useCallback(customCheckboxValueType => {
    return customCheckboxValueType === "indeterminate" ? "indeterminate" : customCheckboxValueType ? "checked" : "unchecked";
  }, []);

  /**
   * This function modifies the change in value when the previous state was indeterminate.
   * If the prior value is 'indeterminate', it will mark the CheckBox as checked upon click.
   *
   * @param newValue This represents the updated CheckBox value after it's clicked.
   */
  const onValueChangeModifier = React.useCallback(() => {
    // If the previous state was 'indeterminate', set checked to true
    if (value === "indeterminate") onValueChange(true);else onValueChange(!value);
  }, [onValueChange, value]);
  return /*#__PURE__*/_jsxs(View, {
    style: outermostParentViewStyle,
    children: [/*#__PURE__*/_jsx(View, {
      style: checkboxParentViewStyle,
      children: /*#__PURE__*/_jsx(Checkbox.Android, {
        ...checkboxProps,
        status: customCheckboxValueTypeToRNPaperType(value),
        onPress: onValueChangeModifier
      })
    }), text ? /*#__PURE__*/_jsx(TouchableOpacity, {
      style: textTouchableStyle,
      onPress: onValueChangeModifier,
      children: /*#__PURE__*/_jsx(Text, {
        ...textProps,
        children: text
      })
    }) : null]
  });
}
export const defaultCheckboxViewStyles = StyleSheet.create({
  mainView: {
    alignSelf: "center",
    alignItems: "center",
    flexDirection: "row",
    marginEnd: 10
  },
  checkboxView: {
    marginStart: 5,
    transform: [{
      scale: 1.2
    }]
  },
  checkboxTextStyle: {
    color: "black",
    marginTop: Platform.OS === "android" ? 2 : undefined
  }
});
//# sourceMappingURL=CheckboxView.js.map