From 3cfc87a5da357e394b8f05eaef1e22d192793444 Mon Sep 17 00:00:00 2001 From: TheoryOfNekomata Date: Fri, 28 May 2021 09:30:07 +0800 Subject: [PATCH] Add area customization The props for styling areas of layouts have been added, with sensible low-specificity default styles added. --- example/layouts/basic/index.tsx | 12 ++ .../layouts/left-sidebar-with-menu/index.tsx | 42 ++++ example/layouts/left-sidebar/index.tsx | 16 ++ example/package.json | 1 + package.json | 2 +- src/layouts/Basic/index.tsx | 3 + src/layouts/BasicNarrow/index.tsx | 3 + src/layouts/LeftSidebar/index.tsx | 21 +- src/layouts/LeftSidebarWithMenu/index.tsx | 186 ++++++++++-------- src/layouts/RightSidebarStatic/index.tsx | 16 +- src/widgets/TopBar/index.tsx | 65 +++--- 11 files changed, 251 insertions(+), 116 deletions(-) diff --git a/example/layouts/basic/index.tsx b/example/layouts/basic/index.tsx index d4b0c9f..47b5ea8 100644 --- a/example/layouts/basic/index.tsx +++ b/example/layouts/basic/index.tsx @@ -1,15 +1,27 @@ import * as React from 'react' import * as ReactDOM from 'react-dom'; import ReactMarkdown from 'react-markdown' +import styled from 'styled-components'; import Brand from '../../components/Brand'; import { Basic } from '../../..'; +const TopBar = styled('div')({ + backgroundColor: 'black', + color: 'white', + boxShadow: '0 0 0.25rem rgba(0,0,0,0.25)', + 'a': { + color: 'inherit', + textDecoration: 'none', + } +}) + const Page = () => { return ( } + topBarComponent={TopBar} topBarCenter={
{ const [sidebarMainOpen, setSidebarMainOpen] = React.useState(location.hash === '#sidebar') @@ -23,6 +63,8 @@ const Page = () => { return ( { const [sidebarMainOpen, setSidebarMainOpen] = React.useState(location.hash === '#sidebar') @@ -78,6 +93,7 @@ const Page = () => { } + sidebarMainComponent={SidebarMainComponent} > = ({ brand, userLink, topBarCenter, + topBarComponent = 'div', children, }) => { return ( @@ -44,6 +46,7 @@ export const Layout: React.FC = ({ {topBarCenter} diff --git a/src/layouts/BasicNarrow/index.tsx b/src/layouts/BasicNarrow/index.tsx index 49b99a3..1cb92df 100644 --- a/src/layouts/BasicNarrow/index.tsx +++ b/src/layouts/BasicNarrow/index.tsx @@ -23,12 +23,14 @@ type Props = { brand?: React.ReactNode, userLink?: React.ReactNode, topBarCenter?: React.ReactChild, + topBarComponent?: React.ElementType, } export const Layout: React.FC = ({ brand, userLink, topBarCenter, + topBarComponent = 'div', children, }) => { return ( @@ -45,6 +47,7 @@ export const Layout: React.FC = ({ span="narrow" brand={brand} userLink={userLink} + baseComponent={topBarComponent} > {topBarCenter} diff --git a/src/layouts/LeftSidebar/index.tsx b/src/layouts/LeftSidebar/index.tsx index 87f3e72..e742ab2 100644 --- a/src/layouts/LeftSidebar/index.tsx +++ b/src/layouts/LeftSidebar/index.tsx @@ -42,8 +42,12 @@ const SidebarBase = styled('div')({ left: '-100%', width: '100%', height: '100%', - overflow: 'hidden', - backgroundColor: 'var(--color-bg, white)', + '> *': { + display: 'block', + width: '100%', + height: '100%', + backgroundColor: 'white', + }, [minWidthFactor(3)]: { width: `calc(50% - ${configVar('base-width')} * 0.5)`, left: 0, @@ -86,6 +90,8 @@ type Props = { menuLink?: React.ReactNode, userLink?: React.ReactNode, topBarCenter?: React.ReactChild, + topBarComponent?: React.ElementType, + sidebarMainComponent?: React.ElementType, } export const Layout: React.FC = ({ @@ -96,6 +102,8 @@ export const Layout: React.FC = ({ userLink, topBarCenter, children, + topBarComponent: TopBarComponent = 'div', + sidebarMainComponent: SidebarMainComponent = 'div', }) => { const LeftSidebarComponent = sidebarMainOpen ? OpenSidebarBase : SidebarBase @@ -113,13 +121,16 @@ export const Layout: React.FC = ({ brand={brand} menuLink={menuLink} userLink={userLink} + baseComponent={TopBarComponent} > {topBarCenter} - - {sidebarMain} - + + + {sidebarMain} + + {children} diff --git a/src/layouts/LeftSidebarWithMenu/index.tsx b/src/layouts/LeftSidebarWithMenu/index.tsx index 9af2ea3..eba977e 100644 --- a/src/layouts/LeftSidebarWithMenu/index.tsx +++ b/src/layouts/LeftSidebarWithMenu/index.tsx @@ -31,7 +31,6 @@ const SidebarBase = styled('div')({ overflow: 'hidden', display: 'contents', left: `calc(${configVar('base-width')} * -1)`, - backgroundColor: 'var(--color-bg, white)', [minWidthFactor(3)]: { position: 'fixed', top: 0, @@ -49,15 +48,8 @@ const SidebarMain = styled('div')({ right: '100%', width: '100%', height: '100%', - overflow: 'auto', - // overflow: 'overlay', paddingTop: 'inherit', paddingBottom: 'var(--size-menu, 4rem)', - scrollbarWidth: 'none', - '::-webkit-scrollbar': { - display: 'none', - }, - backgroundColor: 'var(--color-bg, white)', [minWidthFactor(3)]: { position: 'absolute', right: 0, @@ -65,6 +57,23 @@ const SidebarMain = styled('div')({ marginLeft: 'auto', paddingBottom: 0, }, + '> *': { + display: 'block', + width: '100%', + height: '100%', + backgroundColor: 'white', + }, +}) + +const SidebarMainOverflow = styled('div')({ + width: '100%', + height: '100%', + overflow: 'auto', + // overflow: 'overlay', + scrollbarWidth: 'none', + '::-webkit-scrollbar': { + display: 'none', + }, }) const OpenSidebarMain = styled(SidebarMain)({ @@ -85,7 +94,12 @@ const SidebarMenu = styled('div')({ width: '100%', height: 'var(--size-menu, 4rem)', zIndex: 1, - backgroundColor: 'var(--color-bg, white)', + '> *': { + display: 'block', + width: '100%', + height: '100%', + backgroundColor: 'white', + }, [minWidthFactor(3)]: { top: 0, marginLeft: 'auto', @@ -130,7 +144,6 @@ const MoreItems = styled('div')({ paddingBottom: 'var(--size-menu, 4rem)', zIndex: -1, boxSizing: 'border-box', - backgroundColor: 'var(--color-bg, white)', [minWidthFactor(3)]: { display: 'contents', }, @@ -306,6 +319,9 @@ type Props = { moreLinkComponent: React.ElementType, linkComponent: React.ElementType, topBarCenter?: React.ReactChild, + topBarComponent?: React.ElementType, + sidebarMainComponent?: React.ElementType, + sidebarMenuComponent?: React.ElementType, } export const Layout: React.FC = ({ @@ -321,6 +337,9 @@ export const Layout: React.FC = ({ linkComponent: LinkComponent, topBarCenter, children, + topBarComponent: TopBarComponent = 'div', + sidebarMainComponent: SidebarMainWrapperComponent = 'div', + sidebarMenuComponent: SidebarMenuComponent = 'div', }) => { const SidebarMainComponent = sidebarMainOpen ? OpenSidebarMain : SidebarMain const MoreItemsComponent = moreItemsOpen ? OpenMoreItems : MoreItems @@ -363,6 +382,7 @@ export const Layout: React.FC = ({ brand={brand} menuLink={sidebarMain ? menuLink : undefined} userLink={userLink} + baseComponent={TopBarComponent} > {topBarCenter} @@ -370,70 +390,11 @@ export const Layout: React.FC = ({ } - - - {visiblePrimarySidebarMenuItems.map((item) => { - return ( - - - - ) - })} - - - - - {morePrimarySidebarMenuItems.map((item) => { - return ( - - - - ) - })} - - - {moreSecondarySidebarMenuItems.map((item) => { - return ( - - - - ) - })} - - - - { - ( - morePrimarySidebarMenuItems.length > 0 - || moreSecondarySidebarMenuItems.length > 0 - ) - && ( - - - - - - ) - } - { - visibleSecondarySidebarMenuItems.length > 0 - && ( - - {visibleSecondarySidebarMenuItems.map((item) => ( + + + + {visiblePrimarySidebarMenuItems.map((item) => { + return ( @@ -441,17 +402,82 @@ export const Layout: React.FC = ({ {...item} /> - ))} - - ) - } - + ) + })} + + + + + {morePrimarySidebarMenuItems.map((item) => { + return ( + + + + ) + })} + + + {moreSecondarySidebarMenuItems.map((item) => { + return ( + + + + ) + })} + + + + { + ( + morePrimarySidebarMenuItems.length > 0 + || moreSecondarySidebarMenuItems.length > 0 + ) + && ( + + + + + + ) + } + { + visibleSecondarySidebarMenuItems.length > 0 + && ( + + {visibleSecondarySidebarMenuItems.map((item) => ( + + + + ))} + + ) + } + + { (sidebarMain as unknown) && ( - {sidebarMain} + + + {sidebarMain} + + ) } diff --git a/src/layouts/RightSidebarStatic/index.tsx b/src/layouts/RightSidebarStatic/index.tsx index e1703f6..8184508 100644 --- a/src/layouts/RightSidebarStatic/index.tsx +++ b/src/layouts/RightSidebarStatic/index.tsx @@ -25,7 +25,12 @@ const SidebarBase = styled('div')({ marginTop: -1, boxSizing: 'border-box', }, - backgroundColor: 'var(--color-bg, white)', + '> *': { + display: 'block', + width: '100%', + height: '100%', + backgroundColor: 'white', + }, [minWidthFactor(3)]: { position: 'absolute', top: 0, @@ -63,6 +68,8 @@ type Props = { sidebarMain: React.ReactChild, userLink?: React.ReactNode, topBarCenter?: React.ReactChild, + topBarComponent?: React.ElementType, + sidebarMainComponent?: React.ElementType, } export const Layout: React.FC = ({ @@ -71,6 +78,8 @@ export const Layout: React.FC = ({ userLink, topBarCenter, children, + topBarComponent: TopBarComponent = 'div', + sidebarMainComponent: SidebarMainComponent = 'div', }) => { return ( <> @@ -86,6 +95,7 @@ export const Layout: React.FC = ({ span="wide" brand={brand} userLink={userLink} + baseComponent={TopBarComponent} > {topBarCenter} @@ -95,7 +105,9 @@ export const Layout: React.FC = ({ {children} - {sidebarMain} + + {sidebarMain} + ) diff --git a/src/widgets/TopBar/index.tsx b/src/widgets/TopBar/index.tsx index 0275e6d..c525ec9 100644 --- a/src/widgets/TopBar/index.tsx +++ b/src/widgets/TopBar/index.tsx @@ -10,7 +10,12 @@ const Base = styled('div')({ width: '100%', height: 'var(--height-topbar, 4rem)', zIndex: 2, - backgroundColor: 'var(--color-bg, white)', + '> *': { + display: 'block', + width: '100%', + height: '100%', + backgroundColor: 'white', + }, '~ *': { paddingTop: 'var(--height-topbar, 4rem)', }, @@ -97,6 +102,7 @@ type Props = { brand?: React.ReactNode, menuLink?: React.ReactNode, userLink?: React.ReactNode, + baseComponent?: React.ElementType, } const TopBar: React.FC = ({ @@ -105,41 +111,44 @@ const TopBar: React.FC = ({ menuLink, userLink, children, + baseComponent: BaseComponent = 'div', }) => { const { [span as keyof typeof CONTAINER_COMPONENTS]: ContainerComponent = Container } = CONTAINER_COMPONENTS return ( - - { - Boolean(brand as unknown) - && ( - - {brand} - - ) - } - - {children} - - - { - Boolean(menuLink as unknown) - && ( - - {menuLink} - - ) - } + + { - Boolean(userLink as unknown) + Boolean(brand as unknown) && ( - - {userLink} - + + {brand} + ) } - - + + {children} + + + { + Boolean(menuLink as unknown) + && ( + + {menuLink} + + ) + } + { + Boolean(userLink as unknown) + && ( + + {userLink} + + ) + } + + + ) }