@audira/carbon-react-native/lib/commonjs/components/accordion/_Header.js

Build React Native apps with component and shared patterns using Carbon

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Header = Header;
var _react = require("react");
var _reactNative = require("react-native");
var _carbonReactNativeElements = require("@audira/carbon-react-native-elements");
var _index = require("../../_internal/style-sheets/index.js");
var _index2 = require("../../carbon-style-sheet/index.js");
var _index3 = require("../../contexts/index.js");
var _index4 = require("../button/base-color/index.js");
var _HeaderBorder = require("./_HeaderBorder.js");
var _index5 = require("./_chevron/index.js");
var _jsxRuntime = require("react/jsx-runtime");
function Header({
  size = 'medium',
  open,
  flushAlignment = false,
  text,
  style: styleProp,
  ...buttonProps
}) {
  const themeContext = (0, _react.useContext)(_index3.ThemeContext);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
    style: styleProp,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HeaderBorder.HeaderBorder, {
      flushAlignment: flushAlignment
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.BaseColor, {
      ...buttonProps,
      size: mapSizeToButtonSize[size],
      text: text,
      android_rippleEffectColor: mapAndroidRippleEffectColor[themeContext.colorScheme],
      colorStateStyle: {
        background: {
          default: backgroundStyleSheet.default,
          focused: backgroundStyleSheet.focused,
          hovered: backgroundStyleSheet.hovered,
          pressed: backgroundStyleSheet.pressed,
          disabled: backgroundStyleSheet.disabled
        },
        text: {
          default: textStyleSheet.default,
          focused: textStyleSheet.focused,
          hovered: textStyleSheet.hovered,
          pressed: textStyleSheet.pressed,
          disabled: textStyleSheet.disabled
        },
        icon: mapIconColor[themeContext.colorScheme]
      },
      iconNode: (...params) => iconNodeRenderer(!!open, ...params),
      style: _index.FlexStyleSheet.self_stretch
    })]
  });
}
const backgroundStyleSheet = _index2.CarbonStyleSheet.create({
    default: {
      backgroundColor: 'transparent'
    },
    focused: {
      backgroundColor: 'transparent',
      borderWidth: 1,
      borderColor: _index2.CarbonStyleSheet.color.focus
    },
    hovered: {
      backgroundColor: _index2.CarbonStyleSheet.color.layer_hover_01
    },
    pressed: {
      backgroundColor: _index2.CarbonStyleSheet.color.layer_hover_01
    },
    disabled: {
      backgroundColor: 'transparent'
    }
  }),
  textStyleSheet = _index2.CarbonStyleSheet.create({
    default: {
      color: _index2.CarbonStyleSheet.color.text_primary
    },
    focused: {
      color: _index2.CarbonStyleSheet.color.text_primary
    },
    hovered: {
      color: _index2.CarbonStyleSheet.color.text_primary
    },
    pressed: {
      color: _index2.CarbonStyleSheet.color.text_primary
    },
    disabled: {
      color: _index2.CarbonStyleSheet.color.text_disabled
    }
  }),
  mapIconColor = {
    gray_10: {
      default: _carbonReactNativeElements.Color.Token.gray_10.icon_primary,
      focused: _carbonReactNativeElements.Color.Token.gray_10.icon_primary,
      hovered: _carbonReactNativeElements.Color.Token.gray_10.icon_primary,
      pressed: _carbonReactNativeElements.Color.Token.gray_10.icon_primary,
      disabled: _carbonReactNativeElements.Color.Token.gray_10.icon_disabled
    },
    gray_100: {
      default: _carbonReactNativeElements.Color.Token.gray_100.icon_primary,
      focused: _carbonReactNativeElements.Color.Token.gray_100.icon_primary,
      hovered: _carbonReactNativeElements.Color.Token.gray_100.icon_primary,
      pressed: _carbonReactNativeElements.Color.Token.gray_100.icon_primary,
      disabled: _carbonReactNativeElements.Color.Token.gray_100.icon_disabled
    }
  },
  mapAndroidRippleEffectColor = {
    gray_10: _carbonReactNativeElements.Color.Token.gray_10.layer_hover_01,
    gray_100: _carbonReactNativeElements.Color.Token.gray_100.layer_hover_01
  },
  /**
   * Coincidentally (or not) use same value of height  
   * https://carbondesignsystem.com/components/accordion/style/#sizes
   */
  mapSizeToButtonSize = {
    small: 'small',
    medium: 'medium',
    large: 'large_productive'
  },
  iconNodeRenderer = (open, iconColorState, iconSize, iconStyle) => {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.Chevron, {
      open: open,
      color: iconColorState,
      size: iconSize,
      style: iconStyle
    });
  };
//# sourceMappingURL=_Header.js.map