Merge pull request #2361 from dewanshDT/dewanshmobile/mobilenav

`MobileNav` component for smaller devices

Author: lindapaiste

client/common/icons.jsx

@@ -13,6 +13,8 @@ import DropdownArrow from '../images/down-filled-triangle.svg';
 import Preferences from '../images/preferences.svg';
 import Play from '../images/triangle-arrow-right.svg';
 import More from '../images/more.svg';
+import Editor from '../images/editor.svg';
+import Account from '../images/account.svg';
 import Code from '../images/code.svg';
 import Save from '../images/save.svg';
 import Terminal from '../images/terminal.svg';
@@ -83,6 +85,8 @@ export const GoogleIcon = withLabel(Google);
 export const PlusIcon = withLabel(Plus);
 export const CloseIcon = withLabel(Close);
 export const ExitIcon = withLabel(Exit);
+export const EditorIcon = withLabel(Editor);
+export const AccountIcon = withLabel(Account);
 export const DropdownArrowIcon = withLabel(DropdownArrow);
 export const PreferencesIcon = withLabel(Preferences);
 export const PlayIcon = withLabel(Play);

client/components/Nav/NavBar.jsx

@@ -8,7 +8,7 @@ import React, {
 } from 'react';
 import { MenuOpenContext, NavBarContext } from './contexts';
 
-function NavBar({ children }) {
+function NavBar({ children, className }) {
   const [dropdownOpen, setDropdownOpen] = useState('none');
 
   const timerRef = useRef(null);
@@ -55,6 +55,15 @@ function NavBar({ children }) {
     timerRef.current = setTimeout(() => setDropdownOpen('none'), 10);
   }, [timerRef, setDropdownOpen]);
 
+  const toggleDropdownOpen = useCallback(
+    (dropdown) => {
+      setDropdownOpen((prevState) =>
+        prevState === dropdown ? 'none' : dropdown
+      );
+    },
+    [setDropdownOpen]
+  );
+
   const contextValue = useMemo(
     () => ({
       createDropdownHandlers: (dropdown) => ({
@@ -64,9 +73,7 @@ function NavBar({ children }) {
           );
         },
         onClick: () => {
-          setDropdownOpen((prevState) =>
-            prevState === 'none' ? dropdown : 'none'
-          );
+          toggleDropdownOpen(dropdown);
         },
         onBlur: handleBlur,
         onFocus: clearHideTimeout
@@ -80,15 +87,16 @@ function NavBar({ children }) {
           clearHideTimeout();
           setDropdownOpen(dropdown);
         }
-      })
+      }),
+      toggleDropdownOpen
     }),
