TrackPanelListItem.tsx 2.19 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
  className: string;
  track: TrackPanelItem;
  changeTrack: (name: string) => void;
};

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

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

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

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

32
  return (
33
34
35
36
37
38
39
    <Fragment>
      <dd className={`${styles.listItem} ${listItemClass}`}>
        <label>
          {track.color && (
            <span className={`${styles.box} ${styles[track.color]}`} />
          )}
          <span className={styles.mainText}>{track.label}</span>
40
41
42
43
44
45
46
          {track.selectedInfo && (
            <span className={styles.selectedInfo}>{track.selectedInfo}</span>
          )}
          {track.additionalInfo && (
            <span className={styles.additionalInfo}>
              {track.additionalInfo}
            </span>
47
48
          )}
          {track.childTrackList && (
49
            <button onClick={toggleExpand} className={styles.expandBtn}>
50
51
52
53
54
55
56
57
58
59
60
61
62
              <img
                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>
63
64
        <button>
          <img
65
66
            src={trackPanelIconConfig.eye.icon.on}
            alt={trackPanelIconConfig.ellipsis.description}
67
68
          />
        </button>
69
70
71
      </dd>
      {expanded && props.children}
    </Fragment>
72
73
  );
};
74
75

export default TrackPanelListItem;