From 2c4c589d5273a8c2f14b26334061dae0d640c8df Mon Sep 17 00:00:00 2001 From: VitalyDevico <96239692+VitalyDevico@users.noreply.github.com> Date: Tue, 23 Jan 2024 09:55:55 +0200 Subject: [PATCH 1/4] =?UTF-8?q?X2-8303=20|=20X2-8266=20|=20X2-8421=20|=20r?= =?UTF-8?q?efactor=20sidebar=20to=20control=20drawers=20fro=E2=80=A6=20(#3?= =?UTF-8?q?00)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * X2-8303 | X2-8266 | X2-8421 | refactor sidebar to control drawers from outside * addressed PR feedback, adjusted sidebar story --- src/components/Sidebar/Sidebar.jsx | 59 +++++------------------ src/stories/Navigation/Sidebar.stories.js | 37 +++++++++++++- 2 files changed, 46 insertions(+), 50 deletions(-) diff --git a/src/components/Sidebar/Sidebar.jsx b/src/components/Sidebar/Sidebar.jsx index bc9682167..bae713f48 100644 --- a/src/components/Sidebar/Sidebar.jsx +++ b/src/components/Sidebar/Sidebar.jsx @@ -1,6 +1,6 @@ import clsx from "clsx"; import PropTypes from "prop-types"; -import React, { useState, useEffect } from "react"; +import React from "react"; import { AnnounceIcon } from "../../icons/AnnounceIcon"; import { BellIcon } from "../../icons/BellIcon"; import { XolaLogoSimple } from "../../images/XolaLogoSimple"; @@ -29,52 +29,12 @@ export const Sidebar = ({ onLogoClick, isStickyHeader = true, isStickyFooter = true, + isLeftDrawerOpen, + isRightDrawerOpen, + handleDrawerStateChange, }) => { - const [isLeftDrawerOpen, setIsLeftDrawerOpen] = useState(false); - const [isRightDrawerOpen, setIsRightDrawerOpen] = useState(false); - - useEffect(() => { - setIsLeftDrawerOpen(false); // Close the drawer if notifications changes - setIsRightDrawerOpen(false); - }, [notifications]); - - const toggleLeftDrawer = () => { - if (!isLeftDrawerOpen) { - // Close the right drawer when you open the left - setIsRightDrawerOpen(false); - } - - setIsLeftDrawerOpen(!isLeftDrawerOpen); - }; - - const toggleRightDrawer = () => { - if (!isRightDrawerOpen) { - // Close the left drawer when you open the right - setIsLeftDrawerOpen(false); - } - - setIsRightDrawerOpen(!isRightDrawerOpen); - }; - const { announcements: leftDrawer, notices: rightDrawer } = notifications ?? {}; const hideRightDrawer = rightDrawer?.count <= 0 || !rightDrawer; - - const handleOnClose = (direction, closeDrawer) => { - if (direction === "left") { - if (closeDrawer) { - setIsLeftDrawerOpen(false); - } - - leftDrawer.onClose?.(); - } else { - if (closeDrawer) { - setIsRightDrawerOpen(false); - } - - rightDrawer.onClose?.(); - } - }; - const isStickyHeaderFooter = isStickyHeader && isStickyFooter; return ( @@ -97,7 +57,7 @@ export const Sidebar = ({ > {leftDrawer && (
- + handleDrawerStateChange("left")}> {leftDrawer.count} @@ -106,7 +66,7 @@ export const Sidebar = ({ {rightDrawer && (
- + handleDrawerStateChange("right")}> {rightDrawer.count} @@ -123,7 +83,7 @@ export const Sidebar = ({ title={leftDrawer.title} content={leftDrawer.content} isOpen={isLeftDrawerOpen} - onClose={(e) => handleOnClose("left", !!e)} + onClose={(e) => !!e && handleDrawerStateChange("left")} /> )} @@ -135,7 +95,7 @@ export const Sidebar = ({ title={rightDrawer.title} content={rightDrawer.content} isOpen={isRightDrawerOpen} - onClose={(e) => handleOnClose("right", !!e)} + onClose={(e) => !!e && handleDrawerStateChange("right")} /> )} @@ -169,6 +129,9 @@ Sidebar.propTypes = { isStickyHeader: PropTypes.bool, isStickyFooter: PropTypes.bool, onLogoClick: PropTypes.func.isRequired, + isLeftDrawerOpen: PropTypes.bool, + isRightDrawerOpen: PropTypes.bool, + handleDrawerStateChange: PropTypes.func, notifications: PropTypes.shape({ announcements: PropTypes.shape({ count: PropTypes.number, diff --git a/src/stories/Navigation/Sidebar.stories.js b/src/stories/Navigation/Sidebar.stories.js index 9cd12bae7..7aa176e4f 100644 --- a/src/stories/Navigation/Sidebar.stories.js +++ b/src/stories/Navigation/Sidebar.stories.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState } from "react"; import { AnnounceIcon, CheckIcon, HelpCenterIcon, LogoutIcon, PolicyIcon, Sidebar, StarIcon, UserIcon } from "../.."; const SidebarStories = { @@ -103,6 +103,9 @@ export const CustomLogo = () => { }; export const SidebarWithNotifications = () => { + const [isLeftDrawerOpen, setIsLeftDrawerOpen] = useState(false); + const [isRightDrawerOpen, setIsRightDrawerOpen] = useState(false); + const notifications = { announcements: { count: 1, @@ -114,11 +117,41 @@ export const SidebarWithNotifications = () => { count: 32, content:
Some content
, title: "Notifications & Pending items", + onClose: () => console.log("Notifications closed"), }, }; + + const handleDrawerStateChange = (drawer?: "left" | "right") => { + if (drawer === "left") { + if (isRightDrawerOpen) { + setIsRightDrawerOpen(false); + notifications.notices.onClose(); + } else if (isLeftDrawerOpen) { + notifications.announcements.onClose(); + } + + setIsLeftDrawerOpen(!isLeftDrawerOpen); + } else if (drawer === "right") { + if (isLeftDrawerOpen) { + setIsLeftDrawerOpen(false); + notifications.announcements.onClose(); + } else if (isRightDrawerOpen) { + notifications.notices.onClose(); + } + + setIsRightDrawerOpen(!isRightDrawerOpen); + } + }; return (
- } notifications={notifications} onLogoClick={handleLogoClick}> + } + notifications={notifications} + isLeftDrawerOpen={isLeftDrawerOpen} + isRightDrawerOpen={isRightDrawerOpen} + handleDrawerStateChange={handleDrawerStateChange} + onLogoClick={handleLogoClick} + > Sellers From e2ff2ae499a1e6cd219399a0f32f7bcb90666793 Mon Sep 17 00:00:00 2001 From: Tanushree Chakravarty Date: Tue, 23 Jan 2024 13:51:14 +0530 Subject: [PATCH 2/4] 2.1.41 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index f7ef16d99..3f90c8622 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@xola/ui-kit", - "version": "2.1.39", + "version": "2.1.41", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@xola/ui-kit", - "version": "2.1.39", + "version": "2.1.41", "license": "MIT", "dependencies": { "@headlessui/react": "^1.4.0", diff --git a/package.json b/package.json index e99c8b548..c75d4b2a0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@xola/ui-kit", - "version": "2.1.39", + "version": "2.1.41", "description": "Xola UI Kit", "license": "MIT", "files": [ From 3da30bfb28d5af68ddf2f687fc91674f9d6c35fb Mon Sep 17 00:00:00 2001 From: Karthick <102132250+KarthickXola@users.noreply.github.com> Date: Wed, 14 Feb 2024 13:35:35 +0530 Subject: [PATCH 3/4] X2-8931 Make a Purchase>Questionnaire: No Highlights Reflected When Pressing Tab to Move To Another Field (#306) removed important --- src/components/Forms/BaseInput.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Forms/BaseInput.jsx b/src/components/Forms/BaseInput.jsx index 50ab733f0..fcae97084 100644 --- a/src/components/Forms/BaseInput.jsx +++ b/src/components/Forms/BaseInput.jsx @@ -25,7 +25,7 @@ export const BaseInput = ({ as: Tag, size = "medium", isError, className, isRequ sizes[size], isError ? "!focus:border-danger !border-danger focus:ring-0 focus:ring-danger" - : "!border-gray-light focus:border-primary focus:ring-0 focus:ring-primary", + : "border-gray-light focus:border-primary focus:ring-0 focus:ring-primary", className, )} value={value} From 78657b50f7ad75d000f97cae806dc76554e4e78b Mon Sep 17 00:00:00 2001 From: Tanushree Chakravarty Date: Wed, 14 Feb 2024 13:56:52 +0530 Subject: [PATCH 4/4] 2.1.42 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3f90c8622..e322465e1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@xola/ui-kit", - "version": "2.1.41", + "version": "2.1.42", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@xola/ui-kit", - "version": "2.1.41", + "version": "2.1.42", "license": "MIT", "dependencies": { "@headlessui/react": "^1.4.0", diff --git a/package.json b/package.json index c75d4b2a0..793f62c6e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@xola/ui-kit", - "version": "2.1.41", + "version": "2.1.42", "description": "Xola UI Kit", "license": "MIT", "files": [