From 305901cbe6ce412d1349381fd58ce082c3cd710a Mon Sep 17 00:00:00 2001 From: hiba-aldalaty Date: Mon, 22 Nov 2021 14:43:18 +0000 Subject: [PATCH] Modify SidebarContextType to reduce api surface + update api-report Signed-off-by: hiba-aldalaty --- packages/core-components/api-report.md | 15 +++++++++++++-- .../src/layout/Sidebar/Bar.tsx | 19 +++++++++++-------- .../src/layout/Sidebar/Submenu.tsx | 14 +++++++++++++- .../src/layout/Sidebar/config.ts | 6 ++---- .../src/layout/Sidebar/index.ts | 2 ++ plugins/shortcuts/src/ShortcutItem.test.tsx | 4 +--- plugins/shortcuts/src/Shortcuts.test.tsx | 4 +--- 7 files changed, 43 insertions(+), 21 deletions(-) diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index 4cfab11374..b71d29e2a6 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -838,8 +838,7 @@ export const SidebarContext: Context; // @public (undocumented) export type SidebarContextType = { isOpen: boolean; - handleOpen: () => any; - handleClose: () => any; + setOpen: (open: boolean) => void; }; // Warning: (ae-missing-release-tag) "SidebarDivider" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) @@ -2109,6 +2108,18 @@ export type StructuredMetadataTableListClassKey = 'root'; // @public (undocumented) export type StructuredMetadataTableNestedListClassKey = 'root'; +// @public +export const Submenu: ({ + title, + children, +}: PropsWithChildren) => JSX.Element; + +// @public +export type SubmenuProps = { + title?: string; + children: ReactNode; +}; + // Warning: (ae-forgotten-export) The symbol "SubvalueCellProps" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "SubvalueCell" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // diff --git a/packages/core-components/src/layout/Sidebar/Bar.tsx b/packages/core-components/src/layout/Sidebar/Bar.tsx index a4cd4349a2..775c537695 100644 --- a/packages/core-components/src/layout/Sidebar/Bar.tsx +++ b/packages/core-components/src/layout/Sidebar/Bar.tsx @@ -148,6 +148,14 @@ export function Sidebar(props: PropsWithChildren) { const isOpen = (state === State.Open && !isSmallScreen) || isPinned; + const setOpen = (open: boolean) => { + if (open) { + handleOpen(); + } else { + handleClose(); + } + }; + return (
) {
) { */ export const SidebarExpandButton = () => { const classes = useStyles(); - const { isOpen, handleOpen, handleClose } = useContext(SidebarContext); + const { isOpen, setOpen } = useContext(SidebarContext); const { isPinned } = useContext(SidebarPinStateContext); const isSmallScreen = useMediaQuery(theme => theme.breakpoints.down('md'), ); const handleClick = () => { - if (isOpen) { - handleClose(); - } else { - handleOpen(); - } + setOpen(!isOpen); }; if (isPinned || isSmallScreen) { diff --git a/packages/core-components/src/layout/Sidebar/Submenu.tsx b/packages/core-components/src/layout/Sidebar/Submenu.tsx index 73033164b4..7db0eab17d 100644 --- a/packages/core-components/src/layout/Sidebar/Submenu.tsx +++ b/packages/core-components/src/layout/Sidebar/Submenu.tsx @@ -67,10 +67,22 @@ const useStyles = (props: { left: number }) => }, })); -type SubmenuProps = { +/** + * Holds a title for text Header of a Submenu and children + * components to be rendered inside Submenu + * + * @public + */ +export type SubmenuProps = { title?: string; children: ReactNode; }; + +/** + * Used inside SidebarItem to display an expandable Submenu + * + * @public + */ export const Submenu = ({ title, children, diff --git a/packages/core-components/src/layout/Sidebar/config.ts b/packages/core-components/src/layout/Sidebar/config.ts index f9eea08ec2..c4f73d0a9d 100644 --- a/packages/core-components/src/layout/Sidebar/config.ts +++ b/packages/core-components/src/layout/Sidebar/config.ts @@ -59,14 +59,12 @@ export const SIDEBAR_INTRO_LOCAL_STORAGE = export type SidebarContextType = { isOpen: boolean; - handleOpen: () => any; - handleClose: () => any; + setOpen: (open: boolean) => void; }; export const SidebarContext = createContext({ isOpen: false, - handleOpen: () => {}, - handleClose: () => {}, + setOpen: _open => {}, }); export type ItemWithSubmenuContextType = { diff --git a/packages/core-components/src/layout/Sidebar/index.ts b/packages/core-components/src/layout/Sidebar/index.ts index f816b8f7f4..f8025e3295 100644 --- a/packages/core-components/src/layout/Sidebar/index.ts +++ b/packages/core-components/src/layout/Sidebar/index.ts @@ -16,6 +16,8 @@ export { Sidebar, SidebarExpandButton } from './Bar'; export { SidebarSubItem } from './SidebarSubItem'; +export { Submenu } from './Submenu'; +export type { SubmenuProps } from './Submenu'; export type { SidebarSubItemProps, DropDownItem } from './SidebarSubItem'; export type { SidebarClassKey } from './Bar'; export { SidebarPage, SidebarPinStateContext } from './Page'; diff --git a/plugins/shortcuts/src/ShortcutItem.test.tsx b/plugins/shortcuts/src/ShortcutItem.test.tsx index c8f5e4b0ca..e080026f00 100644 --- a/plugins/shortcuts/src/ShortcutItem.test.tsx +++ b/plugins/shortcuts/src/ShortcutItem.test.tsx @@ -37,9 +37,7 @@ describe('ShortcutItem', () => { it('displays the shortcut', async () => { await renderInTestApp( - {}, handleClose: () => {} }} - > + {} }}> , ); diff --git a/plugins/shortcuts/src/Shortcuts.test.tsx b/plugins/shortcuts/src/Shortcuts.test.tsx index f0c85aaf5f..692040027c 100644 --- a/plugins/shortcuts/src/Shortcuts.test.tsx +++ b/plugins/shortcuts/src/Shortcuts.test.tsx @@ -30,9 +30,7 @@ const apis = ApiRegistry.from([ describe('Shortcuts', () => { it('displays an add button', async () => { await renderInTestApp( - {}, handleClose: () => {} }} - > + {} }}>