diff --git a/packages/base/Drawer/src/Drawer/Drawer.tsx b/packages/base/Drawer/src/Drawer/Drawer.tsx index 06559bff1f..36c33adac8 100644 --- a/packages/base/Drawer/src/Drawer/Drawer.tsx +++ b/packages/base/Drawer/src/Drawer/Drawer.tsx @@ -2,17 +2,14 @@ import React, { useRef } from 'react' import { Modal } from '@mui/base/Modal' import cx from 'classnames' import type { BaseProps, TransitionProps } from '@toptal/picasso-shared' -import { useDrawer, usePicassoRoot } from '@toptal/picasso-provider' +import { usePicassoRoot } from '@toptal/picasso-provider' import type { ReactNode } from 'react' import { CloseMinor16 } from '@toptal/picasso-icons' import { ButtonCircular } from '@toptal/picasso-button' import { Slide } from '@toptal/picasso-slide' import { Backdrop } from '@toptal/picasso-backdrop' import { Container } from '@toptal/picasso-container' -import { - useIsomorphicLayoutEffect, - usePageScrollLock, -} from '@toptal/picasso-utils' +import { usePageScrollLock } from '@toptal/picasso-utils' import type { AnchorType, WidthType } from '../types' import { DrawerTitle } from '../DrawerTitle' @@ -76,22 +73,11 @@ export const Drawer = (props: Props) => { 'data-testid': testId, 'data-private': dataPrivate, } = props - const { setHasDrawer } = useDrawer() const container = usePicassoRoot() const ref = useRef(null) usePageScrollLock(Boolean(maintainBodyScrollLock && open)) - useIsomorphicLayoutEffect(() => { - setHasDrawer(open) - - const cleanup = () => { - setHasDrawer(false) - } - - return cleanup - }, [open, setHasDrawer]) - const handleOnClose = () => { if (onClose) { onClose() diff --git a/packages/base/Page/src/Page/Page.tsx b/packages/base/Page/src/Page/Page.tsx index e42af8efd3..882f08cbb4 100644 --- a/packages/base/Page/src/Page/Page.tsx +++ b/packages/base/Page/src/Page/Page.tsx @@ -1,5 +1,5 @@ import type { ReactNode, HTMLAttributes } from 'react' -import React, { forwardRef } from 'react' +import React, { forwardRef, useContext, useState } from 'react' import type { Theme } from '@material-ui/core/styles' import { makeStyles } from '@material-ui/core/styles' import cx from 'classnames' @@ -21,7 +21,50 @@ export interface Props extends BaseProps, HTMLAttributes { hamburgerId?: string } -export const PageContext = React.createContext({}) +export const PageContext = React.createContext({ + hasSidebar: false, + setHasSidebar: () => {}, + hasTopBar: false, + setHasTopBar: () => {}, +}) + +export const usePageContext = (): PageContextProps => { + const { + hasSidebar, + setHasSidebar, + width, + fullWidth, + hasTopBar, + setHasTopBar, + } = useContext(PageContext) + + return { + width, + fullWidth, + hasSidebar, + setHasSidebar, + hasTopBar, + setHasTopBar, + } +} + +export const useSidebar = () => { + const { hasSidebar, setHasSidebar } = useContext(PageContext) + + return { + hasSidebar, + setHasSidebar, + } +} + +export const usePageTopBar = () => { + const { hasTopBar, setHasTopBar } = useContext(PageContext) + + return { + hasTopBar, + setHasTopBar, + } +} const useStyles = makeStyles(styles, { name: 'Page', @@ -43,6 +86,9 @@ export const Page = forwardRef(function Page( } = props const classes = useStyles() + const [hasSidebar, setHasSidebar] = useState(false) + const [hasTopBar, setHasTopBar] = useState(false) + return (
(function Page( )} style={{ ...style } as React.CSSProperties} > - + {children} diff --git a/packages/base/Page/src/Page/types.ts b/packages/base/Page/src/Page/types.ts index 60aa60f447..a6e48929ed 100644 --- a/packages/base/Page/src/Page/types.ts +++ b/packages/base/Page/src/Page/types.ts @@ -1,6 +1,13 @@ export type ViewportWidthType = 'wide' | 'full' -export interface PageContextProps { +export type ViewportWidth = { fullWidth?: boolean width?: ViewportWidthType } + +export type PageContextProps = ViewportWidth & { + hasSidebar: boolean + setHasSidebar: (value: boolean) => void + hasTopBar: boolean + setHasTopBar: (value: boolean) => void +} diff --git a/packages/base/Page/src/PageContent/PageContent.tsx b/packages/base/Page/src/PageContent/PageContent.tsx index 25297b211a..06e89611a0 100644 --- a/packages/base/Page/src/PageContent/PageContent.tsx +++ b/packages/base/Page/src/PageContent/PageContent.tsx @@ -1,11 +1,9 @@ import type { ReactNode, HTMLAttributes } from 'react' -import React, { useContext, forwardRef } from 'react' +import React, { forwardRef } from 'react' import type { BaseProps } from '@toptal/picasso-shared' -import { useSidebar } from '@toptal/picasso-provider' import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge' -import { PageContext } from '../Page' -import type { PageContextProps } from '../Page/types' +import { usePageContext, useSidebar } from '../Page/Page' import { getMaxWidthClass } from './styles' export interface Props extends BaseProps, HTMLAttributes { @@ -19,7 +17,7 @@ export const PageContent = forwardRef( function PageContent(props, ref) { const { children, className, style, flex, ...rest } = props - const { width, fullWidth } = useContext(PageContext) + const { width, fullWidth } = usePageContext() const { hasSidebar } = useSidebar() const innerClassName = twJoin( diff --git a/packages/base/Page/src/PageContent/styles.ts b/packages/base/Page/src/PageContent/styles.ts index 7ba572616b..716a16bd20 100644 --- a/packages/base/Page/src/PageContent/styles.ts +++ b/packages/base/Page/src/PageContent/styles.ts @@ -1,6 +1,6 @@ -import type { PageContextProps } from '../Page/types' +import type { ViewportWidth } from '../Page/types' -export const getMaxWidthClass = ({ fullWidth, width }: PageContextProps) => { +export const getMaxWidthClass = ({ fullWidth, width }: ViewportWidth) => { if (fullWidth || width === 'full') { return 'max-w-full' } diff --git a/packages/base/Page/src/PageFooter/PageFooter.tsx b/packages/base/Page/src/PageFooter/PageFooter.tsx index 62410780a0..08c8d5eb4f 100644 --- a/packages/base/Page/src/PageFooter/PageFooter.tsx +++ b/packages/base/Page/src/PageFooter/PageFooter.tsx @@ -1,11 +1,10 @@ import type { ReactNode, HTMLAttributes } from 'react' -import React, { useContext, forwardRef } from 'react' +import React, { forwardRef } from 'react' import type { BaseProps } from '@toptal/picasso-shared' import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge' -import { PageContext } from '../Page' -import type { PageContextProps } from '../Page/types' import { getMaxWidthClass } from './styles' +import { usePageContext } from '../Page/Page' export interface Props extends BaseProps, HTMLAttributes { /** Content for copyright. You can override default if needed. */ @@ -19,7 +18,7 @@ export const PageFooter = forwardRef(function PageFooter( ref ) { const { className, style, rightContent, copyrightContent, ...rest } = props - const { width, fullWidth } = useContext(PageContext) + const { width, fullWidth } = usePageContext() const contentClassnames = twJoin( getMaxWidthClass({ width, fullWidth }), diff --git a/packages/base/Page/src/PageFooter/styles.ts b/packages/base/Page/src/PageFooter/styles.ts index 6655cd1cab..c5bc041d21 100644 --- a/packages/base/Page/src/PageFooter/styles.ts +++ b/packages/base/Page/src/PageFooter/styles.ts @@ -1,6 +1,6 @@ -import type { PageContextProps } from '../Page/types' +import type { ViewportWidth } from '../Page/types' -export const getMaxWidthClass = ({ fullWidth, width }: PageContextProps) => { +export const getMaxWidthClass = ({ fullWidth, width }: ViewportWidth) => { if (fullWidth || width === 'full') { return 'max-w-full' } diff --git a/packages/base/Page/src/PageSidebar/PageSidebar.tsx b/packages/base/Page/src/PageSidebar/PageSidebar.tsx index 6e43a53d01..bb65a846f6 100644 --- a/packages/base/Page/src/PageSidebar/PageSidebar.tsx +++ b/packages/base/Page/src/PageSidebar/PageSidebar.tsx @@ -1,4 +1,3 @@ -import { useSidebar, usePageTopBar } from '@toptal/picasso-provider' import type { BaseProps, SizeType } from '@toptal/picasso-shared' import { twMerge } from '@toptal/picasso-tailwind-merge' import type { ReactNode } from 'react' @@ -6,6 +5,7 @@ import React, { forwardRef, useCallback, useEffect, useState } from 'react' import { Container } from '@toptal/picasso-container' import { noop } from '@toptal/picasso-utils' +import { useSidebar, usePageTopBar } from '../Page/Page' import { PageHamburgerPortal, useHamburgerContext } from '../PageHamburger' import { SidebarItem } from '../SidebarItem' import { SidebarLogo } from '../SidebarLogo' diff --git a/packages/base/Page/src/PageTopBar/PageTopBar.tsx b/packages/base/Page/src/PageTopBar/PageTopBar.tsx index 1bdc37d619..78a2a025ca 100644 --- a/packages/base/Page/src/PageTopBar/PageTopBar.tsx +++ b/packages/base/Page/src/PageTopBar/PageTopBar.tsx @@ -4,8 +4,6 @@ import React, { useContext, forwardRef, useEffect } from 'react' import cx from 'classnames' import type { BaseProps } from '@toptal/picasso-shared' import { - usePageTopBar, - useSidebar, usePreventPageWidthChangeOnScrollbar, useScreenSize, } from '@toptal/picasso-provider' @@ -16,6 +14,7 @@ import { Container } from '@toptal/picasso-container' import { Typography } from '@toptal/picasso-typography' import { useIsomorphicLayoutEffect } from '@toptal/picasso-utils' +import { useSidebar, usePageTopBar } from '../Page/Page' import { PageContext } from '../Page' import type { PageContextProps } from '../Page' import { diff --git a/packages/picasso-provider/src/Picasso/NotificationsProvider/NotificationsProvider.tsx b/packages/picasso-provider/src/Picasso/NotificationsProvider/NotificationsProvider.tsx index 5b5ea860e1..65117515f4 100644 --- a/packages/picasso-provider/src/Picasso/NotificationsProvider/NotificationsProvider.tsx +++ b/packages/picasso-provider/src/Picasso/NotificationsProvider/NotificationsProvider.tsx @@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core/styles' import { SnackbarProvider } from 'notistack' import React from 'react' -import { useDrawer, usePageTopBar } from '../RootContext' +//import { useDrawer, usePageTopBar } from '../RootContext' import styles from './styles' const useStyles = makeStyles(styles, { @@ -24,12 +24,12 @@ const NotificationsProvider = ({ container, maxNotifications = 5, }: NotificationsProviderProps) => { - const { hasTopBar } = usePageTopBar() - const { hasDrawer } = useDrawer() + //const { hasTopBar } = usePageTopBar() + //const { hasDrawer } = useDrawer() const classes = useStyles() - const containerAnchorOriginTop = - hasTopBar && !hasDrawer ? classes.rootWithMargin : undefined + const containerAnchorOriginTop = undefined + //hasTopBar && !hasDrawer ? classes.rootWithMargin : undefined return ( ({ rootRef, currentBreakpointRange, - hasTopBar: false, - setHasTopBar: (hasTopBar: boolean) => { - setContextValue(context => ({ - ...context, - hasTopBar, - })) - }, environment, titleCase, - hasDrawer: false, - setHasDrawer: (hasDrawer: boolean) => { - setContextValue(context => ({ - ...context, - hasDrawer, - })) - }, - hasSidebar: false, - setHasSidebar: (hasSidebar: boolean) => { - setContextValue(context => ({ - ...context, - hasSidebar, - })) - }, disableTransitions, preventPageWidthChangeOnScrollbar, }) diff --git a/packages/picasso-provider/src/Picasso/RootContext.ts b/packages/picasso-provider/src/Picasso/RootContext.ts index cca9160595..01e959e3ee 100644 --- a/packages/picasso-provider/src/Picasso/RootContext.ts +++ b/packages/picasso-provider/src/Picasso/RootContext.ts @@ -6,27 +6,15 @@ import type { BreakpointKeys } from './config' export interface RootContextProps extends TextLabelProps { rootRef?: RefObject - hasTopBar: boolean - setHasTopBar: (value: boolean) => void - hasSidebar: boolean - setHasSidebar: (value: boolean) => void environment: EnvironmentType<'test' | 'temploy'> - hasDrawer: boolean - setHasDrawer: (value: boolean) => void disableTransitions?: boolean currentBreakpointRange?: BreakpointKeys preventPageWidthChangeOnScrollbar?: boolean } export const RootContext = React.createContext({ - hasTopBar: false, - setHasTopBar: () => {}, - hasSidebar: false, - setHasSidebar: () => {}, environment: 'development', titleCase: false, - hasDrawer: false, - setHasDrawer: () => {}, disableTransitions: false, currentBreakpointRange: undefined, }) @@ -37,33 +25,6 @@ export const usePicassoRoot = () => { return context && context.rootRef ? context.rootRef.current : null } -export const usePageTopBar = () => { - const context = useContext(RootContext) - - return { - hasTopBar: context.hasTopBar, - setHasTopBar: context.setHasTopBar, - } -} - -export const useDrawer = () => { - const context = useContext(RootContext) - - return { - hasDrawer: context.hasDrawer, - setHasDrawer: context.setHasDrawer, - } -} - -export const useSidebar = () => { - const context = useContext(RootContext) - - return { - hasSidebar: context.hasSidebar, - setHasSidebar: context.setHasSidebar, - } -} - export const useAppConfig = () => { const context = useContext(RootContext) diff --git a/packages/picasso-provider/src/index.ts b/packages/picasso-provider/src/index.ts index 511413e23e..62d70f2f84 100644 --- a/packages/picasso-provider/src/index.ts +++ b/packages/picasso-provider/src/index.ts @@ -44,10 +44,7 @@ export { default as PicassoProvider } from './Picasso/PicassoProvider' export { usePicassoRoot, - usePageTopBar, useAppConfig, - useDrawer, - useSidebar, useCurrentBreakpointRange, usePreventPageWidthChangeOnScrollbar, RootContext,