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

Dumbo for React Native Library

"use strict";

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { getColor } from '../../styles/colors';
import { styleReferenceBreaker } from '../../helpers';
import { Link } from '../Link';
import { Text } from '../Text';
import { headerBarGetItems } from '../TopNavigationBar';

/** Props for TopNavigationBarLogin component */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * TopNavigationBarLogin component for rendering the top navigation bar for login flows (which is different from regular views)
 *
 * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/TopNavigationBarLogin.tsx | Example code}
 */
export class TopNavigationBarLogin extends React.Component {
  get styles() {
    return StyleSheet.create({
      wrapper: {
        width: '100%',
        backgroundColor: '#000000',
        flexDirection: 'column'
      },
      headerWrapper: {
        height: 48,
        maxHeight: 48,
        width: '100%',
        flexDirection: 'row',
        justifyContent: 'space-evenly'
      },
      headerItemWrapper: {
        flex: 1
      },
      itemWrapper: {
        flexDirection: 'row',
        justifyContent: 'flex-end'
      },
      itemStyle: {},
      headerTitleWrapper: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center'
      },
      headerTitle: {
        textAlign: 'center'
      },
      pageTitleWrapper: {
        paddingRight: 16,
        paddingLeft: 16,
        marginBottom: 14
      },
      pageHeaderTitle: {
        color: getColor('textOnColor', 'dark')
      },
      subHeaderText: {
        color: getColor('textOnColor', 'dark')
      },
      pageHeaderSubTitle: {
        marginTop: 28
      },
      leftLink: {
        paddingTop: 13,
        paddingBottom: 13,
        paddingLeft: 16,
        paddingRight: 8
      },
      rightLink: {
        paddingTop: 13,
        paddingBottom: 13,
        paddingRight: 16,
        marginLeft: 'auto'
      }
    });
  }
  get baseHeader() {
    const {
      backOnPress,
      backText,
      rightItems,
      rightLink
    } = this.props;
    return /*#__PURE__*/_jsxs(View, {
      style: this.styles.headerWrapper,
      children: [/*#__PURE__*/_jsx(View, {
        style: this.styles.headerItemWrapper,
        children: !!(backText && backOnPress) && /*#__PURE__*/_jsx(Link, {
          text: backText,
          forceDarkMode: true,
          onPress: backOnPress,
          backButtonMode: true,
          style: this.styles.leftLink,
          textBreakMode: "tail"
        })
      }), /*#__PURE__*/_jsx(View, {
        style: this.styles.headerItemWrapper,
        children: rightLink ? /*#__PURE__*/_jsx(Link, {
          ...rightLink,
          forceDarkMode: true,
          style: this.styles.rightLink,
          textBreakMode: "tail"
        }) : headerBarGetItems(rightItems || [], this.styles.itemWrapper, this.styles.itemStyle, 'right', true)
      })]
    });
  }
  get pageHeader() {
    const {
      title,
      subTitle
    } = this.props;
    return /*#__PURE__*/_jsxs(View, {
      style: this.styles.pageTitleWrapper,
      children: [/*#__PURE__*/_jsx(Text, {
        style: this.styles.pageHeaderTitle,
        type: "heading-04",
        text: title
      }), /*#__PURE__*/_jsx(View, {
        style: this.styles.pageHeaderSubTitle,
        children: typeof subTitle === 'string' ? /*#__PURE__*/_jsx(Text, {
          style: this.styles.subHeaderText,
          text: subTitle || ''
        }) : subTitle || null
      })]
    });
  }
  render() {
    const {
      componentProps,
      style
    } = this.props;
    const finalStyles = styleReferenceBreaker(this.styles.wrapper, style);
    return /*#__PURE__*/_jsxs(View, {
      style: finalStyles,
      accessibilityRole: "toolbar",
      ...(componentProps || {}),
      children: [this.baseHeader, this.pageHeader]
    });
  }
}
//# sourceMappingURL=index.js.map