@gem-sdk/core 1.23.0-staging.194 → 1.23.0-staging.195
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.
|
@@ -102,6 +102,43 @@ function Spacing(props) {
|
|
|
102
102
|
const onMouseUp = ()=>{
|
|
103
103
|
endDrag();
|
|
104
104
|
};
|
|
105
|
+
const getChildrenByAttrSelector = ($el, attrSelector)=>{
|
|
106
|
+
const childLen = $el.children.length;
|
|
107
|
+
if (childLen) {
|
|
108
|
+
for(let i = 0; i < childLen; i++){
|
|
109
|
+
const children = $el.children[i];
|
|
110
|
+
if (children) {
|
|
111
|
+
const is = children.getAttribute(attrSelector);
|
|
112
|
+
if (is) {
|
|
113
|
+
return children;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
};
|
|
119
|
+
const onUpdateMarginBottom = react.useCallback((e)=>{
|
|
120
|
+
if (isDragging.current) return;
|
|
121
|
+
const detail = e.detail;
|
|
122
|
+
const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
|
|
123
|
+
const toolbar = $component && getChildrenByAttrSelector($component, 'data-toolbar');
|
|
124
|
+
const isActive = toolbar && toolbar.getAttribute('data-toolbar-active');
|
|
125
|
+
if (isActive && detail?.marginBottom) {
|
|
126
|
+
const currentValue = isNaN(parseInt(detail?.marginBottom)) ? 0 : Math.max(parseInt(detail?.marginBottom), 0);
|
|
127
|
+
const newValue = `${currentValue}px`;
|
|
128
|
+
if ($bottomDrag.current && $bottomBg.current) {
|
|
129
|
+
$bottomBg.current.style.height = newValue;
|
|
130
|
+
$bottomDrag.current.style.top = newValue;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
}, []);
|
|
134
|
+
react.useEffect(()=>{
|
|
135
|
+
window.addEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
|
|
136
|
+
return ()=>{
|
|
137
|
+
window.removeEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
|
|
138
|
+
};
|
|
139
|
+
}, [
|
|
140
|
+
onUpdateMarginBottom
|
|
141
|
+
]);
|
|
105
142
|
return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
106
143
|
children: props.tag !== 'Section' && /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
107
144
|
"data-spacing": true,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import { useRef } from 'react';
|
|
2
|
+
import { useRef, useCallback, useEffect } from 'react';
|
|
3
3
|
import 'zustand';
|
|
4
4
|
import { useBuilderPreviewStore } from '../../contexts/BuilderPreviewContext.js';
|
|
5
5
|
import 'swr';
|
|
@@ -98,6 +98,43 @@ function Spacing(props) {
|
|
|
98
98
|
const onMouseUp = ()=>{
|
|
99
99
|
endDrag();
|
|
100
100
|
};
|
|
101
|
+
const getChildrenByAttrSelector = ($el, attrSelector)=>{
|
|
102
|
+
const childLen = $el.children.length;
|
|
103
|
+
if (childLen) {
|
|
104
|
+
for(let i = 0; i < childLen; i++){
|
|
105
|
+
const children = $el.children[i];
|
|
106
|
+
if (children) {
|
|
107
|
+
const is = children.getAttribute(attrSelector);
|
|
108
|
+
if (is) {
|
|
109
|
+
return children;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
};
|
|
115
|
+
const onUpdateMarginBottom = useCallback((e)=>{
|
|
116
|
+
if (isDragging.current) return;
|
|
117
|
+
const detail = e.detail;
|
|
118
|
+
const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
|
|
119
|
+
const toolbar = $component && getChildrenByAttrSelector($component, 'data-toolbar');
|
|
120
|
+
const isActive = toolbar && toolbar.getAttribute('data-toolbar-active');
|
|
121
|
+
if (isActive && detail?.marginBottom) {
|
|
122
|
+
const currentValue = isNaN(parseInt(detail?.marginBottom)) ? 0 : Math.max(parseInt(detail?.marginBottom), 0);
|
|
123
|
+
const newValue = `${currentValue}px`;
|
|
124
|
+
if ($bottomDrag.current && $bottomBg.current) {
|
|
125
|
+
$bottomBg.current.style.height = newValue;
|
|
126
|
+
$bottomDrag.current.style.top = newValue;
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
}, []);
|
|
130
|
+
useEffect(()=>{
|
|
131
|
+
window.addEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
|
|
132
|
+
return ()=>{
|
|
133
|
+
window.removeEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
|
|
134
|
+
};
|
|
135
|
+
}, [
|
|
136
|
+
onUpdateMarginBottom
|
|
137
|
+
]);
|
|
101
138
|
return /*#__PURE__*/ jsx(Fragment, {
|
|
102
139
|
children: props.tag !== 'Section' && /*#__PURE__*/ jsx("div", {
|
|
103
140
|
"data-spacing": true,
|