@audira/carbon-react-native/lib/module/components/checkbox/Checkbox.js

Build React Native apps with component and shared patterns using Carbon

"use strict";

import { forwardRef, useCallback, useContext, useImperativeHandle, useRef } from 'react';
import { Pressable, StyleSheet, View } from 'react-native';
import { Spacing } from '@audira/carbon-react-native-elements';
import { GlobalConfigContext } from "../../_internal/contexts/index.js";
import { CommonStyleSheet, FlexStyleSheet } from "../../_internal/style-sheets/index.js";
import { CarbonStyleSheet } from "../../carbon-style-sheet/index.js";
import { ThemeContext } from "../../contexts/index.js";
import { CheckboxInput } from "../checkbox-input/index.js";
import { FormLabel } from "../form-label/index.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const Checkbox = /*#__PURE__*/forwardRef(function Checkbox({
  defaultValue,
  value,
  interactiveState = 'normal',
  label,
  role = 'checkbox',
  'aria-label': ariaLabel,
  onChange,
  onPress,
  checkboxInputProps,
  formLabelProps,
  pressableProps,
  style,
  dir,
  ...props
}, forwardedRef) {
  useContext(ThemeContext);
  const globalConfigContext = useContext(GlobalConfigContext),
    checkboxInputRef = useRef(null),
    viewRef = useRef(null),
    pressHandler = useCallback(event => {
      onPress?.(event);
      if (checkboxInputRef.current) {
        checkboxInputRef.current.setValue(checkboxInputRef.current.value === null ? true : !checkboxInputRef.current.value);
      }
    }, [onPress]);
  useImperativeHandle(forwardedRef, () => {
    return Object.assign(viewRef.current ?? {}, {
      get value() {
        return checkboxInputRef.current.value;
      },
      setValue(value_) {
        checkboxInputRef.current?.setValue(value_);
      }
    });
  }, []);
  return /*#__PURE__*/_jsxs(View, {
    ...props,
    "aria-label": ariaLabel || label,
    dir: dir ?? globalConfigContext.rtl ? 'rtl' : undefined,
    style: [FlexStyleSheet.flex_row, globalConfigContext.rtl ? CommonStyleSheet.rtl : undefined, style],
    ref: viewRef,
    children: [/*#__PURE__*/_jsx(Pressable, {
      ...pressableProps,
      role: role,
      disabled: interactiveState === 'disabled',
      "aria-label": pressableProps?.['aria-label'] ?? label,
      onPress: pressHandler,
      style: [CommonStyleSheet.absolute, CommonStyleSheet.w_full, CommonStyleSheet.h_full, baseStyle.pressable, pressableProps?.style]
    }), /*#__PURE__*/_jsx(CheckboxInput, {
      ...checkboxInputProps,
      role: "none",
      defaultValue: defaultValue,
      value: value,
      interactiveState: interactiveState,
      onChange: onChange,
      onPress: onPress,
      style: [baseStyle.checkboxInput, checkboxInputProps?.style],
      ref: checkboxInputRef
    }), /*#__PURE__*/_jsx(FormLabel, {
      ...formLabelProps,
      label: label,
      textProps: {
        ...formLabelProps?.textProps,
        type: formLabelProps?.textProps?.type || 'body_compact_01',
        style: [textColorStyle[interactiveState], formLabelProps?.textProps?.style]
      },
      style: [FlexStyleSheet.flex_1, baseStyle.label, formLabelProps?.style]
    })]
  });
});
const baseStyle = StyleSheet.create({
    pressable: {
      zIndex: 1
    },
    checkboxInput: {
      zIndex: 2
    },
    label: {
      marginStart: Spacing.spacing_03
    }
  }),
  textColorStyle = CarbonStyleSheet.create({
    normal: {
      color: CarbonStyleSheet.color.text_primary
    },
    disabled: {
      color: CarbonStyleSheet.color.text_disabled
    },
    error: {
      color: CarbonStyleSheet.color.text_primary
    },
    read_only: {
      color: CarbonStyleSheet.color.text_primary
    },
    warning: {
      color: CarbonStyleSheet.color.text_primary
    }
  });
//# sourceMappingURL=Checkbox.js.map