npm - @gem-sdk/components - Versions diffs - 2.1.15 → 2.1.16 - Mend

@gem-sdk/components 2.1.15 → 2.1.16

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 (9) hide show

package/dist/cjs/product/components/ProductDescription/common.js ADDED Viewed

@@ -0,0 +1,28 @@
+'use strict';
+var core = require('@gem-sdk/core');
+var _const = require('./const.js');
+const getMaxHeightStyleDefault = (setting)=>{
+    let result = {
+        desktop: 'none'
+    };
+    const devices = [
+        'desktop',
+        'mobile',
+        'tablet'
+    ];
+    devices.forEach((device)=>{
+        const lineClamp = core.getResponsiveValueByScreen(setting?.lineClamp, device);
+        const hasLineClamp = core.getResponsiveValueByScreen(setting?.hasLineClamp, device);
+        const maxHeight = hasLineClamp && lineClamp ? `${lineClamp * _const.DESCRIPTION_LINE_HEIGHT_DEFAULT}px` : 'none';
+        result = {
+            ...result,
+            [device]: maxHeight
+        };
+    });
+    const style = core.makeStyleResponsive('maxh', result);
+    return style;
+};
+exports.getMaxHeightStyleDefault = getMaxHeightStyleDefault;

package/dist/cjs/product/components/ProductDescription/const.js ADDED Viewed

@@ -0,0 +1,5 @@
+'use strict';
+const DESCRIPTION_LINE_HEIGHT_DEFAULT = 21;
+exports.DESCRIPTION_LINE_HEIGHT_DEFAULT = DESCRIPTION_LINE_HEIGHT_DEFAULT;

package/dist/cjs/product/components/ProductDescription.js CHANGED Viewed

@@ -5,6 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@gem-sdk/core');
 var React = require('react');
