@gem-sdk/components 2.5.3-staging.5 → 2.5.3-staging.6

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.
Files changed (3) hide show
  1. package/dist/cjs/grid/components/Row.js +9 -2
  2. package/dist/esm/grid/components/Row.js +10 -3
  3. package/package.json +1 -1
package/dist/cjs/grid/components/Row.js CHANGED
@@ -13,6 +13,7 @@ var ChildrenDroppable = require('./ChildrenDroppable.js');
13
13
  const Row = ({ className, children, setting, builderAttrs, builderProps, styles, style, advanced, maxWidthWithEmptyChildren, isNotFullWidth, ...props })=>{
14
14
  const { isSection, as: Element = 'div', lazy, layout, horizontalAlign, verticalAlign, responsive, inlineAlignment, blockAlignment } = setting ?? {};
15
15
  const mode = core.useEditorMode();
16
+ const pageType = core.usePageType();
16
17
  //=== START lazyload section ====
17
18
  const [cacheHeightOutViewport, setCacheHeightOutViewport] = React.useState(500);
18
19
  const [ref, inView] = useInView.useInView({
@@ -29,6 +30,13 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
29
30
  }
30
31
  }
31
32
  });
33
+ const isDisplaySection = React.useMemo(()=>{
34
+ return inView || mode !== 'edit' || pageType === 'POST_PURCHASE';
35
+ }, [
36
+ inView,
37
+ mode,
38
+ pageType
39
+ ]);
32
40
  //=== END lazyload section ====
33
41
  const childHasChildren = React.useMemo(()=>{
34
42
  return builderProps?.builderData?.childrens?.length;
@@ -43,7 +51,6 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
43
51
  children
44
52
  ]);
45
53
  const { fullWidth, width, verticalGutter, background, columnGap } = styles ?? {};
46
- const pageType = core.usePageType();
47
54
  const styleObject = helpers.createStyleObject(width, pageType === 'POST_PURCHASE' && isSection ? {
48
55
  desktop: false,
49
56
  tablet: false,
@@ -119,7 +126,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
119
126
  className: core.cls(className, builderProps?.uid, 'gp-mb-0 gp-grid gp-mx-auto gp-max-w-full gp-gap-y-0 gp-transition-colors gp-duration-200 gp-ease-in-out ', {
120
127
  'gp-content-visibility-hidden': mode !== 'edit' && isSection && lazy && !inView
121
128
  }),
122
- children: inView || mode !== 'edit' ? /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
129
+ children: isDisplaySection ? /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
123
130
  children: core.isEmptyChildren(children) ? /*#__PURE__*/ jsxRuntime.jsx(ChildrenDroppable.default, {}) : React.Children.map(children, (el)=>{
124
131
  if (/*#__PURE__*/ React.isValidElement(el)) return /*#__PURE__*/ React.createElement(el.type, {
125
132
  ...el.props,
package/dist/esm/grid/components/Row.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
2
2
  import { useState, useMemo, Children, isValidElement, createElement } from 'react';
3
- import { useEditorMode, useCurrentDevice, isEmptyChildren, usePageType, splitStyle, cls, makeStyleResponsive, composeGridLayout, makeStyle, getStyleBackgroundByDevice, getGradientBgrStyleByDevice, getResponsiveValue } from '@gem-sdk/core';
3
+ import { useEditorMode, usePageType, useCurrentDevice, isEmptyChildren, splitStyle, cls, makeStyleResponsive, composeGridLayout, makeStyle, getStyleBackgroundByDevice, getGradientBgrStyleByDevice, getResponsiveValue } from '@gem-sdk/core';
4
4
  import Head from 'next/head';
5
5
  import { useInView } from '../../intersection-observer/useInView.js';
6
6
  import { createStyleObject } from './helpers.js';
@@ -9,6 +9,7 @@ import ChildrenDroppable from './ChildrenDroppable.js';
9
9
  const Row = ({ className, children, setting, builderAttrs, builderProps, styles, style, advanced, maxWidthWithEmptyChildren, isNotFullWidth, ...props })=>{
10
10
  const { isSection, as: Element = 'div', lazy, layout, horizontalAlign, verticalAlign, responsive, inlineAlignment, blockAlignment } = setting ?? {};
11
11
  const mode = useEditorMode();
12
+ const pageType = usePageType();
12
13
  //=== START lazyload section ====
13
14
  const [cacheHeightOutViewport, setCacheHeightOutViewport] = useState(500);
14
15
  const [ref, inView] = useInView({
@@ -25,6 +26,13 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
25
26
  }
26
27
  }
27
28
  });
29
+ const isDisplaySection = useMemo(()=>{
30
+ return inView || mode !== 'edit' || pageType === 'POST_PURCHASE';
31
+ }, [
32
+ inView,
33
+ mode,
34
+ pageType
35
+ ]);
28
36
  //=== END lazyload section ====
29
37
  const childHasChildren = useMemo(()=>{
30
38
  return builderProps?.builderData?.childrens?.length;
@@ -39,7 +47,6 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
39
47
  children
40
48
  ]);
41
49
  const { fullWidth, width, verticalGutter, background, columnGap } = styles ?? {};
42
- const pageType = usePageType();
43
50
  const styleObject = createStyleObject(width, pageType === 'POST_PURCHASE' && isSection ? {
44
51
  desktop: false,
45
52
  tablet: false,
@@ -115,7 +122,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
115
122
  className: cls(className, builderProps?.uid, 'gp-mb-0 gp-grid gp-mx-auto gp-max-w-full gp-gap-y-0 gp-transition-colors gp-duration-200 gp-ease-in-out ', {
116
123
  'gp-content-visibility-hidden': mode !== 'edit' && isSection && lazy && !inView
117
124
  }),
118
- children: inView || mode !== 'edit' ? /*#__PURE__*/ jsx(Fragment, {
125
+ children: isDisplaySection ? /*#__PURE__*/ jsx(Fragment, {
119
126
  children: isEmptyChildren(children) ? /*#__PURE__*/ jsx(ChildrenDroppable, {}) : Children.map(children, (el)=>{
120
127
  if (/*#__PURE__*/ isValidElement(el)) return /*#__PURE__*/ createElement(el.type, {
121
128
  ...el.props,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/components",
3
- "version": "2.5.3-staging.5",
3
+ "version": "2.5.3-staging.6",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",