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

Dumbo for React Native Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Tag = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _helpers = require("../../helpers");
var _ = _interopRequireDefault(require("@carbon/icons/es/close/20"));
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 }; }
/** Type of tags */

/** Props for Tag component */

/**
 * Tag component for rendering a tag
 *
 * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Tag.tsx | Example code}
 */
class Tag extends _react.default.Component {
  get styles() {
    return _reactNative.StyleSheet.create({
      wrapper: {
        alignSelf: 'flex-start',
        borderRadius: 32,
        minHeight: 32,
        backgroundColor: (0, _colors.getColor)('tagBackgroundGray'),
        flexDirection: 'row',
        overflow: 'hidden'
      },
      textStyle: {
        padding: 7,
        paddingLeft: 12,
        paddingRight: 12,
        flexShrink: 1
      },
      action: {
        borderRadius: 32,
        padding: 8,
        height: 32,
        width: 32,
        alignSelf: 'center',
        justifyContent: 'center'
      }
    });
  }
  get activeColor() {
    const {
      disabled,
      tagType
    } = this.props;
    if (disabled) {
      return (0, _colors.getColor)('layer01');
    }
    switch (tagType) {
      case 'red':
        return (0, _colors.getColor)('tagHoverRed');
      case 'magenta':
        return (0, _colors.getColor)('tagHoverMagenta');
      case 'purple':
        return (0, _colors.getColor)('tagHoverPurple');
      case 'cyan':
        return (0, _colors.getColor)('tagHoverCyan');
      case 'teal':
        return (0, _colors.getColor)('tagHoverTeal');
      case 'green':
        return (0, _colors.getColor)('tagHoverGreen');
      case 'gray':
        return (0, _colors.getColor)('tagHoverGray');
      case 'cool-gray':
        return (0, _colors.getColor)('tagHoverCoolGray');
      case 'warm-gray':
        return (0, _colors.getColor)('tagHoverWarmGray');
      case 'high-contrast':
        return (0, _colors.getColor)('tagHoverHighContrast');
      case 'blue':
      default:
        return (0, _colors.getColor)('tagHoverBlue');
    }
  }
  get textColor() {
    const {
      disabled,
      tagType
    } = this.props;
    if (disabled) {
      return (0, _colors.getColor)('textDisabled');
    }
    switch (tagType) {
      case 'red':
        return (0, _colors.getColor)('tagColorRed');
      case 'magenta':
        return (0, _colors.getColor)('tagColorMagenta');
      case 'purple':
        return (0, _colors.getColor)('tagColorPurple');
      case 'cyan':
        return (0, _colors.getColor)('tagColorCyan');
      case 'teal':
        return (0, _colors.getColor)('tagColorTeal');
      case 'green':
        return (0, _colors.getColor)('tagColorGreen');
      case 'gray':
        return (0, _colors.getColor)('tagColorGray');
      case 'cool-gray':
        return (0, _colors.getColor)('tagColorCoolGray');
      case 'warm-gray':
        return (0, _colors.getColor)('tagColorWarmGray');
      case 'high-contrast':
        return (0, _colors.getColor)('tagColorHighContrast');
      case 'blue':
      default:
        return (0, _colors.getColor)('tagColorBlue');
    }
  }
  get backgroundColor() {
    const {
      disabled,
      tagType
    } = this.props;
    if (disabled) {
      return (0, _colors.getColor)('layer01');
    }
    switch (tagType) {
      case 'red':
        return (0, _colors.getColor)('tagBackgroundRed');
      case 'magenta':
        return (0, _colors.getColor)('tagBackgroundMagenta');
      case 'purple':
        return (0, _colors.getColor)('tagBackgroundPurple');
      case 'cyan':
        return (0, _colors.getColor)('tagBackgroundCyan');
      case 'teal':
        return (0, _colors.getColor)('tagBackgroundTeal');
      case 'green':
        return (0, _colors.getColor)('tagBackgroundGreen');
      case 'gray':
        return (0, _colors.getColor)('tagBackgroundGray');
      case 'cool-gray':
        return (0, _colors.getColor)('tagBackgroundCoolGray');
      case 'warm-gray':
        return (0, _colors.getColor)('tagBackgroundWarmGray');
      case 'high-contrast':
        return (0, _colors.getColor)('tagBackgroundHighContrast');
      case 'blue':
      default:
        return (0, _colors.getColor)('tagBackgroundBlue');
    }
  }
  getStateStyle = state => {
    return state.pressed ? {
      backgroundColor: this.activeColor
    } : undefined;
  };
  get closeAction() {
    const {
      onClosePress,
      title,
      disabled
    } = this.props;
    if (typeof onClosePress === 'function') {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
        onPress: onClosePress,
        disabled: disabled,
        accessibilityLabel: title,
        accessibilityRole: "button",
        style: state => (0, _helpers.pressableFeedbackStyle)(state, this.styles.action, this.getStateStyle),
        children: (0, _helpers.createIcon)(_.default, 16, 16, this.textColor)
      });
    }
    return null;
  }
  render() {
    const {
      title,
      componentProps,
      style,
      breakMode
    } = this.props;
    const textStyle = (0, _helpers.styleReferenceBreaker)(this.styles.textStyle);
    const wrapperStyle = (0, _helpers.styleReferenceBreaker)(this.styles.wrapper, style);
    wrapperStyle.backgroundColor = this.backgroundColor;
    textStyle.color = this.textColor;
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: wrapperStyle,
      ...(componentProps || {}),
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
        type: "label-02",
        breakMode: breakMode || 'tail',
        style: textStyle,
        text: title
      }), this.closeAction]
    });
  }
}
exports.Tag = Tag;
//# sourceMappingURL=index.js.map