@audira/carbon-react-native/lib/module/components/radio-button-input/RadioButtonInput.js

Build React Native apps with component and shared patterns using Carbon

"use strict";

import { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';
import { Pressable, StyleSheet, View } from 'react-native';
import { CommonStyleSheet, FlexStyleSheet } from "../../_internal/style-sheets/index.js";
import { CarbonStyleSheet } from "../../carbon-style-sheet/index.js";
import { ThemeContext } from "../../contexts/index.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const RadioButtonInput = /*#__PURE__*/forwardRef(function RadioButtonInput({
  defaultChecked,
  checked: checkedProp,
  value,
  interactiveState = 'normal',
  role = 'radio',
  onChange,
  onBlur,
  onFocus,
  onPress,
  style,
  ...props
}, forwardedRef) {
  useContext(ThemeContext);
  const viewRef = useRef(null),
    ref = useRef({
      onChangeEffect: false,
      checked: defaultChecked ?? false
    }),
    [isFocused, setIsFocused] = useState(false),
    [checkedSelf, setCheckedSelf] = useState(ref.current.checked),
    controlled = typeof checkedProp === 'boolean',
    checked = controlled ? !!checkedProp : checkedSelf,
    blurHandler = useCallback(event => {
      onBlur?.(event);
      setIsFocused(false);
    }, [onBlur]),
    focusHandler = useCallback(event => {
      onFocus?.(event);
      setIsFocused(true);
    }, [onFocus]),
    pressHandler = useCallback(event => {
      onPress?.(event);
      if (!controlled) {
        ref.current.onChangeEffect = true;
        setCheckedSelf(true);
      } else {
        onChange?.(!ref.current.checked, value);
      }
    }, [controlled, onPress, onChange, value]);
  useEffect(() => {
    if (ref.current.onChangeEffect) {
      ref.current.onChangeEffect = false;
      ref.current.checked = checked;
      onChange?.(ref.current.checked, value);
    }
  }, [checked, value, onChange]);
  useImperativeHandle(forwardedRef, () => {
    return Object.assign(viewRef.current ?? {}, {
      get checked() {
        return checked;
      },
      setChecked(checked_) {
        if (!controlled) {
          ref.current.onChangeEffect = true;
          if (typeof checked_ === 'boolean') {
            ref.current.checked = checked_;
          } else {
            ref.current.checked = checked_(ref.current.checked);
          }
          setCheckedSelf(ref.current.checked);
        }
      }
    });
  }, [controlled, checked]);
  return /*#__PURE__*/_jsxs(Pressable, {
    ...props,
    role: role,
    disabled: interactiveState === 'disabled',
    onBlur: blurHandler,
    onFocus: focusHandler,
    onPress: pressHandler,
    style: [FlexStyleSheet.items_center, FlexStyleSheet.justify_center, CommonStyleSheet.relative, baseStyle.radioButton, mapInteractiveStateStyle_[`${interactiveState}_${checked}_container`], style],
    ref: viewRef,
    children: [/*#__PURE__*/_jsx(View, {
      style: [CommonStyleSheet.absolute, CommonStyleSheet.overflow_hidden, baseStyle.focusBox, isFocused ? carbonStyle.focusBox : null]
    }), /*#__PURE__*/_jsx(View, {
      style: [FlexStyleSheet.flex_initial, baseStyle.marker, checked ? mapInteractiveStateStyle_[`${interactiveState}_true_marker`] : null]
    })]
  });
});
const size = 18,
  baseStyle = StyleSheet.create({
    radioButton: {
      width: size,
      height: size,
      borderRadius: size,
      borderWidth: 1
    },
    focusBox: {
      width: size + 6,
      height: size + 6,
      borderRadius: size + 3,
      borderWidth: 2,
      borderColor: 'transparent'
    },
    marker: {
      width: size / 2,
      height: size / 2,
      borderRadius: size,
      overflow: 'hidden'
    }
  }),
  carbonStyle = CarbonStyleSheet.create({
    focusBox: {
      borderColor: CarbonStyleSheet.color.focus
    }
  }),
  mapInteractiveStateStyle_ = CarbonStyleSheet.create({
    normal_true_container: {
      borderColor: CarbonStyleSheet.color.icon_primary
    },
    normal_true_marker: {
      backgroundColor: CarbonStyleSheet.color.icon_primary
    },
    normal_false_container: {
      borderColor: CarbonStyleSheet.color.icon_primary
    },
    disabled_true_container: {
      borderColor: CarbonStyleSheet.color.icon_disabled
    },
    disabled_true_marker: {
      backgroundColor: CarbonStyleSheet.color.icon_disabled
    },
    disabled_false_container: {
      borderColor: CarbonStyleSheet.color.icon_disabled
    },
    error_true_container: {
      borderColor: CarbonStyleSheet.color.support_error
    },
    error_true_marker: {
      backgroundColor: CarbonStyleSheet.color.icon_primary
    },
    error_false_container: {
      borderColor: CarbonStyleSheet.color.support_error
    },
    read_only_true_container: {
      borderColor: CarbonStyleSheet.color.icon_disabled
    },
    read_only_true_marker: {
      backgroundColor: CarbonStyleSheet.color.icon_primary
    },
    read_only_false_container: {
      borderColor: CarbonStyleSheet.color.icon_disabled
    },
    warning_true_container: {
      borderColor: CarbonStyleSheet.color.icon_primary
    },
    warning_true_marker: {
      backgroundColor: CarbonStyleSheet.color.icon_primary
    },
    warning_false_container: {
      backgroundColor: CarbonStyleSheet.color.icon_primary
    }
  });
//# sourceMappingURL=RadioButtonInput.js.map