TrackPanel.tsx 2.85 KB
Newer Older
1 2 3 4 5 6
import React, {
  FunctionComponent,
  RefObject,
  useEffect,
  Fragment
} from 'react';
7
import { connect } from 'react-redux';
8

9 10 11 12
import TrackPanelBar from './track-panel-bar/TrackPanelBar';
import TrackPanelList from './track-panel-list/TrackPanelList';

import { RootState } from 'src/rootReducer';
13

14
import {
15
  toggleDrawer,
16
  toggleTrackPanel,
17
  changeCurrentTrack
18
} from '../browserActions';
19

20 21 22
import {
  getCurrentTrack,
  getDrawerOpened,
23 24
  getTrackPanelOpened,
  getBrowserActivated
25 26 27
} from '../browserSelectors';

import { getLaunchbarExpanded } from 'src/header/headerSelectors';
28 29
import { getBreakpointWidth } from 'src/globalSelectors';
import { BreakpointWidth } from 'src/globalConfig';
30 31

import styles from './TrackPanel.scss';
32

33
type StateProps = {
34
  browserActivated: boolean;
35 36
  currentTrack: string;
  drawerOpened: boolean;
37
  breakpointWidth: BreakpointWidth;
38
  launchbarExpanded: boolean;
39
  trackPanelOpened: boolean;
40 41
};

42 43 44 45 46 47
type DispatchProps = {
  changeCurrentTrack: (currentTrack: string) => void;
  toggleDrawer: (drawerOpened: boolean) => void;
  toggleTrackPanel: (trackPanelOpened?: boolean) => void;
};

48 49 50
type OwnProps = {
  browserRef: RefObject<HTMLDivElement>;
};
51 52 53

type TrackPanelProps = StateProps & DispatchProps & OwnProps;

54 55 56
const TrackPanel: FunctionComponent<TrackPanelProps> = (
  props: TrackPanelProps
) => {
57 58 59 60 61 62 63 64
  useEffect(() => {
    if (props.breakpointWidth !== BreakpointWidth.LARGE) {
      props.toggleTrackPanel(false);
    } else {
      props.toggleTrackPanel(true);
    }
  }, [props.breakpointWidth, props.toggleTrackPanel]);

65 66
  return (
    <section className={`${styles.trackPanel} reactSlideDrawer`}>
67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86
      {props.browserActivated && (
        <Fragment>
          <TrackPanelBar
            drawerOpened={props.drawerOpened}
            launchbarExpanded={props.launchbarExpanded}
            toggleDrawer={props.toggleDrawer}
            toggleTrackPanel={props.toggleTrackPanel}
            trackPanelOpened={props.trackPanelOpened}
          />
          {props.trackPanelOpened ? (
            <TrackPanelList
              browserRef={props.browserRef}
              currentTrack={props.currentTrack}
              launchbarExpanded={props.launchbarExpanded}
              toggleDrawer={props.toggleDrawer}
              updateTrack={props.changeCurrentTrack}
            />
          ) : null}
        </Fragment>
      )}
87 88 89
    </section>
  );
};
90

91
const mapStateToProps = (state: RootState): StateProps => ({
92
  breakpointWidth: getBreakpointWidth(state),
93
  browserActivated: getBrowserActivated(state),
94 95
  currentTrack: getCurrentTrack(state),
  drawerOpened: getDrawerOpened(state),
96
  launchbarExpanded: getLaunchbarExpanded(state),
97
  trackPanelOpened: getTrackPanelOpened(state)
98 99
});

100
const mapDispatchToProps: DispatchProps = {
101
  changeCurrentTrack,
102
  toggleDrawer,
103 104 105
  toggleTrackPanel
};

106 107 108 109
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TrackPanel);