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

Dumbo for React Native Library

"use strict";

import React from 'react';
import { StyleSheet, View, Pressable } from 'react-native';
import { createIcon, pressableFeedbackStyle, styleReferenceBreaker } from '../../helpers';
import CloseIcon from '@carbon/icons/es/close/20';
import { getColor } from '../../styles/colors';
import { Text } from '../Text';

/** Type of tags */

/** Props for Tag component */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * 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}
 */
export class Tag extends React.Component {
  get styles() {
    return StyleSheet.create({
      wrapper: {
        alignSelf: 'flex-start',
        borderRadius: 32,
        minHeight: 32,
        backgroundColor: 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 getColor('layer01');
    }
    switch (tagType) {
      case 'red':
        return getColor('tagHoverRed');
      case 'magenta':
        return getColor('tagHoverMagenta');
      case 'purple':
        return getColor('tagHoverPurple');
      case 'cyan':
        return getColor('tagHoverCyan');
      case 'teal':
        return getColor('tagHoverTeal');
      case 'green':
        return getColor('tagHoverGreen');
      case 'gray':
        return getColor('tagHoverGray');
      case 'cool-gray':
        return getColor('tagHoverCoolGray');
      case 'warm-gray':
        return getColor('tagHoverWarmGray');
      case 'high-contrast':
        return getColor('tagHoverHighContrast');
      case 'blue':
      default:
        return getColor('tagHoverBlue');
    }
  }
  get textColor() {
    const {
      disabled,
      tagType
    } = this.props;
    if (disabled) {
      return getColor('textDisabled');
    }
    switch (tagType) {
      case 'red':
        return getColor('tagColorRed');
      case 'magenta':
        return getColor('tagColorMagenta');
      case 'purple':
        return getColor('tagColorPurple');
      case 'cyan':
        return getColor('tagColorCyan');
      case 'teal':
        return getColor('tagColorTeal');
      case 'green':
        return getColor('tagColorGreen');
      case 'gray':
        return getColor('tagColorGray');
      case 'cool-gray':
        return getColor('tagColorCoolGray');
      case 'warm-gray':
        return getColor('tagColorWarmGray');
      case 'high-contrast':
        return getColor('tagColorHighContrast');
      case 'blue':
      default:
        return getColor('tagColorBlue');
    }
  }
  get backgroundColor() {
    const {
      disabled,
      tagType
    } = this.props;
    if (disabled) {
      return getColor('layer01');
    }
    switch (tagType) {
      case 'red':
        return getColor('tagBackgroundRed');
      case 'magenta':
        return getColor('tagBackgroundMagenta');
      case 'purple':
        return getColor('tagBackgroundPurple');
      case 'cyan':
        return getColor('tagBackgroundCyan');
      case 'teal':
        return getColor('tagBackgroundTeal');
      case 'green':
        return getColor('tagBackgroundGreen');
      case 'gray':
        return getColor('tagBackgroundGray');
      case 'cool-gray':
        return getColor('tagBackgroundCoolGray');
      case 'warm-gray':
        return getColor('tagBackgroundWarmGray');
      case 'high-contrast':
        return getColor('tagBackgroundHighContrast');
      case 'blue':
      default:
        return 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__*/_jsx(Pressable, {
        onPress: onClosePress,
        disabled: disabled,
        accessibilityLabel: title,
        accessibilityRole: "button",
        style: state => pressableFeedbackStyle(state, this.styles.action, this.getStateStyle),
        children: createIcon(CloseIcon, 16, 16, this.textColor)
      });
    }
    return null;
  }
  render() {
    const {
      title,
      componentProps,
      style,
      breakMode
    } = this.props;
    const textStyle = styleReferenceBreaker(this.styles.textStyle);
    const wrapperStyle = styleReferenceBreaker(this.styles.wrapper, style);
    wrapperStyle.backgroundColor = this.backgroundColor;
    textStyle.color = this.textColor;
    return /*#__PURE__*/_jsxs(View, {
      style: wrapperStyle,
      ...(componentProps || {}),
      children: [/*#__PURE__*/_jsx(Text, {
        type: "label-02",
        breakMode: breakMode || 'tail',
        style: textStyle,
        text: title
      }), this.closeAction]
    });
  }
}
//# sourceMappingURL=index.js.map