# All files / components/SearchBox Suggestion.js

7.14% Statements 1/14
0% Branches 0/9
0% Functions 0/3
7.14% Lines 1/14

    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
    73
    74
    75
    76
    77
    78

    4x

     import React from 'react';
    import PropTypes from 'prop-types';
    import styled from 'styled-components';
    import _ from 'lodash';
    import SearchBoxSuggestionContainer from './styles/SearchBoxSuggestionContainer';
    import SearchBoxSuggestionHighlightText from './styles/SearchBoxSuggestionHighlightText';

    const defaultMatcher = (query, content) => {
      const lowerQuery = query.toLowerCase();
      const lowerContent = content.toLowerCase();
      return [
        lowerContent.indexOf(lowerQuery),
        lowerContent.indexOf(lowerQuery) + lowerQuery.length,
      ];
    };

    export default class Suggestion extends React.Component {
      static propTypes = {
        children: PropTypes.node.isRequired,
        query: PropTypes.string.isRequired,
        isHighlighted: PropTypes.bool.isRequired,
        matchSuggestionContent: PropTypes.func,
        /**
         * A component to render the containing element
         */
        Container: PropTypes.func,
        /**
         * A component to render highlighted text
         */
        Highlight: PropTypes.func,
      };

      static defaultProps = {
        matchSuggestionContent: defaultMatcher,
        Container: SearchBoxSuggestionContainer,
        Highlight: SearchBoxSuggestionHighlightText,
      };

      renderContents = () => {
        const { children, query, matchSuggestionContent, Highlight } = this.props;
        if (_.isString(children) && query) {
          const indices = matchSuggestionContent(query, children);
          if (indices[0] === -1) {
            // no match
            return children;
          }

          const parts = [
            children.substring(0, indices[0]),
            children.substring(indices[0], indices[1]),
            children.substring(indices[1]),
          ];

          return (
            <span>
              {parts[0]}
              {(parts[1] || children === query) && (
                <Highlight>{parts[1]}</Highlight>
              )}
              {parts[2]}
            </span>
          );
        }

        return children;
      };

      render() {
        const { isHighlighted, Container } = this.props;

        return (
          <Container isHighlighted={isHighlighted}>
            {this.renderContents()}
          </Container>
        );
      }
    }