@audira/carbon-react-native/lib/module/components/radio-button/RadioButton.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 { FormLabel } from "../form-label/index.js";
import { RadioButtonInput } from "../radio-button-input/index.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const RadioButton = /*#__PURE__*/forwardRef(function RadioButton({
  defaultChecked,
  checked,
  value,
  interactiveState = 'normal',
  label,
  role = 'radio',
  'aria-label': ariaLabel,
  onChange,
  onPress,
  radioButtonInputProps,
  formLabelProps,
  pressableProps,
  style,
  dir,
  ...props
}, forwardedRef) {
  useContext(ThemeContext);
  const radioButtonInputRef = useRef(null),
    globalConfigContext = useContext(GlobalConfigContext),
    viewRef = useRef(null),
    pressHandler = useCallback(event => {
      onPress?.(event);
      radioButtonInputRef.current?.setChecked(true);
    }, [onPress]);
  useImperativeHandle(forwardedRef, () => {
    return Object.assign(viewRef.current ?? {}, {
      get checked() {
        return radioButtonInputRef.current.checked;
      },
      setChecked(checked_) {
        radioButtonInputRef.current?.setChecked(checked_);
      }
    });
  }, []);
  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(RadioButtonInput, {
      ...radioButtonInputProps,
      role: "none",
      defaultChecked: defaultChecked,
      checked: checked,
      value: value,
      interactiveState: interactiveState,
      onChange: onChange,
      onPress: onPress,
      style: [baseStyle.radioButtonInput, radioButtonInputProps?.style],
      ref: radioButtonInputRef
    }), /*#__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
    },
    radioButtonInput: {
      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=RadioButton.js.map