@audira/carbon-react-native/lib/commonjs/components/radio-button-group/RadioButtonGroup.js

Build React Native apps with component and shared patterns using Carbon

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.RadioButtonGroup = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _carbonReactNativeElements = require("@audira/carbon-react-native-elements");
var _warningAltFilled = _interopRequireDefault(require("@carbon/icons/svg/32/warning--alt--filled.svg"));
var _warningFilled = _interopRequireDefault(require("@carbon/icons/svg/32/warning--filled.svg"));
var _index = require("../../_internal/style-sheets/index.js");
var _index2 = require("../../contexts/index.js");
var _index3 = require("../form-helper-text/index.js");
var _index4 = require("../form-label/index.js");
var _Item = require("./_Item.js");
var _itemContext = require("./_item-context.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const Component = /*#__PURE__*/(0, _react.forwardRef)(function RadioButtonGroup({
  defaultSelectedValue,
  selectedValue: selectedValueProp,
  orientation = 'vertical',
  legend,
  helperText,
  helperTextMode = 'normal',
  helperTextModeIcon = true,
  onChange,
  formHelperTextProps,
  children,
  role = 'radiogroup',
  style,
  ...props
}, forwardedRef) {
  const viewRef = (0, _react.useRef)(null),
    ref = (0, _react.useRef)({
      onChangeEffect: false,
      selectedValue: defaultSelectedValue
    }),
    themeContext = (0, _react.useContext)(_index2.ThemeContext),
    [selectedValueSelf, setSelectedValueSelf] = (0, _react.useState)(ref.current.selectedValue),
    controlled = typeof selectedValueProp !== 'undefined',
    selectedValue = controlled ? selectedValueProp : selectedValueSelf,
    setOnChangeGroupEffect = (0, _react.useCallback)(value => {
      ref.current.onChangeEffect = value;
    }, []);
  (0, _react.useEffect)(() => {
    if (ref.current.onChangeEffect) {
      ref.current.onChangeEffect = false;
      onChange?.(selectedValue);
    }
  }, [selectedValue, onChange]);
  (0, _react.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
    ...props,
    role: role,
    style: style,
    ref: viewRef,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.FormLabel, {
      label: legend,
      style: baseStyle.legend
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: [baseStyle.wrapper, wrapperOrientationStyle[orientation]],
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_itemContext.ItemContext.Provider, {
        value: {
          controlled,
          value: selectedValue,
          setValue: setSelectedValueSelf,
          setOnChangeGroupEffect,
          onChangeGroup: onChange
        },
        children: children
      })
    }), !!helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.FormHelperText, {
      ...formHelperTextProps,
      error: helperTextMode === 'error',
      text: helperText,
      textLeading: helperTextModeIcon && helperTextMode === 'error' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_warningFilled.default, {
        fill: mapIconErrorFillColor[themeContext.colorScheme],
        width: 18,
        height: 18
      }) : helperTextModeIcon && helperTextMode === 'warning' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_warningAltFilled.default, {
        fill: mapIconWarningFillColor[themeContext.colorScheme],
        width: 18,
        height: 18
      }) : formHelperTextProps?.textLeading,
      style: [baseStyle.formHelperText, formHelperTextProps?.style]
    })]
  });
});
const RadioButtonGroup = exports.RadioButtonGroup = Object.assign(Component, {
  Item: _Item.Item
});
const baseStyle = _reactNative.StyleSheet.create({
    wrapper: {
      columnGap: _carbonReactNativeElements.Spacing.spacing_05,
      rowGap: _carbonReactNativeElements.Spacing.spacing_03
    },
    legend: {
      marginBottom: _carbonReactNativeElements.Spacing.spacing_03
    },
    formHelperText: {
      marginTop: _carbonReactNativeElements.Spacing.spacing_03
    }
  }),
  wrapperOrientationStyle = _reactNative.StyleSheet.create({
    vertical: {
      flexDirection: 'column'
    },
    horizontal: {
      ..._index.FlexStyleSheet.flex_wrap,
      flexDirection: 'row'
    }
  }),
  mapIconErrorFillColor = {
    gray_10: _carbonReactNativeElements.Color.Token.gray_10.support_error,
    gray_100: _carbonReactNativeElements.Color.Token.gray_10.support_error
  },
  mapIconWarningFillColor = {
    gray_10: _carbonReactNativeElements.Color.Token.gray_10.support_warning,
    gray_100: _carbonReactNativeElements.Color.Token.gray_100.support_warning
  };
//# sourceMappingURL=RadioButtonGroup.js.map