diff --git a/js/components/ContextMenu.tsx b/js/components/ContextMenu.tsx index a4ae01c8..6aedc6f5 100644 --- a/js/components/ContextMenu.tsx +++ b/js/components/ContextMenu.tsx @@ -76,7 +76,7 @@ export const LinkNode = (props: LinkNodeProps) => ( interface NodeProps { label: string; - checked: boolean; + checked?: boolean; hotkey?: string; className?: string; // TODO: Figure out how to do passthrough props @@ -96,8 +96,8 @@ interface ContextMenuProps { children: React.ReactNode; offsetTop: number; offsetLeft: number; - top: number; - bottom: number; + top: boolean; + bottom: boolean; selected: boolean; zIndex: number; } diff --git a/js/components/ContextMenuTarget.tsx b/js/components/ContextMenuTarget.tsx index b8f59719..79617d36 100644 --- a/js/components/ContextMenuTarget.tsx +++ b/js/components/ContextMenuTarget.tsx @@ -4,8 +4,9 @@ import ContextMenu from "./ContextMenu"; interface Props { handle: React.ReactNode; children: React.ReactNode; - top: number; - bottom: number; + top?: boolean; + bottom?: boolean; + style?: React.CSSProperties; } interface State { selected: boolean; diff --git a/js/components/PlaylistWindow/MiscMenu.js b/js/components/PlaylistWindow/MiscMenu.js deleted file mode 100644 index c3bcfb01..00000000 --- a/js/components/PlaylistWindow/MiscMenu.js +++ /dev/null @@ -1,69 +0,0 @@ -import React from "react"; -import { connect } from "react-redux"; -import { - reverseList, - randomizeList, - sortListByTitle, - downloadHtmlPlaylist -} from "../../actionCreators"; - -import { Hr, Node } from "../ContextMenu"; -import ContextMenuTarget from "../ContextMenuTarget"; -import PlaylistMenu from "./PlaylistMenu"; - -/* eslint-disable no-alert */ -/* TODO: This should really be kitty-corner to the upper right hand corner of the MiscMenu */ -const SortContextMenu = props => ( - } - > - -
- - -
-); - -const ConnectedSortContextMenu = connect( - null, - { - reverseList, - randomizeList, - sortListByTitle - } -)(SortContextMenu); - -const MiscOptionsContextMenu = props => ( - } - > - - -); - -const ConnectedMiscOptionsContextMenu = connect( - null, - { downloadHtmlPlaylist } -)(MiscOptionsContextMenu); - -const MiscMenu = () => ( - -
e.stopPropagation()}> - -
-
alert("Not supported in Webamp")} - /> - -
e.stopPropagation()}> - -
- -); - -export default MiscMenu; diff --git a/js/components/PlaylistWindow/MiscMenu.tsx b/js/components/PlaylistWindow/MiscMenu.tsx new file mode 100644 index 00000000..af95fcbf --- /dev/null +++ b/js/components/PlaylistWindow/MiscMenu.tsx @@ -0,0 +1,23 @@ +import React from "react"; + +import PlaylistMenu from "./PlaylistMenu"; +import SortContextMenu from "./SortContextMenu"; +import { ConnectedMiscOptionsContextMenu } from "./MiscOptionsContextMenu"; + +const MiscMenu = () => ( + +
e.stopPropagation()}> + +
+
alert("Not supported in Webamp")} + /> + +
e.stopPropagation()}> + +
+ +); + +export default MiscMenu; diff --git a/js/components/PlaylistWindow/MiscOptionsContextMenu.tsx b/js/components/PlaylistWindow/MiscOptionsContextMenu.tsx new file mode 100644 index 00000000..7629b08e --- /dev/null +++ b/js/components/PlaylistWindow/MiscOptionsContextMenu.tsx @@ -0,0 +1,29 @@ +import { connect } from "react-redux"; +import { Node } from "../ContextMenu"; +import ContextMenuTarget from "../ContextMenuTarget"; +import { Dispatch } from "../../types"; +import { downloadHtmlPlaylist } from "../../actionCreators"; + +interface DispatchProps { + downloadHtmlPlaylist: () => void; +} + +const MiscOptionsContextMenu = (props: DispatchProps) => ( + } + > + + +); + +const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => { + return { + downloadHtmlPlaylist: () => dispatch(downloadHtmlPlaylist()) + }; +}; +export const ConnectedMiscOptionsContextMenu = connect( + null, + mapDispatchToProps +)(MiscOptionsContextMenu); diff --git a/js/components/PlaylistWindow/SortContextMenu.tsx b/js/components/PlaylistWindow/SortContextMenu.tsx new file mode 100644 index 00000000..b857bb82 --- /dev/null +++ b/js/components/PlaylistWindow/SortContextMenu.tsx @@ -0,0 +1,45 @@ +import React from "react"; +import { connect } from "react-redux"; +import { + reverseList, + randomizeList, + sortListByTitle +} from "../../actionCreators"; + +import { Hr, Node } from "../ContextMenu"; +import ContextMenuTarget from "../ContextMenuTarget"; +import { Dispatch } from "../../types"; + +interface DispatchProps { + sortListByTitle: () => void; + reverseList: () => void; + randomizeList: () => void; +} + +/* eslint-disable no-alert */ +/* TODO: This should really be kitty-corner to the upper right hand corner of the MiscMenu */ +const SortContextMenu = (props: DispatchProps) => ( + } + > + +
+ + +
+); + +const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => { + return { + reverseList: () => dispatch(reverseList()), + randomizeList: () => dispatch(randomizeList()), + sortListByTitle: () => dispatch(sortListByTitle()) + }; +}; + +export default connect( + null, + mapDispatchToProps +)(SortContextMenu);