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

Dumbo for React Native Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Link = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _helpers = require("../../helpers");
var _colors = require("../../styles/colors");
var _Text = require("../Text");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/** Props for Link component */

/**
 * 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}
 */
class Link extends _react.default.Component {
  get textIconColor() {
    const {
      disabled,
      forceDarkMode
    } = this.props;
    return (0, _colors.getColor)(disabled ? 'textDisabled' : 'linkPrimary', forceDarkMode ? 'dark' : undefined);
  }
  get styles() {
    const {
      iconSize
    } = this.props;
    return _reactNative.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 ? (0, _colors.getColor)('textDisabled') : this.textIconColor
    };
    return (0, _helpers.styleReferenceBreaker)(finalStyle, textStyle);
  }
  onPress = event => {
    const {
      dismissKeyboardOnPress,
      onPress
    } = this.props;
    if (dismissKeyboardOnPress && typeof _reactNative.Keyboard?.dismiss === 'function') {
      _reactNative.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 && _reactNative.Platform.OS === 'android');
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
      disabled: disabled,
      style: state => (0, _helpers.pressableFeedbackStyle)(state, (0, _helpers.styleReferenceBreaker)(this.styles.wrapper, style)),
      accessibilityLabel: text,
      accessibilityRole: "link",
      onPress: this.onPress,
      onLongPress: onLongPress,
      ref: forwardRef,
      ...(componentProps || {}),
      children: [!!(leftIcon && !backButtonMode) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: this.styles.leftIcon,
        children: (0, _helpers.createIcon)(leftIcon, iconSize || 20, iconSize || 20, this.textIconColor)
      }), backButtonMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
        type: textType,
        style: this.styles.backArrowStyle,
        text: '\u2190'
      }), !androidBack && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
        type: textType,
        style: this.textStyle,
        text: text,
        breakMode: textBreakMode
      }), !!rightIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: this.styles.rightIcon,
        children: (0, _helpers.createIcon)(rightIcon, iconSize || 20, iconSize || 20, this.textIconColor)
      })]
    });
  }
}
exports.Link = Link;
//# sourceMappingURL=index.js.map