Add edit menu

src/components/menu-bar/menu-bar.jsx

@@ -14,7 +14,14 @@ import {MenuItem, MenuSection} from '../menu/menu.jsx';
 import SaveButton from '../../containers/save-button.jsx';
 
 import {openFeedbackForm} from '../../reducers/modals';
-import {openFileMenu, closeFileMenu, MENU_FILE} from '../../reducers/menus';
+import {
+    openFileMenu,
+    closeFileMenu,
+    fileMenuOpen,
+    openEditMenu,
+    closeEditMenu,
+    editMenuOpen
+} from '../../reducers/menus';
 
 import styles from './menu-bar.css';
 
@@ -151,10 +158,29 @@ const MenuBar = props => (
                         </MenuSection>
                     </MenuBarMenu>
                 </div>
-                    <MenuBarItemTooltip id="edit-menu">
-                        <div className={classNames(styles.editMenu)}>Edit</div>
-                    </MenuBarItemTooltip>
-                <div className={classNames(styles.menuBarItem, styles.hoverable)}>
+                <div
+                    className={classNames(styles.menuBarItem, styles.hoverable, {
+                        [styles.active]: props.editMenuOpen
+                    })}
+                    onClick={props.onClickEdit}
+                >
+                    <div className={classNames(styles.editMenu)}>Edit</div>
+                    <MenuBarMenu
+                        open={props.editMenuOpen}
+                        onRequestClose={props.onRequestCloseEdit}
+                    >
+                        <MenuItemTooltip id="undo">
+                            <MenuItem>Undo</MenuItem>
+                        </MenuItemTooltip>
+                        <MenuItemTooltip id="redo">
+                            <MenuItem>Redo</MenuItem>
+                        </MenuItemTooltip>
+                        <MenuSection>
+                            <MenuItemTooltip id="turbo">
+                                <MenuItem>Turbo mode</MenuItem>
+                            </MenuItemTooltip>
+                        </MenuSection>
+                    </MenuBarMenu>
                 </div>
             </div>
             <div className={classNames(styles.divider)} />
@@ -249,26 +275,26 @@ const MenuBar = props => (
 );
 
 MenuBar.propTypes = {
+    editMenuOpen: PropTypes.bool,
     fileMenuOpen: PropTypes.bool,
+    onClickEdit: PropTypes.func,
     onClickFile: PropTypes.func,
     onGiveFeedback: PropTypes.func.isRequired,
+    onRequestCloseEdit: PropTypes.func,
     onRequestCloseFile: PropTypes.func
 };
 
 const mapStateToProps = state => ({
-    fileMenuOpen: state.menus[MENU_FILE]
+    fileMenuOpen: fileMenuOpen(state),
+    editMenuOpen: editMenuOpen(state)
 });
 
 const mapDispatchToProps = dispatch => ({
-    onGiveFeedback: () => {
-        dispatch(openFeedbackForm());
-    },
-    onClickFile: () => {
-        dispatch(openFileMenu());
-    },
-    onRequestCloseFile: () => {
-        dispatch(closeFileMenu());
-    }
+    onGiveFeedback: () => dispatch(openFeedbackForm()),
+    onClickFile: () => dispatch(openFileMenu()),
+    onRequestCloseFile: () => dispatch(closeFileMenu()),
+    onClickEdit: () => dispatch(openEditMenu()),
+    onRequestCloseEdit: () => dispatch(closeEditMenu())
 });
 
 export default connect(

src/components/menu/menu.css

@@ -7,6 +7,7 @@
     background-color: $motion-primary;
     padding: 0;
     margin: 0;
+    min-width: 186px;
     max-width: 260px;
     overflow: visible;
     color: $ui-white;

src/components/menu/menu.jsx

@@ -70,7 +70,7 @@ const addDividerClassToFirstChild = (child, id) => (
 
 const MenuSection = ({children}) => (
     <React.Fragment>{
-        children.map(addDividerClassToFirstChild)
+        React.Children.map(children, addDividerClassToFirstChild)
     }</React.Fragment>
 );
 

src/reducers/menus.js

@@ -2,10 +2,12 @@ const OPEN_MENU = 'scratch-gui/menus/OPEN_MENU';
 const CLOSE_MENU = 'scratch-gui/menus/CLOSE_MENU';
 
 const MENU_FILE = 'fileMenu';
+const MENU_EDIT = 'editMenu';
 
 
 const initialState = {
-    [MENU_FILE]: false
+    [MENU_FILE]: false,
+    [MENU_EDIT]: false
 };
 
 const reducer = function (state, action) {
@@ -23,28 +25,27 @@ const reducer = function (state, action) {
         return state;
     }
 };
-const openMenu = function (menu) {
-    return {
-        type: OPEN_MENU,
-        menu: menu
-    };
-};
-const closeMenu = function (menu) {
-    return {
-        type: CLOSE_MENU,
-        menu: menu
-    };
-};
-const openFileMenu = function () {
-    return openMenu(MENU_FILE);
-};
-const closeFileMenu = function () {
-    return closeMenu(MENU_FILE);
-};
+const openMenu = menu => ({
+    type: OPEN_MENU,
+    menu: menu
+});
+const closeMenu = menu => ({
+    type: CLOSE_MENU,
+    menu: menu
+});
+const openFileMenu = () => openMenu(MENU_FILE);
+const closeFileMenu = () => closeMenu(MENU_FILE);
+const fileMenuOpen = state => state.menus[MENU_FILE];
+const openEditMenu = () => openMenu(MENU_EDIT);
+const closeEditMenu = () => closeMenu(MENU_EDIT);
+const editMenuOpen = state => state.menus[MENU_EDIT];
 
 export {
     reducer as default,
     openFileMenu,
     closeFileMenu,
-    MENU_FILE
+    openEditMenu,
+    closeEditMenu,
+    fileMenuOpen,
+    editMenuOpen
 };