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

Dumbo for React Native Library

"use strict";

import React from 'react';
import { Pressable, StyleSheet, View } from 'react-native';
import { createIcon, pressableFeedbackStyle, styleReferenceBreaker } from '../../helpers';
import { getColor } from '../../styles/colors';
import { Text } from '../Text';

/** Action item for the web header */

/** Props for WebHeader component */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * 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}
 */
export class WebHeader extends React.Component {
  get styles() {
    return StyleSheet.create({
      header: {
        backgroundColor: getColor('layerSelectedInverse', 'light'),
        borderBottomColor: 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: getColor('textOnColor', 'light')
      },
      secondaryName: {
        flex: 1
      },
      secondaryNameText: {
        color: getColor('textOnColor', 'light')
      }
    });
  }
  getStateStyle = state => {
    return state.pressed ? {
      backgroundColor: getColor('layerActive01')
    } : undefined;
  };
  render() {
    const {
      mainName,
      secondaryName,
      actions,
      style,
      componentProps
    } = this.props;
    return /*#__PURE__*/_jsxs(View, {
      style: styleReferenceBreaker(this.styles.header, style),
      accessibilityRole: "header",
      ...(componentProps || {}),
      children: [/*#__PURE__*/_jsxs(View, {
        style: this.styles.textWrapper,
        children: [/*#__PURE__*/_jsx(View, {
          style: this.styles.mainName,
          children: /*#__PURE__*/_jsx(Text, {
            type: "body-01",
            style: this.styles.mainNameText,
            text: mainName
          })
        }), /*#__PURE__*/_jsx(View, {
          style: this.styles.secondaryName,
          children: /*#__PURE__*/_jsx(Text, {
            type: "heading-01",
            style: this.styles.secondaryNameText,
            text: secondaryName,
            breakMode: "tail"
          })
        })]
      }), !!(actions && actions.length) && actions.map((action, index) => {
        return /*#__PURE__*/_jsx(View, {
          style: this.styles.actionWrapper,
          children: /*#__PURE__*/_jsx(Pressable, {
            style: state => pressableFeedbackStyle(state, this.styles.actionButton, this.getStateStyle),
            onPress: action.onPress,
            accessibilityLabel: action.text,
            accessibilityRole: "button",
            children: /*#__PURE__*/_jsx(View, {
              style: this.styles.actionButtonImage,
              children: createIcon(action.icon, 20, 20, getColor('textOnColor', 'light'))
            })
          })
        }, index);
      })]
    });
  }
}
//# sourceMappingURL=index.js.map