From 176d04689f761f48886851d11ced47e196c6af49 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Enrique=20P=C3=A9rez?= Date: Wed, 6 Nov 2024 09:39:08 +0100 Subject: [PATCH 1/8] feat: add skeleton to drawer component --- react/Drawer.tsx | 13 ++++++++++++- react/Skeleton.tsx | 27 +++++++++++++++++++++++++++ 2 files changed, 39 insertions(+), 1 deletion(-) create mode 100644 react/Skeleton.tsx diff --git a/react/Drawer.tsx b/react/Drawer.tsx index c328d6e..ea8e644 100644 --- a/react/Drawer.tsx +++ b/react/Drawer.tsx @@ -23,6 +23,7 @@ import useLockScroll from './modules/useLockScroll' import DrawerCloseButton from './DrawerCloseButton' import { DrawerContextProvider } from './DrawerContext' import { isElementInsideLink } from './modules/isElementInsideLink' +import Skeleton from './Skeleton' const Swipable = React.lazy(() => import('./Swipable')) @@ -138,6 +139,7 @@ function Drawer(props: Props) { const { state: menuState, openMenu, closeMenu } = useMenuState() const { isOpen: isMenuOpen, hasBeenOpened: hasMenuBeenOpened } = menuState const [isMoving, setIsMoving] = useState(false) + const [shouldRenderChildrenNow, setShouldRenderChildrenNow] = useState(false) // Always add the listener for 'openDrawer' events, since they're sent by // the drawer-trigger block. @@ -159,6 +161,14 @@ function Drawer(props: Props) { } }, [onVisibilityChanged, isMenuOpen]) + useEffect(() => { + if (isMenuOpen && !shouldRenderChildrenNow) { + setTimeout(() => { + setShouldRenderChildrenNow(true) + }, 0) + } + }, [isMenuOpen, shouldRenderChildrenNow]) + const handleContainerClick: MouseEventHandler = event => { // target is the clicked element // currentTarget is the element which was attached the event (e.g. the container) @@ -254,7 +264,8 @@ function Drawer(props: Props) { className={`${handles.childrenContainer} flex flex-grow-1`} onClick={handleContainerClick} > - {shouldRenderChildren && children} + {shouldRenderChildren && + (shouldRenderChildrenNow ? children : )} {/* eslint-enable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */} diff --git a/react/Skeleton.tsx b/react/Skeleton.tsx new file mode 100644 index 0000000..db2b16a --- /dev/null +++ b/react/Skeleton.tsx @@ -0,0 +1,27 @@ +import React from 'react' +import { useCssHandles } from 'vtex.css-handles' + +const CSS_HANDLES = ['skeletonContainer', 'skeletonItem'] as const + +function Skeleton() { + const handles = useCssHandles(CSS_HANDLES) + + return ( +
+
+
+
+
+ ) +} + +export default Skeleton From 372536cc28cb9407adb534440433356ef12b63cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Enrique=20P=C3=A9rez?= Date: Wed, 6 Nov 2024 09:51:44 +0100 Subject: [PATCH 2/8] chore: update changelog --- CHANGELOG.md | 62 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index f7ba845..834eda9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [Unreleased] +### Added + +- Add skeleton component to Drawer + ## [0.18.0] - 2024-11-01 ### Added @@ -30,135 +34,193 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. - Fixes of i18n on readme file. ## [0.16.2] - 2022-06-13 + ### Fixed + - Removed transition from in `"Overlay"`. ## [0.16.1] - 2022-02-14 ### Fixed + - Indicate the prop `text` in `"rich-text#open-drawer"`. ## [0.16.0] - 2021-06-02 + ### Added + - `renderingStrategy` prop to control when the drawer's children should be rendered ## [0.15.1] - 2021-03-10 + ### Fixed + - aria-hidden into `Swipable` ## [0.15.0] - 2020-12-04 + ### Added + - Prop for drawer close button: `text` ## [0.14.0] - 2020-09-08 + ### Added + - `customPixelEventId` prop. ## [0.13.0] - 2020-08-10 + ### Added + - CSS Handle for drawer overlay: `overlay` and `overlay--visible`. ## [0.12.1] - 2020-05-05 + ### Fixed + - Scrollbar showing even when there's no overflow. ## [0.12.0] - 2020-04-28 + ### Added + - `backdropMode` prop to `drawer`. ### Security + - Bump dependencies versions. ## [0.11.0] - 2020-04-28 + ### Added + - Class names with CSS Handles. ## [0.10.1] - 2020-04-01 + ### Changed + - Lock page scroll with `overflow: hidden` instead of fixing its position. ## [0.10.0] - 2020-03-30 + ### Added + - New CSS Handle `drawerContent` ## [0.9.0] - 2020-03-13 + ### Added + - New block `drawer-header` and `drawer-close-button`. ### Fixed + - Drawer trigger block never being rendered. ## [0.8.1] - 2020-03-11 + ### Fixed + - Correctly identify if animation is stopped or not. ## [0.8.0] - 2020-03-03 + ### Added + - New `drawer-trigger` interface. ## [0.7.0] - 2020-02-28 + ### Changed + - Drawer now closes on its own if the user clicks a link inside it. ## [0.6.1] - 2020-01-23 + ### Changed + - `useLockScroll` now blocks the scroll of the body element instead of the html. ## [0.6.0] - 2020-01-06 + ### Added + - Allows dragging from outside of the drawer. ### Changed + - Preserves momentum after swipe release. - Prevents rendering of content if the menu has not been opened. ### Fixed + - Issue where client rendering on the Portal component would be inconsistent with SSR. - "Accordeon effect" when opening the drawer, when the scrollbars are visible in the user's OS. ## [0.5.0] - 2019-12-27 + ### Changed + - Allow any block inside drawer. ## [0.4.0] - 2019-11-06 + ### Added + - Support for new values for `slideDirection` prop: `'rightToLeft'` and `'leftToRight'`. ## [0.3.0] - 2019-10-18 + ### Added + - New `childrenContainer` CSS handle. ### Fixed + - Wrong CSS handle being applied to the close button. ## [0.2.2] - 2019-08-29 ## [0.2.1] - 2019-08-22 + ### Fixed + - Bug in IE11 ## [0.2.0] - 2019-08-12 + ### Added + - New `isFullWidth`, `slideDirection` and `maxWidth` props to `Drawer` component. - Support for `.openIconContainer`, `closeIconContainer` and `closeIconButton` CSS handles. ## [0.1.0] - 2019-07-01 + ### Added + - Allow `rich-text` and `flex-layout` blocks on drawer. ## [0.0.6] - 2019-06-07 + ### Fixed + - Fix typo on tachyons class. - Fix width of drawer. ## [0.0.5] - 2019-05-25 + ### Fixed + - Prevent scroll from locking when the Drawer is unmounted without being closed. - Add scroll to drawer element. - Locks scroll on iOS ## [0.0.4] - 2019-05-22 + ### Added + - Added category-menu to interfaces.json ## [0.0.3] - 2019-05-03 From 4613e9afef8eadc72272e0c4e42657db9d9eab5c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Enrique=20P=C3=A9rez?= Date: Wed, 6 Nov 2024 09:52:16 +0100 Subject: [PATCH 3/8] Release v0.19.0-hkignore.0 --- manifest.json | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/manifest.json b/manifest.json index 46f38ba..8ca25ad 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "name": "store-drawer", "vendor": "vtex", - "version": "0.18.0", + "version": "0.19.0-hkignore.0", "title": "Store Drawer", "description": "The VTEX Drawer", "builders": { @@ -17,8 +17,6 @@ "vtex.pixel-manager": "1.x" }, "mustUpdateAt": "2020-03-28", - "registries": [ - "smartcheckout" - ], + "registries": ["smartcheckout"], "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema" } From 9c94119345fdbb8f1635c2d80f764b3b691afdea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Enrique=20P=C3=A9rez?= Date: Wed, 6 Nov 2024 11:06:37 +0100 Subject: [PATCH 4/8] feat: replace skeleton component with and empty div --- react/Drawer.tsx | 3 +-- react/Skeleton.tsx | 27 --------------------------- 2 files changed, 1 insertion(+), 29 deletions(-) delete mode 100644 react/Skeleton.tsx diff --git a/react/Drawer.tsx b/react/Drawer.tsx index ea8e644..c904f35 100644 --- a/react/Drawer.tsx +++ b/react/Drawer.tsx @@ -23,7 +23,6 @@ import useLockScroll from './modules/useLockScroll' import DrawerCloseButton from './DrawerCloseButton' import { DrawerContextProvider } from './DrawerContext' import { isElementInsideLink } from './modules/isElementInsideLink' -import Skeleton from './Skeleton' const Swipable = React.lazy(() => import('./Swipable')) @@ -265,7 +264,7 @@ function Drawer(props: Props) { onClick={handleContainerClick} > {shouldRenderChildren && - (shouldRenderChildrenNow ? children : )} + (shouldRenderChildrenNow ? children : <>)}
{/* eslint-enable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
diff --git a/react/Skeleton.tsx b/react/Skeleton.tsx deleted file mode 100644 index db2b16a..0000000 --- a/react/Skeleton.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react' -import { useCssHandles } from 'vtex.css-handles' - -const CSS_HANDLES = ['skeletonContainer', 'skeletonItem'] as const - -function Skeleton() { - const handles = useCssHandles(CSS_HANDLES) - - return ( -
-
-
-
-
- ) -} - -export default Skeleton From 74a1ad8e8fb91ffcb3ddb8bae2740a3f57116a59 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Enrique=20P=C3=A9rez?= Date: Wed, 6 Nov 2024 11:07:11 +0100 Subject: [PATCH 5/8] chore: update changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 834eda9..ccae26a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ### Added -- Add skeleton component to Drawer +- Add skeleton component (empty div) to Drawer for improve performance ## [0.18.0] - 2024-11-01 From 5e9c96d0f64e34609eb04c9f6e0ca6e95d5477b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Enrique=20P=C3=A9rez?= Date: Wed, 6 Nov 2024 11:10:52 +0100 Subject: [PATCH 6/8] chore: update changelog --- CHANGELOG.md | 58 ---------------------------------------------------- 1 file changed, 58 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ccae26a..814c8c8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -34,193 +34,135 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. - Fixes of i18n on readme file. ## [0.16.2] - 2022-06-13 - ### Fixed - - Removed transition from in `"Overlay"`. ## [0.16.1] - 2022-02-14 ### Fixed - - Indicate the prop `text` in `"rich-text#open-drawer"`. ## [0.16.0] - 2021-06-02 - ### Added - - `renderingStrategy` prop to control when the drawer's children should be rendered ## [0.15.1] - 2021-03-10 - ### Fixed - - aria-hidden into `Swipable` ## [0.15.0] - 2020-12-04 - ### Added - - Prop for drawer close button: `text` ## [0.14.0] - 2020-09-08 - ### Added - - `customPixelEventId` prop. ## [0.13.0] - 2020-08-10 - ### Added - - CSS Handle for drawer overlay: `overlay` and `overlay--visible`. ## [0.12.1] - 2020-05-05 - ### Fixed - - Scrollbar showing even when there's no overflow. ## [0.12.0] - 2020-04-28 - ### Added - - `backdropMode` prop to `drawer`. ### Security - - Bump dependencies versions. ## [0.11.0] - 2020-04-28 - ### Added - - Class names with CSS Handles. ## [0.10.1] - 2020-04-01 - ### Changed - - Lock page scroll with `overflow: hidden` instead of fixing its position. ## [0.10.0] - 2020-03-30 - ### Added - - New CSS Handle `drawerContent` ## [0.9.0] - 2020-03-13 - ### Added - - New block `drawer-header` and `drawer-close-button`. ### Fixed - - Drawer trigger block never being rendered. ## [0.8.1] - 2020-03-11 - ### Fixed - - Correctly identify if animation is stopped or not. ## [0.8.0] - 2020-03-03 - ### Added - - New `drawer-trigger` interface. ## [0.7.0] - 2020-02-28 - ### Changed - - Drawer now closes on its own if the user clicks a link inside it. ## [0.6.1] - 2020-01-23 - ### Changed - - `useLockScroll` now blocks the scroll of the body element instead of the html. ## [0.6.0] - 2020-01-06 - ### Added - - Allows dragging from outside of the drawer. ### Changed - - Preserves momentum after swipe release. - Prevents rendering of content if the menu has not been opened. ### Fixed - - Issue where client rendering on the Portal component would be inconsistent with SSR. - "Accordeon effect" when opening the drawer, when the scrollbars are visible in the user's OS. ## [0.5.0] - 2019-12-27 - ### Changed - - Allow any block inside drawer. ## [0.4.0] - 2019-11-06 - ### Added - - Support for new values for `slideDirection` prop: `'rightToLeft'` and `'leftToRight'`. ## [0.3.0] - 2019-10-18 - ### Added - - New `childrenContainer` CSS handle. ### Fixed - - Wrong CSS handle being applied to the close button. ## [0.2.2] - 2019-08-29 ## [0.2.1] - 2019-08-22 - ### Fixed - - Bug in IE11 ## [0.2.0] - 2019-08-12 - ### Added - - New `isFullWidth`, `slideDirection` and `maxWidth` props to `Drawer` component. - Support for `.openIconContainer`, `closeIconContainer` and `closeIconButton` CSS handles. ## [0.1.0] - 2019-07-01 - ### Added - - Allow `rich-text` and `flex-layout` blocks on drawer. ## [0.0.6] - 2019-06-07 - ### Fixed - - Fix typo on tachyons class. - Fix width of drawer. ## [0.0.5] - 2019-05-25 - ### Fixed - - Prevent scroll from locking when the Drawer is unmounted without being closed. - Add scroll to drawer element. - Locks scroll on iOS ## [0.0.4] - 2019-05-22 - ### Added - - Added category-menu to interfaces.json ## [0.0.3] - 2019-05-03 From a5eba6baa838cab49db1eb0b4837eae592082fc9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Enrique=20P=C3=A9rez?= Date: Wed, 6 Nov 2024 11:11:25 +0100 Subject: [PATCH 7/8] Release v0.19.0-hkignore.1 --- manifest.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/manifest.json b/manifest.json index 8ca25ad..85c10db 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "name": "store-drawer", "vendor": "vtex", - "version": "0.19.0-hkignore.0", + "version": "0.19.0-hkignore.1", "title": "Store Drawer", "description": "The VTEX Drawer", "builders": { From 04faf0d7e062a970de6e07821e5afaafb0caa0e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Enrique=20P=C3=A9rez?= Date: Thu, 7 Nov 2024 14:48:04 +0100 Subject: [PATCH 8/8] chore: revert version --- manifest.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/manifest.json b/manifest.json index 85c10db..50b4bbb 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "name": "store-drawer", "vendor": "vtex", - "version": "0.19.0-hkignore.1", + "version": "0.18.0", "title": "Store Drawer", "description": "The VTEX Drawer", "builders": {