@gravity-ui/page-constructor 5.4.0 → 5.6.0

package/build/cjs/models/navigation.d.ts

@@ -70,6 +70,7 @@ export interface HeaderData {
     rightItems?: NavigationItemModel[];
     iconSize?: number;
     withBorder?: boolean;
+    withBorderOnScroll?: boolean;
 }
 export interface FooterColumn {
     title: string;

package/build/cjs/navigation/components/Navigation/Navigation.js

@@ -12,7 +12,7 @@ const DesktopNavigation_1 = tslib_1.__importDefault(require("../DesktopNavigatio
 const MobileNavigation_1 = tslib_1.__importDefault(require("../MobileNavigation/MobileNavigation"));
 const b = (0, utils_1.block)('navigation');
 const Navigation = ({ data, logo, className }) => {
-    const { leftItems, rightItems, iconSize = 20, withBorder = false } = data;
+    const { leftItems, rightItems, iconSize = 20, withBorder = false, withBorderOnScroll = true, } = data;
     const [isSidebarOpened, setIsSidebarOpened] = (0, react_1.useState)(false);
     const [activeItemId, setActiveItemId] = (0, react_1.useState)(undefined);
     const [showBorder, setShowBorder] = (0, react_1.useState)(withBorder);
@@ -24,6 +24,8 @@ const Navigation = ({ data, logo, className }) => {
     };
     const onSidebarOpenedChange = (isOpen) => setIsSidebarOpened(isOpen);
     (0, react_1.useEffect)(() => {
+        if (!withBorderOnScroll)
+            return () => { };
         const showBorderOnScroll = () => {
             if (!showBorder) {
                 setShowBorder(window.scrollY > 0);

package/build/cjs/sub-blocks/LayoutItem/LayoutItem.js

@@ -4,6 +4,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const components_1 = require("../../components");
+const theme_1 = require("../../context/theme");
 const utils_1 = require("../../utils");
 const Content_1 = tslib_1.__importDefault(require("../Content/Content"));
 const utils_2 = require("./utils");
@@ -12,16 +13,18 @@ const LayoutItem = (_a) => {
     var _b = _a.content, { links, buttons } = _b, content = tslib_1.__rest(_b, ["links", "buttons"]), { metaInfo, media, border, fullscreen, icon, className, analyticsEvents, controlPosition = 'content' } = _a;
     const normalizedLinks = (0, react_1.useMemo)(() => (0, utils_2.getLayoutItemLinks)(links), [links]);
     const areControlsInFooter = controlPosition === 'footer';
+    const theme = (0, theme_1.useTheme)();
     const contentProps = Object.assign(Object.assign(Object.assign({}, content), (areControlsInFooter ? {} : { links: normalizedLinks, buttons })), { size: 's', colSizes: { all: 12, md: 12 } });
     const titleId = (0, uikit_1.useUniqId)();
     const renderMedia = () => {
         if (!media) {
             return null;
         }
-        return fullscreen && (0, utils_2.hasFullscreen)(media) ? (react_1.default.createElement(components_1.FullscreenMedia, { showFullscreenIcon: (0, utils_2.showFullscreenIcon)(media) }, (_a = {}) => {
+        const themedMedia = (0, utils_1.getThemedValue)(media, theme);
+        return fullscreen && (0, utils_2.hasFullscreen)(themedMedia) ? (react_1.default.createElement(components_1.FullscreenMedia, { showFullscreenIcon: (0, utils_2.showFullscreenIcon)(themedMedia) }, (_a = {}) => {
             var { className: mediaClassName, fullscreen: _fullscreen } = _a, fullscreenMediaProps = tslib_1.__rest(_a, ["className", "fullscreen"]);
-            return (react_1.default.createElement(components_1.Media, Object.assign({}, media, fullscreenMediaProps, { className: b('media', { border }, mediaClassName), analyticsEvents: analyticsEvents })));
-        })) : (react_1.default.createElement(components_1.Media, Object.assign({}, media, { className: b('media', { border }), analyticsEvents: analyticsEvents })));
+            return (react_1.default.createElement(components_1.Media, Object.assign({}, themedMedia, fullscreenMediaProps, { className: b('media', { border }, mediaClassName), analyticsEvents: analyticsEvents })));
+        })) : (react_1.default.createElement(components_1.Media, Object.assign({}, themedMedia, { className: b('media', { border }), analyticsEvents: analyticsEvents })));
     };
     return (react_1.default.createElement("div", { className: b(null, className) },
         renderMedia(),

package/build/esm/models/navigation.d.ts

@@ -70,6 +70,7 @@ export interface HeaderData {
     rightItems?: NavigationItemModel[];
     iconSize?: number;
     withBorder?: boolean;
+    withBorderOnScroll?: boolean;
 }
 export interface FooterColumn {
     title: string;

package/build/esm/navigation/components/Navigation/Navigation.js

@@ -9,7 +9,7 @@ import MobileNavigation from '../MobileNavigation/MobileNavigation';
 import './Navigation.css';
 const b = block('navigation');
 export const Navigation = ({ data, logo, className }) => {
-    const { leftItems, rightItems, iconSize = 20, withBorder = false } = data;
+    const { leftItems, rightItems, iconSize = 20, withBorder = false, withBorderOnScroll = true, } = data;
     const [isSidebarOpened, setIsSidebarOpened] = useState(false);
     const [activeItemId, setActiveItemId] = useState(undefined);
     const [showBorder, setShowBorder] = useState(withBorder);
@@ -21,6 +21,8 @@ export const Navigation = ({ data, logo, className }) => {
     };
     const onSidebarOpenedChange = (isOpen) => setIsSidebarOpened(isOpen);
     useEffect(() => {
+        if (!withBorderOnScroll)
+            return () => { };
         const showBorderOnScroll = () => {
             if (!showBorder) {
                 setShowBorder(window.scrollY > 0);

package/build/esm/sub-blocks/LayoutItem/LayoutItem.js

@@ -2,7 +2,8 @@ import { __rest } from "tslib";
 import React, { useMemo } from 'react';
 import { useUniqId } from '@gravity-ui/uikit';
 import { Buttons, FullscreenMedia, IconWrapper, Links, Media, MetaInfo } from '../../components';
-import { block } from '../../utils';
+import { useTheme } from '../../context/theme';
+import { block, getThemedValue } from '../../utils';
 import Content from '../Content/Content';
 import { getLayoutItemLinks, hasFullscreen, showFullscreenIcon } from './utils';
 import './LayoutItem.css';
@@ -11,16 +12,18 @@ const LayoutItem = (_a) => {
     var _b = _a.content, { links, buttons } = _b, content = __rest(_b, ["links", "buttons"]), { metaInfo, media, border, fullscreen, icon, className, analyticsEvents, controlPosition = 'content' } = _a;
     const normalizedLinks = useMemo(() => getLayoutItemLinks(links), [links]);
     const areControlsInFooter = controlPosition === 'footer';
+    const theme = useTheme();
     const contentProps = Object.assign(Object.assign(Object.assign({}, content), (areControlsInFooter ? {} : { links: normalizedLinks, buttons })), { size: 's', colSizes: { all: 12, md: 12 } });
     const titleId = useUniqId();
     const renderMedia = () => {
         if (!media) {
             return null;
         }
-        return fullscreen && hasFullscreen(media) ? (React.createElement(FullscreenMedia, { showFullscreenIcon: showFullscreenIcon(media) }, (_a = {}) => {
+        const themedMedia = getThemedValue(media, theme);
+        return fullscreen && hasFullscreen(themedMedia) ? (React.createElement(FullscreenMedia, { showFullscreenIcon: showFullscreenIcon(themedMedia) }, (_a = {}) => {
             var { className: mediaClassName, fullscreen: _fullscreen } = _a, fullscreenMediaProps = __rest(_a, ["className", "fullscreen"]);
-            return (React.createElement(Media, Object.assign({}, media, fullscreenMediaProps, { className: b('media', { border }, mediaClassName), analyticsEvents: analyticsEvents })));
-        })) : (React.createElement(Media, Object.assign({}, media, { className: b('media', { border }), analyticsEvents: analyticsEvents })));
+            return (React.createElement(Media, Object.assign({}, themedMedia, fullscreenMediaProps, { className: b('media', { border }, mediaClassName), analyticsEvents: analyticsEvents })));
+        })) : (React.createElement(Media, Object.assign({}, themedMedia, { className: b('media', { border }), analyticsEvents: analyticsEvents })));
     };
     return (React.createElement("div", { className: b(null, className) },
         renderMedia(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "5.4.0",
+  "version": "5.6.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

package/server/models/navigation.d.ts

@@ -70,6 +70,7 @@ export interface HeaderData {
     rightItems?: NavigationItemModel[];
     iconSize?: number;
     withBorder?: boolean;
+    withBorderOnScroll?: boolean;
 }
 export interface FooterColumn {
     title: string;