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

Dumbo for React Native Library

"use strict";

import React from 'react';
import { StyleSheet, View, Pressable } from 'react-native';
import { getColor } from '../../styles/colors';
import { createIcon, pressableFeedbackStyle, styleReferenceBreaker } from '../../helpers';
import { Button } from '../Button';
import { Link } from '../Link';

/** Props for BottomToolbarPrimaryAction component */
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * 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}
 */
export class BottomToolbarPrimaryAction extends React.Component {
  get styles() {
    return StyleSheet.create({
      wrapper: {
        height: 48,
        maxHeight: 48,
        width: '100%',
        backgroundColor: getColor('layer01'),
        flexDirection: 'row',
        position: 'relative',
        borderTopColor: getColor('borderSubtle01'),
        borderTopWidth: 1
      },
      itemWrapper: {
        flex: 1,
        flexDirection: 'row'
      },
      primaryAction: {
        marginRight: 16,
        marginLeft: 16,
        width: 56,
        height: 56,
        backgroundColor: getColor('buttonPrimary'),
        padding: 16,
        borderRadius: 56,
        marginTop: -28
      },
      itemTextStyle: {
        flex: 1
      },
      itemIconStyle: {
        width: 48
      },
      linkStyle: {
        padding: 13
      }
    });
  }
  getItems(items, type) {
    const finalWrapperStyles = styleReferenceBreaker(this.styles.itemWrapper);
    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 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');
        }
        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, {
            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 = styleReferenceBreaker(this.styles.primaryAction);
    const getStateStyle = state => {
      return state.pressed ? {
        backgroundColor: getColor('buttonPrimaryActive')
      } : undefined;
    };
    if (disabled) {
      finalStyles.backgroundColor = getColor('buttonDisabled');
    }
    return /*#__PURE__*/_jsx(Pressable, {
      disabled: disabled,
      style: state => pressableFeedbackStyle(state, finalStyles, getStateStyle),
      onPress: onPress,
      onLongPress: onLongPress,
      accessibilityLabel: text,
      accessibilityRole: "button",
      children: createIcon(icon, 24, 24, getColor(disabled ? 'textOnColorDisabled' : 'textOnColor'))
    });
  }
  get mainView() {
    const {
      position,
      leftItems,
      rightItems
    } = this.props;
    switch (position) {
      case 'left':
        return /*#__PURE__*/_jsxs(_Fragment, {
          children: [this.primaryAction, this.getItems(rightItems || [], 'right')]
        });
      case 'right':
        return /*#__PURE__*/_jsxs(_Fragment, {
          children: [this.getItems(leftItems || [], 'left'), this.primaryAction]
        });
      case 'center':
      default:
        return /*#__PURE__*/_jsxs(_Fragment, {
          children: [this.getItems(leftItems || [], 'left'), this.primaryAction, this.getItems(rightItems || [], 'right')]
        });
    }
  }
  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