diff --git a/js/components/ContextMenu.js b/js/components/ContextMenu.js
index d23238f8..5509a4eb 100644
--- a/js/components/ContextMenu.js
+++ b/js/components/ContextMenu.js
@@ -1,23 +1,42 @@
import React from "react";
-import { connect } from "react-redux";
+
import classnames from "classnames";
-import { close, setSkinFromFilename, openFileDialog } from "../actionCreators";
-
-import { CLOSE_CONTEXT_MENU, TOGGLE_CONTEXT_MENU } from "../actionTypes";
-
import "../../css/context-menu.css";
-const SKINS = [
- { file: "base-2.91.wsz", name: "" },
- { file: "MacOSXAqua1-5.wsz", name: "Mac OSX v1.5 (Aqua)" },
- { file: "TopazAmp1-2.wsz", name: "TopazAmp" },
- { file: "Vizor1-01.wsz", name: "Vizor" },
- { file: "XMMS-Turquoise.wsz", name: "XMMS Turquoise " },
- { file: "ZaxonRemake1-0.wsz", name: "Zaxon Remake" }
-];
+export const Hr = () =>
;
-class ContextMenu extends React.Component {
+// TODO: Add down-arrow
+export const Parent = ({ children, label }) =>
+
+
+ {label}
+ ;
+
+export const LinkNode = props =>
+
+
+ {props.label}
+
+ ;
+
+LinkNode.propTypes = {
+ label: React.PropTypes.string.isRequired,
+ href: React.PropTypes.string.isRequired
+};
+
+export const Node = props =>
+
+ {props.label}
+ ;
+
+Node.propTypes = {
+ label: React.PropTypes.string.isRequired
+};
+
+export class ContextMenu extends React.Component {
componentWillMount() {
// Clicking anywhere outside the context menu will close the window
document.addEventListener("click", this.props.closeMenu);
@@ -35,58 +54,15 @@ class ContextMenu extends React.Component {
onClick={this.props.toggleMenu}
>
);
}
}
-const mapStateToProps = state => state.contextMenu;
-const mapDispatchToProps = (dispatch, ownProps) => ({
- close: () => dispatch(close()),
- closeMenu: () => {
- console.log("close");
- dispatch({ type: CLOSE_CONTEXT_MENU });
- },
- toggleMenu: e => {
- dispatch({ type: TOGGLE_CONTEXT_MENU });
- // TODO: Consider binding to a ref instead.
- // https://stackoverflow.com/a/24421834
- e.nativeEvent.stopImmediatePropagation();
- },
- openFileDialog: () => dispatch(openFileDialog(ownProps.fileInput)),
- setSkin: filename => dispatch(setSkinFromFilename(filename))
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(ContextMenu);
+ContextMenu.propTypes = {
+ closeMenu: React.PropTypes.func.isRequired,
+ toggleMenu: React.PropTypes.func.isRequired,
+ children: React.PropTypes.any.isRequired
+};
diff --git a/js/components/MainContextMenu.js b/js/components/MainContextMenu.js
new file mode 100644
index 00000000..963eacc3
--- /dev/null
+++ b/js/components/MainContextMenu.js
@@ -0,0 +1,61 @@
+import React from "react";
+import { connect } from "react-redux";
+import { CLOSE_CONTEXT_MENU, TOGGLE_CONTEXT_MENU } from "../actionTypes";
+import { close, setSkinFromFilename, openFileDialog } from "../actionCreators";
+import { ContextMenu, Hr, Node, Parent, LinkNode } from "./contextMenu";
+
+const SKINS = [
+ { file: "base-2.91.wsz", name: "" },
+ { file: "MacOSXAqua1-5.wsz", name: "Mac OSX v1.5 (Aqua)" },
+ { file: "TopazAmp1-2.wsz", name: "TopazAmp" },
+ { file: "Vizor1-01.wsz", name: "Vizor" },
+ { file: "XMMS-Turquoise.wsz", name: "XMMS Turquoise " },
+ { file: "ZaxonRemake1-0.wsz", name: "Zaxon Remake" }
+];
+
+const MainContextMenu = props =>
+
+
+
+
+
+
+
+ {SKINS.map(skin =>
+
+ )}
+
+
+
+ ;
+
+const mapStateToProps = state => state.contextMenu;
+const mapDispatchToProps = (dispatch, ownProps) => ({
+ close: () => dispatch(close()),
+ closeMenu: () => {
+ console.log("close");
+ dispatch({ type: CLOSE_CONTEXT_MENU });
+ },
+ toggleMenu: e => {
+ dispatch({ type: TOGGLE_CONTEXT_MENU });
+ // TODO: Consider binding to a ref instead.
+ // https://stackoverflow.com/a/24421834
+ e.nativeEvent.stopImmediatePropagation();
+ },
+ openFileDialog: () => dispatch(openFileDialog(ownProps.fileInput)),
+ setSkin: filename => dispatch(setSkinFromFilename(filename))
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(MainContextMenu);
diff --git a/js/components/MainWindow.js b/js/components/MainWindow.js
index 65337074..8a170715 100644
--- a/js/components/MainWindow.js
+++ b/js/components/MainWindow.js
@@ -8,7 +8,7 @@ import ActionButtons from "./ActionButtons";
import Balance from "./Balance";
import Close from "./Close";
import ClutterBar from "./ClutterBar";
-import ContextMenu from "./ContextMenu";
+import MainContextMenu from "./MainContextMenu";
import Eject from "./Eject";
import EqToggleButton from "./EqToggleButton";
import Kbps from "./Kbps";
@@ -91,7 +91,7 @@ export class MainWindow extends React.Component {
>
Loading...