# All files / components/TagList index.js

100% Statements 14/14
100% Branches 2/2
100% Functions 5/5
100% Lines 13/13

    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
    69
    70
    71
    72

    3x

    3x

    3x

    8x
    8x

    2x
    1x

    8x
    8x

    9x

    3x

    3x

    3x

     import React, { Component } from 'react';
    import PropTypes from 'prop-types';
    import styled from 'styled-components';

    import Tag from '../Tag';

    const StyledTagListContainer = styled.div`
      order: 2;
      margin: 5px;
    `;

    const StyledTagItem = styled.span`
      padding: 2px;
    `;

    StyledTagListContainer.displayName = 'StyledTagListContainer';

    class TagList extends Component {
      constructor() {
        super();
        this.onClick = this.onClick.bind(this);
      }

      onClick(item, i, e) {
        // TODO change for this.props.clickItem instanceof Function
        // When thre is a jest fix to this bug: https://github.com/facebook/jest/issues/6329
        if (typeof this.props.clickItem === 'function') {
          this.props.clickItem(item, i, e);
        }
      }

      render() {
        const { tags } = this.props;
        return (
          <StyledTagListContainer>
            {tags.map((tag, i) => (
              <StyledTagItem key={tag.name} onClick={(e) => this.onClick(tag, i, e)}>
                <Tag data={tag} />
              </StyledTagItem>
            ))}
          </StyledTagListContainer>
        );
      }
    }

    TagList.propTypes = {
      /**
       * tags is an array of tag objects
       * that will be displayed in the component
       */
      tags: PropTypes.array,
      /**
       * ClassName to add to this component
       */
      /* eslint-disable react/no-unused-prop-types */
      className: PropTypes.string,
      /**
       * Callback function to be called when an item is clicked
       */
      clickItem: PropTypes.func,
    };

    TagList.defaultProps = {
      tags: [],
      className: 'LT-TagList-Container',
      clickItem: null,
    };

    TagList.displayName = 'TagList';

    export default TagList;