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

Dumbo for React Native Library

"use strict";

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

/** Props for Link component */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Link component for rendering a link
 *
 * To not have a link 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/Link.tsx | Example code}
 */
export class Link extends React.Component {
  get textIconColor() {
    const {
      disabled,
      forceDarkMode
    } = this.props;
    return getColor(disabled ? 'textDisabled' : 'linkPrimary', forceDarkMode ? 'dark' : undefined);
  }
  get styles() {
    const {
      iconSize
    } = this.props;
    return StyleSheet.create({
      wrapper: {
        paddingTop: 13,
        paddingBottom: 13,
        flexDirection: 'row',
        alignItems: 'center'
      },
      leftIcon: {
        marginRight: 4,
        height: iconSize || 20
      },
      rightIcon: {
        marginLeft: 4,
        height: iconSize || 20
      },
      backArrowStyle: {
        paddingRight: 2,
        color: this.textIconColor
      }
    });
  }
  get textStyle() {
    const {
      textStyle,
      disabled
    } = this.props;
    const finalStyle = {
      color: disabled ? getColor('textDisabled') : this.textIconColor
    };
    return styleReferenceBreaker(finalStyle, textStyle);
  }
  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,
      textType,
      style,
      textBreakMode,
      leftIcon,
      rightIcon,
      iconSize,
      backButtonMode,
      forwardRef
    } = this.props;
    const androidBack = !!(backButtonMode && Platform.OS === 'android');
    return /*#__PURE__*/_jsxs(Pressable, {
      disabled: disabled,
      style: state => pressableFeedbackStyle(state, styleReferenceBreaker(this.styles.wrapper, style)),
      accessibilityLabel: text,
      accessibilityRole: "link",
      onPress: this.onPress,
      onLongPress: onLongPress,
      ref: forwardRef,
      ...(componentProps || {}),
      children: [!!(leftIcon && !backButtonMode) && /*#__PURE__*/_jsx(View, {
        style: this.styles.leftIcon,
        children: createIcon(leftIcon, iconSize || 20, iconSize || 20, this.textIconColor)
      }), backButtonMode && /*#__PURE__*/_jsx(Text, {
        type: textType,
        style: this.styles.backArrowStyle,
        text: '\u2190'
      }), !androidBack && /*#__PURE__*/_jsx(Text, {
        type: textType,
        style: this.textStyle,
        text: text,
        breakMode: textBreakMode
      }), !!rightIcon && /*#__PURE__*/_jsx(View, {
        style: this.styles.rightIcon,
        children: createIcon(rightIcon, iconSize || 20, iconSize || 20, this.textIconColor)
      })]
    });
  }
}
//# sourceMappingURL=index.js.map