TrackPanelListItem.tsx 2.08 KB
Newer Older
1
import React, { FunctionComponent, Fragment, ReactNode, useState } from 'react';
2
3
import { TrackPanelItem, trackPanelIconConfig } from '../trackPanelConfig';

4
5
import chevronDownIcon from 'static/img/shared/chevron-down.svg';
import chevronUpIcon from 'static/img/shared/chevron-up.svg';
6
7
8
9

import styles from './TrackPanelListItem.scss';

type TrackPanelListItemProps = {
10
  children?: ReactNode[];
11
12
13
14
15
16
  className: string;
  track: TrackPanelItem;
  changeTrack: (name: string) => void;
  additionalInfo?: string;
};

17
18
19
const TrackPanelListItem: FunctionComponent<TrackPanelListItemProps> = (
  props: TrackPanelListItemProps
) => {
20
21
  const [expanded, setExpanded] = useState(false);

22
23
24
25
26
27
28
  const { className, track, additionalInfo } = props;
  const listItemClass = styles[className] || '';

  const changeTrackHandler = () => {
    props.changeTrack(props.track.name);
  };

29
30
31
32
  const toggleExpand = () => {
    setExpanded(!expanded);
  };

33
  return (
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
    <Fragment>
      <dd className={`${styles.listItem} ${listItemClass}`}>
        <label>
          {track.color && (
            <span className={`${styles.box} ${styles[track.color]}`} />
          )}
          <span className={styles.mainText}>{track.label}</span>
          {additionalInfo && (
            <span className={styles.additionalInfo}>{additionalInfo}</span>
          )}
          {track.childTrackList && (
            <button onClick={toggleExpand}>
              <img
                className={styles.expandIcon}
                src={expanded ? chevronUpIcon : chevronDownIcon}
                alt={expanded ? 'collapse' : 'expand'}
              />
            </button>
          )}
        </label>
        <button onClick={changeTrackHandler}>
          <img
            src={trackPanelIconConfig.ellipsis.icon.on}
            alt={`Go to ${track.label}`}
          />
        </button>
60
61
        <button>
          <img
62
63
            src={trackPanelIconConfig.eye.icon.on}
            alt={trackPanelIconConfig.ellipsis.description}
64
65
          />
        </button>
66
67
68
      </dd>
      {expanded && props.children}
    </Fragment>
69
70
  );
};
71
72

export default TrackPanelListItem;