@prosperitainova/dumbo-react-native/lib/module/components/TopNavigationBar/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 { Button } from '../Button';
import { Link } from '../Link';
import { Text } from '../Text';
import { RegularFont } from '../../styles/typography';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export const headerBarGetItems = (items, style, itemStyle, type, forceDarkMode) => {
  const finalWrapperStyles = styleReferenceBreaker(style);
  if (type === 'right') {
    finalWrapperStyles.justifyContent = 'flex-end';
  } else if (type === 'left') {
    finalWrapperStyles.justifyContent = 'flex-start';
  }
  return /*#__PURE__*/_jsx(View, {
    style: finalWrapperStyles,
    children: items.map((item, index) => {
      const finalStyles = styleReferenceBreaker(itemStyle, item.style);
      let finalColor = getColor('iconPrimary', forceDarkMode ? 'dark' : undefined);
      if (item.disabled) {
        finalColor = getColor('iconDisabled', forceDarkMode ? 'dark' : undefined);
      } else if (item.active) {
        finalStyles.backgroundColor = getColor('backgroundActive', forceDarkMode ? 'dark' : undefined);
      }
      return /*#__PURE__*/_jsx(View, {
        style: finalStyles,
        children: /*#__PURE__*/_jsx(Button, {
          kind: "ghost",
          overrideColor: finalColor,
          disabled: item.disabled,
          icon: item.icon,
          iconOnlyMode: true,
          text: item.text,
          onPress: item.onPress,
          onLongPress: item.onLongPress
        })
      }, index);
    })
  });
};

/** Props for TopNavigationBar component */

/**
 * TopNavigationBar component for rendering a navigation bar at the top of the page (with title and actions)
 *
 * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/TopNavigationBar.tsx | Example code}
 */

export class TopNavigationBar extends React.Component {
  state = {
    leftLinkWidth: 100,
    rightLinkWidth: 100
  };
  get styles() {
    return StyleSheet.create({
      wrapper: {
        width: '100%',
        backgroundColor: getColor('layer01'),
        flexDirection: 'column',
        borderBottomColor: getColor('borderSubtle01'),
        borderBottomWidth: 1
      },
      headerWrapper: {
        minHeight: 48,
        width: '100%',
        flexDirection: 'row',
        justifyContent: 'space-evenly'
      },
      headerItemWrapper: {
        minWidth: 100
      },
      itemWrapper: {
        flexDirection: 'row'
      },
      itemStyle: {},
      headerTitleWrapper: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center'
      },
      headerTitle: {
        textAlign: 'center'
      },
      headerSubTitle: {
        textAlign: 'center',
        color: getColor('textSecondary')
      },
      pageTitleWrapper: {
        paddingRight: 16,
        paddingLeft: 16,
        marginBottom: 8
      },
      pageHeaderTitle: {
        ...RegularFont()
      },
      pageHeaderSubTitle: {
        color: getColor('textSecondary')
      },
      additionalContent: {
        paddingLeft: 16,
        paddingRight: 16,
        paddingBottom: 16
      },
      leftLink: {
        paddingTop: 13,
        paddingBottom: 13,
        paddingLeft: 16,
        paddingRight: 8
      },
      rightLink: {
        paddingTop: 13,
        paddingBottom: 13,
        paddingRight: 16,
        marginLeft: 'auto'
      }
    });
  }
  getLeftLinkLayout = event => {
    this.setState({
      leftLinkWidth: event.nativeEvent.layout.width || 100
    });
  };
  getRightLinkLayout = event => {
    this.setState({
      rightLinkWidth: event.nativeEvent.layout.width || 100
    });
  };
  get headerTitleArea() {
    const {
      title,
      subTitle,
      headerMode
    } = this.props;
    return /*#__PURE__*/_jsxs(View, {
      style: this.styles.headerTitleWrapper,
      children: [!headerMode && /*#__PURE__*/_jsx(Text, {
        style: this.styles.headerTitle,
        type: "heading-compact-02",
        text: title,
        breakMode: "tail"
      }), !!subTitle && !headerMode && /*#__PURE__*/_jsx(Text, {
        style: this.styles.headerSubTitle,
        type: "helper-text-01",
        text: subTitle,
        breakMode: "tail"
      })]
    });
  }
  get baseHeader() {
    const {
      leftItems,
      leftLink,
      rightItems,
      rightLink
    } = this.props;
    const {
      leftLinkWidth,
      rightLinkWidth
    } = this.state;
    const wrapperStyle = styleReferenceBreaker(this.styles.headerItemWrapper);
    if (!leftLink && !rightLink) {
      if ((!leftItems || !leftItems?.length) && (!rightItems || !rightItems?.length)) {
        wrapperStyle.minWidth = 0;
      } else if (leftItems?.length === 1 && rightItems?.length === 1 || leftItems?.length === 1 && !rightItems?.length || !leftItems?.length && rightItems?.length === 1) {
        wrapperStyle.minWidth = 50;
      }
    } else {
      wrapperStyle.minWidth = (leftLinkWidth > rightLinkWidth ? leftLinkWidth : rightLinkWidth) || 100;
    }
    return /*#__PURE__*/_jsxs(View, {
      style: this.styles.headerWrapper,
      children: [/*#__PURE__*/_jsx(View, {
        style: wrapperStyle,
        children: leftLink ? /*#__PURE__*/_jsx(Link, {
          ...leftLink,
          style: this.styles.leftLink,
          textBreakMode: "tail",
          componentProps: {
            onLayout: this.getLeftLinkLayout
          }
        }) : headerBarGetItems(leftItems || [], this.styles.itemWrapper, this.styles.itemStyle, 'left')
      }), this.headerTitleArea, /*#__PURE__*/_jsx(View, {
        style: wrapperStyle,
        children: rightLink ? /*#__PURE__*/_jsx(Link, {
          ...rightLink,
          style: this.styles.rightLink,
          textBreakMode: "tail",
          componentProps: {
            onLayout: this.getRightLinkLayout
          }
        }) : headerBarGetItems(rightItems || [], this.styles.itemWrapper, this.styles.itemStyle, 'right')
      })]
    });
  }
  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-05",
        text: title
      }), !!subTitle && /*#__PURE__*/_jsx(Text, {
        style: this.styles.pageHeaderSubTitle,
        type: "helper-text-01",
        text: subTitle
      })]
    });
  }
  get additionalContent() {
    const {
      additionalHeaderContent
    } = this.props;
    return /*#__PURE__*/_jsx(View, {
      style: this.styles.additionalContent,
      children: additionalHeaderContent
    });
  }
  get mainView() {
    const {
      headerMode,
      additionalHeaderContent
    } = this.props;
    return /*#__PURE__*/_jsxs(_Fragment, {
      children: [this.baseHeader, !!headerMode && this.pageHeader, !!additionalHeaderContent && this.additionalContent]
    });
  }
  render() {
    const {
      componentProps,
      style
    } = this.props;
    const finalStyles = styleReferenceBreaker(this.styles.wrapper, style);
    return /*#__PURE__*/_jsx(View, {
      style: finalStyles,
      accessibilityRole: "toolbar",
      ...(componentProps || {}),
      children: this.mainView
    });
  }
}
//# sourceMappingURL=index.js.map