@prosperitainova/dumbo-react-native/lib/module/components/MenuItem/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 MenuItem component */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * MenuItem component for rendering an item to live in a menu or similar styled items
 *
 * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Menu.tsx | Example code}
 */
export class MenuItem extends React.Component {
  get styles() {
    const {
      divider,
      lastItem
    } = this.props;
    return StyleSheet.create({
      wrapper: {
        padding: 14,
        flex: 1,
        flexDirection: 'row',
        alignItems: 'flex-start',
        borderBottomColor: divider && !lastItem ? getColor('borderSubtle00') : undefined,
        borderBottomWidth: divider && !lastItem ? 1 : undefined
      },
      icon: {
        paddingTop: 2,
        paddingRight: 14
      }
    });
  }
  get textColor() {
    const {
      disabled
    } = this.props;
    return getColor(disabled ? 'textDisabled' : 'textSecondary');
  }
  get iconColor() {
    const {
      iconColor,
      disabled
    } = this.props;
    if (disabled) {
      return this.textColor;
    }
    return iconColor || this.textColor;
  }
  get textStyle() {
    const finalStyle = {
      color: this.textColor,
      flex: 1
    };
    return finalStyle;
  }
  onPress = event => {
    const {
      dismissKeyboardOnPress,
      onPress
    } = this.props;
    if (dismissKeyboardOnPress && typeof Keyboard?.dismiss === 'function') {
      Keyboard.dismiss();
    }
    if (typeof onPress === 'function') {
      onPress(event);
    }
  };
  getStateStyle = state => {
    return state.pressed ? {
      backgroundColor: getColor('layerActive01')
    } : undefined;
  };
  render() {
    const {
      text,
      disabled,
      onLongPress,
      componentProps,
      textType,
      style,
      textBreakMode,
      icon
    } = this.props;
    return /*#__PURE__*/_jsxs(Pressable, {
      disabled: disabled,
      style: state => pressableFeedbackStyle(state, styleReferenceBreaker(this.styles.wrapper, style), this.getStateStyle),
      accessibilityLabel: text,
      accessibilityRole: "menuitem",
      onPress: this.onPress,
      onLongPress: onLongPress,
      ...(componentProps || {}),
      children: [!!icon && /*#__PURE__*/_jsx(View, {
        style: this.styles.icon,
        children: createIcon(icon, 20, 20, this.iconColor)
      }), /*#__PURE__*/_jsx(Text, {
        breakMode: textBreakMode,
        type: textType,
        style: this.textStyle,
        text: text
      })]
    });
  }
}
//# sourceMappingURL=index.js.map