# All files / src/components NodeSequence.jsx

84.62% Statements 11/13
64.71% Branches 11/17
100% Functions 2/2
84.62% Lines 11/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
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93

    2x

    2x

    2x

    2x
    2x

    2x

    8x
    8x

    8x

    2x
    2x

     import { css, StyleSheet } from 'aphrodite';
    import React from 'react';
    import PropTypes from 'prop-types';

    import { nodeShape, scaleShape } from '../propShapes';

    const styles = StyleSheet.create({
      container: {
        fontFamily: 'BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif',
      },

      separator: {
        color: '#484848',
        fontSize: 14,
      },

      node: {
        fontSize: 15,
        fontWeight: 200,
        textTransform: 'uppercase',
      },

      currNode: {
        fontWeight: 700,
        textDecoration: 'underline',
        textDecorationColor: '#484848',
      },
    });

    const propTypes = {
      nodeArray: PropTypes.arrayOf(nodeShape),
      currNodeIndex: PropTypes.number,
      separator: PropTypes.node,
      colorScale: scaleShape.isRequired,
      maxNameLength: PropTypes.number,
      maxNodeLength: PropTypes.number,
    };

    const defaultProps = {
      nodeArray: [],
      currNodeIndex: -1,
      separator: ' > ',
      maxNameLength: 10,
      maxNodeLength: 5,
    };

    function NodeSequence({
      nodeArray,
      currNodeIndex,
      separator,
      colorScale,
      maxNameLength,
      maxNodeLength,
    }) {
      let nodes = nodeArray;
      Iif (nodes.length > maxNodeLength) {
        nodes = [...nodeArray.slice(0, 2), null, ...nodeArray.slice(-(maxNodeLength - 3))];
      }
      return nodeArray.length ? (
        <div className={css(styles.container)}>
          {nodes.map((node, index) => {
            let name;
            Eif (node) {
              name = node.name.length > maxNameLength
                ? `${node.name.slice(0, maxNameLength + 1)}…`
                : node.name;
            } else {
              name = `+${nodeArray.length - nodes.length} more…`;
            }
            return (
              <span key={(node && node.id) || '...'}>
                {index !== 0 &&
                  <span className={css(styles.separator)}>
                    {separator}
                  </span>}
                <span
                  className={css(styles.node, index === currNodeIndex && styles.currNode)}
                  style={{ color: node && colorScale.scale(colorScale.accessor(node)) }}
                >
                  {name}
                </span>
              </span>
            );
          })}
        </div>
      ) : null;
    }

    NodeSequence.propTypes = propTypes;
    NodeSequence.defaultProps = defaultProps;

    export default NodeSequence;