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

Dumbo for React Native Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BottomToolbarPrimaryAction = 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 BottomToolbarPrimaryAction component */

/**
 * BottomToolbarPrimaryAction component for rendering the bottom toolbar with large primary action
 *
 * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/BottomToolbarPrimaryAction.tsx | Example code}
 */
class BottomToolbarPrimaryAction extends _react.default.Component {
  get styles() {
    return _reactNative.StyleSheet.create({
      wrapper: {
        height: 48,
        maxHeight: 48,
        width: '100%',
        backgroundColor: (0, _colors.getColor)('layer01'),
        flexDirection: 'row',
        position: 'relative',
        borderTopColor: (0, _colors.getColor)('borderSubtle01'),
        borderTopWidth: 1
      },
      itemWrapper: {
        flex: 1,
        flexDirection: 'row'
      },
      primaryAction: {
        marginRight: 16,
        marginLeft: 16,
        width: 56,
        height: 56,
        backgroundColor: (0, _colors.getColor)('buttonPrimary'),
        padding: 16,
        borderRadius: 56,
        marginTop: -28
      },
      itemTextStyle: {
        flex: 1
      },
      itemIconStyle: {
        width: 48
      },
      linkStyle: {
        padding: 13
      }
    });
  }
  getItems(items, type) {
    const finalWrapperStyles = (0, _helpers.styleReferenceBreaker)(this.styles.itemWrapper);
    if (type === 'right') {
      finalWrapperStyles.justifyContent = 'flex-end';
    } else if (type === 'left') {
      finalWrapperStyles.justifyContent = 'flex-start';
    }
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: finalWrapperStyles,
      children: 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');
        }
        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, {
            style: this.styles.linkStyle,
            disabled: item.disabled,
            textStyle: {
              textAlign: item.alignItem || 'center'
            },
            textType: item.textType,
            text: item.text,
            onPress: item.onPress,
            onLongPress: item.onLongPress
          })
        }, index);
      })
    });
  }
  get primaryAction() {
    const {
      disabled,
      icon,
      text,
      onPress,
      onLongPress
    } = this.props;
    const finalStyles = (0, _helpers.styleReferenceBreaker)(this.styles.primaryAction);
    const getStateStyle = state => {
      return state.pressed ? {
        backgroundColor: (0, _colors.getColor)('buttonPrimaryActive')
      } : undefined;
    };
    if (disabled) {
      finalStyles.backgroundColor = (0, _colors.getColor)('buttonDisabled');
    }
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
      disabled: disabled,
      style: state => (0, _helpers.pressableFeedbackStyle)(state, finalStyles, getStateStyle),
      onPress: onPress,
      onLongPress: onLongPress,
      accessibilityLabel: text,
      accessibilityRole: "button",
      children: (0, _helpers.createIcon)(icon, 24, 24, (0, _colors.getColor)(disabled ? 'textOnColorDisabled' : 'textOnColor'))
    });
  }
  get mainView() {
    const {
      position,
      leftItems,
      rightItems
    } = this.props;
    switch (position) {
      case 'left':
        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
          children: [this.primaryAction, this.getItems(rightItems || [], 'right')]
        });
      case 'right':
        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
          children: [this.getItems(leftItems || [], 'left'), this.primaryAction]
        });
      case 'center':
      default:
        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
          children: [this.getItems(leftItems || [], 'left'), this.primaryAction, this.getItems(rightItems || [], 'right')]
        });
    }
  }
  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.mainView
    });
  }
}
exports.BottomToolbarPrimaryAction = BottomToolbarPrimaryAction;
//# sourceMappingURL=index.js.map