@audira/carbon-react-native/lib/module/components/radio-button-group/RadioButtonGroup.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 { StyleSheet, View } from 'react-native';
import { Color, Spacing } from '@audira/carbon-react-native-elements';
import IconWarningAltFilled from '@carbon/icons/svg/32/warning--alt--filled.svg';
import IconWarningFilled from '@carbon/icons/svg/32/warning--filled.svg';
import { FlexStyleSheet } from "../../_internal/style-sheets/index.js";
import { ThemeContext } from "../../contexts/index.js";
import { FormHelperText } from "../form-helper-text/index.js";
import { FormLabel } from "../form-label/index.js";
import { Item } from "./_Item.js";
import { ItemContext } from "./_item-context.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const Component = /*#__PURE__*/forwardRef(function RadioButtonGroup({
  defaultSelectedValue,
  selectedValue: selectedValueProp,
  orientation = 'vertical',
  legend,
  helperText,
  helperTextMode = 'normal',
  helperTextModeIcon = true,
  onChange,
  formHelperTextProps,
  children,
  role = 'radiogroup',
  style,
  ...props
}, forwardedRef) {
  const viewRef = useRef(null),
    ref = useRef({
      onChangeEffect: false,
      selectedValue: defaultSelectedValue
    }),
    themeContext = useContext(ThemeContext),
    [selectedValueSelf, setSelectedValueSelf] = useState(ref.current.selectedValue),
    controlled = typeof selectedValueProp !== 'undefined',
    selectedValue = controlled ? selectedValueProp : selectedValueSelf,
    setOnChangeGroupEffect = useCallback(value => {
      ref.current.onChangeEffect = value;
    }, []);
  useEffect(() => {
    if (ref.current.onChangeEffect) {
      ref.current.onChangeEffect = false;
      onChange?.(selectedValue);
    }
  }, [selectedValue, onChange]);
  useImperativeHandle(forwardedRef, () => {
    return Object.assign(viewRef.current ?? {}, {
      get selectedValue() {
        return ref.current.selectedValue;
      },
      setSelectedValue(valueParam) {
        if (!controlled) {
          ref.current.onChangeEffect = true;
          if (typeof valueParam !== 'function') {
            setSelectedValueSelf(valueParam);
          } else {
            setSelectedValueSelf(valueParam(ref.current.selectedValue));
          }
        }
      }
    });
  }, [controlled]);
  return /*#__PURE__*/_jsxs(View, {
    ...props,
    role: role,
    style: style,
    ref: viewRef,
    children: [/*#__PURE__*/_jsx(FormLabel, {
      label: legend,
      style: baseStyle.legend
    }), /*#__PURE__*/_jsx(View, {
      style: [baseStyle.wrapper, wrapperOrientationStyle[orientation]],
      children: /*#__PURE__*/_jsx(ItemContext.Provider, {
        value: {
          controlled,
          value: selectedValue,
          setValue: setSelectedValueSelf,
          setOnChangeGroupEffect,
          onChangeGroup: onChange
        },
        children: children
      })
    }), !!helperText && /*#__PURE__*/_jsx(FormHelperText, {
      ...formHelperTextProps,
      error: helperTextMode === 'error',
      text: helperText,
      textLeading: helperTextModeIcon && helperTextMode === 'error' ? /*#__PURE__*/_jsx(IconWarningFilled, {
        fill: mapIconErrorFillColor[themeContext.colorScheme],
        width: 18,
        height: 18
      }) : helperTextModeIcon && helperTextMode === 'warning' ? /*#__PURE__*/_jsx(IconWarningAltFilled, {
        fill: mapIconWarningFillColor[themeContext.colorScheme],
        width: 18,
        height: 18
      }) : formHelperTextProps?.textLeading,
      style: [baseStyle.formHelperText, formHelperTextProps?.style]
    })]
  });
});
export const RadioButtonGroup = Object.assign(Component, {
  Item
});
const baseStyle = StyleSheet.create({
    wrapper: {
      columnGap: Spacing.spacing_05,
      rowGap: Spacing.spacing_03
    },
    legend: {
      marginBottom: Spacing.spacing_03
    },
    formHelperText: {
      marginTop: Spacing.spacing_03
    }
  }),
  wrapperOrientationStyle = StyleSheet.create({
    vertical: {
      flexDirection: 'column'
    },
    horizontal: {
      ...FlexStyleSheet.flex_wrap,
      flexDirection: 'row'
    }
  }),
  mapIconErrorFillColor = {
    gray_10: Color.Token.gray_10.support_error,
    gray_100: Color.Token.gray_10.support_error
  },
  mapIconWarningFillColor = {
    gray_10: Color.Token.gray_10.support_warning,
    gray_100: Color.Token.gray_100.support_warning
  };
//# sourceMappingURL=RadioButtonGroup.js.map