@gravity-ui/page-constructor 7.10.1 → 7.11.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/components/CardBase/CardBase.d.ts +3 -3
- package/build/cjs/components/CardBase/CardBase.js.map +1 -1
- package/build/cjs/components/MediaBase/MediaBase.d.ts +1 -1
- package/build/cjs/components/MediaBase/MediaBase.js.map +1 -1
- package/build/cjs/navigation/components/Navigation/Navigation.d.ts +2 -1
- package/build/cjs/navigation/components/Navigation/Navigation.js +5 -2
- package/build/cjs/navigation/components/Navigation/Navigation.js.map +1 -1
- package/build/esm/components/CardBase/CardBase.d.ts +3 -3
- package/build/esm/components/CardBase/CardBase.js.map +1 -1
- package/build/esm/components/MediaBase/MediaBase.d.ts +1 -1
- package/build/esm/components/MediaBase/MediaBase.js.map +1 -1
- package/build/esm/navigation/components/Navigation/Navigation.d.ts +2 -1
- package/build/esm/navigation/components/Navigation/Navigation.js +5 -2
- package/build/esm/navigation/components/Navigation/Navigation.js.map +1 -1
- package/package.json +1 -1
|
@@ -20,8 +20,8 @@ export interface CardFooterBaseProps {
|
|
|
20
20
|
}
|
|
21
21
|
export declare const Layout: {
|
|
22
22
|
(props: CardBasePropsType): import("react/jsx-runtime").JSX.Element;
|
|
23
|
-
Header: (props: React.PropsWithChildren<CardHeaderBaseProps>) => React.
|
|
24
|
-
Content: (props: React.PropsWithChildren<{}>) => React.
|
|
25
|
-
Footer: (props: React.PropsWithChildren<CardFooterBaseProps>) => React.
|
|
23
|
+
Header: (props: React.PropsWithChildren<CardHeaderBaseProps>) => React.ReactElement | null;
|
|
24
|
+
Content: (props: React.PropsWithChildren<{}>) => React.ReactElement | null;
|
|
25
|
+
Footer: (props: React.PropsWithChildren<CardFooterBaseProps>) => React.ReactElement | null;
|
|
26
26
|
};
|
|
27
27
|
export default Layout;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CardBase.js","sourceRoot":"../../../../src","sources":["components/CardBase/CardBase.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,6CAAuC;AAEvC,gDAAyC;AACzC,kDAKsB;AACtB,gDAAmD;AACnD,oGAAiE;AACjE,qFAAkD;AA0BlD,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,iBAAiB,CAAC,CAAC;AAEnC,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"CardBase.js","sourceRoot":"../../../../src","sources":["components/CardBase/CardBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Link} from '@gravity-ui/uikit';\n\nimport {useAnalytics} from '../../hooks';\nimport {\n AnalyticsEventsBase,\n CardBaseProps as CardBaseParams,\n DefaultEventNames,\n ImageProps,\n} from '../../models';\nimport {block, getQaAttrubutes} from '../../utils';\nimport BackgroundImage from '../BackgroundImage/BackgroundImage';\nimport RouterLink from '../RouterLink/RouterLink';\n\nimport './CardBase.scss';\n\ninterface CardBaseProps extends AnalyticsEventsBase, CardBaseParams {\n className?: string;\n bodyClassName?: string;\n contentClassName?: string;\n url?: string;\n urlTitle?: string;\n target?: React.HTMLAttributeAnchorTarget;\n qa?: string;\n extraProps?: React.HTMLAttributes<HTMLElement>;\n}\n\nexport type CardBasePropsType = React.PropsWithChildren<CardBaseProps>;\n\nexport interface CardHeaderBaseProps {\n className?: string;\n image?: ImageProps | null;\n}\n\nexport interface CardFooterBaseProps {\n className?: string;\n}\n\nconst b = block('card-base-block');\n\nconst Header: (\n props: React.PropsWithChildren<CardHeaderBaseProps>,\n) => React.ReactElement | null = () => null;\nconst Content: (props: React.PropsWithChildren<{}>) => React.ReactElement | null = () => null;\nconst Footer: (\n props: React.PropsWithChildren<CardFooterBaseProps>,\n) => React.ReactElement | null = () => null;\n\nexport const Layout = (props: CardBasePropsType) => {\n const {\n className,\n bodyClassName,\n analyticsEvents,\n contentClassName,\n children,\n url,\n target,\n border = 'shadow',\n urlTitle,\n qa,\n extraProps = {},\n } = props;\n const handleAnalytics = useAnalytics(DefaultEventNames.CardBase, url);\n let header, content, footer, image, headerClass, footerClass;\n const qaAttributes = getQaAttrubutes(qa, 'header', 'footer', 'body', 'content');\n\n function handleChild(child: React.ReactElement) {\n switch (child.type) {\n case Header:\n header = child.props.children;\n image = child.props.image;\n headerClass = child.props.className;\n break;\n case Content:\n content = child.props.children;\n break;\n case Footer:\n footer = child.props.children;\n footerClass = child.props.className;\n break;\n }\n }\n\n React.Children.toArray(children).forEach((child) => {\n if (React.isValidElement(child)) {\n handleChild(child);\n }\n });\n\n const cardContent = (\n <React.Fragment>\n {(header || image) && (\n <BackgroundImage\n className={b('header', headerClass)}\n {...(typeof image === 'string' ? {src: image} : image)}\n qa={qaAttributes.header}\n >\n <div className={b('header-content')}>{header}</div>\n </BackgroundImage>\n )}\n <div className={b('body', bodyClassName)} data-qa={qaAttributes.body}>\n <div className={b('content', contentClassName)} data-qa={qaAttributes.content}>\n {content}\n </div>\n {footer && (\n <div className={b('footer', footerClass)} data-qa={qaAttributes.footer}>\n {footer}\n </div>\n )}\n </div>\n </React.Fragment>\n );\n\n const fullClassName = b({border}, className);\n\n const onClick = () => {\n handleAnalytics(analyticsEvents);\n };\n\n return url ? (\n <RouterLink href={url}>\n <Link\n href={url}\n target={target}\n rel={target === '_blank' ? 'noopener noreferrer' : undefined}\n className={fullClassName}\n onClick={onClick}\n title={urlTitle}\n extraProps={{\n draggable: false,\n onDragStart: (e: React.DragEvent<HTMLAnchorElement>) => e.preventDefault(),\n ...extraProps,\n }}\n qa={qa}\n >\n {cardContent}\n </Link>\n </RouterLink>\n ) : (\n <div className={fullClassName} data-qa={qa} {...extraProps}>\n {cardContent}\n </div>\n );\n};\n\nLayout.Header = Header;\nLayout.Content = Content;\nLayout.Footer = Footer;\n\nexport default Layout;\n"]}
|
|
@@ -6,6 +6,6 @@ interface MediaBaseProps extends MediaBaseBlockProps {
|
|
|
6
6
|
}
|
|
7
7
|
export declare const MediaBase: {
|
|
8
8
|
(props: MediaBaseProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
-
Card: (props: React.PropsWithChildren<{}>) => React.
|
|
9
|
+
Card: (props: React.PropsWithChildren<{}>) => React.ReactElement | null;
|
|
10
10
|
};
|
|
11
11
|
export default MediaBase;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MediaBase.js","sourceRoot":"../../../../src","sources":["components/MediaBase/MediaBase.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,2FAAsE;AACtE,8CAA0D;AAE1D,gDAAkC;AAClC,sEAAmC;AAEnC,qFAA8C;AAI9C,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,YAAY,CAAC,CAAC;AAE9B,MAAM,IAAI,
|
|
1
|
+
{"version":3,"file":"MediaBase.js","sourceRoot":"../../../../src","sources":["components/MediaBase/MediaBase.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,2FAAsE;AACtE,8CAA0D;AAE1D,gDAAkC;AAClC,sEAAmC;AAEnC,qFAA8C;AAI9C,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,YAAY,CAAC,CAAC;AAE9B,MAAM,IAAI,GAAsE,GAAG,EAAE,CAAC,IAAI,CAAC;AAOpF,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IAC/C,MAAM,EACF,QAAQ,EACR,UAAU,EACV,SAAS,GAAG,eAAe,EAC3B,eAAe,GAAG,eAAe,EACjC,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,iBAAiB,GAAG,EAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAC,EACpC,GAAG,iBAAiB,EACvB,GAAG,KAAK,CAAC;IACV,MAAM,EAAC,KAAK,EAAE,WAAW,EAAC,GAAG,iBAAiB,CAAC;IAE/C,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAClC,OAAO,SAAS;YACZ,CAAC,CAAC,EAAC,CAAC,qBAAc,CAAC,GAAG,CAAC,EAAE,EAAE,EAAC;YAC5B,CAAC,CAAC,EAAC,CAAC,qBAAc,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,qBAAc,CAAC,GAAG,CAAC,EAAE,EAAE,EAAC,CAAC;IAC9E,CAAC,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IAE5B,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACpC,OAAO,EAAC,CAAC,qBAAc,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,qBAAc,CAAC,GAAG,CAAC,EAAE,EAAE,EAAC,CAAC;IAC/E,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,YAAY,GAAG,CAAC,SAAS,IAAI,uBAAC,0BAAY,OAAK,iBAAiB,GAAI,CAAC;IAC3E,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;IAEtE,OAAO,CACH,wBAAC,sBAAY,IAAC,SAAS,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,aAC9D,SAAS,IAAI,CACV,uBAAC,eAAK,IACF,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,WAAW,EACrB,QAAQ,EAAE,iBAAiB,GAC7B,CACL,EACD,uBAAC,WAAI,cACD,wBAAC,UAAG,IACA,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE;wBAChB,OAAO,EAAE,SAAS,KAAK,eAAe;wBACtC,gBAAgB,EAAE,eAAe,KAAK,eAAe;qBACxD,CAAC,aAEF,uBAAC,UAAG,IAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,YAAY,YAC5C,YAAY,GACX,EACL,IAAI,CAAC,CAAC,CAAC,CACJ,uBAAC,UAAG,IAAC,KAAK,EAAE,UAAU,YAClB,gCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YAAG,IAAI,GAAO,GACrC,CACT,CAAC,CAAC,CAAC,IAAI,IACN,GACH,IACI,CAClB,CAAC;AACN,CAAC,CAAC;AAxDW,QAAA,SAAS,aAwDpB;AAEF,iBAAS,CAAC,IAAI,GAAG,IAAI,CAAC;AAEtB,kBAAe,iBAAS,CAAC","sourcesContent":["import * as React from 'react';\n\nimport AnimateBlock from '../../components/AnimateBlock/AnimateBlock';\nimport {Col, Grid, GridColumnSize, Row} from '../../grid';\nimport {MediaBaseBlockProps} from '../../models';\nimport {block} from '../../utils';\nimport Title from '../Title/Title';\n\nimport MediaContent from './MediaBaseContent';\n\nimport './MediaBase.scss';\n\nconst b = block('media-base');\n\nconst Card: (props: React.PropsWithChildren<{}>) => React.ReactElement | null = () => null;\n\ninterface MediaBaseProps extends MediaBaseBlockProps {\n children: React.ReactElement;\n onScroll?: () => void;\n}\n\nexport const MediaBase = (props: MediaBaseProps) => {\n const {\n children,\n largeMedia,\n direction = 'content-media',\n mobileDirection = 'content-media',\n animated,\n mediaOnly,\n onScroll,\n mediaOnlyColSizes = {all: 12, md: 8},\n ...mediaContentProps\n } = props;\n const {title, description} = mediaContentProps;\n\n const mediaSizes = React.useMemo(() => {\n return mediaOnly\n ? {[GridColumnSize.All]: 12}\n : {[GridColumnSize.Md]: largeMedia ? 8 : 6, [GridColumnSize.All]: 12};\n }, [mediaOnly, largeMedia]);\n\n const contentSizes = React.useMemo(() => {\n return {[GridColumnSize.Md]: largeMedia ? 4 : 6, [GridColumnSize.All]: 12};\n }, [largeMedia]);\n\n const mediaContent = !mediaOnly && <MediaContent {...mediaContentProps} />;\n const card = children.type === Card ? children?.props.children : null;\n\n return (\n <AnimateBlock className={b()} onScroll={onScroll} animate={animated}>\n {mediaOnly && (\n <Title\n className={b('header')}\n title={title}\n subtitle={description}\n colSizes={mediaOnlyColSizes}\n />\n )}\n <Grid>\n <Row\n className={b('row', {\n reverse: direction === 'media-content',\n 'mobile-reverse': mobileDirection === 'media-content',\n })}\n >\n <Col className={b('content')} sizes={contentSizes}>\n {mediaContent}\n </Col>\n {card ? (\n <Col sizes={mediaSizes}>\n <div className={b('card')}>{card}</div>\n </Col>\n ) : null}\n </Row>\n </Grid>\n </AnimateBlock>\n );\n};\n\nMediaBase.Card = Card;\n\nexport default MediaBase;\n"]}
|
|
@@ -4,6 +4,7 @@ export interface NavigationComponentProps extends ClassNameProps {
|
|
|
4
4
|
logo: ThemedNavigationLogoData;
|
|
5
5
|
data: HeaderData;
|
|
6
6
|
mobilePortalContainer?: React.RefObject<HTMLElement>;
|
|
7
|
+
onSidebarChange?: (isOpen: boolean) => void;
|
|
7
8
|
}
|
|
8
|
-
export declare const Navigation: ({ data, logo, className, mobilePortalContainer, }: NavigationComponentProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export declare const Navigation: ({ data, logo, className, mobilePortalContainer, onSidebarChange, }: NavigationComponentProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
10
|
export default Navigation;
|
|
@@ -11,12 +11,15 @@ const hooks_1 = require("../../hooks/index.js");
|
|
|
11
11
|
const DesktopNavigation_1 = tslib_1.__importDefault(require("../DesktopNavigation/DesktopNavigation.js"));
|
|
12
12
|
const MobileNavigation_1 = tslib_1.__importDefault(require("../MobileNavigation/MobileNavigation.js"));
|
|
13
13
|
const b = (0, utils_1.block)('navigation');
|
|
14
|
-
const Navigation = ({ data, logo, className, mobilePortalContainer, }) => {
|
|
14
|
+
const Navigation = ({ data, logo, className, mobilePortalContainer, onSidebarChange, }) => {
|
|
15
15
|
const { leftItems, rightItems, customMobileHeaderItems, iconSize = 20, withBorder = false, withBorderOnScroll = true, } = data;
|
|
16
16
|
const [isSidebarOpened, setIsSidebarOpened] = React.useState(false);
|
|
17
17
|
const [showBorder] = (0, hooks_1.useShowBorder)(withBorder, withBorderOnScroll);
|
|
18
18
|
const { activeItemId, leftItemsWithIconSize, rightItemsWithIconSize, onActiveItemChange } = (0, hooks_1.useActiveNavItem)(iconSize, leftItems, rightItems);
|
|
19
|
-
const onSidebarOpenedChange = (isOpen) =>
|
|
19
|
+
const onSidebarOpenedChange = (isOpen) => {
|
|
20
|
+
onSidebarChange?.(isOpen);
|
|
21
|
+
setIsSidebarOpened(isOpen);
|
|
22
|
+
};
|
|
20
23
|
return ((0, jsx_runtime_1.jsx)(grid_1.Grid, { className: b({ 'with-border': showBorder }, className), children: (0, jsx_runtime_1.jsx)(grid_1.Row, { children: (0, jsx_runtime_1.jsx)(grid_1.Col, { children: (0, jsx_runtime_1.jsxs)("nav", { children: [(0, jsx_runtime_1.jsx)(DesktopNavigation_1.default, { logo: logo, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange, leftItemsWithIconSize: leftItemsWithIconSize, rightItemsWithIconSize: rightItemsWithIconSize, customMobileHeaderItems: customMobileHeaderItems, isSidebarOpened: isSidebarOpened, onSidebarOpenedChange: onSidebarOpenedChange }), (0, jsx_runtime_1.jsx)(OutsideClick_1.default, { onOutsideClick: () => onSidebarOpenedChange(false), children: (0, jsx_runtime_1.jsx)(MobileNavigation_1.default, { topItems: leftItemsWithIconSize, bottomItems: rightItemsWithIconSize, isOpened: isSidebarOpened, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange, portalContainer: mobilePortalContainer }) })] }) }) }) }));
|
|
21
24
|
};
|
|
22
25
|
exports.Navigation = Navigation;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Navigation.js","sourceRoot":"../../../../../src","sources":["navigation/components/Navigation/Navigation.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,4GAAyE;AACzE,iDAA6C;AAE7C,mDAAqC;AACrC,gDAA4D;AAC5D,0GAAuE;AACvE,uGAAoE;AAIpE,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,YAAY,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"Navigation.js","sourceRoot":"../../../../../src","sources":["navigation/components/Navigation/Navigation.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,4GAAyE;AACzE,iDAA6C;AAE7C,mDAAqC;AACrC,gDAA4D;AAC5D,0GAAuE;AACvE,uGAAoE;AAIpE,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,YAAY,CAAC,CAAC;AASvB,MAAM,UAAU,GAAG,CAAC,EACvB,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,qBAAqB,EACrB,eAAe,GACQ,EAAE,EAAE;IAC3B,MAAM,EACF,SAAS,EACT,UAAU,EACV,uBAAuB,EACvB,QAAQ,GAAG,EAAE,EACb,UAAU,GAAG,KAAK,EAClB,kBAAkB,GAAG,IAAI,GAC5B,GAAG,IAAI,CAAC;IAET,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpE,MAAM,CAAC,UAAU,CAAC,GAAG,IAAA,qBAAa,EAAC,UAAU,EAAE,kBAAkB,CAAC,CAAC;IACnE,MAAM,EAAC,YAAY,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,kBAAkB,EAAC,GACnF,IAAA,wBAAgB,EAAC,QAAQ,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;IAEtD,MAAM,qBAAqB,GAAG,CAAC,MAAe,EAAE,EAAE;QAC9C,eAAe,EAAE,CAAC,MAAM,CAAC,CAAC;QAC1B,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,OAAO,CACH,uBAAC,WAAI,IAAC,SAAS,EAAE,CAAC,CAAC,EAAC,aAAa,EAAE,UAAU,EAAC,EAAE,SAAS,CAAC,YACtD,uBAAC,UAAG,cACA,uBAAC,UAAG,cACA,4CACI,uBAAC,2BAAiB,IACd,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,kBAAkB,EAAE,kBAAkB,EACtC,qBAAqB,EAAE,qBAAqB,EAC5C,sBAAsB,EAAE,sBAAsB,EAC9C,uBAAuB,EAAE,uBAAuB,EAChD,eAAe,EAAE,eAAe,EAChC,qBAAqB,EAAE,qBAAqB,GAC9C,EACF,uBAAC,sBAAY,IAAC,cAAc,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,KAAK,CAAC,YAC5D,uBAAC,0BAAgB,IACb,QAAQ,EAAE,qBAAqB,EAC/B,WAAW,EAAE,sBAAsB,EACnC,QAAQ,EAAE,eAAe,EACzB,YAAY,EAAE,YAAY,EAC1B,kBAAkB,EAAE,kBAAkB,EACtC,eAAe,EAAE,qBAAqB,GACxC,GACS,IACb,GACJ,GACJ,GACH,CACV,CAAC;AACN,CAAC,CAAC;AAxDW,QAAA,UAAU,cAwDrB;AAEF,kBAAe,kBAAU,CAAC","sourcesContent":["import * as React from 'react';\n\nimport OutsideClick from '../../../components/OutsideClick/OutsideClick';\nimport {Col, Grid, Row} from '../../../grid';\nimport {ClassNameProps, HeaderData, ThemedNavigationLogoData} from '../../../models';\nimport {block} from '../../../utils';\nimport {useActiveNavItem, useShowBorder} from '../../hooks';\nimport DesktopNavigation from '../DesktopNavigation/DesktopNavigation';\nimport MobileNavigation from '../MobileNavigation/MobileNavigation';\n\nimport './Navigation.scss';\n\nconst b = block('navigation');\n\nexport interface NavigationComponentProps extends ClassNameProps {\n logo: ThemedNavigationLogoData;\n data: HeaderData;\n mobilePortalContainer?: React.RefObject<HTMLElement>;\n onSidebarChange?: (isOpen: boolean) => void;\n}\n\nexport const Navigation = ({\n data,\n logo,\n className,\n mobilePortalContainer,\n onSidebarChange,\n}: NavigationComponentProps) => {\n const {\n leftItems,\n rightItems,\n customMobileHeaderItems,\n iconSize = 20,\n withBorder = false,\n withBorderOnScroll = true,\n } = data;\n\n const [isSidebarOpened, setIsSidebarOpened] = React.useState(false);\n const [showBorder] = useShowBorder(withBorder, withBorderOnScroll);\n const {activeItemId, leftItemsWithIconSize, rightItemsWithIconSize, onActiveItemChange} =\n useActiveNavItem(iconSize, leftItems, rightItems);\n\n const onSidebarOpenedChange = (isOpen: boolean) => {\n onSidebarChange?.(isOpen);\n setIsSidebarOpened(isOpen);\n };\n\n return (\n <Grid className={b({'with-border': showBorder}, className)}>\n <Row>\n <Col>\n <nav>\n <DesktopNavigation\n logo={logo}\n activeItemId={activeItemId}\n onActiveItemChange={onActiveItemChange}\n leftItemsWithIconSize={leftItemsWithIconSize}\n rightItemsWithIconSize={rightItemsWithIconSize}\n customMobileHeaderItems={customMobileHeaderItems}\n isSidebarOpened={isSidebarOpened}\n onSidebarOpenedChange={onSidebarOpenedChange}\n />\n <OutsideClick onOutsideClick={() => onSidebarOpenedChange(false)}>\n <MobileNavigation\n topItems={leftItemsWithIconSize}\n bottomItems={rightItemsWithIconSize}\n isOpened={isSidebarOpened}\n activeItemId={activeItemId}\n onActiveItemChange={onActiveItemChange}\n portalContainer={mobilePortalContainer}\n />\n </OutsideClick>\n </nav>\n </Col>\n </Row>\n </Grid>\n );\n};\n\nexport default Navigation;\n"]}
|
|
@@ -21,8 +21,8 @@ export interface CardFooterBaseProps {
|
|
|
21
21
|
}
|
|
22
22
|
export declare const Layout: {
|
|
23
23
|
(props: CardBasePropsType): import("react/jsx-runtime").JSX.Element;
|
|
24
|
-
Header: (props: React.PropsWithChildren<CardHeaderBaseProps>) => React.
|
|
25
|
-
Content: (props: React.PropsWithChildren<{}>) => React.
|
|
26
|
-
Footer: (props: React.PropsWithChildren<CardFooterBaseProps>) => React.
|
|
24
|
+
Header: (props: React.PropsWithChildren<CardHeaderBaseProps>) => React.ReactElement | null;
|
|
25
|
+
Content: (props: React.PropsWithChildren<{}>) => React.ReactElement | null;
|
|
26
|
+
Footer: (props: React.PropsWithChildren<CardFooterBaseProps>) => React.ReactElement | null;
|
|
27
27
|
};
|
|
28
28
|
export default Layout;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CardBase.js","sourceRoot":"../../../../src","sources":["components/CardBase/CardBase.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAC,YAAY,EAAC,6BAAoB;AACzC,OAAO,EAGH,iBAAiB,GAEpB,8BAAqB;AACtB,OAAO,EAAC,KAAK,EAAE,eAAe,EAAC,6BAAoB;AACnD,OAAO,eAAe,8CAA2C;AACjE,OAAO,UAAU,oCAAiC;AAElD,OAAO,gBAAgB,CAAC;AAwBxB,MAAM,CAAC,GAAG,KAAK,CAAC,iBAAiB,CAAC,CAAC;AAEnC,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"CardBase.js","sourceRoot":"../../../../src","sources":["components/CardBase/CardBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Link} from '@gravity-ui/uikit';\n\nimport {useAnalytics} from '../../hooks';\nimport {\n AnalyticsEventsBase,\n CardBaseProps as CardBaseParams,\n DefaultEventNames,\n ImageProps,\n} from '../../models';\nimport {block, getQaAttrubutes} from '../../utils';\nimport BackgroundImage from '../BackgroundImage/BackgroundImage';\nimport RouterLink from '../RouterLink/RouterLink';\n\nimport './CardBase.scss';\n\ninterface CardBaseProps extends AnalyticsEventsBase, CardBaseParams {\n className?: string;\n bodyClassName?: string;\n contentClassName?: string;\n url?: string;\n urlTitle?: string;\n target?: React.HTMLAttributeAnchorTarget;\n qa?: string;\n extraProps?: React.HTMLAttributes<HTMLElement>;\n}\n\nexport type CardBasePropsType = React.PropsWithChildren<CardBaseProps>;\n\nexport interface CardHeaderBaseProps {\n className?: string;\n image?: ImageProps | null;\n}\n\nexport interface CardFooterBaseProps {\n className?: string;\n}\n\nconst b = block('card-base-block');\n\nconst Header: (\n props: React.PropsWithChildren<CardHeaderBaseProps>,\n) => React.ReactElement | null = () => null;\nconst Content: (props: React.PropsWithChildren<{}>) => React.ReactElement | null = () => null;\nconst Footer: (\n props: React.PropsWithChildren<CardFooterBaseProps>,\n) => React.ReactElement | null = () => null;\n\nexport const Layout = (props: CardBasePropsType) => {\n const {\n className,\n bodyClassName,\n analyticsEvents,\n contentClassName,\n children,\n url,\n target,\n border = 'shadow',\n urlTitle,\n qa,\n extraProps = {},\n } = props;\n const handleAnalytics = useAnalytics(DefaultEventNames.CardBase, url);\n let header, content, footer, image, headerClass, footerClass;\n const qaAttributes = getQaAttrubutes(qa, 'header', 'footer', 'body', 'content');\n\n function handleChild(child: React.ReactElement) {\n switch (child.type) {\n case Header:\n header = child.props.children;\n image = child.props.image;\n headerClass = child.props.className;\n break;\n case Content:\n content = child.props.children;\n break;\n case Footer:\n footer = child.props.children;\n footerClass = child.props.className;\n break;\n }\n }\n\n React.Children.toArray(children).forEach((child) => {\n if (React.isValidElement(child)) {\n handleChild(child);\n }\n });\n\n const cardContent = (\n <React.Fragment>\n {(header || image) && (\n <BackgroundImage\n className={b('header', headerClass)}\n {...(typeof image === 'string' ? {src: image} : image)}\n qa={qaAttributes.header}\n >\n <div className={b('header-content')}>{header}</div>\n </BackgroundImage>\n )}\n <div className={b('body', bodyClassName)} data-qa={qaAttributes.body}>\n <div className={b('content', contentClassName)} data-qa={qaAttributes.content}>\n {content}\n </div>\n {footer && (\n <div className={b('footer', footerClass)} data-qa={qaAttributes.footer}>\n {footer}\n </div>\n )}\n </div>\n </React.Fragment>\n );\n\n const fullClassName = b({border}, className);\n\n const onClick = () => {\n handleAnalytics(analyticsEvents);\n };\n\n return url ? (\n <RouterLink href={url}>\n <Link\n href={url}\n target={target}\n rel={target === '_blank' ? 'noopener noreferrer' : undefined}\n className={fullClassName}\n onClick={onClick}\n title={urlTitle}\n extraProps={{\n draggable: false,\n onDragStart: (e: React.DragEvent<HTMLAnchorElement>) => e.preventDefault(),\n ...extraProps,\n }}\n qa={qa}\n >\n {cardContent}\n </Link>\n </RouterLink>\n ) : (\n <div className={fullClassName} data-qa={qa} {...extraProps}>\n {cardContent}\n </div>\n );\n};\n\nLayout.Header = Header;\nLayout.Content = Content;\nLayout.Footer = Footer;\n\nexport default Layout;\n"]}
|
|
@@ -7,6 +7,6 @@ interface MediaBaseProps extends MediaBaseBlockProps {
|
|
|
7
7
|
}
|
|
8
8
|
export declare const MediaBase: {
|
|
9
9
|
(props: MediaBaseProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
-
Card: (props: React.PropsWithChildren<{}>) => React.
|
|
10
|
+
Card: (props: React.PropsWithChildren<{}>) => React.ReactElement | null;
|
|
11
11
|
};
|
|
12
12
|
export default MediaBase;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MediaBase.js","sourceRoot":"../../../../src","sources":["components/MediaBase/MediaBase.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,YAAY,wCAAmD;AACtE,OAAO,EAAC,GAAG,EAAE,IAAI,EAAE,cAAc,EAAE,GAAG,EAAC,4BAAmB;AAE1D,OAAO,EAAC,KAAK,EAAC,6BAAoB;AAClC,OAAO,KAAK,0BAAuB;AAEnC,OAAO,YAAY,8BAA2B;AAE9C,OAAO,iBAAiB,CAAC;AAEzB,MAAM,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC;AAE9B,MAAM,IAAI,
|
|
1
|
+
{"version":3,"file":"MediaBase.js","sourceRoot":"../../../../src","sources":["components/MediaBase/MediaBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport AnimateBlock from '../../components/AnimateBlock/AnimateBlock';\nimport {Col, Grid, GridColumnSize, Row} from '../../grid';\nimport {MediaBaseBlockProps} from '../../models';\nimport {block} from '../../utils';\nimport Title from '../Title/Title';\n\nimport MediaContent from './MediaBaseContent';\n\nimport './MediaBase.scss';\n\nconst b = block('media-base');\n\nconst Card: (props: React.PropsWithChildren<{}>) => React.ReactElement | null = () => null;\n\ninterface MediaBaseProps extends MediaBaseBlockProps {\n children: React.ReactElement;\n onScroll?: () => void;\n}\n\nexport const MediaBase = (props: MediaBaseProps) => {\n const {\n children,\n largeMedia,\n direction = 'content-media',\n mobileDirection = 'content-media',\n animated,\n mediaOnly,\n onScroll,\n mediaOnlyColSizes = {all: 12, md: 8},\n ...mediaContentProps\n } = props;\n const {title, description} = mediaContentProps;\n\n const mediaSizes = React.useMemo(() => {\n return mediaOnly\n ? {[GridColumnSize.All]: 12}\n : {[GridColumnSize.Md]: largeMedia ? 8 : 6, [GridColumnSize.All]: 12};\n }, [mediaOnly, largeMedia]);\n\n const contentSizes = React.useMemo(() => {\n return {[GridColumnSize.Md]: largeMedia ? 4 : 6, [GridColumnSize.All]: 12};\n }, [largeMedia]);\n\n const mediaContent = !mediaOnly && <MediaContent {...mediaContentProps} />;\n const card = children.type === Card ? children?.props.children : null;\n\n return (\n <AnimateBlock className={b()} onScroll={onScroll} animate={animated}>\n {mediaOnly && (\n <Title\n className={b('header')}\n title={title}\n subtitle={description}\n colSizes={mediaOnlyColSizes}\n />\n )}\n <Grid>\n <Row\n className={b('row', {\n reverse: direction === 'media-content',\n 'mobile-reverse': mobileDirection === 'media-content',\n })}\n >\n <Col className={b('content')} sizes={contentSizes}>\n {mediaContent}\n </Col>\n {card ? (\n <Col sizes={mediaSizes}>\n <div className={b('card')}>{card}</div>\n </Col>\n ) : null}\n </Row>\n </Grid>\n </AnimateBlock>\n );\n};\n\nMediaBase.Card = Card;\n\nexport default MediaBase;\n"]}
|
|
@@ -5,6 +5,7 @@ export interface NavigationComponentProps extends ClassNameProps {
|
|
|
5
5
|
logo: ThemedNavigationLogoData;
|
|
6
6
|
data: HeaderData;
|
|
7
7
|
mobilePortalContainer?: React.RefObject<HTMLElement>;
|
|
8
|
+
onSidebarChange?: (isOpen: boolean) => void;
|
|
8
9
|
}
|
|
9
|
-
export declare const Navigation: ({ data, logo, className, mobilePortalContainer, }: NavigationComponentProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare const Navigation: ({ data, logo, className, mobilePortalContainer, onSidebarChange, }: NavigationComponentProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
11
|
export default Navigation;
|
|
@@ -8,12 +8,15 @@ import DesktopNavigation from "../DesktopNavigation/DesktopNavigation.js";
|
|
|
8
8
|
import MobileNavigation from "../MobileNavigation/MobileNavigation.js";
|
|
9
9
|
import './Navigation.css';
|
|
10
10
|
const b = block('navigation');
|
|
11
|
-
export const Navigation = ({ data, logo, className, mobilePortalContainer, }) => {
|
|
11
|
+
export const Navigation = ({ data, logo, className, mobilePortalContainer, onSidebarChange, }) => {
|
|
12
12
|
const { leftItems, rightItems, customMobileHeaderItems, iconSize = 20, withBorder = false, withBorderOnScroll = true, } = data;
|
|
13
13
|
const [isSidebarOpened, setIsSidebarOpened] = React.useState(false);
|
|
14
14
|
const [showBorder] = useShowBorder(withBorder, withBorderOnScroll);
|
|
15
15
|
const { activeItemId, leftItemsWithIconSize, rightItemsWithIconSize, onActiveItemChange } = useActiveNavItem(iconSize, leftItems, rightItems);
|
|
16
|
-
const onSidebarOpenedChange = (isOpen) =>
|
|
16
|
+
const onSidebarOpenedChange = (isOpen) => {
|
|
17
|
+
onSidebarChange?.(isOpen);
|
|
18
|
+
setIsSidebarOpened(isOpen);
|
|
19
|
+
};
|
|
17
20
|
return (_jsx(Grid, { className: b({ 'with-border': showBorder }, className), children: _jsx(Row, { children: _jsx(Col, { children: _jsxs("nav", { children: [_jsx(DesktopNavigation, { logo: logo, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange, leftItemsWithIconSize: leftItemsWithIconSize, rightItemsWithIconSize: rightItemsWithIconSize, customMobileHeaderItems: customMobileHeaderItems, isSidebarOpened: isSidebarOpened, onSidebarOpenedChange: onSidebarOpenedChange }), _jsx(OutsideClick, { onOutsideClick: () => onSidebarOpenedChange(false), children: _jsx(MobileNavigation, { topItems: leftItemsWithIconSize, bottomItems: rightItemsWithIconSize, isOpened: isSidebarOpened, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange, portalContainer: mobilePortalContainer }) })] }) }) }) }));
|
|
18
21
|
};
|
|
19
22
|
export default Navigation;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Navigation.js","sourceRoot":"../../../../../src","sources":["navigation/components/Navigation/Navigation.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,YAAY,yDAAsD;AACzE,OAAO,EAAC,GAAG,EAAE,IAAI,EAAE,GAAG,EAAC,+BAAsB;AAE7C,OAAO,EAAC,KAAK,EAAC,gCAAuB;AACrC,OAAO,EAAC,gBAAgB,EAAE,aAAa,EAAC,6BAAoB;AAC5D,OAAO,iBAAiB,kDAA+C;AACvE,OAAO,gBAAgB,gDAA6C;AAEpE,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"Navigation.js","sourceRoot":"../../../../../src","sources":["navigation/components/Navigation/Navigation.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,YAAY,yDAAsD;AACzE,OAAO,EAAC,GAAG,EAAE,IAAI,EAAE,GAAG,EAAC,+BAAsB;AAE7C,OAAO,EAAC,KAAK,EAAC,gCAAuB;AACrC,OAAO,EAAC,gBAAgB,EAAE,aAAa,EAAC,6BAAoB;AAC5D,OAAO,iBAAiB,kDAA+C;AACvE,OAAO,gBAAgB,gDAA6C;AAEpE,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC;AAS9B,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACvB,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,qBAAqB,EACrB,eAAe,GACQ,EAAE,EAAE;IAC3B,MAAM,EACF,SAAS,EACT,UAAU,EACV,uBAAuB,EACvB,QAAQ,GAAG,EAAE,EACb,UAAU,GAAG,KAAK,EAClB,kBAAkB,GAAG,IAAI,GAC5B,GAAG,IAAI,CAAC;IAET,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpE,MAAM,CAAC,UAAU,CAAC,GAAG,aAAa,CAAC,UAAU,EAAE,kBAAkB,CAAC,CAAC;IACnE,MAAM,EAAC,YAAY,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,kBAAkB,EAAC,GACnF,gBAAgB,CAAC,QAAQ,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;IAEtD,MAAM,qBAAqB,GAAG,CAAC,MAAe,EAAE,EAAE;QAC9C,eAAe,EAAE,CAAC,MAAM,CAAC,CAAC;QAC1B,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,IAAI,IAAC,SAAS,EAAE,CAAC,CAAC,EAAC,aAAa,EAAE,UAAU,EAAC,EAAE,SAAS,CAAC,YACtD,KAAC,GAAG,cACA,KAAC,GAAG,cACA,0BACI,KAAC,iBAAiB,IACd,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,kBAAkB,EAAE,kBAAkB,EACtC,qBAAqB,EAAE,qBAAqB,EAC5C,sBAAsB,EAAE,sBAAsB,EAC9C,uBAAuB,EAAE,uBAAuB,EAChD,eAAe,EAAE,eAAe,EAChC,qBAAqB,EAAE,qBAAqB,GAC9C,EACF,KAAC,YAAY,IAAC,cAAc,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,KAAK,CAAC,YAC5D,KAAC,gBAAgB,IACb,QAAQ,EAAE,qBAAqB,EAC/B,WAAW,EAAE,sBAAsB,EACnC,QAAQ,EAAE,eAAe,EACzB,YAAY,EAAE,YAAY,EAC1B,kBAAkB,EAAE,kBAAkB,EACtC,eAAe,EAAE,qBAAqB,GACxC,GACS,IACb,GACJ,GACJ,GACH,CACV,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import * as React from 'react';\n\nimport OutsideClick from '../../../components/OutsideClick/OutsideClick';\nimport {Col, Grid, Row} from '../../../grid';\nimport {ClassNameProps, HeaderData, ThemedNavigationLogoData} from '../../../models';\nimport {block} from '../../../utils';\nimport {useActiveNavItem, useShowBorder} from '../../hooks';\nimport DesktopNavigation from '../DesktopNavigation/DesktopNavigation';\nimport MobileNavigation from '../MobileNavigation/MobileNavigation';\n\nimport './Navigation.scss';\n\nconst b = block('navigation');\n\nexport interface NavigationComponentProps extends ClassNameProps {\n logo: ThemedNavigationLogoData;\n data: HeaderData;\n mobilePortalContainer?: React.RefObject<HTMLElement>;\n onSidebarChange?: (isOpen: boolean) => void;\n}\n\nexport const Navigation = ({\n data,\n logo,\n className,\n mobilePortalContainer,\n onSidebarChange,\n}: NavigationComponentProps) => {\n const {\n leftItems,\n rightItems,\n customMobileHeaderItems,\n iconSize = 20,\n withBorder = false,\n withBorderOnScroll = true,\n } = data;\n\n const [isSidebarOpened, setIsSidebarOpened] = React.useState(false);\n const [showBorder] = useShowBorder(withBorder, withBorderOnScroll);\n const {activeItemId, leftItemsWithIconSize, rightItemsWithIconSize, onActiveItemChange} =\n useActiveNavItem(iconSize, leftItems, rightItems);\n\n const onSidebarOpenedChange = (isOpen: boolean) => {\n onSidebarChange?.(isOpen);\n setIsSidebarOpened(isOpen);\n };\n\n return (\n <Grid className={b({'with-border': showBorder}, className)}>\n <Row>\n <Col>\n <nav>\n <DesktopNavigation\n logo={logo}\n activeItemId={activeItemId}\n onActiveItemChange={onActiveItemChange}\n leftItemsWithIconSize={leftItemsWithIconSize}\n rightItemsWithIconSize={rightItemsWithIconSize}\n customMobileHeaderItems={customMobileHeaderItems}\n isSidebarOpened={isSidebarOpened}\n onSidebarOpenedChange={onSidebarOpenedChange}\n />\n <OutsideClick onOutsideClick={() => onSidebarOpenedChange(false)}>\n <MobileNavigation\n topItems={leftItemsWithIconSize}\n bottomItems={rightItemsWithIconSize}\n isOpened={isSidebarOpened}\n activeItemId={activeItemId}\n onActiveItemChange={onActiveItemChange}\n portalContainer={mobilePortalContainer}\n />\n </OutsideClick>\n </nav>\n </Col>\n </Row>\n </Grid>\n );\n};\n\nexport default Navigation;\n"]}
|