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

Build React Native apps with component and shared patterns using Carbon

"use strict";

import { forwardRef, useContext } 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 { GlobalConfigContext } from "../../_internal/contexts/index.js";
import { CommonStyleSheet, FlexStyleSheet } from "../../_internal/style-sheets/index.js";
import { ThemeContext } from "../../contexts/index.js";
import { Checkbox } from "../checkbox/index.js";
import { FormHelperText } from "../form-helper-text/index.js";
import { FormLabel } from "../form-label/index.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const Component = /*#__PURE__*/forwardRef(function CheckboxGroup({
  orientation = 'vertical',
  legend,
  helperText,
  helperTextMode,
  helperTextModeIcon = true,
  formHelperTextProps,
  children,
  style,
  dir,
  ...props
}, ref) {
  const globalConfigContext = useContext(GlobalConfigContext);
  return /*#__PURE__*/_jsxs(View, {
    ...props,
    dir: dir ?? globalConfigContext.rtl ? 'rtl' : undefined,
    style: [globalConfigContext.rtl ? CommonStyleSheet.rtl : undefined, style],
    ref: ref,
    children: [/*#__PURE__*/_jsx(FormLabel, {
      label: legend,
      style: baseStyle.legend
    }), /*#__PURE__*/_jsx(View, {
      style: [baseStyle.wrapper, wrapperOrientationStyle[orientation]],
      children: children
    }), !!helperText && /*#__PURE__*/_jsx(FormHelperText, {
      ...formHelperTextProps,
      error: helperTextMode === 'error',
      text: helperText,
      textLeading: helperTextModeIcon && helperTextMode === 'error' ? /*#__PURE__*/_jsx(IconErrorRenderer, {}) : helperTextModeIcon && helperTextMode === 'warning' ? /*#__PURE__*/_jsx(IconWarningRenderer, {}) : formHelperTextProps?.textLeading,
      style: [baseStyle.formHelperText, formHelperTextProps?.style]
    })]
  });
});
export const CheckboxGroup = Object.assign(Component, {
  Item: Checkbox
});
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
  },
  mapIconErrorStrokeColor = {
    gray_10: Color.Token.gray_10.background,
    gray_100: Color.Token.gray_100.background
  },
  mapIconWarningFillColor = {
    gray_10: Color.Token.gray_10.support_warning,
    gray_100: Color.Token.gray_100.support_warning
  };
function IconErrorRenderer(props) {
  const themeContext = useContext(ThemeContext);

  // return (
  // 	<Icon
  // 		{ ...props }
  // 		src={ IconWarningFilled }
  // 		fill={ mapIconErrorFillColor[themeContext.colorScheme] }
  // 		stroke={ mapIconErrorStrokeColor[themeContext.colorScheme] }
  // 		width={ 18 }
  // 		height={ 18 }
  // 	/>
  // )
  return /*#__PURE__*/_jsx(IconWarningFilled, {
    ...props,
    fill: mapIconErrorFillColor[themeContext.colorScheme],
    stroke: mapIconErrorStrokeColor[themeContext.colorScheme],
    width: 18,
    height: 18
  });
}

// // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
// IconWarningAltFilled.content[0].attrs.fill = 'black'
function IconWarningRenderer(props) {
  const themeContext = useContext(ThemeContext);

  // return (
  // 	<Icon
  // 		{ ...props }
  // 		src={ IconWarningAltFilled }
  // 		fill={ mapIconWarningFillColor[themeContext.colorScheme] }
  // 		width={ 18 }
  // 		height={ 18 }
  // 	/>
  // )
  return /*#__PURE__*/_jsx(IconWarningAltFilled, {
    ...props,
    fill: mapIconWarningFillColor[themeContext.colorScheme],
    width: 18,
    height: 18
  });
}
//# sourceMappingURL=CheckboxGroup.js.map