@prosperitainova/dumbo-react-native/lib/commonjs/components/BottomToolbar/index.js

Dumbo for React Native Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BottomToolbar = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _colors = require("../../styles/colors");
var _helpers = require("../../helpers");
var _Button = require("../Button");
var _Link = require("../Link");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/** Props for BottomToolbar component */

/**
 * 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}
 */
class BottomToolbar extends _react.default.Component {
  get styles() {
    return _reactNative.StyleSheet.create({
      wrapper: {
        height: 49,
        maxHeight: 49,
        width: '100%',
        backgroundColor: (0, _colors.getColor)('layer01'),
        flexDirection: 'row',
        justifyContent: 'space-evenly',
        borderTopColor: (0, _colors.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 = (0, _helpers.styleReferenceBreaker)(iconMode ? this.styles.itemIconStyle : this.styles.itemTextStyle, item.style);
      let finalColor = (0, _colors.getColor)('iconPrimary');
      if (item.disabled) {
        finalColor = (0, _colors.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: finalStyles,
        children: iconMode ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
          kind: "ghost",
          overrideColor: finalColor,
          disabled: item.disabled,
          icon: item.icon,
          iconOnlyMode: true,
          text: item.text,
          onPress: item.onPress,
          onLongPress: item.onLongPress
        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.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 = (0, _helpers.styleReferenceBreaker)(this.styles.wrapper, style);
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: finalStyles,
      accessibilityRole: "toolbar",
      ...(componentProps || {}),
      children: this.items
    });
  }
}
exports.BottomToolbar = BottomToolbar;
//# sourceMappingURL=index.js.map