TrackPanelListItem.tsx 2.67 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
  browserImageEl: HTMLDivElement | null;
11
  children?: ReactNode[];
12 13 14 15 16
  className: string;
  track: TrackPanelItem;
  changeTrack: (name: string) => void;
};

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

23 24
  const { browserImageEl, className, track } = props;
  const { ellipsis, eye } = trackPanelIconConfig;
25 26 27 28 29 30
  const listItemClass = styles[className] || '';

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

31 32 33 34
  const toggleExpand = () => {
    setExpanded(!expanded);
  };

35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51
  const toggleTrack = () => {
    const currentTrackStatus = trackStatus === 'on' ? 'off' : 'on';

    const navEvent = new CustomEvent('bpane', {
      bubbles: true,
      detail: {
        [currentTrackStatus]: track.name
      }
    });

    if (browserImageEl) {
      browserImageEl.dispatchEvent(navEvent);
    }

    setTrackStatus(currentTrackStatus);
  };

52
  return (
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>
60 61 62 63 64 65 66
          {track.selectedInfo && (
            <span className={styles.selectedInfo}>{track.selectedInfo}</span>
          )}
          {track.additionalInfo && (
            <span className={styles.additionalInfo}>
              {track.additionalInfo}
            </span>
67 68
          )}
          {track.childTrackList && (
69
            <button onClick={toggleExpand} className={styles.expandBtn}>
70 71 72 73 74 75 76 77
              <img
                src={expanded ? chevronUpIcon : chevronDownIcon}
                alt={expanded ? 'collapse' : 'expand'}
              />
            </button>
          )}
        </label>
        <button onClick={changeTrackHandler}>
78
          <img src={ellipsis.icon.on} alt={`Go to ${track.label}`} />
79
        </button>
80
        <button onClick={toggleTrack}>
81
          <img
82 83
            src={trackStatus === 'on' ? eye.icon.on : eye.icon.off}
            alt={eye.description}
84 85
          />
        </button>
86 87 88
      </dd>
      {expanded && props.children}
    </Fragment>
89 90
  );
};
91 92

export default TrackPanelListItem;