@gravity-ui/page-constructor 1.16.2 → 1.16.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [1.16.3](https://github.com/gravity-ui/page-constructor/compare/v1.16.2...v1.16.3) (2023-02-17)
+
+
+### Bug Fixes
+
+* add router link for banner button ([#158](https://github.com/gravity-ui/page-constructor/issues/158)) ([a194a40](https://github.com/gravity-ui/page-constructor/commit/a194a40bae0486277d0a862e3a9b415404d75d0b))
+* **Foldable:** fix issues with content height calculation on resize ([#156](https://github.com/gravity-ui/page-constructor/issues/156)) ([e20709e](https://github.com/gravity-ui/page-constructor/commit/e20709e4eb84e7eb620ff2e42dd3e5010d1066a2))
+
 ## [1.16.2](https://github.com/gravity-ui/page-constructor/compare/v1.16.1...v1.16.2) (2023-02-16)
 
 

package/build/cjs/components/Foldable/Foldable.css

@@ -1,7 +1,10 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-foldable-block__content-container {
+.pc-foldable-block {
   height: 0;
   overflow-y: hidden;
   transition: height 300ms, margin-bottom 300ms;
+}
+.pc-foldable-block__content-container {
+  overflow: auto;
 }

package/build/cjs/components/Foldable/Foldable.js

@@ -3,21 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../utils");
-const HeightCalculator_1 = tslib_1.__importDefault(require("../../components/HeightCalculator/HeightCalculator"));
+const useHeightCalculator_1 = tslib_1.__importDefault(require("../../hooks/useHeightCalculator"));
 const b = (0, utils_1.block)('foldable-block');
 const Foldable = ({ isOpened, children, className }) => {
+    const blockRef = (0, react_1.useRef)(null);
     const contentRef = (0, react_1.useRef)(null);
-    const [contentHeight, setContentHeight] = (0, react_1.useState)();
-    const onHeightCalculation = (0, react_1.useCallback)((height) => {
-        setContentHeight(height);
-    }, []);
+    const contentHeight = (0, useHeightCalculator_1.default)(contentRef);
     (0, react_1.useEffect)(() => {
-        if (contentRef && contentRef.current) {
-            contentRef.current.style.height = isOpened ? `${contentHeight}px` : '0';
+        if (blockRef && blockRef.current) {
+            blockRef.current.style.height = isOpened && contentHeight ? `${contentHeight}px` : '0';
         }
     }, [isOpened, contentHeight]);
-    return (react_1.default.createElement("div", { className: b(null, className) },
-        react_1.default.createElement("div", { ref: contentRef, className: b('content-container', { open: isOpened }) }, children),
-        react_1.default.createElement(HeightCalculator_1.default, { onCalculate: onHeightCalculation }, children)));
+    return (react_1.default.createElement("div", { ref: blockRef, className: b({ open: isOpened }, className) },
+        react_1.default.createElement("div", { ref: contentRef, className: b('content-container') }, children)));
 };
 exports.default = Foldable;

package/build/cjs/components/HeightCalculator/HeightCalculator.d.ts

@@ -2,5 +2,9 @@ import { WithChildren } from '../../models';
 export interface HeightCalculatorProps {
     onCalculate: (height: number) => void;
 }
+/**
+ * @deprecated Will be removed, use the useHeightCalculator hook instead.
+ * @returns The HeightCalculator component.
+ */
 declare const HeightCalculator: ({ onCalculate, children }: WithChildren<HeightCalculatorProps>) => JSX.Element | null;
 export default HeightCalculator;

package/build/cjs/components/HeightCalculator/HeightCalculator.js

@@ -5,6 +5,10 @@ const react_1 = tslib_1.__importStar(require("react"));
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('height-calculator');
+/**
+ * @deprecated Will be removed, use the useHeightCalculator hook instead.
+ * @returns The HeightCalculator component.
+ */
 const HeightCalculator = ({ onCalculate, children }) => {
     const [isCalculating, setIsCalculating] = (0, react_1.useState)(true);
     const container = (0, react_1.useRef)(null);

package/build/cjs/hooks/useHeightCalculator.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type HeightCalculatorOptions = {
+    recalculateOnResizeDelay: number;
+};
+declare const useHeightCalculator: (containerRef: React.RefObject<HTMLElement>, options?: HeightCalculatorOptions) => number | undefined;
+export default useHeightCalculator;

package/build/cjs/hooks/useHeightCalculator.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const DEFAULT_RECALCULATE_ON_RESIZE_DELAY = 1000;
+const DEFAULT_OPTIONS = {
+    recalculateOnResizeDelay: DEFAULT_RECALCULATE_ON_RESIZE_DELAY,
+};
+const useHeightCalculator = (containerRef, options = DEFAULT_OPTIONS) => {
+    const recalculateOnResizeDelay = options.recalculateOnResizeDelay;
+    const [containerHeight, setContainerHeight] = (0, react_1.useState)(undefined);
+    const calculateContainerHeight = (0, react_1.useCallback)(() => {
+        if (containerRef.current && containerRef.current.offsetHeight !== containerHeight)
+            setContainerHeight(containerRef.current.offsetHeight);
+    }, [containerRef, containerHeight, setContainerHeight]);
+    (0, react_1.useEffect)(() => {
+        const handleResize = lodash_1.default.debounce(calculateContainerHeight, recalculateOnResizeDelay);
+        calculateContainerHeight();
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [calculateContainerHeight, recalculateOnResizeDelay]);
+    return containerHeight;
+};
+exports.default = useHeightCalculator;

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

@@ -21,7 +21,8 @@ const BannerCard = (props) => {
                     react_1.default.createElement("h2", { className: b('title') },
                         react_1.default.createElement(components_1.HTML, null, title)),
                     subtitle && (react_1.default.createElement(components_1.YFMWrapper, { className: b('subtitle'), content: subtitle, modifiers: { constructor: true } }))),
-                react_1.default.createElement(components_1.Button, { className: b('button'), theme: "raised", size: "xl", text: text, url: url, target: target })),
+                react_1.default.createElement(components_1.RouterLink, { href: url },
+                    react_1.default.createElement(components_1.Button, { className: b('button'), theme: "raised", size: "xl", text: text, url: url, target: target }))),
             react_1.default.createElement(components_1.BackgroundImage, { className: b('image'), src: (0, utils_1.getThemedValue)(image, theme), disableCompress: disableCompress }))));
 };
 exports.BannerCard = BannerCard;

package/build/esm/components/Foldable/Foldable.css

@@ -1,7 +1,10 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-foldable-block__content-container {
+.pc-foldable-block {
   height: 0;
   overflow-y: hidden;
   transition: height 300ms, margin-bottom 300ms;
+}
+.pc-foldable-block__content-container {
+  overflow: auto;
 }

package/build/esm/components/Foldable/Foldable.js

@@ -1,21 +1,18 @@
-import React, { useRef, useState, useCallback, useEffect } from 'react';
+import React, { useRef, useEffect } from 'react';
 import { block } from '../../utils';
-import HeightCalculator from '../../components/HeightCalculator/HeightCalculator';
+import useHeightCalculator from '../../hooks/useHeightCalculator';
 import './Foldable.css';
 const b = block('foldable-block');
 const Foldable = ({ isOpened, children, className }) => {
+    const blockRef = useRef(null);
     const contentRef = useRef(null);
-    const [contentHeight, setContentHeight] = useState();
-    const onHeightCalculation = useCallback((height) => {
-        setContentHeight(height);
-    }, []);
+    const contentHeight = useHeightCalculator(contentRef);
     useEffect(() => {
-        if (contentRef && contentRef.current) {
-            contentRef.current.style.height = isOpened ? `${contentHeight}px` : '0';
+        if (blockRef && blockRef.current) {
+            blockRef.current.style.height = isOpened && contentHeight ? `${contentHeight}px` : '0';
         }
     }, [isOpened, contentHeight]);
-    return (React.createElement("div", { className: b(null, className) },
-        React.createElement("div", { ref: contentRef, className: b('content-container', { open: isOpened }) }, children),
-        React.createElement(HeightCalculator, { onCalculate: onHeightCalculation }, children)));
+    return (React.createElement("div", { ref: blockRef, className: b({ open: isOpened }, className) },
+        React.createElement("div", { ref: contentRef, className: b('content-container') }, children)));
 };
 export default Foldable;

package/build/esm/components/HeightCalculator/HeightCalculator.d.ts

@@ -3,5 +3,9 @@ import './HeightCalculator.css';
 export interface HeightCalculatorProps {
     onCalculate: (height: number) => void;
 }
+/**
+ * @deprecated Will be removed, use the useHeightCalculator hook instead.
+ * @returns The HeightCalculator component.
+ */
 declare const HeightCalculator: ({ onCalculate, children }: WithChildren<HeightCalculatorProps>) => JSX.Element | null;
 export default HeightCalculator;

package/build/esm/components/HeightCalculator/HeightCalculator.js

@@ -3,6 +3,10 @@ import _ from 'lodash';
 import { block } from '../../utils';
 import './HeightCalculator.css';
 const b = block('height-calculator');
+/**
+ * @deprecated Will be removed, use the useHeightCalculator hook instead.
+ * @returns The HeightCalculator component.
+ */
 const HeightCalculator = ({ onCalculate, children }) => {
     const [isCalculating, setIsCalculating] = useState(true);
     const container = useRef(null);

package/build/esm/hooks/useHeightCalculator.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type HeightCalculatorOptions = {
+    recalculateOnResizeDelay: number;
+};
+declare const useHeightCalculator: (containerRef: React.RefObject<HTMLElement>, options?: HeightCalculatorOptions) => number | undefined;
+export default useHeightCalculator;

package/build/esm/hooks/useHeightCalculator.js

@@ -0,0 +1,24 @@
+import { useState, useEffect, useCallback } from 'react';
+import _ from 'lodash';
+const DEFAULT_RECALCULATE_ON_RESIZE_DELAY = 1000;
+const DEFAULT_OPTIONS = {
+    recalculateOnResizeDelay: DEFAULT_RECALCULATE_ON_RESIZE_DELAY,
+};
+const useHeightCalculator = (containerRef, options = DEFAULT_OPTIONS) => {
+    const recalculateOnResizeDelay = options.recalculateOnResizeDelay;
+    const [containerHeight, setContainerHeight] = useState(undefined);
+    const calculateContainerHeight = useCallback(() => {
+        if (containerRef.current && containerRef.current.offsetHeight !== containerHeight)
+            setContainerHeight(containerRef.current.offsetHeight);
+    }, [containerRef, containerHeight, setContainerHeight]);
+    useEffect(() => {
+        const handleResize = _.debounce(calculateContainerHeight, recalculateOnResizeDelay);
+        calculateContainerHeight();
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [calculateContainerHeight, recalculateOnResizeDelay]);
+    return containerHeight;
+};
+export default useHeightCalculator;

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

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { block, getThemedValue } from '../../utils';
-import { Button, YFMWrapper, BackgroundImage, HTML } from '../../components';
+import { Button, YFMWrapper, BackgroundImage, HTML, RouterLink } from '../../components';
 import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
 import './BannerCard.css';
 const b = block('banner-card');
@@ -18,7 +18,8 @@ export const BannerCard = (props) => {
                     React.createElement("h2", { className: b('title') },
                         React.createElement(HTML, null, title)),
                     subtitle && (React.createElement(YFMWrapper, { className: b('subtitle'), content: subtitle, modifiers: { constructor: true } }))),
-                React.createElement(Button, { className: b('button'), theme: "raised", size: "xl", text: text, url: url, target: target })),
+                React.createElement(RouterLink, { href: url },
+                    React.createElement(Button, { className: b('button'), theme: "raised", size: "xl", text: text, url: url, target: target }))),
             React.createElement(BackgroundImage, { className: b('image'), src: getThemedValue(image, theme), disableCompress: disableCompress }))));
 };
 export default BannerCard;

package/package.json

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