@gem-sdk/core 1.33.1 → 1.33.4
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.
- package/dist/cjs/components/ComponentToolbarPreview.js +1 -4
- package/dist/cjs/helpers/background.js +6 -4
- package/dist/cjs/helpers/carousel.js +58 -0
- package/dist/cjs/helpers/make-style.js +20 -4
- package/dist/cjs/index.js +6 -0
- package/dist/esm/components/ComponentToolbarPreview.js +1 -4
- package/dist/esm/helpers/background.js +6 -4
- package/dist/esm/helpers/carousel.js +54 -0
- package/dist/esm/helpers/make-style.js +19 -5
- package/dist/esm/index.js +2 -1
- package/dist/types/index.d.ts +201 -31
- package/package.json +2 -2
- package/dist/cjs/components/resize/Resize.js +0 -16
- package/dist/cjs/components/resize/Spacing.js +0 -222
- package/dist/esm/components/resize/Resize.js +0 -12
- package/dist/esm/components/resize/Spacing.js +0 -218
|
@@ -1,222 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var react = require('react');
|
|
7
|
-
require('zustand');
|
|
8
|
-
var BuilderPreviewContext = require('../../contexts/BuilderPreviewContext.js');
|
|
9
|
-
require('swr');
|
|
10
|
-
require('@gem-sdk/adapter-shopify');
|
|
11
|
-
require('swr/mutation');
|
|
12
|
-
require('vanilla-lazyload');
|
|
13
|
-
require('../../hooks/useCartUI.js');
|
|
14
|
-
require('react-transition-group');
|
|
15
|
-
require('@gem-sdk/core');
|
|
16
|
-
require('../../helpers/convert.js');
|
|
17
|
-
|
|
18
|
-
function Spacing(props) {
|
|
19
|
-
const isThemeSectionEditor = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.isThemeSectionEditor);
|
|
20
|
-
const $bottomDrag = react.useRef(null);
|
|
21
|
-
const $bottomBg = react.useRef(null);
|
|
22
|
-
const delayMouseMove = react.useRef(null);
|
|
23
|
-
const isDragging = react.useRef(false);
|
|
24
|
-
const startY = react.useRef(0);
|
|
25
|
-
const marginBottom = react.useRef(0);
|
|
26
|
-
const getNewValueMargin = (event)=>{
|
|
27
|
-
const top = event.clientY;
|
|
28
|
-
const diffY = Math.ceil(top - startY.current);
|
|
29
|
-
const currentValue = marginBottom.current || 0;
|
|
30
|
-
const newValue = currentValue + diffY >= 0 ? `${currentValue + diffY}px` : `0px`;
|
|
31
|
-
return {
|
|
32
|
-
newValue
|
|
33
|
-
};
|
|
34
|
-
};
|
|
35
|
-
const onMouseMoveDocument = (event)=>{
|
|
36
|
-
if ($bottomDrag.current && $bottomBg.current) {
|
|
37
|
-
// $bottomDrag.current.
|
|
38
|
-
const { newValue } = getNewValueMargin(event);
|
|
39
|
-
$bottomBg.current.style.height = newValue;
|
|
40
|
-
$bottomDrag.current.style.top = newValue;
|
|
41
|
-
const $component = $bottomDrag.current.closest('[data-toolbar-wrap]');
|
|
42
|
-
if ($component) {
|
|
43
|
-
$component.style.marginBottom = newValue;
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
|
-
const onMouseUpDocument = ()=>{
|
|
48
|
-
endDrag();
|
|
49
|
-
};
|
|
50
|
-
const startDrag = ()=>{
|
|
51
|
-
if (delayMouseMove.current) clearTimeout(delayMouseMove.current);
|
|
52
|
-
delayMouseMove.current = setTimeout(()=>{
|
|
53
|
-
isDragging.current = true;
|
|
54
|
-
const event = new CustomEvent('editor:toolbar:resize-spacing', {
|
|
55
|
-
bubbles: true,
|
|
56
|
-
detail: {
|
|
57
|
-
value: true
|
|
58
|
-
}
|
|
59
|
-
});
|
|
60
|
-
window.dispatchEvent(event);
|
|
61
|
-
document.addEventListener('mousemove', onMouseMoveDocument);
|
|
62
|
-
document.addEventListener('mouseup', onMouseUpDocument);
|
|
63
|
-
}, 100);
|
|
64
|
-
};
|
|
65
|
-
const endDrag = ()=>{
|
|
66
|
-
if (delayMouseMove.current) clearTimeout(delayMouseMove.current);
|
|
67
|
-
isDragging.current = false;
|
|
68
|
-
const event = new CustomEvent('editor:toolbar:resize-spacing', {
|
|
69
|
-
bubbles: true,
|
|
70
|
-
detail: {
|
|
71
|
-
value: false
|
|
72
|
-
}
|
|
73
|
-
});
|
|
74
|
-
window.dispatchEvent(event);
|
|
75
|
-
if ($bottomDrag.current) {
|
|
76
|
-
const style = getComputedStyle($bottomDrag.current);
|
|
77
|
-
const marginBottom = style.top;
|
|
78
|
-
const event = new CustomEvent('editor:toolbar:change-margin-bottom', {
|
|
79
|
-
bubbles: true,
|
|
80
|
-
detail: {
|
|
81
|
-
componentUid: props.uid,
|
|
82
|
-
marginBottom
|
|
83
|
-
}
|
|
84
|
-
});
|
|
85
|
-
window.dispatchEvent(event);
|
|
86
|
-
}
|
|
87
|
-
const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
|
|
88
|
-
if ($component) {
|
|
89
|
-
$component.style.marginBottom = '';
|
|
90
|
-
}
|
|
91
|
-
document.removeEventListener('mousemove', onMouseMoveDocument);
|
|
92
|
-
document.removeEventListener('mouseup', onMouseUpDocument);
|
|
93
|
-
};
|
|
94
|
-
const onMouseDown = (event)=>{
|
|
95
|
-
if ($bottomDrag.current) {
|
|
96
|
-
const style = getComputedStyle($bottomDrag.current);
|
|
97
|
-
startY.current = event.clientY;
|
|
98
|
-
marginBottom.current = parseFloat(style.top);
|
|
99
|
-
startDrag();
|
|
100
|
-
}
|
|
101
|
-
};
|
|
102
|
-
const onMouseUp = ()=>{
|
|
103
|
-
endDrag();
|
|
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 = parseInt(detail?.marginBottom);
|
|
127
|
-
const newValue = `${currentValue}px`;
|
|
128
|
-
if ($bottomDrag.current && $bottomBg.current) {
|
|
129
|
-
if (currentValue < 0) {
|
|
130
|
-
$bottomBg.current.style.display = 'none';
|
|
131
|
-
$bottomDrag.current.style.display = 'none';
|
|
132
|
-
} else {
|
|
133
|
-
$bottomBg.current.style.display = 'block';
|
|
134
|
-
$bottomDrag.current.style.display = 'block';
|
|
135
|
-
$bottomBg.current.style.height = newValue;
|
|
136
|
-
$bottomDrag.current.style.top = newValue;
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
}, []);
|
|
141
|
-
const isPopup = (el)=>{
|
|
142
|
-
const tag = el.getAttribute('data-component-tag');
|
|
143
|
-
return tag === 'Dialog';
|
|
144
|
-
};
|
|
145
|
-
const isSticky = (el)=>{
|
|
146
|
-
const tag = el.getAttribute('data-component-tag');
|
|
147
|
-
return tag === 'Sticky';
|
|
148
|
-
};
|
|
149
|
-
const setPositionSpacing = react.useCallback((paddingLeft)=>{
|
|
150
|
-
const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
|
|
151
|
-
if ($component) {
|
|
152
|
-
if (isPopup($component) || isSticky($component)) return;
|
|
153
|
-
const toolbar = $component && getChildrenByAttrSelector($component, 'data-toolbar');
|
|
154
|
-
const isActive = toolbar && toolbar.getAttribute('data-toolbar-active');
|
|
155
|
-
if (isActive && paddingLeft) {
|
|
156
|
-
const currentValue = isNaN(parseInt(paddingLeft)) ? 0 : Math.max(parseInt(paddingLeft), 0);
|
|
157
|
-
const newValue = `-${currentValue}px`;
|
|
158
|
-
const translateCss = `translate(-${currentValue}px, -100%)`;
|
|
159
|
-
if ($bottomDrag.current && $bottomBg.current) {
|
|
160
|
-
$bottomBg.current.style.left = newValue;
|
|
161
|
-
$bottomDrag.current.style.transform = translateCss;
|
|
162
|
-
}
|
|
163
|
-
}
|
|
164
|
-
}
|
|
165
|
-
}, []);
|
|
166
|
-
const onUpdatePaddingLeft = react.useCallback((e)=>{
|
|
167
|
-
if (isDragging.current) return;
|
|
168
|
-
const detail = e.detail;
|
|
169
|
-
if (detail?.paddingLeft) {
|
|
170
|
-
setPositionSpacing(detail.paddingLeft);
|
|
171
|
-
}
|
|
172
|
-
}, [
|
|
173
|
-
setPositionSpacing
|
|
174
|
-
]);
|
|
175
|
-
react.useEffect(()=>{
|
|
176
|
-
const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
|
|
177
|
-
if ($component) {
|
|
178
|
-
const style = getComputedStyle($component);
|
|
179
|
-
const paddingLeft = style.paddingLeft;
|
|
180
|
-
setPositionSpacing(paddingLeft);
|
|
181
|
-
}
|
|
182
|
-
});
|
|
183
|
-
react.useEffect(()=>{
|
|
184
|
-
window.addEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
|
|
185
|
-
window.addEventListener('editor:toolbar:update-padding-left', onUpdatePaddingLeft);
|
|
186
|
-
return ()=>{
|
|
187
|
-
window.removeEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
|
|
188
|
-
window.removeEventListener('editor:toolbar:update-padding-left', onUpdatePaddingLeft);
|
|
189
|
-
};
|
|
190
|
-
}, [
|
|
191
|
-
onUpdateMarginBottom,
|
|
192
|
-
onUpdatePaddingLeft
|
|
193
|
-
]);
|
|
194
|
-
return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
195
|
-
children: props.tag !== 'Section' && /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
196
|
-
"data-spacing": true,
|
|
197
|
-
"data-spacing-theme-section": isThemeSectionEditor,
|
|
198
|
-
className: "absolute w-full bottom-0",
|
|
199
|
-
children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
200
|
-
"data-spacing-margin-bottom": true,
|
|
201
|
-
children: [
|
|
202
|
-
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
203
|
-
"data-spacing-margin-bottom-bg": true,
|
|
204
|
-
ref: $bottomBg,
|
|
205
|
-
children: /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
206
|
-
"data-spacing-margin-bottom-value": true
|
|
207
|
-
})
|
|
208
|
-
}),
|
|
209
|
-
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
210
|
-
ref: $bottomDrag,
|
|
211
|
-
"data-spacing-margin-bottom-drag": true,
|
|
212
|
-
onMouseDown: onMouseDown,
|
|
213
|
-
onMouseUp: onMouseUp,
|
|
214
|
-
role: "presentation"
|
|
215
|
-
})
|
|
216
|
-
]
|
|
217
|
-
})
|
|
218
|
-
})
|
|
219
|
-
});
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
exports.default = Spacing;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
2
|
-
import Spacing from './Spacing.js';
|
|
3
|
-
|
|
4
|
-
function Resize(props) {
|
|
5
|
-
return /*#__PURE__*/ jsx(Fragment, {
|
|
6
|
-
children: /*#__PURE__*/ jsx(Spacing, {
|
|
7
|
-
...props
|
|
8
|
-
})
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
export { Resize as default };
|
|
@@ -1,218 +0,0 @@
|
|
|
1
|
-
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import { useRef, useCallback, useEffect } from 'react';
|
|
3
|
-
import 'zustand';
|
|
4
|
-
import { useBuilderPreviewStore } from '../../contexts/BuilderPreviewContext.js';
|
|
5
|
-
import 'swr';
|
|
6
|
-
import '@gem-sdk/adapter-shopify';
|
|
7
|
-
import 'swr/mutation';
|
|
8
|
-
import 'vanilla-lazyload';
|
|
9
|
-
import '../../hooks/useCartUI.js';
|
|
10
|
-
import 'react-transition-group';
|
|
11
|
-
import '@gem-sdk/core';
|
|
12
|
-
import '../../helpers/convert.js';
|
|
13
|
-
|
|
14
|
-
function Spacing(props) {
|
|
15
|
-
const isThemeSectionEditor = useBuilderPreviewStore((s)=>s.isThemeSectionEditor);
|
|
16
|
-
const $bottomDrag = useRef(null);
|
|
17
|
-
const $bottomBg = useRef(null);
|
|
18
|
-
const delayMouseMove = useRef(null);
|
|
19
|
-
const isDragging = useRef(false);
|
|
20
|
-
const startY = useRef(0);
|
|
21
|
-
const marginBottom = useRef(0);
|
|
22
|
-
const getNewValueMargin = (event)=>{
|
|
23
|
-
const top = event.clientY;
|
|
24
|
-
const diffY = Math.ceil(top - startY.current);
|
|
25
|
-
const currentValue = marginBottom.current || 0;
|
|
26
|
-
const newValue = currentValue + diffY >= 0 ? `${currentValue + diffY}px` : `0px`;
|
|
27
|
-
return {
|
|
28
|
-
newValue
|
|
29
|
-
};
|
|
30
|
-
};
|
|
31
|
-
const onMouseMoveDocument = (event)=>{
|
|
32
|
-
if ($bottomDrag.current && $bottomBg.current) {
|
|
33
|
-
// $bottomDrag.current.
|
|
34
|
-
const { newValue } = getNewValueMargin(event);
|
|
35
|
-
$bottomBg.current.style.height = newValue;
|
|
36
|
-
$bottomDrag.current.style.top = newValue;
|
|
37
|
-
const $component = $bottomDrag.current.closest('[data-toolbar-wrap]');
|
|
38
|
-
if ($component) {
|
|
39
|
-
$component.style.marginBottom = newValue;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
};
|
|
43
|
-
const onMouseUpDocument = ()=>{
|
|
44
|
-
endDrag();
|
|
45
|
-
};
|
|
46
|
-
const startDrag = ()=>{
|
|
47
|
-
if (delayMouseMove.current) clearTimeout(delayMouseMove.current);
|
|
48
|
-
delayMouseMove.current = setTimeout(()=>{
|
|
49
|
-
isDragging.current = true;
|
|
50
|
-
const event = new CustomEvent('editor:toolbar:resize-spacing', {
|
|
51
|
-
bubbles: true,
|
|
52
|
-
detail: {
|
|
53
|
-
value: true
|
|
54
|
-
}
|
|
55
|
-
});
|
|
56
|
-
window.dispatchEvent(event);
|
|
57
|
-
document.addEventListener('mousemove', onMouseMoveDocument);
|
|
58
|
-
document.addEventListener('mouseup', onMouseUpDocument);
|
|
59
|
-
}, 100);
|
|
60
|
-
};
|
|
61
|
-
const endDrag = ()=>{
|
|
62
|
-
if (delayMouseMove.current) clearTimeout(delayMouseMove.current);
|
|
63
|
-
isDragging.current = false;
|
|
64
|
-
const event = new CustomEvent('editor:toolbar:resize-spacing', {
|
|
65
|
-
bubbles: true,
|
|
66
|
-
detail: {
|
|
67
|
-
value: false
|
|
68
|
-
}
|
|
69
|
-
});
|
|
70
|
-
window.dispatchEvent(event);
|
|
71
|
-
if ($bottomDrag.current) {
|
|
72
|
-
const style = getComputedStyle($bottomDrag.current);
|
|
73
|
-
const marginBottom = style.top;
|
|
74
|
-
const event = new CustomEvent('editor:toolbar:change-margin-bottom', {
|
|
75
|
-
bubbles: true,
|
|
76
|
-
detail: {
|
|
77
|
-
componentUid: props.uid,
|
|
78
|
-
marginBottom
|
|
79
|
-
}
|
|
80
|
-
});
|
|
81
|
-
window.dispatchEvent(event);
|
|
82
|
-
}
|
|
83
|
-
const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
|
|
84
|
-
if ($component) {
|
|
85
|
-
$component.style.marginBottom = '';
|
|
86
|
-
}
|
|
87
|
-
document.removeEventListener('mousemove', onMouseMoveDocument);
|
|
88
|
-
document.removeEventListener('mouseup', onMouseUpDocument);
|
|
89
|
-
};
|
|
90
|
-
const onMouseDown = (event)=>{
|
|
91
|
-
if ($bottomDrag.current) {
|
|
92
|
-
const style = getComputedStyle($bottomDrag.current);
|
|
93
|
-
startY.current = event.clientY;
|
|
94
|
-
marginBottom.current = parseFloat(style.top);
|
|
95
|
-
startDrag();
|
|
96
|
-
}
|
|
97
|
-
};
|
|
98
|
-
const onMouseUp = ()=>{
|
|
99
|
-
endDrag();
|
|
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 = parseInt(detail?.marginBottom);
|
|
123
|
-
const newValue = `${currentValue}px`;
|
|
124
|
-
if ($bottomDrag.current && $bottomBg.current) {
|
|
125
|
-
if (currentValue < 0) {
|
|
126
|
-
$bottomBg.current.style.display = 'none';
|
|
127
|
-
$bottomDrag.current.style.display = 'none';
|
|
128
|
-
} else {
|
|
129
|
-
$bottomBg.current.style.display = 'block';
|
|
130
|
-
$bottomDrag.current.style.display = 'block';
|
|
131
|
-
$bottomBg.current.style.height = newValue;
|
|
132
|
-
$bottomDrag.current.style.top = newValue;
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
}, []);
|
|
137
|
-
const isPopup = (el)=>{
|
|
138
|
-
const tag = el.getAttribute('data-component-tag');
|
|
139
|
-
return tag === 'Dialog';
|
|
140
|
-
};
|
|
141
|
-
const isSticky = (el)=>{
|
|
142
|
-
const tag = el.getAttribute('data-component-tag');
|
|
143
|
-
return tag === 'Sticky';
|
|
144
|
-
};
|
|
145
|
-
const setPositionSpacing = useCallback((paddingLeft)=>{
|
|
146
|
-
const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
|
|
147
|
-
if ($component) {
|
|
148
|
-
if (isPopup($component) || isSticky($component)) return;
|
|
149
|
-
const toolbar = $component && getChildrenByAttrSelector($component, 'data-toolbar');
|
|
150
|
-
const isActive = toolbar && toolbar.getAttribute('data-toolbar-active');
|
|
151
|
-
if (isActive && paddingLeft) {
|
|
152
|
-
const currentValue = isNaN(parseInt(paddingLeft)) ? 0 : Math.max(parseInt(paddingLeft), 0);
|
|
153
|
-
const newValue = `-${currentValue}px`;
|
|
154
|
-
const translateCss = `translate(-${currentValue}px, -100%)`;
|
|
155
|
-
if ($bottomDrag.current && $bottomBg.current) {
|
|
156
|
-
$bottomBg.current.style.left = newValue;
|
|
157
|
-
$bottomDrag.current.style.transform = translateCss;
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
}, []);
|
|
162
|
-
const onUpdatePaddingLeft = useCallback((e)=>{
|
|
163
|
-
if (isDragging.current) return;
|
|
164
|
-
const detail = e.detail;
|
|
165
|
-
if (detail?.paddingLeft) {
|
|
166
|
-
setPositionSpacing(detail.paddingLeft);
|
|
167
|
-
}
|
|
168
|
-
}, [
|
|
169
|
-
setPositionSpacing
|
|
170
|
-
]);
|
|
171
|
-
useEffect(()=>{
|
|
172
|
-
const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
|
|
173
|
-
if ($component) {
|
|
174
|
-
const style = getComputedStyle($component);
|
|
175
|
-
const paddingLeft = style.paddingLeft;
|
|
176
|
-
setPositionSpacing(paddingLeft);
|
|
177
|
-
}
|
|
178
|
-
});
|
|
179
|
-
useEffect(()=>{
|
|
180
|
-
window.addEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
|
|
181
|
-
window.addEventListener('editor:toolbar:update-padding-left', onUpdatePaddingLeft);
|
|
182
|
-
return ()=>{
|
|
183
|
-
window.removeEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
|
|
184
|
-
window.removeEventListener('editor:toolbar:update-padding-left', onUpdatePaddingLeft);
|
|
185
|
-
};
|
|
186
|
-
}, [
|
|
187
|
-
onUpdateMarginBottom,
|
|
188
|
-
onUpdatePaddingLeft
|
|
189
|
-
]);
|
|
190
|
-
return /*#__PURE__*/ jsx(Fragment, {
|
|
191
|
-
children: props.tag !== 'Section' && /*#__PURE__*/ jsx("div", {
|
|
192
|
-
"data-spacing": true,
|
|
193
|
-
"data-spacing-theme-section": isThemeSectionEditor,
|
|
194
|
-
className: "absolute w-full bottom-0",
|
|
195
|
-
children: /*#__PURE__*/ jsxs("div", {
|
|
196
|
-
"data-spacing-margin-bottom": true,
|
|
197
|
-
children: [
|
|
198
|
-
/*#__PURE__*/ jsx("div", {
|
|
199
|
-
"data-spacing-margin-bottom-bg": true,
|
|
200
|
-
ref: $bottomBg,
|
|
201
|
-
children: /*#__PURE__*/ jsx("div", {
|
|
202
|
-
"data-spacing-margin-bottom-value": true
|
|
203
|
-
})
|
|
204
|
-
}),
|
|
205
|
-
/*#__PURE__*/ jsx("div", {
|
|
206
|
-
ref: $bottomDrag,
|
|
207
|
-
"data-spacing-margin-bottom-drag": true,
|
|
208
|
-
onMouseDown: onMouseDown,
|
|
209
|
-
onMouseUp: onMouseUp,
|
|
210
|
-
role: "presentation"
|
|
211
|
-
})
|
|
212
|
-
]
|
|
213
|
-
})
|
|
214
|
-
})
|
|
215
|
-
});
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
export { Spacing as default };
|