+var common = require('./ProductDescription/common.js');
+var _const = require('./ProductDescription/const.js');
 const ProductDescription = ({ setting, builderProps })=>{
     const [open, setOpen] = React.useState(false);
@@ -18,14 +20,18 @@ const ProductDescription = ({ setting, builderProps })=>{
     React.useEffect(()=>{
         const dom = ref.current;
         setOpen(false);
-        if (dom && hasLineClamp && product?.description) {
+        if (!dom) return;
+        const enableShowMore = hasLineClamp && product?.descriptionHtml;
+        if (!enableShowMore) dom.style.maxHeight = 'none';
+        else {
             const value = lineClamp;
             setTimeout(()=>{
                 const scrollHeight = dom?.scrollHeight ?? 0;
                 const clientHeight = dom?.clientHeight ?? 0;
-                const lineHeight = window.getComputedStyle(dom).getPropertyValue('line-height');
-                const lineText = Math.round((scrollHeight ?? 0) / parseInt(lineHeight));
-                const conditionCheckLine = core.isSafari() ? value && value < lineText : clientHeight < scrollHeight;
+                const lineHeight = getLineHeightFromDom();
+                const lineText = Math.round((scrollHeight ?? 0) / lineHeight);
+                dom.style.maxHeight = getMaxHeight(lineHeight);
+                const conditionCheckLine = value && value < lineText || clientHeight < scrollHeight;
                 if (value && conditionCheckLine) {
                     allowShowViewMore(()=>true);
                 } else {
@@ -36,8 +42,19 @@ const ProductDescription = ({ setting, builderProps })=>{
     }, [
         hasLineClamp,
         lineClamp,
-        product?.description
+        product?.description,
+        core.isSafari
     ]);
+    const getLineHeightFromDom = ()=>{
+        if (!ref.current) return _const.DESCRIPTION_LINE_HEIGHT_DEFAULT;
+        const lineHeight = window.getComputedStyle(ref.current).getPropertyValue('line-height');
+        return parseInt(lineHeight);
+    };
+    const getMaxHeight = (lineHeight)=>{
+        if (!hasLineClamp || !lineClamp) return 'auto';
+        if (lineHeight) return `${lineClamp * lineHeight}px`;
+        return 'auto';
+    };
     const Tag = htmlTag === 'html' ? 'div' : 'p';
     const appendTypoClass = core.composeTypographyClassName(setting?.typo, setting?.typography);
     const appendTypoStyle = core.composeTypographyStyle(setting?.typo, setting?.typography);
@@ -54,7 +71,17 @@ const ProductDescription = ({ setting, builderProps })=>{
     }
   `;
     const DescriptionNotFoundString = 'This product does not have a description';
-    const hasDescription = product?.description && product.description?.trim() != '';
+    const noDescriptionHtml = !product?.descriptionHtml;
+    const handleToggleShowMore = ()=>{
+        if (!ref.current) return;
+        const lineHeight = getLineHeightFromDom();
+        if (open) {
+            ref.current.style.maxHeight = getMaxHeight(lineHeight);
+        } else {
+            ref.current.style.maxHeight = 'none';
+        }
+        setOpen((prev)=>!prev);
+    };
     return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
         children: !product ? null : /*#__PURE__*/ jsxRuntime.jsxs("div", {
             "data-id": builderProps?.uid,
@@ -65,7 +92,7 @@ const ProductDescription = ({ setting, builderProps })=>{
                 /*#__PURE__*/ jsxRuntime.jsx(Tag, {
                     ref: ref,
                     "data-gp-text": true,
-                    className: core.cls('gp-p-description-text gp-break-words safari:[&_p]:gp-inline safari:[&_p]:after:gp-whitespace-pre', appendTypoClass, !hasDescription ? 'gp-p-2 gp-text-center gp-text-sm gp-font-semibold gp-text-gray-500 gp-py-2 !gp-text-center' : '', core.getGlobalColorClass('text', setting?.color)),
+                    className: core.cls('gp-p-description-text gp-break-words safari:[&_p]:gp-inline safari:[&_p]:after:gp-whitespace-pre', appendTypoClass, noDescriptionHtml ? 'gp-p-2 gp-text-center gp-text-sm gp-font-semibold gp-text-gray-500 gp-py-2 !gp-text-center' : '', core.getGlobalColorClass('text', setting?.color)),
                     style: {
                         ...core.getStyleShadow({
                             value: setting?.textShadow,
@@ -77,10 +104,11 @@ const ProductDescription = ({ setting, builderProps })=>{
                         ...core.makeStyle({
                             tt: setting?.transform
                         }),
-                        ...appendTypoStyle
+                        ...appendTypoStyle,
+                        ...common.getMaxHeightStyleDefault(setting)
                     },
                     dangerouslySetInnerHTML: {
-                        __html: product?.descriptionHtml && hasDescription ? product.descriptionHtml : `${DescriptionNotFoundString}`
+                        __html: product?.descriptionHtml || `${DescriptionNotFoundString}`
                     }
                 }),
                 hasLineClamp && isShowViewMore && /*#__PURE__*/ jsxRuntime.jsxs("button", {
@@ -93,7 +121,7 @@ const ProductDescription = ({ setting, builderProps })=>{
                         ...appendTypoStyle,
                         ...core.getGlobalColorStyle(setting?.showMoreColor)
                     },
-                    onClick: ()=>setOpen((prev)=>!prev),
+                    onClick: handleToggleShowMore,
                     children: [
                         !open ? setting?.viewMoreText : setting?.viewLessText,
                         setting?.enableViewMoreIcon && /*#__PURE__*/ jsxRuntime.jsx("svg", {

package/dist/cjs/product/components/ProductDescription.liquid.js CHANGED Viewed

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var core = require('@gem-sdk/core');
 var helpers = require('../../helpers.js');
+var common = require('./ProductDescription/common.js');
 const devices = [
     'desktop',
@@ -35,7 +36,8 @@ const ProductDescription = ({ setting, advanced, builderProps })=>{
         ...core.makeStyle({
             tt: setting?.transform
         }),
-        ...appendTypoStyle
+        ...appendTypoStyle,
+        ...common.getMaxHeightStyleDefault(setting)
     };
     const collapseStyle = {
         ...defaultStyle,

package/dist/esm/product/components/ProductDescription/common.js ADDED Viewed

@@ -0,0 +1,26 @@
+import { getResponsiveValueByScreen, makeStyleResponsive } from '@gem-sdk/core';
+import { DESCRIPTION_LINE_HEIGHT_DEFAULT } from './const.js';
+const getMaxHeightStyleDefault = (setting)=>{
+    let result = {
+        desktop: 'none'
+    };
+    const devices = [
+        'desktop',
+        'mobile',
+        'tablet'
+    ];
+    devices.forEach((device)=>{
+        const lineClamp = getResponsiveValueByScreen(setting?.lineClamp, device);
+        const hasLineClamp = getResponsiveValueByScreen(setting?.hasLineClamp, device);
+        const maxHeight = hasLineClamp && lineClamp ? `${lineClamp * DESCRIPTION_LINE_HEIGHT_DEFAULT}px` : 'none';
+        result = {
+            ...result,
+            [device]: maxHeight
+        };
+    });
+    const style = makeStyleResponsive('maxh', result);
+    return style;
+};
+export { getMaxHeightStyleDefault };

package/dist/esm/product/components/ProductDescription/const.js ADDED Viewed

@@ -0,0 +1,3 @@
+const DESCRIPTION_LINE_HEIGHT_DEFAULT = 21;
+export { DESCRIPTION_LINE_HEIGHT_DEFAULT };

package/dist/esm/product/components/ProductDescription.js CHANGED Viewed

@@ -1,6 +1,8 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useProduct, useCurrentDevice, getResponsiveValueByScreen, isSafari, composeTypographyClassName, composeTypographyStyle, cls, getGlobalColorClass, getStyleShadow, makeStyleResponsive, makeStyle, getGlobalColorStyle } from '@gem-sdk/core';
 import { useState, useRef, useEffect } from 'react';
+import { getMaxHeightStyleDefault } from './ProductDescription/common.js';
+import { DESCRIPTION_LINE_HEIGHT_DEFAULT } from './ProductDescription/const.js';
 const ProductDescription = ({ setting, builderProps })=>{
     const [open, setOpen] = useState(false);
@@ -14,14 +16,18 @@ const ProductDescription = ({ setting, builderProps })=>{
     useEffect(()=>{
         const dom = ref.current;
         setOpen(false);
-        if (dom && hasLineClamp && product?.description) {
+        if (!dom) return;
+        const enableShowMore = hasLineClamp && product?.descriptionHtml;
+        if (!enableShowMore) dom.style.maxHeight = 'none';
+        else {
             const value = lineClamp;
             setTimeout(()=>{
                 const scrollHeight = dom?.scrollHeight ?? 0;
                 const clientHeight = dom?.clientHeight ?? 0;
-                const lineHeight = window.getComputedStyle(dom).getPropertyValue('line-height');
-                const lineText = Math.round((scrollHeight ?? 0) / parseInt(lineHeight));
-                const conditionCheckLine = isSafari() ? value && value < lineText : clientHeight < scrollHeight;
+                const lineHeight = getLineHeightFromDom();
+                const lineText = Math.round((scrollHeight ?? 0) / lineHeight);
+                dom.style.maxHeight = getMaxHeight(lineHeight);
+                const conditionCheckLine = value && value < lineText || clientHeight < scrollHeight;
                 if (value && conditionCheckLine) {
                     allowShowViewMore(()=>true);
                 } else {
@@ -32,8 +38,19 @@ const ProductDescription = ({ setting, builderProps })=>{
     }, [
         hasLineClamp,
         lineClamp,
-        product?.description
+        product?.description,
+        isSafari
     ]);
+    const getLineHeightFromDom = ()=>{
+        if (!ref.current) return DESCRIPTION_LINE_HEIGHT_DEFAULT;
+        const lineHeight = window.getComputedStyle(ref.current).getPropertyValue('line-height');
+        return parseInt(lineHeight);
+    };
+    const getMaxHeight = (lineHeight)=>{
+        if (!hasLineClamp || !lineClamp) return 'auto';
+        if (lineHeight) return `${lineClamp * lineHeight}px`;
+        return 'auto';
+    };
     const Tag = htmlTag === 'html' ? 'div' : 'p';
     const appendTypoClass = composeTypographyClassName(setting?.typo, setting?.typography);
     const appendTypoStyle = composeTypographyStyle(setting?.typo, setting?.typography);
@@ -50,7 +67,17 @@ const ProductDescription = ({ setting, builderProps })=>{
     }
   `;
     const DescriptionNotFoundString = 'This product does not have a description';
-    const hasDescription = product?.description && product.description?.trim() != '';
+    const noDescriptionHtml = !product?.descriptionHtml;
+    const handleToggleShowMore = ()=>{
+        if (!ref.current) return;
+        const lineHeight = getLineHeightFromDom();
+        if (open) {
+            ref.current.style.maxHeight = getMaxHeight(lineHeight);
+        } else {
+            ref.current.style.maxHeight = 'none';
+        }
+        setOpen((prev)=>!prev);
+    };
     return /*#__PURE__*/ jsx(Fragment, {
         children: !product ? null : /*#__PURE__*/ jsxs("div", {
             "data-id": builderProps?.uid,
@@ -61,7 +88,7 @@ const ProductDescription = ({ setting, builderProps })=>{
                 /*#__PURE__*/ jsx(Tag, {
                     ref: ref,
                     "data-gp-text": true,
-                    className: cls('gp-p-description-text gp-break-words safari:[&_p]:gp-inline safari:[&_p]:after:gp-whitespace-pre', appendTypoClass, !hasDescription ? 'gp-p-2 gp-text-center gp-text-sm gp-font-semibold gp-text-gray-500 gp-py-2 !gp-text-center' : '', getGlobalColorClass('text', setting?.color)),
+                    className: cls('gp-p-description-text gp-break-words safari:[&_p]:gp-inline safari:[&_p]:after:gp-whitespace-pre', appendTypoClass, noDescriptionHtml ? 'gp-p-2 gp-text-center gp-text-sm gp-font-semibold gp-text-gray-500 gp-py-2 !gp-text-center' : '', getGlobalColorClass('text', setting?.color)),
                     style: {
                         ...getStyleShadow({
                             value: setting?.textShadow,
@@ -73,10 +100,11 @@ const ProductDescription = ({ setting, builderProps })=>{
                         ...makeStyle({
                             tt: setting?.transform
                         }),
-                        ...appendTypoStyle
+                        ...appendTypoStyle,
+                        ...getMaxHeightStyleDefault(setting)
                     },
                     dangerouslySetInnerHTML: {
-                        __html: product?.descriptionHtml && hasDescription ? product.descriptionHtml : `${DescriptionNotFoundString}`
+                        __html: product?.descriptionHtml || `${DescriptionNotFoundString}`
                     }
                 }),
                 hasLineClamp && isShowViewMore && /*#__PURE__*/ jsxs("button", {
@@ -89,7 +117,7 @@ const ProductDescription = ({ setting, builderProps })=>{
                         ...appendTypoStyle,
                         ...getGlobalColorStyle(setting?.showMoreColor)
                     },
-                    onClick: ()=>setOpen((prev)=>!prev),
+                    onClick: handleToggleShowMore,
                     children: [
                         !open ? setting?.viewMoreText : setting?.viewLessText,
                         setting?.enableViewMoreIcon && /*#__PURE__*/ jsx("svg", {

package/dist/esm/product/components/ProductDescription.liquid.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { composeTypographyClassName, composeTypographyStyle, getStyleShadow, makeStyleResponsive, getGlobalColorStyle, makeStyle, makeLineClamp, template, cls, getGlobalColorClass, RenderIf, isLocalEnv, baseAssetURL } from '@gem-sdk/core';
 import { getSettingPreloadData } from '../../helpers.js';
+import { getMaxHeightStyleDefault } from './ProductDescription/common.js';
 const devices = [
     'desktop',
@@ -31,7 +32,8 @@ const ProductDescription = ({ setting, advanced, builderProps })=>{
         ...makeStyle({
             tt: setting?.transform
         }),
-        ...appendTypoStyle
+        ...appendTypoStyle,
+        ...getMaxHeightStyleDefault(setting)
     };
     const collapseStyle = {
         ...defaultStyle,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/components",
-  "version": "2.1.15",
+  "version": "2.1.16",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",