-    [setDropdownOpen, clearHideTimeout, handleBlur]
+    [setDropdownOpen, toggleDropdownOpen, clearHideTimeout, handleBlur]
   );
 
   return (
     <NavBarContext.Provider value={contextValue}>
       <header>
-        <nav className="nav" ref={nodeRef}>
+        <nav className={className} ref={nodeRef}>
           <MenuOpenContext.Provider value={dropdownOpen}>
             {children}
           </MenuOpenContext.Provider>
@@ -99,11 +107,13 @@ function NavBar({ children }) {
 }
 
 NavBar.propTypes = {
-  children: PropTypes.node
+  children: PropTypes.node,
+  className: PropTypes.string
 };
 
 NavBar.defaultProps = {
-  children: null
+  children: null,
+  className: 'nav'
 };
 
 export default NavBar;

client/components/Nav/NavDropdownMenu.jsx

@@ -4,7 +4,7 @@ import React, { useContext, useMemo } from 'react';
 import TriangleIcon from '../../images/down-filled-triangle.svg';
 import { MenuOpenContext, NavBarContext, ParentMenuContext } from './contexts';
 
-function NavDropdownMenu({ id, title, children }) {
+export function useMenuProps(id) {
   const activeMenu = useContext(MenuOpenContext);
 
   const isOpen = id === activeMenu;
@@ -16,6 +16,12 @@ function NavDropdownMenu({ id, title, children }) {
     id
   ]);
 
+  return { isOpen, handlers };
+}
+
+function NavDropdownMenu({ id, title, children }) {
+  const { isOpen, handlers } = useMenuProps(id);
+
   return (
     <li className={classNames('nav__item', isOpen && 'nav__item--open')}>
       <button {...handlers}>

client/components/Nav/NavMenuItem.jsx

@@ -3,7 +3,7 @@ import React, { useContext, useMemo } from 'react';
 import ButtonOrLink from '../../common/ButtonOrLink';
 import { NavBarContext, ParentMenuContext } from './contexts';
 
-function NavMenuItem({ hideIf, ...rest }) {
+function NavMenuItem({ hideIf, className, ...rest }) {
   const parent = useContext(ParentMenuContext);
 
   const { createMenuItemHandlers } = useContext(NavBarContext);
@@ -18,7 +18,7 @@ function NavMenuItem({ hideIf, ...rest }) {
   }
 
   return (
-    <li className="nav__dropdown-item">
+    <li className={className}>
       <ButtonOrLink {...rest} {...handlers} />
     </li>
   );
@@ -31,13 +31,15 @@ NavMenuItem.propTypes = {
   /**
    * Provides a way to deal with optional items.
    */
-  hideIf: PropTypes.bool
+  hideIf: PropTypes.bool,
+  className: PropTypes.string
 };
 
 NavMenuItem.defaultProps = {
   onClick: null,
   value: null,
-  hideIf: false
+  hideIf: false,
+  className: 'nav__dropdown-item'
 };
 
 export default NavMenuItem;

client/components/Nav/contexts.jsx

@@ -6,5 +6,6 @@ export const MenuOpenContext = createContext('none');
 
 export const NavBarContext = createContext({
   createDropdownHandlers: () => ({}),
-  createMenuItemHandlers: () => ({})
+  createMenuItemHandlers: () => ({}),
+  toggleDropdownOpen: () => {}
 });

client/constants.js

@@ -30,8 +30,6 @@ export const PROJECT_SAVE_SUCCESS = 'PROJECT_SAVE_SUCCESS';
 export const PROJECT_SAVE_FAIL = 'PROJECT_SAVE_FAIL';
 export const NEW_PROJECT = 'NEW_PROJECT';
 export const RESET_PROJECT = 'RESET_PROJECT';
-export const SHOW_EDIT_PROJECT_NAME = 'SHOW_EDIT_PROJECT_NAME';
-export const HIDE_EDIT_PROJECT_NAME = 'HIDE_EDIT_PROJECT_NAME';
 
 export const SET_PROJECT = 'SET_PROJECT';
 export const SET_PROJECTS = 'SET_PROJECTS';

client/images/account.svg

@@ -351,18 +351,6 @@ export function cloneProject(project) {
   };
 }
 
-export function showEditProjectName() {
-  return {
-    type: ActionTypes.SHOW_EDIT_PROJECT_NAME
-  };
-}
-
-export function hideEditProjectName() {
-  return {
-    type: ActionTypes.HIDE_EDIT_PROJECT_NAME
-  };
-}
-
 export function setProjectSavedTime(updatedAt) {
   return {
     type: ActionTypes.SET_PROJECT_SAVED_TIME,

client/images/editor.svg

@@ -11,27 +11,36 @@ function EditableInput({
   emptyPlaceholder,
   InputComponent,
   inputProps,
-  onChange
+  onChange,
+  disabled,
+  'aria-label': ariaLabel
 }) {
   const [isEditing, setIsEditing] = React.useState(false);
   const [currentValue, setCurrentValue] = React.useState(value || '');
   const displayValue = currentValue || emptyPlaceholder;
   const hasValue = currentValue !== '';
   const classes = `editable-input editable-input--${
     isEditing ? 'is-editing' : 'is-not-editing'
-  } editable-input--${hasValue ? 'has-value' : 'has-placeholder'}`;
-  const inputRef = React.createRef();
+  } editable-input--${hasValue ? 'has-value' : 'has-placeholder'} ${
+    disabled ? 'editable-input--disabled' : ''
+  }`;
+  const inputRef = React.useRef();
   const { t } = useTranslation();
   React.useEffect(() => {
     if (isEditing) {
-      inputRef.current.focus();
+      inputRef.current?.focus();
     }
   }, [isEditing]);
 
   function beginEditing() {
     setIsEditing(true);
   }
 
+  function cancelEditing() {
+    setIsEditing(false);
+    setCurrentValue(value);
+  }
+
   function doneEditing() {
     setIsEditing(false);
 
@@ -51,6 +60,8 @@ function EditableInput({
   function checkForKeyAction(event) {
     if (event.key === 'Enter') {
       doneEditing();
+    } else if (event.key === 'Escape' || event.key === 'Esc') {
+      cancelEditing();
     }
   }
 
@@ -59,7 +70,11 @@ function EditableInput({
       <button
         className="editable-input__label"
         onClick={beginEditing}
-        aria-label={t('EditableInput.EditValue', { display: displayValue })}
+        aria-label={
+          ariaLabel ?? t('EditableInput.EditValue', { display: displayValue })
+        }
+        aria-hidden={isEditing}
+        disabled={disabled}
       >
         <span>{displayValue}</span>
         <EditIcon
@@ -74,9 +89,10 @@ function EditableInput({
         type="text"
         {...inputProps}
         disabled={!isEditing}
+        aria-hidden={!isEditing}
         onBlur={doneEditing}
         onChange={updateValue}
-        onKeyPress={checkForKeyAction}
+        onKeyDown={checkForKeyAction}
         ref={inputRef}
         value={currentValue}
       />
@@ -89,7 +105,9 @@ EditableInput.defaultProps = {
   InputComponent: 'input',
   inputProps: {},
   validate: () => true,
-  value: ''
+  value: '',
+  disabled: false,
+  'aria-label': undefined
 };
 
 EditableInput.propTypes = {
@@ -99,7 +117,9 @@ EditableInput.propTypes = {
   inputProps: PropTypes.object, // eslint-disable-line
   onChange: PropTypes.func.isRequired,
   validate: PropTypes.func,
-  value: PropTypes.string
+  value: PropTypes.string,
+  disabled: PropTypes.bool,
+  'aria-label': PropTypes.string
 };
 
 export default EditableInput;