@gravity-ui/page-constructor 5.7.0 → 5.7.2

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.
@@ -42,13 +42,15 @@ const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered
42
42
  }, [minImageHeight]);
43
43
  const onSelectTab = (0, react_1.useCallback)((id, e) => {
44
44
  setActiveTab(id);
45
- handleImageHeight();
46
45
  e.currentTarget.scrollIntoView({
47
46
  inline: 'center',
48
47
  behavior: 'smooth',
49
48
  block: 'nearest',
50
49
  });
51
- }, [handleImageHeight]);
50
+ }, []);
51
+ (0, react_1.useEffect)(() => {
52
+ handleImageHeight();
53
+ }, [activeTab, handleImageHeight]);
52
54
  if (activeTabData) {
53
55
  const themedImage = (0, utils_2.getThemedValue)(activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.image, theme);
54
56
  imageProps = themedImage && (0, utils_1.getMediaImage)(themedImage);
@@ -66,8 +68,9 @@ const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered
66
68
  all: grid_1.GridColumnOrderClasses.Last,
67
69
  md: grid_1.GridColumnOrderClasses.First,
68
70
  }, className: b('col', { centered: centered }) },
69
- react_1.default.createElement("div", { style: { minHeight: mediaVideoHeight || minImageHeight } }, (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (react_1.default.createElement("div", { ref: ref },
70
- react_1.default.createElement(Media_1.default, Object.assign({}, (0, utils_2.getThemedValue)(activeTabData.media, theme), { key: activeTab, className: b('media', { border }), playVideo: play, height: mediaVideoHeight || undefined, onImageLoad: handleImageHeight }))))),
71
+ (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (react_1.default.createElement("div", { style: { minHeight: mediaVideoHeight || minImageHeight } },
72
+ react_1.default.createElement("div", { ref: ref },
73
+ react_1.default.createElement(Media_1.default, Object.assign({}, (0, utils_2.getThemedValue)(activeTabData.media, theme), { key: activeTab, className: b('media', { border }), playVideo: play, height: mediaVideoHeight || undefined, onImageLoad: handleImageHeight }))))),
71
74
  imageProps && (react_1.default.createElement(react_1.Fragment, null,
72
75
  react_1.default.createElement(FullscreenImage_1.default, Object.assign({}, imageProps, { imageClassName: b('image', { border }) })))),
73
76
  (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.caption) && (react_1.default.createElement("p", { className: b('caption'), id: captionId },
@@ -1,6 +1,6 @@
1
1
  import React, { HTMLAttributeAnchorTarget, PropsWithChildren } from 'react';
2
- import { AnalyticsEventsBase, CardBaseProps as CardBaseParams, ImageProps, WithChildren } from '../../models';
3
- export interface CardBaseProps extends AnalyticsEventsBase, CardBaseParams, PropsWithChildren {
2
+ import { AnalyticsEventsBase, CardBaseProps as CardBaseParams, ImageProps } from '../../models';
3
+ interface CardBaseProps extends AnalyticsEventsBase, CardBaseParams {
4
4
  className?: string;
5
5
  bodyClassName?: string;
6
6
  contentClassName?: string;
@@ -10,6 +10,7 @@ export interface CardBaseProps extends AnalyticsEventsBase, CardBaseParams, Prop
10
10
  qa?: string;
11
11
  extraProps?: React.HTMLAttributes<HTMLElement>;
12
12
  }
13
+ export type CardBasePropsType = PropsWithChildren<CardBaseProps>;
13
14
  export interface CardHeaderBaseProps {
14
15
  className?: string;
15
16
  image?: ImageProps | null;
@@ -18,11 +19,11 @@ export interface CardFooterBaseProps {
18
19
  className?: string;
19
20
  }
20
21
  export declare const Layout: {
21
- (props: CardBaseProps): JSX.Element;
22
- Header: React.FC<WithChildren<CardHeaderBaseProps>>;
22
+ (props: CardBasePropsType): JSX.Element;
23
+ Header: React.FC<React.PropsWithChildren<CardHeaderBaseProps>>;
23
24
  Content: React.FC<{
24
25
  children?: React.ReactNode;
25
26
  }>;
26
- Footer: React.FC<WithChildren<CardFooterBaseProps>>;
27
+ Footer: React.FC<React.PropsWithChildren<CardFooterBaseProps>>;
27
28
  };
28
29
  export default Layout;
@@ -1,4 +1,4 @@
1
- import React, { Fragment, useCallback, useRef, useState } from 'react';
1
+ import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react';
2
2
  import { useUniqId } from '@gravity-ui/uikit';
3
3
  import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
4
4
  import ButtonTabs from '../../components/ButtonTabs/ButtonTabs';
@@ -39,13 +39,15 @@ export const TabsBlock = ({ items, title, description, animated, tabsColSizes, c
39
39
  }, [minImageHeight]);
40
40
  const onSelectTab = useCallback((id, e) => {
41
41
  setActiveTab(id);
42
- handleImageHeight();
43
42
  e.currentTarget.scrollIntoView({
44
43
  inline: 'center',
45
44
  behavior: 'smooth',
46
45
  block: 'nearest',
47
46
  });
48
- }, [handleImageHeight]);
47
+ }, []);
48
+ useEffect(() => {
49
+ handleImageHeight();
50
+ }, [activeTab, handleImageHeight]);
49
51
  if (activeTabData) {
50
52
  const themedImage = getThemedValue(activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.image, theme);
51
53
  imageProps = themedImage && getMediaImage(themedImage);
@@ -63,8 +65,9 @@ export const TabsBlock = ({ items, title, description, animated, tabsColSizes, c
63
65
  all: GridColumnOrderClasses.Last,
64
66
  md: GridColumnOrderClasses.First,
65
67
  }, className: b('col', { centered: centered }) },
66
- React.createElement("div", { style: { minHeight: mediaVideoHeight || minImageHeight } }, (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (React.createElement("div", { ref: ref },
67
- React.createElement(Media, Object.assign({}, getThemedValue(activeTabData.media, theme), { key: activeTab, className: b('media', { border }), playVideo: play, height: mediaVideoHeight || undefined, onImageLoad: handleImageHeight }))))),
68
+ (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (React.createElement("div", { style: { minHeight: mediaVideoHeight || minImageHeight } },
69
+ React.createElement("div", { ref: ref },
70
+ React.createElement(Media, Object.assign({}, getThemedValue(activeTabData.media, theme), { key: activeTab, className: b('media', { border }), playVideo: play, height: mediaVideoHeight || undefined, onImageLoad: handleImageHeight }))))),
68
71
  imageProps && (React.createElement(Fragment, null,
69
72
  React.createElement(FullscreenImage, Object.assign({}, imageProps, { imageClassName: b('image', { border }) })))),
70
73
  (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.caption) && (React.createElement("p", { className: b('caption'), id: captionId },
@@ -1,7 +1,7 @@
1
1
  import React, { HTMLAttributeAnchorTarget, PropsWithChildren } from 'react';
2
- import { AnalyticsEventsBase, CardBaseProps as CardBaseParams, ImageProps, WithChildren } from '../../models';
2
+ import { AnalyticsEventsBase, CardBaseProps as CardBaseParams, ImageProps } from '../../models';
3
3
  import './CardBase.css';
4
- export interface CardBaseProps extends AnalyticsEventsBase, CardBaseParams, PropsWithChildren {
4
+ interface CardBaseProps extends AnalyticsEventsBase, CardBaseParams {
5
5
  className?: string;
6
6
  bodyClassName?: string;
7
7
  contentClassName?: string;
@@ -11,6 +11,7 @@ export interface CardBaseProps extends AnalyticsEventsBase, CardBaseParams, Prop
11
11
  qa?: string;
12
12
  extraProps?: React.HTMLAttributes<HTMLElement>;
13
13
  }
14
+ export type CardBasePropsType = PropsWithChildren<CardBaseProps>;
14
15
  export interface CardHeaderBaseProps {
15
16
  className?: string;
16
17
  image?: ImageProps | null;
@@ -19,11 +20,11 @@ export interface CardFooterBaseProps {
19
20
  className?: string;
20
21
  }
21
22
  export declare const Layout: {
22
- (props: CardBaseProps): JSX.Element;
23
- Header: React.FC<WithChildren<CardHeaderBaseProps>>;
23
+ (props: CardBasePropsType): JSX.Element;
24
+ Header: React.FC<React.PropsWithChildren<CardHeaderBaseProps>>;
24
25
  Content: React.FC<{
25
26
  children?: React.ReactNode;
26
27
  }>;
27
- Footer: React.FC<WithChildren<CardFooterBaseProps>>;
28
+ Footer: React.FC<React.PropsWithChildren<CardFooterBaseProps>>;
28
29
  };
29
30
  export default Layout;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/page-constructor",
3
- "version": "5.7.0",
3
+ "version": "5.7.2",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {