@prosperitainova/dumbo-react-native/lib/commonjs/components/WebHeader/index.js

Dumbo for React Native Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.WebHeader = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _helpers = require("../../helpers");
var _colors = require("../../styles/colors");
var _Text = require("../Text");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/** Action item for the web header */

/** Props for WebHeader component */

/**
 * WebHeader component for rendering the header bar that matches Carbon Web
 *
 * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/WebHeader.tsx | Example code}
 */
class WebHeader extends _react.default.Component {
  get styles() {
    return _reactNative.StyleSheet.create({
      header: {
        backgroundColor: (0, _colors.getColor)('layerSelectedInverse', 'light'),
        borderBottomColor: (0, _colors.getColor)('backgroundInverse', 'light'),
        borderBottomWidth: 1,
        height: 48,
        overflow: 'hidden',
        display: 'flex',
        flexDirection: 'row',
        paddingLeft: 16,
        paddingRight: 0
      },
      textWrapper: {
        paddingTop: 16,
        flex: 1,
        display: 'flex',
        flexDirection: 'row',
        minWidth: 1
      },
      actionWrapper: {
        display: 'flex',
        flexDirection: 'row'
      },
      actionButton: {
        width: 48,
        padding: 14,
        height: 48
      },
      actionButtonImage: {
        width: 20,
        height: 20
      },
      mainName: {
        marginRight: 6
      },
      mainNameText: {
        color: (0, _colors.getColor)('textOnColor', 'light')
      },
      secondaryName: {
        flex: 1
      },
      secondaryNameText: {
        color: (0, _colors.getColor)('textOnColor', 'light')
      }
    });
  }
  getStateStyle = state => {
    return state.pressed ? {
      backgroundColor: (0, _colors.getColor)('layerActive01')
    } : undefined;
  };
  render() {
    const {
      mainName,
      secondaryName,
      actions,
      style,
      componentProps
    } = this.props;
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: (0, _helpers.styleReferenceBreaker)(this.styles.header, style),
      accessibilityRole: "header",
      ...(componentProps || {}),
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
        style: this.styles.textWrapper,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
          style: this.styles.mainName,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
            type: "body-01",
            style: this.styles.mainNameText,
            text: mainName
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
          style: this.styles.secondaryName,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
            type: "heading-01",
            style: this.styles.secondaryNameText,
            text: secondaryName,
            breakMode: "tail"
          })
        })]
      }), !!(actions && actions.length) && actions.map((action, index) => {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
          style: this.styles.actionWrapper,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
            style: state => (0, _helpers.pressableFeedbackStyle)(state, this.styles.actionButton, this.getStateStyle),
            onPress: action.onPress,
            accessibilityLabel: action.text,
            accessibilityRole: "button",
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
              style: this.styles.actionButtonImage,
              children: (0, _helpers.createIcon)(action.icon, 20, 20, (0, _colors.getColor)('textOnColor', 'light'))
            })
          })
        }, index);
      })]
    });
  }
}
exports.WebHeader = WebHeader;
//# sourceMappingURL=index.js.map