# All files / ship-components-tag-input/src Tag.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68

    3x
    3x

    4x
    8x

    3x

    3x

    3x

     import React from 'react';
    import PropTypes from 'prop-types';
    import classNames from 'classnames';
    import icon from 'ship-components-icon';
    import css from './Tag.css';

    /**
     *  Tag component based on the material "chip" component
     */
    export default class Tag extends React.Component {
      constructor(props) {
        super(props);
        this.handleClear = this.handleClear.bind(this);
      }

      /**
       * Optimizes the app performance
       *
       * @param {object} nextProps
       * @returns {bool}
       * @memberof Tag
       */
      shouldComponentUpdate(nextProps) {
        const propsToCheck = ['className', 'title'];
        return propsToCheck.some(field => this.props[field] !== nextProps[field]);
      }

      /**
       * Clears an item from the tag container
       *
       * @param {any} event
       * @memberof Tag
       */
      handleClear(event) {
        if (this.props.onClear === 'function') {
          this.props.onClear(event);
        }
      }

      render() {
        return (
          <div className={classNames(css.container, this.props.className)}>
            <span className={css.title}>
              {this.props.title}
            </span>
            <button
              className={css['clear-btn']}
              onClick={this.props.onClear}
            >
              <i className={classNames(css['cancel-icon'], icon.cancel)} />
            </button>
          </div>
        );
      }
    }

    // default props
    Tag.defaultProps = {
      className:   ''
    };

    // prop types checking
    Tag.propTypes = {
      className: PropTypes.string,
      title:     PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
      onClear:   PropTypes.func.isRequired
    };