From 763bb705a9472356f15e3841fd9c42875cd369fc Mon Sep 17 00:00:00 2001 From: Lucas China Date: Tue, 24 Nov 2020 18:38:19 -0300 Subject: [PATCH 1/6] Add isOpenOnMount prop to allow opening the submenu on mount, not necessarily on hover --- react/MenuItem.tsx | 47 ++++++++++++++++++++++++++++++++++------------ 1 file changed, 35 insertions(+), 12 deletions(-) diff --git a/react/MenuItem.tsx b/react/MenuItem.tsx index 5427935..ef6ed8d 100644 --- a/react/MenuItem.tsx +++ b/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 = ( state, @@ -47,6 +49,11 @@ const submenuReducer: Reducer = ( ...state, isActive: false, } + case 'DISABLE_IS_OPEN_ON_MOUNT_FLAG': + return { + ...state, + isOpenOnMount: false, + } default: return state } @@ -54,13 +61,18 @@ const submenuReducer: Reducer = ( const MenuItem: StorefrontFunctionComponent = ({ 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 = ({ }, [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 = ({ } // 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 = ({ 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', From e0ebbfed568b32473fb4488a912426f45156936c Mon Sep 17 00:00:00 2001 From: Lucas China Date: Tue, 24 Nov 2020 19:24:01 -0300 Subject: [PATCH 2/6] Add isOpenOnMount prop to MenuItem properties in contentSchemas.json --- store/contentSchemas.json | 53 ++++++++++++--------------------------- 1 file changed, 16 insertions(+), 37 deletions(-) diff --git a/store/contentSchemas.json b/store/contentSchemas.json index 14c9309..0ff41d8 100644 --- a/store/contentSchemas.json +++ b/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,9 +118,7 @@ { "properties": { "type": { - "enum": [ - "custom" - ] + "enum": ["custom"] }, "itemProps": { "type": "object", @@ -143,10 +126,7 @@ "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" } } } } -} \ No newline at end of file +} From 1fc642e518573ea9acc488fdd12a0293517c09d0 Mon Sep 17 00:00:00 2001 From: Lucas China Date: Tue, 24 Nov 2020 18:42:05 -0300 Subject: [PATCH 3/6] Update docs and messages --- docs/README.md | 1 + messages/context.json | 3 ++- messages/en.json | 3 ++- messages/es.json | 1 + messages/pt.json | 3 ++- 5 files changed, 8 insertions(+), 3 deletions(-) diff --git a/docs/README.md b/docs/README.md index d54eddd..038f394 100644 --- a/docs/README.md +++ b/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 be opened on mount | `false` | | `itemProps` | `CategoryItem` or `CustomItem` | Item props | N/A | - For icons in the menu items: diff --git a/messages/context.json b/messages/context.json index 9e5c3fd..21b5b00 100644 --- a/messages/context.json +++ b/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" -} \ No newline at end of file +} diff --git a/messages/en.json b/messages/en.json index 3b23be4..bc47b94 100644 --- a/messages/en.json +++ b/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" -} \ No newline at end of file +} diff --git a/messages/es.json b/messages/es.json index 9b555a7..959b0f7 100644 --- a/messages/es.json +++ b/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", diff --git a/messages/pt.json b/messages/pt.json index 0592da6..9f4a3bc 100644 --- a/messages/pt.json +++ b/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" -} \ No newline at end of file +} From 1c8390557fc504d4b2e481682e63422dea6181cd Mon Sep 17 00:00:00 2001 From: Lucas China Date: Tue, 24 Nov 2020 18:46:02 -0300 Subject: [PATCH 4/6] Update CHANGELOG --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a361f1a..35d1db7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +6,7 @@ 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] - +- Add prop 'isOpenOnMount' to allow opening submenu on mount ## [2.27.0] - 2020-11-05 ### Changed - Close submenus whenever the URL changes. From d6ad3f42d9720f13e38f6900e77f8ae15307a9a6 Mon Sep 17 00:00:00 2001 From: Lucas C Date: Tue, 24 Nov 2020 21:30:13 -0300 Subject: [PATCH 5/6] Update CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 35d1db7..5f59648 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ 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 From 83f7d34301cfe32cc16fefae504e62555ad1f686 Mon Sep 17 00:00:00 2001 From: Bia <52087100+guerreirobeatriz@users.noreply.github.com> Date: Wed, 2 Dec 2020 11:47:25 -0300 Subject: [PATCH 6/6] Update README.md --- docs/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/README.md b/docs/README.md index 038f394..a3ccdcd 100644 --- a/docs/README.md +++ b/docs/README.md @@ -140,7 +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 be opened on mount | `false` | +| `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: