@gem-sdk/core 1.23.0-staging.321 → 1.23.0-staging.322
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/esm/components/ComponentToolbarPreview.js +1 -4
- package/package.json +1 -1
- package/dist/cjs/components/resize/Resize.js +0 -16
- package/dist/cjs/components/resize/Spacing.js +0 -195
- package/dist/esm/components/resize/Resize.js +0 -12
- package/dist/esm/components/resize/Spacing.js +0 -191
|
@@ -13,9 +13,9 @@ require('../hooks/useCartUI.js');
|
|
|
13
13
|
var CreateThemeSection = require('./theme-section/CreateThemeSection.js');
|
|
14
14
|
var Tooltip = require('./toolbar/Tooltip.js');
|
|
15
15
|
var ThemeSectionStatus = require('./theme-section/ThemeSectionStatus.js');
|
|
16
|
-
var Resize = require('./resize/Resize.js');
|
|
17
16
|
require('../helpers/convert.js');
|
|
18
17
|
|
|
18
|
+
// import Resize from './resize/Resize';
|
|
19
19
|
const SECTION_LIMIT = 25;
|
|
20
20
|
const notVisible = (el)=>{
|
|
21
21
|
const overflow = getComputedStyle(el).overflow;
|
|
@@ -462,9 +462,6 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
462
462
|
})
|
|
463
463
|
})
|
|
464
464
|
]
|
|
465
|
-
}),
|
|
466
|
-
/*#__PURE__*/ jsxRuntime.jsx(Resize.default, {
|
|
467
|
-
...props
|
|
468
465
|
})
|
|
469
466
|
]
|
|
470
467
|
});
|
|
@@ -11,9 +11,9 @@ import '../hooks/useCartUI.js';
|
|
|
11
11
|
import { CreateThemeSection } from './theme-section/CreateThemeSection.js';
|
|
12
12
|
import Tooltip from './toolbar/Tooltip.js';
|
|
13
13
|
import { ThemeSectionStatus } from './theme-section/ThemeSectionStatus.js';
|
|
14
|
-
import Resize from './resize/Resize.js';
|
|
15
14
|
import '../helpers/convert.js';
|
|
16
15
|
|
|
16
|
+
// import Resize from './resize/Resize';
|
|
17
17
|
const SECTION_LIMIT = 25;
|
|
18
18
|
const notVisible = (el)=>{
|
|
19
19
|
const overflow = getComputedStyle(el).overflow;
|
|
@@ -460,9 +460,6 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
460
460
|
})
|
|
461
461
|
})
|
|
462
462
|
]
|
|
463
|
-
}),
|
|
464
|
-
/*#__PURE__*/ jsx(Resize, {
|
|
465
|
-
...props
|
|
466
463
|
})
|
|
467
464
|
]
|
|
468
465
|
});
|
package/package.json
CHANGED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var Spacing = require('./Spacing.js');
|
|
7
|
-
|
|
8
|
-
function Resize(props) {
|
|
9
|
-
return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
10
|
-
children: /*#__PURE__*/ jsxRuntime.jsx(Spacing.default, {
|
|
11
|
-
...props
|
|
12
|
-
})
|
|
13
|
-
});
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
exports.default = Resize;
|
|
@@ -1,195 +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 isLayoutElement = (el)=>{
|
|
120
|
-
const tag = el.getAttribute('data-component-tag');
|
|
121
|
-
return tag === 'Row' || tag === 'Product';
|
|
122
|
-
};
|
|
123
|
-
const updateSpacing = react.useCallback(()=>{
|
|
124
|
-
const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
|
|
125
|
-
if (!$component) return;
|
|
126
|
-
const toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
|
|
127
|
-
if (!toolbar) return;
|
|
128
|
-
const isActive = toolbar.getAttribute('data-toolbar-active');
|
|
129
|
-
if (!isActive) return;
|
|
130
|
-
const style = getComputedStyle($component);
|
|
131
|
-
const $spacing = getChildrenByAttrSelector($component, 'data-spacing');
|
|
132
|
-
const $marginBottom = ($spacing?.querySelector('[data-spacing-margin-bottom]')) || null;
|
|
133
|
-
if ($marginBottom) {
|
|
134
|
-
if ($bottomBg.current && $bottomDrag.current) {
|
|
135
|
-
let value = style.marginBottom;
|
|
136
|
-
if (parseFloat(value) < 0) {
|
|
137
|
-
value = '0';
|
|
138
|
-
}
|
|
139
|
-
$bottomBg.current.style.height = value;
|
|
140
|
-
$bottomDrag.current.style.top = value;
|
|
141
|
-
$marginBottom.setAttribute('data-spacing-margin-bottom-active', 'true');
|
|
142
|
-
if (isLayoutElement($component)) {
|
|
143
|
-
$bottomBg.current.style.left = '0';
|
|
144
|
-
} else {
|
|
145
|
-
const paddingLeft = style.paddingLeft;
|
|
146
|
-
const leftValue = `-${paddingLeft}`;
|
|
147
|
-
const translateCss = `translate(${leftValue}, -100%)`;
|
|
148
|
-
$bottomBg.current.style.left = leftValue;
|
|
149
|
-
$bottomDrag.current.style.transform = translateCss;
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
|
-
}, []);
|
|
154
|
-
react.useEffect(()=>{
|
|
155
|
-
updateSpacing();
|
|
156
|
-
});
|
|
157
|
-
react.useEffect(()=>{
|
|
158
|
-
window.addEventListener('editor:toolbar:update-margin-bottom', updateSpacing);
|
|
159
|
-
window.addEventListener('editor:toolbar:update-padding-left', updateSpacing);
|
|
160
|
-
return ()=>{
|
|
161
|
-
window.removeEventListener('editor:toolbar:update-margin-bottom', updateSpacing);
|
|
162
|
-
window.removeEventListener('editor:toolbar:update-padding-left', updateSpacing);
|
|
163
|
-
};
|
|
164
|
-
}, [
|
|
165
|
-
updateSpacing
|
|
166
|
-
]);
|
|
167
|
-
return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
168
|
-
children: props.tag !== 'Section' && /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
169
|
-
"data-spacing": true,
|
|
170
|
-
"data-spacing-theme-section": isThemeSectionEditor,
|
|
171
|
-
className: "absolute w-full bottom-0",
|
|
172
|
-
children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
173
|
-
"data-spacing-margin-bottom": true,
|
|
174
|
-
children: [
|
|
175
|
-
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
176
|
-
"data-spacing-margin-bottom-bg": true,
|
|
177
|
-
ref: $bottomBg,
|
|
178
|
-
children: /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
179
|
-
"data-spacing-margin-bottom-value": true
|
|
180
|
-
})
|
|
181
|
-
}),
|
|
182
|
-
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
183
|
-
ref: $bottomDrag,
|
|
184
|
-
"data-spacing-margin-bottom-drag": true,
|
|
185
|
-
onMouseDown: onMouseDown,
|
|
186
|
-
onMouseUp: onMouseUp,
|
|
187
|
-
role: "presentation"
|
|
188
|
-
})
|
|
189
|
-
]
|
|
190
|
-
})
|
|
191
|
-
})
|
|
192
|
-
});
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
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,191 +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 isLayoutElement = (el)=>{
|
|
116
|
-
const tag = el.getAttribute('data-component-tag');
|
|
117
|
-
return tag === 'Row' || tag === 'Product';
|
|
118
|
-
};
|
|
119
|
-
const updateSpacing = useCallback(()=>{
|
|
120
|
-
const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
|
|
121
|
-
if (!$component) return;
|
|
122
|
-
const toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
|
|
123
|
-
if (!toolbar) return;
|
|
124
|
-
const isActive = toolbar.getAttribute('data-toolbar-active');
|
|
125
|
-
if (!isActive) return;
|
|
126
|
-
const style = getComputedStyle($component);
|
|
127
|
-
const $spacing = getChildrenByAttrSelector($component, 'data-spacing');
|
|
128
|
-
const $marginBottom = ($spacing?.querySelector('[data-spacing-margin-bottom]')) || null;
|
|
129
|
-
if ($marginBottom) {
|
|
130
|
-
if ($bottomBg.current && $bottomDrag.current) {
|
|
131
|
-
let value = style.marginBottom;
|
|
132
|
-
if (parseFloat(value) < 0) {
|
|
133
|
-
value = '0';
|
|
134
|
-
}
|
|
135
|
-
$bottomBg.current.style.height = value;
|
|
136
|
-
$bottomDrag.current.style.top = value;
|
|
137
|
-
$marginBottom.setAttribute('data-spacing-margin-bottom-active', 'true');
|
|
138
|
-
if (isLayoutElement($component)) {
|
|
139
|
-
$bottomBg.current.style.left = '0';
|
|
140
|
-
} else {
|
|
141
|
-
const paddingLeft = style.paddingLeft;
|
|
142
|
-
const leftValue = `-${paddingLeft}`;
|
|
143
|
-
const translateCss = `translate(${leftValue}, -100%)`;
|
|
144
|
-
$bottomBg.current.style.left = leftValue;
|
|
145
|
-
$bottomDrag.current.style.transform = translateCss;
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
}, []);
|
|
150
|
-
useEffect(()=>{
|
|
151
|
-
updateSpacing();
|
|
152
|
-
});
|
|
153
|
-
useEffect(()=>{
|
|
154
|
-
window.addEventListener('editor:toolbar:update-margin-bottom', updateSpacing);
|
|
155
|
-
window.addEventListener('editor:toolbar:update-padding-left', updateSpacing);
|
|
156
|
-
return ()=>{
|
|
157
|
-
window.removeEventListener('editor:toolbar:update-margin-bottom', updateSpacing);
|
|
158
|
-
window.removeEventListener('editor:toolbar:update-padding-left', updateSpacing);
|
|
159
|
-
};
|
|
160
|
-
}, [
|
|
161
|
-
updateSpacing
|
|
162
|
-
]);
|
|
163
|
-
return /*#__PURE__*/ jsx(Fragment, {
|
|
164
|
-
children: props.tag !== 'Section' && /*#__PURE__*/ jsx("div", {
|
|
165
|
-
"data-spacing": true,
|
|
166
|
-
"data-spacing-theme-section": isThemeSectionEditor,
|
|
167
|
-
className: "absolute w-full bottom-0",
|
|
168
|
-
children: /*#__PURE__*/ jsxs("div", {
|
|
169
|
-
"data-spacing-margin-bottom": true,
|
|
170
|
-
children: [
|
|
171
|
-
/*#__PURE__*/ jsx("div", {
|
|
172
|
-
"data-spacing-margin-bottom-bg": true,
|
|
173
|
-
ref: $bottomBg,
|
|
174
|
-
children: /*#__PURE__*/ jsx("div", {
|
|
175
|
-
"data-spacing-margin-bottom-value": true
|
|
176
|
-
})
|
|
177
|
-
}),
|
|
178
|
-
/*#__PURE__*/ jsx("div", {
|
|
179
|
-
ref: $bottomDrag,
|
|
180
|
-
"data-spacing-margin-bottom-drag": true,
|
|
181
|
-
onMouseDown: onMouseDown,
|
|
182
|
-
onMouseUp: onMouseUp,
|
|
183
|
-
role: "presentation"
|
|
184
|
-
})
|
|
185
|
-
]
|
|
186
|
-
})
|
|
187
|
-
})
|
|
188
|
-
});
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
export { Spacing as default };
|