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

Dumbo for React Native Library

"use strict";

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

/** Props for BottomNavigationBar component */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * BottomNavigationBar component for rendering the bottom navigation bar
 *
 * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/BottomNavigationBar.tsx | Example code}
 */
export class BottomNavigationBar extends React.Component {
  get styles() {
    return StyleSheet.create({
      wrapper: {
        height: 49,
        maxHeight: 49,
        width: '100%',
        backgroundColor: getColor('layer01'),
        flexDirection: 'row',
        borderTopColor: getColor('borderSubtle01'),
        borderTopWidth: 1
      },
      itemStyle: {
        borderTopColor: getColor('layer01'),
        borderTopWidth: 4,
        paddingTop: 6,
        textAlign: 'center',
        flex: 1,
        paddingRight: 2,
        paddingLeft: 2
      },
      icon: {
        marginRight: 'auto',
        marginLeft: 'auto'
      },
      textActive: {
        ...SemiBoldFont()
      }
    });
  }
  get items() {
    const {
      items
    } = this.props;
    const fontScaling = fontScalingActive();
    return items.map((item, index) => {
      const finalStyles = styleReferenceBreaker(this.styles.itemStyle, item.style);
      let finalColor = getColor('iconSecondary');
      let useActiveText = false;
      if (item.disabled) {
        finalColor = getColor('iconDisabled');
      } else if (item.active) {
        finalColor = getColor('iconPrimary');
        finalStyles.borderTopColor = getColor('borderInteractive');
        useActiveText = true;
      }
      const getStateStyle = state => {
        return state.pressed ? {
          backgroundColor: getColor('layerActive01'),
          borderTopColor: item.active ? getColor('borderInteractive') : getColor('layerActive01')
        } : undefined;
      };
      return /*#__PURE__*/_jsxs(Pressable, {
        style: state => pressableFeedbackStyle(state, finalStyles, getStateStyle),
        disabled: item.disabled,
        onPress: item.onPress,
        onLongPress: item.onLongPress,
        accessibilityLabel: item.text,
        accessibilityRole: "tab",
        ...(item.componentProps || {}),
        children: [/*#__PURE__*/_jsx(View, {
          style: this.styles.icon,
          children: createIcon(item.icon, 20, 20, finalColor)
        }), !fontScaling && /*#__PURE__*/_jsx(Text, {
          style: styleReferenceBreaker(useActiveText ? this.styles.textActive : {}, {
            color: finalColor,
            textAlign: 'center'
          }),
          text: item.text,
          type: "label-01",
          breakMode: "tail"
        })]
      }, index);
    });
  }
  render() {
    const {
      componentProps,
      style
    } = this.props;
    const finalStyles = styleReferenceBreaker(this.styles.wrapper, style);
    return /*#__PURE__*/_jsx(View, {
      style: finalStyles,
      accessibilityRole: "tablist",
      ...(componentProps || {}),
      children: this.items
    });
  }
}
//# sourceMappingURL=index.js.map