@gem-sdk/core 1.23.0-staging.154 → 1.23.0-staging.156
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.
|
@@ -25,6 +25,24 @@ const isSection = (el)=>{
|
|
|
25
25
|
const tag = el.getAttribute('data-component-tag');
|
|
26
26
|
return tag === 'Section';
|
|
27
27
|
};
|
|
28
|
+
const isOverToolbarPosition = (el, parent)=>{
|
|
29
|
+
const rect = el.getBoundingClientRect();
|
|
30
|
+
const rectP = parent.getBoundingClientRect();
|
|
31
|
+
// 32px = toolbar active height
|
|
32
|
+
return rect.top - rectP.top < 32 + 1;
|
|
33
|
+
};
|
|
34
|
+
const findOverflowParent = (element, initEl)=>{
|
|
35
|
+
const thisEl = element;
|
|
36
|
+
const origEl = initEl || thisEl;
|
|
37
|
+
if (!thisEl) return;
|
|
38
|
+
if (isSection(thisEl)) return;
|
|
39
|
+
if (notVisible(thisEl) && isOverToolbarPosition(initEl, thisEl)) return thisEl;
|
|
40
|
+
if (thisEl.parentElement) {
|
|
41
|
+
return findOverflowParent(thisEl.parentElement, origEl);
|
|
42
|
+
} else {
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
};
|
|
28
46
|
const ComponentToolbarPreview = ({ ...props })=>{
|
|
29
47
|
const isThemeSection = props.isThemeSection;
|
|
30
48
|
const editingPageType = ShopContext.useShopStore((s)=>s.pageType);
|
|
@@ -35,32 +53,13 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
35
53
|
const [isShowParent, setIsShowParent] = react.useState(false);
|
|
36
54
|
const [isShowParentRevert, setIsShowParentRevert] = react.useState(false);
|
|
37
55
|
const [parents, setParents] = react.useState([]);
|
|
38
|
-
const isOverToolbarPosition = (el, parent)=>{
|
|
39
|
-
const parentLenght = parents.length;
|
|
40
|
-
const rect = el.getBoundingClientRect();
|
|
41
|
-
const rectP = parent.getBoundingClientRect();
|
|
42
|
-
// 36px = toolbar active height + 4 spaces
|
|
43
|
-
return rect.top - rectP.top < parentLenght * 36;
|
|
44
|
-
};
|
|
45
|
-
const findOverflowParent = (element, initEl)=>{
|
|
46
|
-
const thisEl = element;
|
|
47
|
-
const origEl = initEl || thisEl;
|
|
48
|
-
if (!thisEl) return;
|
|
49
|
-
if (isSection(thisEl)) return;
|
|
50
|
-
if (notVisible(thisEl) && isOverToolbarPosition(initEl, thisEl)) return thisEl;
|
|
51
|
-
if (thisEl.parentElement) {
|
|
52
|
-
return findOverflowParent(thisEl.parentElement, origEl);
|
|
53
|
-
} else {
|
|
54
|
-
return;
|
|
55
|
-
}
|
|
56
|
-
};
|
|
57
56
|
// Get parents
|
|
58
57
|
const onActiveComponent = react.useCallback((e)=>{
|
|
59
58
|
const detail = e.detail;
|
|
60
59
|
if (detail?.componentUid == props.uid) {
|
|
61
60
|
const currentParents = getParents(props.uid).filter((parent)=>{
|
|
62
61
|
if (parent.uid === 'ROOT') return false;
|
|
63
|
-
if (parent.tag === 'Section'
|
|
62
|
+
if (parent.tag === 'Section') return false;
|
|
64
63
|
if (parent.editorConfigs?.toolbar?.hide) return false;
|
|
65
64
|
if (parent.editorConfigs?.component?.noSetting) return false;
|
|
66
65
|
return true;
|
|
@@ -73,8 +72,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
73
72
|
}, [
|
|
74
73
|
setParents,
|
|
75
74
|
getParents,
|
|
76
|
-
props.uid
|
|
77
|
-
isThemeSectionEditor
|
|
75
|
+
props.uid
|
|
78
76
|
]);
|
|
79
77
|
react.useEffect(()=>{
|
|
80
78
|
window.addEventListener('editor:active-component', onActiveComponent);
|
|
@@ -117,7 +115,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
117
115
|
setIsShowParentRevert(true);
|
|
118
116
|
} else {
|
|
119
117
|
const rect = $toolbar.getBoundingClientRect();
|
|
120
|
-
if (rect.top < parents.length *
|
|
118
|
+
if (rect.top < parents.length * 24) {
|
|
121
119
|
setIsShowParentRevert(true);
|
|
122
120
|
} else {
|
|
123
121
|
setIsShowParentRevert(false);
|
|
@@ -283,21 +281,12 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
283
281
|
})
|
|
284
282
|
]
|
|
285
283
|
}),
|
|
286
|
-
isShowParent && parents.map((parent, index)
|
|
287
|
-
// Update count columns of Row
|
|
288
|
-
const parentLength = parent?.childrens?.length ?? 0;
|
|
289
|
-
let parent_label = parent.label;
|
|
290
|
-
if (parent.label === 'Row') {
|
|
291
|
-
parent_label = parentLength <= 1 ? parent.label + ' ' + parentLength + ' col' : parent.label + ' ' + parentLength + ' cols';
|
|
292
|
-
}
|
|
293
|
-
return /*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
284
|
+
isShowParent && parents.map((parent, index)=>/*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
294
285
|
"data-toolbar-parent": true,
|
|
295
286
|
"data-parent-uid": parent.uid,
|
|
296
287
|
"data-toolbar-theme-section": isThemeSectionEditor,
|
|
297
|
-
"data-toolbar-parent-revert": isShowParentRevert,
|
|
298
288
|
style: {
|
|
299
|
-
top: !isShowParentRevert ? `${-
|
|
300
|
-
: `${36 * (index + 1)}px`
|
|
289
|
+
top: !isShowParentRevert ? `${-24 * (index + 1) + index}px` : `${31 + 24 * index - index}px`
|
|
301
290
|
},
|
|
302
291
|
children: [
|
|
303
292
|
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
@@ -337,11 +326,10 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
337
326
|
}),
|
|
338
327
|
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
339
328
|
"data-toolbar-name": true,
|
|
340
|
-
children:
|
|
329
|
+
children: parent.label
|
|
341
330
|
})
|
|
342
331
|
]
|
|
343
|
-
}, parent.uid)
|
|
344
|
-
}),
|
|
332
|
+
}, parent.uid)),
|
|
345
333
|
props.tag === 'Section' && !props.isThemeSection && editingPageType !== 'STATIC' && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsxRuntime.jsx(CreateThemeSection.CreateThemeSection, {
|
|
346
334
|
...props
|
|
347
335
|
}),
|
|
@@ -429,8 +417,8 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
429
417
|
viewBox: "0 0 16 16",
|
|
430
418
|
fill: "none",
|
|
431
419
|
children: /*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
432
|
-
d: "M8.
|
|
433
|
-
fill: "
|
|
420
|
+
d: "M8.5 1.5C8.5 1.22386 8.27614 1 8 1C7.72386 1 7.5 1.22386 7.5 1.5V7.5H1.5C1.22386 7.5 1 7.72386 1 8C1 8.27614 1.22386 8.5 1.5 8.5H7.5V14.5C7.5 14.7761 7.72386 15 8 15C8.27614 15 8.5 14.7761 8.5 14.5V8.5H14.5C14.7761 8.5 15 8.27614 15 8C15 7.72386 14.7761 7.5 14.5 7.5H8.5V1.5Z",
|
|
421
|
+
fill: "currentColor"
|
|
434
422
|
})
|
|
435
423
|
})
|
|
436
424
|
}),
|
|
@@ -449,8 +437,8 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
449
437
|
viewBox: "0 0 16 16",
|
|
450
438
|
fill: "none",
|
|
451
439
|
children: /*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
452
|
-
d: "M8.
|
|
453
|
-
fill: "
|
|
440
|
+
d: "M8.5 1.5C8.5 1.22386 8.27614 1 8 1C7.72386 1 7.5 1.22386 7.5 1.5V7.5H1.5C1.22386 7.5 1 7.72386 1 8C1 8.27614 1.22386 8.5 1.5 8.5H7.5V14.5C7.5 14.7761 7.72386 15 8 15C8.27614 15 8.5 14.7761 8.5 14.5V8.5H14.5C14.7761 8.5 15 8.27614 15 8C15 7.72386 14.7761 7.5 14.5 7.5H8.5V1.5Z",
|
|
441
|
+
fill: "currentColor"
|
|
454
442
|
})
|
|
455
443
|
})
|
|
456
444
|
})
|
|
@@ -23,6 +23,24 @@ const isSection = (el)=>{
|
|
|
23
23
|
const tag = el.getAttribute('data-component-tag');
|
|
24
24
|
return tag === 'Section';
|
|
25
25
|
};
|
|
26
|
+
const isOverToolbarPosition = (el, parent)=>{
|
|
27
|
+
const rect = el.getBoundingClientRect();
|
|
28
|
+
const rectP = parent.getBoundingClientRect();
|
|
29
|
+
// 32px = toolbar active height
|
|
30
|
+
return rect.top - rectP.top < 32 + 1;
|
|
31
|
+
};
|
|
32
|
+
const findOverflowParent = (element, initEl)=>{
|
|
33
|
+
const thisEl = element;
|
|
34
|
+
const origEl = initEl || thisEl;
|
|
35
|
+
if (!thisEl) return;
|
|
36
|
+
if (isSection(thisEl)) return;
|
|
37
|
+
if (notVisible(thisEl) && isOverToolbarPosition(initEl, thisEl)) return thisEl;
|
|
38
|
+
if (thisEl.parentElement) {
|
|
39
|
+
return findOverflowParent(thisEl.parentElement, origEl);
|
|
40
|
+
} else {
|
|
41
|
+
return;
|
|
42
|
+
}
|
|
43
|
+
};
|
|
26
44
|
const ComponentToolbarPreview = ({ ...props })=>{
|
|
27
45
|
const isThemeSection = props.isThemeSection;
|
|
28
46
|
const editingPageType = useShopStore((s)=>s.pageType);
|
|
@@ -33,32 +51,13 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
33
51
|
const [isShowParent, setIsShowParent] = useState(false);
|
|
34
52
|
const [isShowParentRevert, setIsShowParentRevert] = useState(false);
|
|
35
53
|
const [parents, setParents] = useState([]);
|
|
36
|
-
const isOverToolbarPosition = (el, parent)=>{
|
|
37
|
-
const parentLenght = parents.length;
|
|
38
|
-
const rect = el.getBoundingClientRect();
|
|
39
|
-
const rectP = parent.getBoundingClientRect();
|
|
40
|
-
// 36px = toolbar active height + 4 spaces
|
|
41
|
-
return rect.top - rectP.top < parentLenght * 36;
|
|
42
|
-
};
|
|
43
|
-
const findOverflowParent = (element, initEl)=>{
|
|
44
|
-
const thisEl = element;
|
|
45
|
-
const origEl = initEl || thisEl;
|
|
46
|
-
if (!thisEl) return;
|
|
47
|
-
if (isSection(thisEl)) return;
|
|
48
|
-
if (notVisible(thisEl) && isOverToolbarPosition(initEl, thisEl)) return thisEl;
|
|
49
|
-
if (thisEl.parentElement) {
|
|
50
|
-
return findOverflowParent(thisEl.parentElement, origEl);
|
|
51
|
-
} else {
|
|
52
|
-
return;
|
|
53
|
-
}
|
|
54
|
-
};
|
|
55
54
|
// Get parents
|
|
56
55
|
const onActiveComponent = useCallback((e)=>{
|
|
57
56
|
const detail = e.detail;
|
|
58
57
|
if (detail?.componentUid == props.uid) {
|
|
59
58
|
const currentParents = getParents(props.uid).filter((parent)=>{
|
|
60
59
|
if (parent.uid === 'ROOT') return false;
|
|
61
|
-
if (parent.tag === 'Section'
|
|
60
|
+
if (parent.tag === 'Section') return false;
|
|
62
61
|
if (parent.editorConfigs?.toolbar?.hide) return false;
|
|
63
62
|
if (parent.editorConfigs?.component?.noSetting) return false;
|
|
64
63
|
return true;
|
|
@@ -71,8 +70,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
71
70
|
}, [
|
|
72
71
|
setParents,
|
|
73
72
|
getParents,
|
|
74
|
-
props.uid
|
|
75
|
-
isThemeSectionEditor
|
|
73
|
+
props.uid
|
|
76
74
|
]);
|
|
77
75
|
useEffect(()=>{
|
|
78
76
|
window.addEventListener('editor:active-component', onActiveComponent);
|
|
@@ -115,7 +113,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
115
113
|
setIsShowParentRevert(true);
|
|
116
114
|
} else {
|
|
117
115
|
const rect = $toolbar.getBoundingClientRect();
|
|
118
|
-
if (rect.top < parents.length *
|
|
116
|
+
if (rect.top < parents.length * 24) {
|
|
119
117
|
setIsShowParentRevert(true);
|
|
120
118
|
} else {
|
|
121
119
|
setIsShowParentRevert(false);
|
|
@@ -281,21 +279,12 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
281
279
|
})
|
|
282
280
|
]
|
|
283
281
|
}),
|
|
284
|
-
isShowParent && parents.map((parent, index)
|
|
285
|
-
// Update count columns of Row
|
|
286
|
-
const parentLength = parent?.childrens?.length ?? 0;
|
|
287
|
-
let parent_label = parent.label;
|
|
288
|
-
if (parent.label === 'Row') {
|
|
289
|
-
parent_label = parentLength <= 1 ? parent.label + ' ' + parentLength + ' col' : parent.label + ' ' + parentLength + ' cols';
|
|
290
|
-
}
|
|
291
|
-
return /*#__PURE__*/ jsxs("div", {
|
|
282
|
+
isShowParent && parents.map((parent, index)=>/*#__PURE__*/ jsxs("div", {
|
|
292
283
|
"data-toolbar-parent": true,
|
|
293
284
|
"data-parent-uid": parent.uid,
|
|
294
285
|
"data-toolbar-theme-section": isThemeSectionEditor,
|
|
295
|
-
"data-toolbar-parent-revert": isShowParentRevert,
|
|
296
286
|
style: {
|
|
297
|
-
top: !isShowParentRevert ? `${-
|
|
298
|
-
: `${36 * (index + 1)}px`
|
|
287
|
+
top: !isShowParentRevert ? `${-24 * (index + 1) + index}px` : `${31 + 24 * index - index}px`
|
|
299
288
|
},
|
|
300
289
|
children: [
|
|
301
290
|
/*#__PURE__*/ jsx("div", {
|
|
@@ -335,11 +324,10 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
335
324
|
}),
|
|
336
325
|
/*#__PURE__*/ jsx("div", {
|
|
337
326
|
"data-toolbar-name": true,
|
|
338
|
-
children:
|
|
327
|
+
children: parent.label
|
|
339
328
|
})
|
|
340
329
|
]
|
|
341
|
-
}, parent.uid)
|
|
342
|
-
}),
|
|
330
|
+
}, parent.uid)),
|
|
343
331
|
props.tag === 'Section' && !props.isThemeSection && editingPageType !== 'STATIC' && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsx(CreateThemeSection, {
|
|
344
332
|
...props
|
|
345
333
|
}),
|
|
@@ -427,8 +415,8 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
427
415
|
viewBox: "0 0 16 16",
|
|
428
416
|
fill: "none",
|
|
429
417
|
children: /*#__PURE__*/ jsx("path", {
|
|
430
|
-
d: "M8.
|
|
431
|
-
fill: "
|
|
418
|
+
d: "M8.5 1.5C8.5 1.22386 8.27614 1 8 1C7.72386 1 7.5 1.22386 7.5 1.5V7.5H1.5C1.22386 7.5 1 7.72386 1 8C1 8.27614 1.22386 8.5 1.5 8.5H7.5V14.5C7.5 14.7761 7.72386 15 8 15C8.27614 15 8.5 14.7761 8.5 14.5V8.5H14.5C14.7761 8.5 15 8.27614 15 8C15 7.72386 14.7761 7.5 14.5 7.5H8.5V1.5Z",
|
|
419
|
+
fill: "currentColor"
|
|
432
420
|
})
|
|
433
421
|
})
|
|
434
422
|
}),
|
|
@@ -447,8 +435,8 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
447
435
|
viewBox: "0 0 16 16",
|
|
448
436
|
fill: "none",
|
|
449
437
|
children: /*#__PURE__*/ jsx("path", {
|
|
450
|
-
d: "M8.
|
|
451
|
-
fill: "
|
|
438
|
+
d: "M8.5 1.5C8.5 1.22386 8.27614 1 8 1C7.72386 1 7.5 1.22386 7.5 1.5V7.5H1.5C1.22386 7.5 1 7.72386 1 8C1 8.27614 1.22386 8.5 1.5 8.5H7.5V14.5C7.5 14.7761 7.72386 15 8 15C8.27614 15 8.5 14.7761 8.5 14.5V8.5H14.5C14.7761 8.5 15 8.27614 15 8C15 7.72386 14.7761 7.5 14.5 7.5H8.5V1.5Z",
|
|
439
|
+
fill: "currentColor"
|
|
452
440
|
})
|
|
453
441
|
})
|
|
454
442
|
})
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gem-sdk/core",
|
|
3
|
-
"version": "1.23.0-staging.
|
|
3
|
+
"version": "1.23.0-staging.156",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"@gem-sdk/adapter-shopify": "1.23.0-staging.26",
|
|
28
|
-
"@gem-sdk/styles": "1.23.0-staging.
|
|
28
|
+
"@gem-sdk/styles": "1.23.0-staging.156"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"react-error-boundary": "4.0.10",
|