@prosperitainova/dumbo-react-native/lib/module/components/BottomToolbar/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';

/** Props for BottomToolbar component */
import { jsx as _jsx } from "react/jsx-runtime";
/**
 * BottomToolbar component for rendering the bottom toolbar. This is similar to BottomNavigationBar but offers a call to action
 *
 * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/BottomToolbar.tsx | Example code}
 */
export class BottomToolbar extends React.Component {
  get styles() {
    return StyleSheet.create({
      wrapper: {
        height: 49,
        maxHeight: 49,
        width: '100%',
        backgroundColor: getColor('layer01'),
        flexDirection: 'row',
        justifyContent: 'space-evenly',
        borderTopColor: getColor('borderSubtle01'),
        borderTopWidth: 1
      },
      itemTextStyle: {},
      itemIconStyle: {
        width: 48
      },
      linkStyle: {
        padding: 13
      }
    });
  }
  get items() {
    const {
      items
    } = this.props;
    return items.map((item, index) => {
      const iconMode = !!item.icon;
      const finalStyles = styleReferenceBreaker(iconMode ? this.styles.itemIconStyle : this.styles.itemTextStyle, item.style);
      let finalColor = getColor('iconPrimary');
      if (item.disabled) {
        finalColor = getColor('iconDisabled');
      }
      switch (item.alignItem) {
        case 'left':
          finalStyles.marginRight = 'auto';
          break;
        case 'right':
          finalStyles.marginLeft = 'auto';
          break;
        case 'center':
        default:
          finalStyles.marginRight = 'auto';
          finalStyles.marginLeft = 'auto';
          break;
      }
      return /*#__PURE__*/_jsx(View, {
        style: finalStyles,
        children: iconMode ? /*#__PURE__*/_jsx(Button, {
          kind: "ghost",
          overrideColor: finalColor,
          disabled: item.disabled,
          icon: item.icon,
          iconOnlyMode: true,
          text: item.text,
          onPress: item.onPress,
          onLongPress: item.onLongPress
        }) : /*#__PURE__*/_jsx(Link, {
          disabled: item.disabled,
          style: this.styles.linkStyle,
          textStyle: {
            textAlign: item.alignItem || 'center'
          },
          textType: item.textType,
          text: item.text,
          onPress: item.onPress,
          onLongPress: item.onLongPress
        })
      }, index);
    });
  }
  render() {
    const {
      componentProps,
      style
    } = this.props;
    const finalStyles = styleReferenceBreaker(this.styles.wrapper, style);
    return /*#__PURE__*/_jsx(View, {
      style: finalStyles,
      accessibilityRole: "toolbar",
      ...(componentProps || {}),
      children: this.items
    });
  }
}
//# sourceMappingURL=index.js.map