Feature/open submenu on mount acct

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+- Add prop 'isOpenOnMount' to allow opening submenu on mount
+
 ## [2.29.0] - 2021-03-08
 
 ### Added

docs/README.md

@@ -142,6 +142,7 @@ The available `menu-item` block props are as follows:
 | `highlight`         | `boolean` | Whether the item has highlight                                            | `undefined`           |
 | `iconPosition`         | `String` | Icon position relative to the menu item text. Either to the `left` or `right`                                           | `left`          |
 | `iconProps`         | `IconProps` | Icon props                                           | `undefined`           |
+| `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                                           | `undefined`           |
 | `classes`         | `CustomCSSClasses` | Used to override default CSS handles. To better understand how this prop works, we recommend reading about it [here](https://github.com/vtex-apps/css-handles#usecustomclasses). Note that this is only useful if you're importing this block as a React component.                                      | `undefined`           |
 

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/ja-JP.json

@@ -33,6 +33,7 @@
   "admin/editor.menu.item.iconId.title": "アイコン ID",
   "admin/editor.menu.item.highlight.title": "ハイライト",
   "admin/editor.menu.item.submenuWidth.title": "サブメニュー幅",
+  "admin/editor.menu.item.isOpenOnMount.title": "マウント時にサブメニューが開いているか",
   "admin/editor.menu.item.params.title": "パラメータ",
   "admin/editor.menu.item.params.categoryId.title": "カテゴリ ID",
   "admin/editor.menu.item.params.text.title": "テキスト",
@@ -48,4 +49,4 @@
   "admin/editor.menu.def.title": "タイトル",
   "admin/editor.menu.def.category": "カテゴリ",
   "admin/editor.menu.categoryId.title": "カテゴリ ID"
-}
+}

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

@@ -33,16 +33,19 @@ export interface MenuItemSchema {
   blockClass?: string
   experimentalOptimizeRendering?: boolean
   classes?: CssHandlesTypes.CustomClasses<typeof CSS_HANDLES>
+  isOpenOnMount?: boolean
 }
 
-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,
@@ -59,20 +62,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) => {
@@ -83,6 +96,12 @@ 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(() => {
     if (isActive) setActive(false)
@@ -114,13 +133,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, { classes: props.classes })
@@ -156,6 +175,7 @@ const MenuItem: StorefrontFunctionComponent<MenuItemSchema> = ({
       onMouseEnter={() => {
         debouncedSetActive(true)
         setHovered(true)
+        disableIsOpenOnMountFlag()
       }}
       onMouseLeave={() => {
         debouncedSetActive(false)

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"
         }
       }
     }
   }
-}
+}