Feature/open submenu on mount

CHANGELOG.md

@@ -6,7 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
-
+### Added
+- Add prop 'isOpenOnMount' to allow opening submenu on mount
 ## [2.27.0] - 2020-11-05
 ### Changed
 - Close submenus whenever the URL changes.

docs/README.md

@@ -140,6 +140,7 @@ The available `menu-item` block props are as follows:
 | `highlight`         | `boolean` | Whether the item has highlight                                            | N/A           |
 | `iconPosition`         | `String` | Icon position relative to the menu item text. Either to the `left` or `right`                                           | `left`          |
 | `iconProps`         | `IconProps` | Icon props                                           | N/A           |
+| `isOpenOnMount` | `boolean` | Whether the submenu should always be automatically displayed when its parent is hovered/clicked on (`true`) or not (`false`). | `false` |
 | `itemProps`         | `CategoryItem` or `CustomItem` | Item props                                           | N/A           |
 
 - For icons in the menu items:

messages/context.json

@@ -36,6 +36,7 @@
   "admin/editor.menu.item.iconId.title": "iconId title",
   "admin/editor.menu.item.highlight.title": "highlight title",
   "admin/editor.menu.item.submenuWidth.title": "subMenuWidth title",
+  "admin/editor.menu.item.isOpenOnMount.title": "isOpenOnMount title",
   "admin/editor.menu.item.params.title": "params Title",
   "admin/editor.menu.item.params.categoryId.title": "Category id title",
   "admin/editor.menu.item.params.text.title": "params text title",
@@ -52,4 +53,4 @@
   "admin/editor.menu.def.title": "Title value used in radio button",
   "admin/editor.menu.def.category": "Category value used in radio button",
   "admin/editor.menu.categoryId.title": "Category ID title"
-}
+}

messages/en.json

@@ -36,6 +36,7 @@
   "admin/editor.menu.item.iconId.title": "Icon ID",
   "admin/editor.menu.item.highlight.title": "Highlight",
   "admin/editor.menu.item.submenuWidth.title": "Submenu Width",
+  "admin/editor.menu.item.isOpenOnMount.title": "Is Submenu open on mount",
   "admin/editor.menu.item.params.title": "Params",
   "admin/editor.menu.item.params.categoryId.title": "Category ID",
   "admin/editor.menu.item.params.text.title": "Text",
@@ -52,4 +53,4 @@
   "admin/editor.menu.def.title": "Title",
   "admin/editor.menu.def.category": "Category",
   "admin/editor.menu.categoryId.title": "Category ID"
-}
+}

messages/es.json

@@ -36,6 +36,7 @@
   "admin/editor.menu.item.iconId.title": "ID de icono",
   "admin/editor.menu.item.highlight.title": "Destacado",
   "admin/editor.menu.item.submenuWidth.title": "Ancho del submenú",
+  "admin/editor.menu.item.isOpenOnMount.title": "Submenú abierto on mount",
   "admin/editor.menu.item.params.title": "Parámetros",
   "admin/editor.menu.item.params.categoryId.title": "ID de la categoría",
   "admin/editor.menu.item.params.text.title": "Texto",

messages/pt.json

@@ -36,6 +36,7 @@
   "admin/editor.menu.item.iconId.title": "ID do ícone",
   "admin/editor.menu.item.highlight.title": "Destaque",
   "admin/editor.menu.item.submenuWidth.title": "Largura do Submenu",
+  "admin/editor.menu.item.isOpenOnMount.title": "Submenu aberto on mount",
   "admin/editor.menu.item.params.title": "Parâmetros",
   "admin/editor.menu.item.params.categoryId.title": "ID da Categoria",
   "admin/editor.menu.item.params.text.title": "Texto",
@@ -52,4 +53,4 @@
   "admin/editor.menu.def.title": "Título",
   "admin/editor.menu.def.category": "Categoria",
   "admin/editor.menu.categoryId.title": "Id da Categoria"
