@gem-sdk/core 1.23.0-staging.409 → 1.23.0-staging.415

package/dist/cjs/components/resize/Spacing.js

@@ -25,6 +25,10 @@ function Spacing(props) {
     const isDragging = react.useRef(false);
     const startY = react.useRef(0);
     const marginBottom = react.useRef(0);
+    const $visualNumberValue = react.useRef(null);
+    const [marginBottomValue, setMarginBottomValue] = react.useState(0);
+    const [isShowVisual, setIsShowVisual] = react.useState(false);
+    const hideVisualNumberValue = react.useRef(null);
     const getNewValueMargin = (event)=>{
         const top = event.clientY;
         const diffY = Math.ceil(top - startY.current);
@@ -43,6 +47,7 @@ function Spacing(props) {
             const $component = $bottomDrag.current.closest('[data-toolbar-wrap]');
             if ($component) {
                 $component.style.marginBottom = newValue;
+                onShowMarginBottomNumber(newValue);
             }
         }
     };
@@ -135,6 +140,7 @@ function Spacing(props) {
         if ($marginBottom) {
             if ($bottomBg.current && $bottomDrag.current) {
                 let value = style.marginBottom;
+                onShowMarginBottomNumber(value);
                 if (parseFloat(value) < 0) {
                     value = '0';
                 }
@@ -153,17 +159,47 @@ function Spacing(props) {
             }
         }
     }, []);
+    const onShowMarginBottomNumber = (value)=>{
+        const parsedValue = parseFloat(value);
+        setMarginBottomValue(parsedValue);
+        setIsShowVisual(true);
+        if (hideVisualNumberValue.current) clearTimeout(hideVisualNumberValue.current);
+        hideVisualNumberValue.current = setTimeout(()=>{
+            setIsShowVisual(false);
+        }, 2000);
+        // break point 28px
+        const topPosition = parsedValue < 28 && parsedValue >= 0 ? parsedValue / 2 + 16 : parsedValue > 28 ? 0 : 16;
+        if ($visualNumberValue.current) {
+            $visualNumberValue.current.style.transform = `translateY(${topPosition}px)`;
+        }
+    };
+    const previousAdvanced = usePrevious(props.advanced?.['spacing-setting']);
     react.useEffect(()=>{
+        // validate spacing setting changed
+        if (JSON.stringify(previousAdvanced) !== JSON.stringify(props.advanced?.['spacing-setting'])) {
+            updateSpacing();
+        }
+    }, [
+        previousAdvanced,
+        props.advanced,
+        updateSpacing
+    ]);
+    const onWindowResize = react.useCallback(()=>{
         updateSpacing();
-    });
+    }, [
+        updateSpacing
+    ]);
     react.useEffect(()=>{
         window.addEventListener('editor:toolbar:update-margin-bottom', updateSpacing);
         window.addEventListener('editor:toolbar:update-padding-left', updateSpacing);
+        window.addEventListener('resize', onWindowResize);
         return ()=>{
             window.removeEventListener('editor:toolbar:update-margin-bottom', updateSpacing);
             window.removeEventListener('editor:toolbar:update-padding-left', updateSpacing);
+            window.removeEventListener('resize', onWindowResize);
         };
     }, [
+        onWindowResize,
         updateSpacing
     ]);
     return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
@@ -174,12 +210,20 @@ function Spacing(props) {
             children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
                 "data-spacing-margin-bottom": true,
                 children: [
-                    /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    /*#__PURE__*/ jsxRuntime.jsxs("div", {
                         "data-spacing-margin-bottom-bg": true,
                         ref: $bottomBg,
-                        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
-                            "data-spacing-margin-bottom-value": true
-                        })
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                "data-spacing-margin-bottom-value": true
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                "data-active": isShowVisual,
+                                "data-value-number": true,
+                                ref: $visualNumberValue,
+                                children: marginBottomValue
+                            })
+                        ]
                     }),
                     /*#__PURE__*/ jsxRuntime.jsx("div", {
                         ref: $bottomDrag,
@@ -193,5 +237,14 @@ function Spacing(props) {
         })
     });
 }
+const usePrevious = (value)=>{
+    const ref = react.useRef();
+    react.useEffect(()=>{
+        ref.current = value;
+    }, [
+        value
+    ]);
+    return ref.current;
+};
 
 exports.default = Spacing;

package/dist/esm/components/resize/Spacing.js

@@ -1,5 +1,5 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useRef, useCallback, useEffect } from 'react';
+import { useRef, useState, useCallback, useEffect } from 'react';
 import 'zustand';
 import { useBuilderPreviewStore } from '../../contexts/BuilderPreviewContext.js';
 import 'swr';
