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

Dumbo for React Native Library

"use strict";

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

/** Props for Button component */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Button component for rendering a button
 * To not have a button be pressable 100% of screen format parent or pass style appropriately. `alignSelf: 'flex-start'` is useful.
 *
 * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Button.tsx | Example code}
 */
export class Button extends React.Component {
  basicButton = {
    padding: 16,
    paddingTop: 13,
    paddingBottom: 13,
    paddingRight: 48,
    minHeight: 48,
    minWidth: 48
  };
  get styles() {
    return StyleSheet.create({
      iconStyle: {
        position: 'absolute',
        top: 14,
        bottom: 14,
        right: 14,
        justifyContent: 'center'
      }
    });
  }
  getBackgroundColor(active) {
    const {
      kind,
      disabled,
      forceTheme
    } = this.props;
    switch (kind) {
      case 'secondary':
        return getColor(disabled ? 'buttonDisabled' : active ? 'buttonSecondaryActive' : 'buttonSecondary', forceTheme);
      case 'tertiary':
        return active ? getColor('buttonTertiaryActive', forceTheme) : 'transparent';
      case 'high-contrast':
        return active ? getColor('buttonHighContrastActive', forceTheme) : 'transparent';
      case 'high-contrast-inverse':
        return active ? getColor('buttonHighContrastInverseActive', forceTheme) : 'transparent';
      case 'danger':
        return getColor(disabled ? 'buttonDisabled' : active ? 'buttonDangerActive' : 'buttonDangerPrimary', forceTheme);
      case 'ghost':
        return active ? getColor('layerActive01', forceTheme) : 'transparent';
      case 'danger-ghost':
      case 'danger-tertiary':
        return active ? getColor('buttonDangerActive', forceTheme) : 'transparent';
      case 'primary':
      default:
        return getColor(disabled ? 'buttonDisabled' : active ? 'buttonPrimaryActive' : 'buttonPrimary', forceTheme);
    }
  }
  getStateStyle = state => {
    const {
      kind
    } = this.props;
    const keepBorder = ['high-contrast', 'high-contrast-inverse', 'tertiary', 'danger-tertiary'].includes(kind);
    return state.pressed ? {
      backgroundColor: this.getBackgroundColor(true),
      borderWidth: keepBorder ? 1 : 0
    } : undefined;
  };
  get buttonStyle() {
    const {
      kind,
      style,
      disabled,
      iconOnlyMode,
      icon,
      overrideColor,
      disableDesignPadding,
      forceTheme
    } = this.props;
    let finalStyle = {};
    switch (kind) {
      case 'secondary':
        finalStyle = styleReferenceBreaker({
          backgroundColor: this.getBackgroundColor()
        }, this.basicButton);
        break;
      case 'tertiary':
        finalStyle = styleReferenceBreaker({
          backgroundColor: this.getBackgroundColor(),
          borderColor: getColor(disabled ? 'buttonDisabled' : 'buttonTertiary', forceTheme),
          borderWidth: 1
        }, this.basicButton);
        break;
      case 'high-contrast':
        finalStyle = styleReferenceBreaker({
          backgroundColor: this.getBackgroundColor(),
          borderColor: getColor(disabled ? 'buttonDisabled' : 'buttonHighContrast', forceTheme),
          borderWidth: 1
        }, this.basicButton);
        break;
      case 'high-contrast-inverse':
        finalStyle = styleReferenceBreaker({
          backgroundColor: this.getBackgroundColor(),
          borderColor: getColor(disabled ? 'buttonDisabled' : 'buttonHighContrastInverse', forceTheme),
          borderWidth: 1
        }, this.basicButton);
        break;
      case 'danger-tertiary':
        finalStyle = styleReferenceBreaker({
          backgroundColor: this.getBackgroundColor(),
          borderColor: getColor(disabled ? 'buttonDisabled' : 'buttonDangerSecondary', forceTheme),
          borderWidth: 1
        }, this.basicButton);
        break;
      case 'danger':
        finalStyle = styleReferenceBreaker({
          backgroundColor: this.getBackgroundColor()
        }, this.basicButton);
        break;
      case 'danger-ghost':
        finalStyle = styleReferenceBreaker({
          backgroundColor: this.getBackgroundColor()
        }, this.basicButton);
        break;
      case 'ghost':
        finalStyle = styleReferenceBreaker({
          backgroundColor: this.getBackgroundColor()
        }, this.basicButton);
        break;
      case 'primary':
      default:
        finalStyle = styleReferenceBreaker({
          backgroundColor: this.getBackgroundColor()
        }, this.basicButton);
        break;
    }
    if (icon && iconOnlyMode) {
      finalStyle.paddingRight = 16;
      finalStyle.paddingLeft = 16;
      finalStyle.maxWidth = 48;
    }
    if (disableDesignPadding) {
      finalStyle.paddingRight = 16;
    }
    if (overrideColor) {
      finalStyle.borderColor = overrideColor;
    }
    return styleReferenceBreaker(finalStyle, style);
  }
  get iconTextColor() {
    const {
      kind,
      disabled,
      overrideColor,
      forceTheme
    } = this.props;
    switch (kind) {
      case 'danger-ghost':
      case 'danger-tertiary':
        return overrideColor || getColor(disabled ? 'textDisabled' : 'buttonDangerSecondary', forceTheme);
      case 'tertiary':
        return overrideColor || getColor(disabled ? 'textDisabled' : 'buttonTertiary', forceTheme);
      case 'high-contrast':
        return overrideColor || getColor(disabled ? 'textDisabled' : 'buttonHighContrast', forceTheme);
      case 'high-contrast-inverse':
        return overrideColor || getColor(disabled ? 'textDisabled' : 'buttonHighContrastInverse', forceTheme);
      case 'ghost':
        return overrideColor || getColor(disabled ? 'textDisabled' : 'linkPrimary', forceTheme);
      case 'primary':
      case 'secondary':
      case 'danger':
      default:
        return overrideColor || getColor(disabled ? 'textOnColorDisabled' : 'textOnColor', forceTheme);
    }
  }
  get textStyle() {
    const {
      kind
    } = this.props;
    let finalStyle = {};
    switch (kind) {
      case 'tertiary':
      case 'ghost':
      case 'high-contrast':
      case 'high-contrast-inverse':
        finalStyle = styleReferenceBreaker({
          color: this.iconTextColor,
          textAlign: 'left'
        });
        break;
      case 'primary':
      case 'secondary':
      case 'danger':
      default:
        finalStyle = styleReferenceBreaker({
          color: this.iconTextColor,
          textAlign: 'left'
        });
        break;
    }
    return finalStyle;
  }
  onPress = event => {
    const {
      dismissKeyboardOnPress,
      onPress
    } = this.props;
    if (dismissKeyboardOnPress && typeof Keyboard?.dismiss === 'function') {
      Keyboard.dismiss();
    }
    if (typeof onPress === 'function') {
      onPress(event);
    }
  };
  render() {
    const {
      text,
      disabled,
      onLongPress,
      componentProps,
      icon,
      iconOnlyMode,
      textType,
      forwardRef,
      breakMode,
      textComponentProps
    } = this.props;
    return /*#__PURE__*/_jsxs(Pressable, {
      disabled: disabled,
      style: state => pressableFeedbackStyle(state, this.buttonStyle, this.getStateStyle),
      accessibilityLabel: text,
      accessibilityRole: "button",
      onPress: this.onPress,
      onLongPress: onLongPress,
      ref: forwardRef,
      ...(componentProps || {}),
      children: [!iconOnlyMode && /*#__PURE__*/_jsx(Text, {
        type: textType || 'body-compact-02',
        style: this.textStyle,
        text: text,
        breakMode: breakMode || 'tail',
        componentProps: textComponentProps
      }), !!icon && /*#__PURE__*/_jsx(View, {
        style: this.styles.iconStyle,
        children: createIcon(icon, 20, 20, this.iconTextColor)
      })]
    });
  }
}
//# sourceMappingURL=index.js.map