-}
+}

react/MenuItem.tsx

@@ -23,14 +23,16 @@ import { useUrlChange } from './hooks/useUrlChange'
 
 const CSS_HANDLES = ['menuItem', 'menuItemInnerDiv']
 
-const submenuInitialState = {
-  hasBeenActive: false,
-  isActive: false,
+type SubmenuState = {
+  hasBeenActive: boolean
+  isActive: boolean
+  isOpenOnMount?: boolean
 }
 
-type SubmenuState = typeof submenuInitialState
-
-type SubmenuAction = { type: 'SHOW_SUBMENU' } | { type: 'HIDE_SUBMENU' }
+type SubmenuAction =
+  | { type: 'SHOW_SUBMENU' }
+  | { type: 'HIDE_SUBMENU' }
+  | { type: 'DISABLE_IS_OPEN_ON_MOUNT_FLAG' }
 
 const submenuReducer: Reducer<SubmenuState, SubmenuAction> = (
   state,
@@ -47,20 +49,30 @@ const submenuReducer: Reducer<SubmenuState, SubmenuAction> = (
         ...state,
         isActive: false,
       }
+    case 'DISABLE_IS_OPEN_ON_MOUNT_FLAG':
+      return {
+        ...state,
+        isOpenOnMount: false,
+      }
     default:
       return state
   }
 }
 
 const MenuItem: StorefrontFunctionComponent<MenuItemSchema> = ({
   children,
+  isOpenOnMount = false,
   ...props
 }) => {
   const { experimentalOptimizeRendering } = useContext(MenuContext)
-  const [{ isActive, hasBeenActive }, dispatch] = useReducer(
-    submenuReducer,
-    submenuInitialState
-  )
+  const [
+    { isActive, hasBeenActive, isOpenOnMount: isOpenOnMountFlag },
+    dispatch,
+  ] = useReducer(submenuReducer, {
+    hasBeenActive: isOpenOnMount,
+    isActive: isOpenOnMount,
+    isOpenOnMount,
+  })
   const [isHovered, setHovered] = useState(false)
   const setActive = useCallback(
     (value: boolean) => {
@@ -70,6 +82,11 @@ const MenuItem: StorefrontFunctionComponent<MenuItemSchema> = ({
     },
     [isActive]
   )
+  const disableIsOpenOnMountFlag = useCallback(() => {
+    if (isOpenOnMountFlag) {
+      dispatch({ type: 'DISABLE_IS_OPEN_ON_MOUNT_FLAG' })
+    }
+  }, [isOpenOnMountFlag])
 
   // Close any active/open menu when url changes
   useUrlChange(() => {
@@ -102,13 +119,13 @@ const MenuItem: StorefrontFunctionComponent<MenuItemSchema> = ({
       }
 
       // if a menu is still active but is not hovered for at least 400ms, close it
-      if (isActive && !isHovered) {
+      if (isActive && !isHovered && !isOpenOnMountFlag) {
         closeTimeout.current = window.setTimeout(() => {
           setActive(false)
         }, 400)
       }
     },
-    [isActive, isCollapsible, isHovered, setActive]
+    [isActive, isCollapsible, isHovered, setActive, isOpenOnMountFlag]
   )
 
   const handles = useCssHandles(CSS_HANDLES)
@@ -144,6 +161,7 @@ const MenuItem: StorefrontFunctionComponent<MenuItemSchema> = ({
       onMouseEnter={() => {
         debouncedSetActive(true)
         setHovered(true)
+        disableIsOpenOnMountFlag()
       }}
       onMouseLeave={() => {
         debouncedSetActive(false)
@@ -169,6 +187,7 @@ export interface MenuItemSchema {
   iconPosition: 'left' | 'right'
   highlight: boolean
   itemProps: CategoryItemSchema | CustomItemSchema
+  isOpenOnMount?: boolean
   blockClass?: string
   experimentalOptimizeRendering?: boolean
 }
@@ -210,6 +229,10 @@ const messages = defineMessages({
     defaultMessage: '',
     id: 'admin/editor.menu.item.params.internal.title',
   },
+  isOpenOnMountTitle: {
+    defaultMessage: '',
+    id: 'admin/editor.menu.item.isOpenOnMount.title',
+  },
   itemIdTitle: {
     defaultMessage: '',
     id: 'admin/editor.menu.item.id.title',

store/contentSchemas.json

@@ -8,9 +8,7 @@
             {
               "properties": {
                 "additionalDef": {
-                  "enum": [
-                    "category"
-                  ]
+                  "enum": ["category"]
                 },
                 "categoryId": {
                   "type": "integer",
@@ -21,9 +19,7 @@
             {
               "properties": {
                 "additionalDef": {
-                  "enum": [
-                    "title"
-                  ]
+                  "enum": ["title"]
                 },
                 "title": {
                   "$ref": "app:vtex.menu#/definitions/MenuItem"
@@ -33,9 +29,7 @@
             {
               "properties": {
                 "additionalDef": {
-                  "enum": [
-                    "enum"
-                  ]
+                  "enum": ["enum"]
                 }
               }
             }
@@ -45,11 +39,7 @@
       "properties": {
         "additionalDef": {
           "title": "admin/editor.menu.additionalDef.title",
-          "enum": [
-            "none",
-            "category",
-            "title"
-          ],
+          "enum": ["none", "category", "title"],
           "enumNames": [
             "admin/editor.menu.def.none",
             "admin/editor.menu.def.category",
@@ -88,10 +78,7 @@
         "orientation": {
           "title": "admin/editor.menu.orientation.title",
           "type": "string",
-          "enum": [
-            "vertical",
-            "horizontal"
-          ],
+          "enum": ["vertical", "horizontal"],
           "enumNames": [
             "admin/editor.menu.orientation.vertical.label",
             "admin/editor.menu.orientation.horizontal.label"
@@ -115,9 +102,7 @@
             {
               "properties": {
                 "type": {
-                  "enum": [
-                    "category"
-                  ]
+                  "enum": ["category"]
                 },
                 "itemProps": {
                   "type": "object",
@@ -133,20 +118,15 @@
             {
               "properties": {
                 "type": {
-                  "enum": [
-                    "custom"
-                  ]
+                  "enum": ["custom"]
                 },
                 "itemProps": {
                   "type": "object",
                   "properties": {
                     "type": {
                       "title": "admin/editor.menu.item.params.type.title",
                       "type": "string",
-                      "enum": [
-                        "internal",
-                        "external"
-                      ],
+                      "enum": ["internal", "external"],
                       "enumNames": [
                         "admin/editor.menu.item.params.internal.title",
                         "admin/editor.menu.item.params.external.title"
@@ -183,10 +163,7 @@
         "type": {
           "title": "admin/editor.menu.item.type.title",
           "type": "string",
-          "enum": [
-            "category",
-            "custom"
-          ],
+          "enum": ["category", "custom"],
           "default": "custom",
           "enumNames": [
             "admin/editor.menu.item.category.title",
@@ -200,6 +177,11 @@
           "title": "admin/editor.menu.item.iconId.title",
           "type": "string",
           "nullable": true
+        },
+        "isOpenOnMount": {
+          "title": "admin/editor.menu.item.isOpenOnMount.title",
+          "type": "boolean",
+          "nullable": true
         }
       }
     },
@@ -208,13 +190,10 @@
       "properties": {
         "submenuWidth": {
           "title": "admin/editor.menu.item.submenuWidth.title",
-          "enum": [
-            "100%",
-            "auto"
-          ],
+          "enum": ["100%", "auto"],
           "default": "auto"
         }
       }
     }
   }
-}
+}