diff --git a/README.md b/README.md index 0325b42..65ca513 100644 --- a/README.md +++ b/README.md @@ -24,6 +24,33 @@ npm install --dev @gravity-ui/uikit@^3.0.2 @bem-react/classname@1.6.0 react@^16. - MobileHeaderFooterItem - Drawer - DrawerItem +- PageLayout +- PageLayoutAside + +## Optimization + +If your app content needs to be rendered faster than by passing it throw `AsideHeader` props, +you may need to switch usage of `AsideHeader` to advanced style with `PageLayout` like this: + +```diff +-import {AsideHeader} from '@gravity-ui/navigation'; ++import {PageLayout} from '@gravity-ui/navigation'; ++ ++const PageLayoutAside = React.lazy(() => ++ import('@gravity-ui/navigation').then((module) => ({default: module.PageLayoutAside})), ++); + +- ++ ++ ++ ++ ++ ++ ++ ++ ++ +``` ## Imports diff --git a/package-lock.json b/package-lock.json index 65f48bb..0fe430f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,7 +6,7 @@ "packages": { "": { "name": "@gravity-ui/navigation", - "version": "0.19.0", + "version": "1.1.3", "license": "MIT", "dependencies": { "@gravity-ui/i18n": "^1.1.0", diff --git a/package.json b/package.json index 2d14a17..d4bc5b5 100644 --- a/package.json +++ b/package.json @@ -7,8 +7,8 @@ "type": "git", "url": "https://github.com/gravity-ui/navigation" }, - "main": "build/cjs/index.js", - "module": "build/esm/index.js", + "main": "build/cjs", + "module": "build/esm", "types": "build/esm/index.d.ts", "sideEffects": [ "*.css", diff --git a/rollup.config.js b/rollup.config.js index 63f0bfc..05d1c97 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -8,32 +8,60 @@ import peerDepsExternal from 'rollup-plugin-peer-deps-external'; const packageJson = require('./package.json'); +const input = [ + 'src/index.ts', + 'src/components/ActionBar/index.ts', + 'src/components/Title/index.ts', + 'src/components/HotkeysPanel/index.ts', + 'src/components/Settings/index.ts', + 'src/components/MobileHeader/index.ts', + 'src/components/AsideHeader/AsideHeader.tsx', + 'src/components/AsideHeader/AsideHeaderContext.ts', + 'src/components/Drawer/Drawer.tsx', + 'src/components/FooterItem/FooterItem.tsx', + 'src/components/AsideHeader/components/PageLayout/PageLayout.tsx', + 'src/components/AsideHeader/components/PageLayout/PageLayoutAside.tsx', +]; + +const getPlugins = (outDir) => { + return [ + peerDepsExternal(), + json(), + resolve(), + commonjs(), + typescript({ + typescript: require('typescript'), + tsconfig: './tsconfig.publish.json', + outDir, + }), + postcss({ + minimize: true, + }), + svgr(), + ]; +}; + export default [ { - input: 'src/index.ts', + input, output: [ { - file: packageJson.module, + dir: packageJson.module, format: 'esm', sourcemap: true, }, + ], + plugins: getPlugins(packageJson.module), + }, + { + input, + output: [ { - file: packageJson.main, + dir: packageJson.main, format: 'cjs', sourcemap: true, }, ], - plugins: [ - peerDepsExternal(), - json(), - resolve(), - commonjs(), - typescript({ - typescript: require('typescript'), - tsconfig: './tsconfig.publish.json', - }), - postcss(), - svgr(), - ], + plugins: getPlugins(packageJson.main), }, ]; diff --git a/src/components/AsideHeader/AsideHeader.scss b/src/components/AsideHeader/AsideHeader.scss index f61bf89..b8de621 100644 --- a/src/components/AsideHeader/AsideHeader.scss +++ b/src/components/AsideHeader/AsideHeader.scss @@ -202,6 +202,10 @@ $block: '.#{variables.$ns}aside-header'; flex-direction: row; } + &_reverse #{$block}__pane-container { + flex-direction: row-reverse; + } + &__content { width: calc(100% - var(--gn-aside-header-size)); z-index: 95; diff --git a/src/components/AsideHeader/AsideHeader.tsx b/src/components/AsideHeader/AsideHeader.tsx index bb971d8..97246d6 100644 --- a/src/components/AsideHeader/AsideHeader.tsx +++ b/src/components/AsideHeader/AsideHeader.tsx @@ -1,44 +1,31 @@ -import React, {useMemo} from 'react'; +import React from 'react'; -import {Content} from '../Content'; - -import {AsideHeaderContextProvider, AsideHeaderInnerContextProvider} from './AsideHeaderContext'; import {AsideHeaderProps} from './types'; +import {PageLayout} from './components/PageLayout/PageLayout'; +import {PageLayoutAside} from './components/PageLayout/PageLayoutAside'; -import {FirstPanel} from './components'; -import {b} from './utils'; - -import './AsideHeader.scss'; -import {ASIDE_HEADER_COMPACT_WIDTH, ASIDE_HEADER_EXPANDED_WIDTH} from '../constants'; -import {useAsideHeaderInnerContextValue} from './useAsideHeaderInnerContextValue'; - -export const AsideHeader = React.forwardRef((props, ref) => { - const {className, compact} = props; - - const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH; - const asideHeaderContextValue = useMemo(() => ({size, compact}), [compact, size]); - const asideHeaderInnerContextValue = useAsideHeaderInnerContextValue({...props, size}); - return ( - - -
-
- {/* First Panel */} - - {/* Second Panel */} - -
-
- - - ); -}); +/** + * Simply usage of AsideHeader: + * @example + * + * + * Advanced usage of AsideHeader: + * @example + * + * + * + * + * + * + * + */ +export const AsideHeader = React.forwardRef( + ({compact, className, ...props}, ref) => { + return ( + + + + + ); + }, +); diff --git a/src/components/AsideHeader/AsideHeaderContext.ts b/src/components/AsideHeader/AsideHeaderContext.ts index 6c7a5f6..838aa57 100644 --- a/src/components/AsideHeader/AsideHeaderContext.ts +++ b/src/components/AsideHeader/AsideHeaderContext.ts @@ -5,7 +5,6 @@ import {AsideHeaderInnerProps} from './types'; export interface AsideHeaderInnerContextType extends AsideHeaderInnerProps { menuItems: MenuItem[]; allPagesIsAvailable: boolean; - size: number; onItemClick: ( item: MenuItem, collapsed: boolean, @@ -30,7 +29,7 @@ export const useAsideHeaderInnerContext = (): AsideHeaderInnerContextType => { }; export interface AsideHeaderContextType { - compact?: boolean; + compact: boolean; size: number; } diff --git a/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx b/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx index c721f70..62fb07d 100644 --- a/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx +++ b/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx @@ -4,6 +4,10 @@ import type {Meta, StoryFn} from '@storybook/react'; import {AsideHeader} from '../AsideHeader'; import {AsideHeaderShowcase} from './AsideHeaderShowcase'; +import {PageLayout} from '../components/PageLayout/PageLayout'; +import {PageLayoutAside} from '../components/PageLayout/PageLayoutAside'; +import logoIcon from '../../../../.storybook/assets/logo.svg'; +import {menuItemsShowcase} from './moc'; export default { title: 'components/AsideHeader', @@ -25,3 +29,32 @@ MultipleTooltip.args = { multipleTooltip: true, initialCompact: true, }; + +const AdvancedUsageTemplate: StoryFn = (args) => { + const [compact, setCompact] = React.useState(args.initialCompact); + + return ( + + PageContent + alert('click on logo'), + }} + onChangeCompact={setCompact} + {...args} + /> + + ); +}; + +export const AdvancedUsage = AdvancedUsageTemplate.bind({}); + +AdvancedUsage.args = { + multipleTooltip: false, + initialCompact: true, +}; diff --git a/src/components/AsideHeader/__stories__/moc.tsx b/src/components/AsideHeader/__stories__/moc.tsx index a7991db..77f3049 100644 --- a/src/components/AsideHeader/__stories__/moc.tsx +++ b/src/components/AsideHeader/__stories__/moc.tsx @@ -11,6 +11,7 @@ function renderTag(tag: string) { export const EMPTY_CONTEXT_VALUE: AsideHeaderContextType = { size: ASIDE_HEADER_EXPANDED_WIDTH, + compact: true, }; export const menuItemsShowcase: MenuItem[] = [ diff --git a/src/components/AsideHeader/components/PageLayout/PageLayout.tsx b/src/components/AsideHeader/components/PageLayout/PageLayout.tsx new file mode 100644 index 0000000..449b89a --- /dev/null +++ b/src/components/AsideHeader/components/PageLayout/PageLayout.tsx @@ -0,0 +1,49 @@ +import React, {PropsWithChildren, useMemo} from 'react'; +import {AsideHeaderContextProvider, useAsideHeaderContext} from '../../AsideHeaderContext'; +import {Content, ContentProps} from '../../../Content'; +import {ASIDE_HEADER_COMPACT_WIDTH, ASIDE_HEADER_EXPANDED_WIDTH} from '../../../constants'; +import {LayoutProps} from '../../types'; +import {b} from '../../utils'; + +import '../../AsideHeader.scss'; + +export interface PageLayoutProps extends PropsWithChildren { + reverse?: boolean; +} + +const Layout = ({compact, reverse, className, children}: PageLayoutProps) => { + const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH; + const asideHeaderContextValue = useMemo(() => ({size, compact}), [compact, size]); + + return ( + +
+
{children}
+
+ + ); +}; + +const ConnectedContent: React.FC>> = ({ + children, + renderContent, +}) => { + const {size} = useAsideHeaderContext(); + + return ( + + {children} + + ); +}; + +const PageLayout = Object.assign(Layout, { + Content: ConnectedContent, +}); + +export {PageLayout}; diff --git a/src/components/AsideHeader/components/PageLayout/PageLayoutAside.tsx b/src/components/AsideHeader/components/PageLayout/PageLayoutAside.tsx new file mode 100644 index 0000000..29c91e2 --- /dev/null +++ b/src/components/AsideHeader/components/PageLayout/PageLayoutAside.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import {FirstPanel} from '..'; +import {useAsideHeaderInnerContextValue} from '../../useAsideHeaderInnerContextValue'; +import {AsideHeaderInnerContextProvider, useAsideHeaderContext} from '../../AsideHeaderContext'; +import {AsideHeaderProps} from '../../types'; + +type Props = Omit; + +export const PageLayoutAside = React.forwardRef((props, ref) => { + const {size, compact} = useAsideHeaderContext(); + + const asideHeaderInnerContextValue = useAsideHeaderInnerContextValue({size, compact, ...props}); + + return ( + + + + ); +}); diff --git a/src/components/AsideHeader/types.tsx b/src/components/AsideHeader/types.tsx index e636923..cb65754 100644 --- a/src/components/AsideHeader/types.tsx +++ b/src/components/AsideHeader/types.tsx @@ -1,11 +1,17 @@ import {RenderContentType} from '../Content'; import {DrawerItemProps} from '../Drawer/Drawer'; import {LogoProps, MenuItem, SubheaderMenuItem, OpenModalSubscriber} from '../types'; +import {AsideHeaderContextType} from './AsideHeaderContext'; + +export interface LayoutProps { + compact: boolean; + className?: string; +} export interface AsideHeaderGeneralProps { logo: LogoProps; - compact: boolean; multipleTooltip?: boolean; + reverse?: boolean; className?: string; collapseTitle?: string; expandTitle?: string; @@ -29,9 +35,13 @@ export interface AsideHeaderDefaultProps { headerDecoration?: boolean; } -export type AsideHeaderInnerProps = AsideHeaderGeneralProps & AsideHeaderDefaultProps; +export type AsideHeaderInnerProps = AsideHeaderGeneralProps & + AsideHeaderDefaultProps & + AsideHeaderContextType; + export interface AsideHeaderProps extends AsideHeaderGeneralProps, + LayoutProps, Partial {} export enum InnerPanels { diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx index a251e24..be24541 100644 --- a/src/components/Content/Content.tsx +++ b/src/components/Content/Content.tsx @@ -4,7 +4,7 @@ import React from 'react'; export type RenderContentType = (data: {size: number}) => React.ReactNode; -interface ContentProps { +export interface ContentProps { size: number; className?: string; cssSizeVariableName?: string; @@ -27,14 +27,17 @@ export const Content: React.FC = ({ className, cssSizeVariableName = '--gn-aside-header-size', renderContent, + children, }) => { return (
- {typeof renderContent === 'function' && ( + {typeof renderContent === 'function' ? ( + ) : ( + children )}
); diff --git a/src/components/index.ts b/src/components/index.ts index b91dd75..7774b35 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -3,6 +3,8 @@ export type {AsideHeaderProps} from './AsideHeader/types'; export {AsideHeaderContextProvider, useAsideHeaderContext} from './AsideHeader/AsideHeaderContext'; export {Drawer, DrawerProps, DrawerItemProps, DrawerItem} from './Drawer/Drawer'; export {FooterItem, FooterItemProps} from './FooterItem/FooterItem'; +export {PageLayout, type PageLayoutProps} from './AsideHeader/components/PageLayout/PageLayout'; +export {PageLayoutAside} from './AsideHeader/components/PageLayout/PageLayoutAside'; export * from './ActionBar'; export * from './Title'; export * from './HotkeysPanel';