@@ -21,6 +21,10 @@ function Spacing(props) {
     const isDragging = useRef(false);
     const startY = useRef(0);
     const marginBottom = useRef(0);
+    const $visualNumberValue = useRef(null);
+    const [marginBottomValue, setMarginBottomValue] = useState(0);
+    const [isShowVisual, setIsShowVisual] = useState(false);
+    const hideVisualNumberValue = useRef(null);
     const getNewValueMargin = (event)=>{
         const top = event.clientY;
         const diffY = Math.ceil(top - startY.current);
@@ -39,6 +43,7 @@ function Spacing(props) {
             const $component = $bottomDrag.current.closest('[data-toolbar-wrap]');
             if ($component) {
                 $component.style.marginBottom = newValue;
+                onShowMarginBottomNumber(newValue);
             }
         }
     };
@@ -131,6 +136,7 @@ function Spacing(props) {
         if ($marginBottom) {
             if ($bottomBg.current && $bottomDrag.current) {
                 let value = style.marginBottom;
+                onShowMarginBottomNumber(value);
                 if (parseFloat(value) < 0) {
                     value = '0';
                 }
@@ -149,17 +155,47 @@ function Spacing(props) {
             }
         }
     }, []);
+    const onShowMarginBottomNumber = (value)=>{
+        const parsedValue = parseFloat(value);
+        setMarginBottomValue(parsedValue);
+        setIsShowVisual(true);
+        if (hideVisualNumberValue.current) clearTimeout(hideVisualNumberValue.current);
+        hideVisualNumberValue.current = setTimeout(()=>{
+            setIsShowVisual(false);
+        }, 2000);
+        // break point 28px
+        const topPosition = parsedValue < 28 && parsedValue >= 0 ? parsedValue / 2 + 16 : parsedValue > 28 ? 0 : 16;
+        if ($visualNumberValue.current) {
+            $visualNumberValue.current.style.transform = `translateY(${topPosition}px)`;
+        }
+    };
+    const previousAdvanced = usePrevious(props.advanced?.['spacing-setting']);
     useEffect(()=>{
+        // validate spacing setting changed
+        if (JSON.stringify(previousAdvanced) !== JSON.stringify(props.advanced?.['spacing-setting'])) {
+            updateSpacing();
+        }
+    }, [
+        previousAdvanced,
+        props.advanced,
+        updateSpacing
+    ]);
+    const onWindowResize = useCallback(()=>{
         updateSpacing();
-    });
+    }, [
+        updateSpacing
+    ]);
     useEffect(()=>{
         window.addEventListener('editor:toolbar:update-margin-bottom', updateSpacing);
         window.addEventListener('editor:toolbar:update-padding-left', updateSpacing);
+        window.addEventListener('resize', onWindowResize);
         return ()=>{
             window.removeEventListener('editor:toolbar:update-margin-bottom', updateSpacing);
             window.removeEventListener('editor:toolbar:update-padding-left', updateSpacing);
+            window.removeEventListener('resize', onWindowResize);
         };
     }, [
+        onWindowResize,
         updateSpacing
     ]);
     return /*#__PURE__*/ jsx(Fragment, {
@@ -170,12 +206,20 @@ function Spacing(props) {
             children: /*#__PURE__*/ jsxs("div", {
                 "data-spacing-margin-bottom": true,
                 children: [
-                    /*#__PURE__*/ jsx("div", {
+                    /*#__PURE__*/ jsxs("div", {
                         "data-spacing-margin-bottom-bg": true,
                         ref: $bottomBg,
-                        children: /*#__PURE__*/ jsx("div", {
-                            "data-spacing-margin-bottom-value": true
-                        })
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                "data-spacing-margin-bottom-value": true
+                            }),
+                            /*#__PURE__*/ jsx("div", {
+                                "data-active": isShowVisual,
+                                "data-value-number": true,
+                                ref: $visualNumberValue,
+                                children: marginBottomValue
+                            })
+                        ]
                     }),
                     /*#__PURE__*/ jsx("div", {
                         ref: $bottomDrag,
@@ -189,5 +233,14 @@ function Spacing(props) {
         })
     });
 }
+const usePrevious = (value)=>{
+    const ref = useRef();
+    useEffect(()=>{
+        ref.current = value;
+    }, [
+        value
+    ]);
+    return ref.current;
+};
 
 export { Spacing as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/core",
-  "version": "1.23.0-staging.409",
+  "version": "1.23.0-staging.415",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@gem-sdk/adapter-shopify": "1.23.0-staging.383",
-    "@gem-sdk/styles": "1.23.0-staging.407"
+    "@gem-sdk/styles": "1.23.0-staging.415"
   },
   "dependencies": {
     "react-error-boundary": "4.0.10",