@gem-sdk/pages 1.14.0-next.48 → 1.14.0-next.58
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/builder/PopupManager.js +7 -3
- package/dist/cjs/components/image-to-layout/AddSectionImageToLayout.js +18 -6
- package/dist/cjs/components/image-to-layout/ImageToLayout.js +24 -17
- package/dist/cjs/components/image-to-layout/ImageToLayoutInput.js +10 -3
- package/dist/esm/components/builder/PopupManager.js +8 -4
- package/dist/esm/components/image-to-layout/AddSectionImageToLayout.js +19 -7
- package/dist/esm/components/image-to-layout/ImageToLayout.js +25 -18
- package/dist/esm/components/image-to-layout/ImageToLayoutInput.js +10 -3
- package/package.json +2 -2
|
@@ -34,7 +34,7 @@ const PopupManager = ()=>{
|
|
|
34
34
|
]);
|
|
35
35
|
return /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
36
36
|
className: "pointer-events-none fixed inset-y-0 right-0 z-10 flex w-10 flex-col items-center justify-center gap-1 overflow-y-auto overflow-x-hidden text-sm",
|
|
37
|
-
children: popups?.map((item)=>{
|
|
37
|
+
children: popups?.map((item, index)=>{
|
|
38
38
|
const display = item?.advanced?.d;
|
|
39
39
|
return /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
40
40
|
className: core.cls('pointer-events-auto w-full shrink cursor-pointer select-none items-center justify-center whitespace-nowrap py-2 text-white [writing-mode:vertical-lr]', {
|
|
@@ -49,9 +49,13 @@ const PopupManager = ()=>{
|
|
|
49
49
|
'--d-tablet': display?.tablet ? 'inline-flex' : 'none',
|
|
50
50
|
'--d-mobile': display?.mobile ? 'inline-flex' : 'none'
|
|
51
51
|
},
|
|
52
|
-
children: /*#__PURE__*/ jsxRuntime.
|
|
52
|
+
children: /*#__PURE__*/ jsxRuntime.jsxs("span", {
|
|
53
53
|
className: "text-ellipsis whitespace-nowrap",
|
|
54
|
-
children:
|
|
54
|
+
children: [
|
|
55
|
+
item?.settings?.name || 'Popup Name',
|
|
56
|
+
" ",
|
|
57
|
+
index + 1
|
|
58
|
+
]
|
|
55
59
|
})
|
|
56
60
|
}, item?.uid);
|
|
57
61
|
})
|
|
@@ -33,6 +33,8 @@ const defaultPadding = {
|
|
|
33
33
|
mobile: 'var(--g-ct-p)'
|
|
34
34
|
};
|
|
35
35
|
const AddSectionImageToLayout = ()=>{
|
|
36
|
+
const layoutSetting = core.useShopStore((s)=>s.layoutSettings);
|
|
37
|
+
const totalSection = core.useBuilderPreviewStore((state)=>state.state.ROOT.childrens?.length);
|
|
36
38
|
const [link, setLink] = react.useState('');
|
|
37
39
|
const [isInput, setIsInput] = react.useState(false);
|
|
38
40
|
const onClick = (index)=>{
|
|
@@ -40,8 +42,15 @@ const AddSectionImageToLayout = ()=>{
|
|
|
40
42
|
setIsInput(true);
|
|
41
43
|
}
|
|
42
44
|
};
|
|
43
|
-
|
|
44
|
-
|
|
45
|
+
react.useEffect(()=>{
|
|
46
|
+
if (!isInput || totalSection === 0) {
|
|
47
|
+
setLink('');
|
|
48
|
+
setIsInput(false);
|
|
49
|
+
}
|
|
50
|
+
}, [
|
|
51
|
+
isInput,
|
|
52
|
+
totalSection
|
|
53
|
+
]);
|
|
45
54
|
const loaded = core.useBuilderPreviewStore((state)=>state.loaded);
|
|
46
55
|
const offset = react.useMemo(()=>{
|
|
47
56
|
let result = 0;
|
|
@@ -74,8 +83,10 @@ const AddSectionImageToLayout = ()=>{
|
|
|
74
83
|
children: "Add section"
|
|
75
84
|
}),
|
|
76
85
|
ACTIONS_DATA.map((action, index)=>{
|
|
77
|
-
|
|
86
|
+
const CustomTag = index === 1 ? `label` : `div`;
|
|
87
|
+
return /*#__PURE__*/ jsxRuntime.jsxs(CustomTag, {
|
|
78
88
|
className: `relative mx-[12px] h-[60px] w-[172px] cursor-pointer flex-col items-center justify-center rounded-[3px] bg-[#F4F4F4] hover:bg-black/10 ${isInput ? 'hidden' : 'flex'}`,
|
|
89
|
+
htmlFor: "gp-add-section-bottom-from-select-image",
|
|
79
90
|
id: action.id,
|
|
80
91
|
onClick: ()=>onClick(index),
|
|
81
92
|
"aria-hidden": true,
|
|
@@ -148,7 +159,7 @@ const AddSectionImageToLayout = ()=>{
|
|
|
148
159
|
}),
|
|
149
160
|
action.id === 'gps-add-section-bottom-from-image' && /*#__PURE__*/ jsxRuntime.jsx("input", {
|
|
150
161
|
id: "gp-add-section-bottom-from-select-image",
|
|
151
|
-
className: "rounded-medium z-2 absolute left-0 top-0 h-full w-full cursor-pointer opacity-0 outline-none",
|
|
162
|
+
className: "rounded-medium z-2 absolute left-0 top-0 hidden h-full w-full cursor-pointer opacity-0 outline-none",
|
|
152
163
|
type: "file",
|
|
153
164
|
accept: ".png, .jpg, .jpeg"
|
|
154
165
|
})
|
|
@@ -162,6 +173,7 @@ const AddSectionImageToLayout = ()=>{
|
|
|
162
173
|
children: [
|
|
163
174
|
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
164
175
|
"aria-hidden": true,
|
|
176
|
+
id: "image-to-layout-input-wrapper-add-section-close",
|
|
165
177
|
onClick: ()=>setIsInput(false),
|
|
166
178
|
className: "mr-2 flex h-[32px] w-[32px] cursor-pointer items-center justify-center rounded-[3px] hover:bg-black/10",
|
|
167
179
|
children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
|
|
@@ -237,16 +249,16 @@ const AddSectionImageToLayout = ()=>{
|
|
|
237
249
|
]
|
|
238
250
|
}),
|
|
239
251
|
/*#__PURE__*/ jsxRuntime.jsx("input", {
|
|
240
|
-
value: link,
|
|
241
252
|
onChange: (event)=>{
|
|
242
253
|
setLink(event.target.value);
|
|
243
254
|
},
|
|
244
255
|
autoComplete: "off",
|
|
245
256
|
id: "gp-img-to-layout-bottom-input-link",
|
|
246
257
|
placeholder: "Paste your link",
|
|
247
|
-
className: "ml-2 mr-2 flex-1 text-[14px] text-[#676767] outline-none"
|
|
258
|
+
className: "ml-2 mr-2 h-[56px] flex-1 text-[14px] text-[#676767] outline-none"
|
|
248
259
|
}),
|
|
249
260
|
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
261
|
+
"aria-disabled": !link,
|
|
250
262
|
id: "gp-img-to-layout-bottom-generate-btn",
|
|
251
263
|
className: `generate-image-to-layout-btn flex h-[36px] w-[86px] cursor-pointer items-center justify-center rounded-[3px] text-sm font-medium text-white ${!link ? 'btn-disable' : ''}`,
|
|
252
264
|
children: "Generate"
|
|
@@ -30,25 +30,32 @@ const ImageToLayout = ({ editorImageToLayout })=>{
|
|
|
30
30
|
if (!loaded) {
|
|
31
31
|
return null;
|
|
32
32
|
}
|
|
33
|
-
return /*#__PURE__*/ jsxRuntime.
|
|
34
|
-
children:
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
33
|
+
return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
34
|
+
children: [
|
|
35
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
36
|
+
id: "gp-img-to-layout-wrapper",
|
|
37
|
+
className: core.cls(`sf-add-section-placeholder tablet:!px-0 gps-base-font-family flex-1 flex-col bg-[#F4F4F4]`, {
|
|
38
|
+
hidden: !editorImageToLayout || !!totalSection,
|
|
39
|
+
flex: editorImageToLayout && !totalSection
|
|
40
|
+
}),
|
|
41
|
+
style: {
|
|
42
|
+
height: `calc(100vh - ${offset}px)`
|
|
43
|
+
},
|
|
44
|
+
children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
45
|
+
id: "gps-gem-ai-input-wrapper",
|
|
46
|
+
className: "mobile:px-[0px] flex h-full w-full flex-1 flex-col items-center justify-center rounded-[3px] bg-white px-[72px] py-[32px]",
|
|
47
|
+
children: [
|
|
48
|
+
/*#__PURE__*/ jsxRuntime.jsx(DropElement.DropElement, {}),
|
|
49
|
+
/*#__PURE__*/ jsxRuntime.jsx(ImageToLayoutInput.ImageToLayoutInput, {
|
|
50
|
+
totalSection: totalSection || 0
|
|
51
|
+
})
|
|
52
|
+
]
|
|
53
|
+
})
|
|
39
54
|
}),
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
},
|
|
43
|
-
children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
44
|
-
id: "gps-gem-ai-input-wrapper",
|
|
45
|
-
className: "mobile:px-[0px] flex h-full w-full flex-1 flex-col items-center justify-center rounded-[3px] bg-white px-[72px] py-[32px]",
|
|
46
|
-
children: [
|
|
47
|
-
/*#__PURE__*/ jsxRuntime.jsx(DropElement.DropElement, {}),
|
|
48
|
-
/*#__PURE__*/ jsxRuntime.jsx(ImageToLayoutInput.ImageToLayoutInput, {})
|
|
49
|
-
]
|
|
55
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
56
|
+
className: "limited-section"
|
|
50
57
|
})
|
|
51
|
-
|
|
58
|
+
]
|
|
52
59
|
});
|
|
53
60
|
};
|
|
54
61
|
|
|
@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
var react = require('react');
|
|
5
5
|
var PagesSuggestion = require('./PagesSuggestion.js');
|
|
6
6
|
|
|
7
|
-
const ImageToLayoutInput = ()=>{
|
|
7
|
+
const ImageToLayoutInput = ({ totalSection })=>{
|
|
8
8
|
const [link, setLink] = react.useState('');
|
|
9
9
|
const [isFocus, setIsFocus] = react.useState(false);
|
|
10
10
|
const [openSuggestion, setOpenSuggestion] = react.useState(false);
|
|
@@ -16,6 +16,13 @@ const ImageToLayoutInput = ()=>{
|
|
|
16
16
|
isFocus,
|
|
17
17
|
openSuggestion
|
|
18
18
|
]);
|
|
19
|
+
react.useEffect(()=>{
|
|
20
|
+
if (totalSection > 0) {
|
|
21
|
+
setLink('');
|
|
22
|
+
}
|
|
23
|
+
}, [
|
|
24
|
+
totalSection
|
|
25
|
+
]);
|
|
19
26
|
return /*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
20
27
|
className: "relative mt-[64px] flex w-full max-w-[calc(100%_-_32px)] flex-col items-center rounded-[3px] border border-[#EEEEEE] px-[16px] pb-[24px] pt-[32px]",
|
|
21
28
|
children: [
|
|
@@ -85,7 +92,6 @@ const ImageToLayoutInput = ()=>{
|
|
|
85
92
|
]
|
|
86
93
|
}),
|
|
87
94
|
/*#__PURE__*/ jsxRuntime.jsx("input", {
|
|
88
|
-
value: link,
|
|
89
95
|
onFocus: ()=>setIsFocus(true),
|
|
90
96
|
onChange: (event)=>{
|
|
91
97
|
setLink(event.target.value);
|
|
@@ -94,9 +100,10 @@ const ImageToLayoutInput = ()=>{
|
|
|
94
100
|
autoComplete: "off",
|
|
95
101
|
id: "gp-img-to-layout-input-link",
|
|
96
102
|
placeholder: "Paste your link",
|
|
97
|
-
className: "mx-4 flex-1 text-[14px] text-[#676767] outline-none"
|
|
103
|
+
className: "mx-4 h-[60px] flex-1 text-[14px] text-[#676767] outline-none"
|
|
98
104
|
}),
|
|
99
105
|
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
106
|
+
"aria-disabled": !link,
|
|
100
107
|
id: "gp-img-to-layout-generate-btn",
|
|
101
108
|
className: `generate-image-to-layout-btn flex h-[40px] w-[94px] cursor-pointer items-center justify-center rounded-[3px] text-sm font-medium text-white ${!link ? 'btn-disable' : ''}`,
|
|
102
109
|
children: "Generate"
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { useBuilderPreviewStore, useModalStore, cls } from '@gem-sdk/core';
|
|
3
3
|
import { memo, useMemo, useCallback, useEffect } from 'react';
|
|
4
4
|
|
|
@@ -30,7 +30,7 @@ const PopupManager = ()=>{
|
|
|
30
30
|
]);
|
|
31
31
|
return /*#__PURE__*/ jsx("div", {
|
|
32
32
|
className: "pointer-events-none fixed inset-y-0 right-0 z-10 flex w-10 flex-col items-center justify-center gap-1 overflow-y-auto overflow-x-hidden text-sm",
|
|
33
|
-
children: popups?.map((item)=>{
|
|
33
|
+
children: popups?.map((item, index)=>{
|
|
34
34
|
const display = item?.advanced?.d;
|
|
35
35
|
return /*#__PURE__*/ jsx("div", {
|
|
36
36
|
className: cls('pointer-events-auto w-full shrink cursor-pointer select-none items-center justify-center whitespace-nowrap py-2 text-white [writing-mode:vertical-lr]', {
|
|
@@ -45,9 +45,13 @@ const PopupManager = ()=>{
|
|
|
45
45
|
'--d-tablet': display?.tablet ? 'inline-flex' : 'none',
|
|
46
46
|
'--d-mobile': display?.mobile ? 'inline-flex' : 'none'
|
|
47
47
|
},
|
|
48
|
-
children: /*#__PURE__*/
|
|
48
|
+
children: /*#__PURE__*/ jsxs("span", {
|
|
49
49
|
className: "text-ellipsis whitespace-nowrap",
|
|
50
|
-
children:
|
|
50
|
+
children: [
|
|
51
|
+
item?.settings?.name || 'Popup Name',
|
|
52
|
+
" ",
|
|
53
|
+
index + 1
|
|
54
|
+
]
|
|
51
55
|
})
|
|
52
56
|
}, item?.uid);
|
|
53
57
|
})
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import { useState, useMemo } from 'react';
|
|
2
|
+
import { useState, useEffect, useMemo } from 'react';
|
|
3
3
|
import { useShopStore, useBuilderPreviewStore, makeStyleResponsive } from '@gem-sdk/core';
|
|
4
4
|
|
|
5
5
|
const ACTIONS_DATA = [
|
|
@@ -29,6 +29,8 @@ const defaultPadding = {
|
|
|
29
29
|
mobile: 'var(--g-ct-p)'
|
|
30
30
|
};
|
|
31
31
|
const AddSectionImageToLayout = ()=>{
|
|
32
|
+
const layoutSetting = useShopStore((s)=>s.layoutSettings);
|
|
33
|
+
const totalSection = useBuilderPreviewStore((state)=>state.state.ROOT.childrens?.length);
|
|
32
34
|
const [link, setLink] = useState('');
|
|
33
35
|
const [isInput, setIsInput] = useState(false);
|
|
34
36
|
const onClick = (index)=>{
|
|
@@ -36,8 +38,15 @@ const AddSectionImageToLayout = ()=>{
|
|
|
36
38
|
setIsInput(true);
|
|
37
39
|
}
|
|
38
40
|
};
|
|
39
|
-
|
|
40
|
-
|
|
41
|
+
useEffect(()=>{
|
|
42
|
+
if (!isInput || totalSection === 0) {
|
|
43
|
+
setLink('');
|
|
44
|
+
setIsInput(false);
|
|
45
|
+
}
|
|
46
|
+
}, [
|
|
47
|
+
isInput,
|
|
48
|
+
totalSection
|
|
49
|
+
]);
|
|
41
50
|
const loaded = useBuilderPreviewStore((state)=>state.loaded);
|
|
42
51
|
const offset = useMemo(()=>{
|
|
43
52
|
let result = 0;
|
|
@@ -70,8 +79,10 @@ const AddSectionImageToLayout = ()=>{
|
|
|
70
79
|
children: "Add section"
|
|
71
80
|
}),
|
|
72
81
|
ACTIONS_DATA.map((action, index)=>{
|
|
73
|
-
|
|
82
|
+
const CustomTag = index === 1 ? `label` : `div`;
|
|
83
|
+
return /*#__PURE__*/ jsxs(CustomTag, {
|
|
74
84
|
className: `relative mx-[12px] h-[60px] w-[172px] cursor-pointer flex-col items-center justify-center rounded-[3px] bg-[#F4F4F4] hover:bg-black/10 ${isInput ? 'hidden' : 'flex'}`,
|
|
85
|
+
htmlFor: "gp-add-section-bottom-from-select-image",
|
|
75
86
|
id: action.id,
|
|
76
87
|
onClick: ()=>onClick(index),
|
|
77
88
|
"aria-hidden": true,
|
|
@@ -144,7 +155,7 @@ const AddSectionImageToLayout = ()=>{
|
|
|
144
155
|
}),
|
|
145
156
|
action.id === 'gps-add-section-bottom-from-image' && /*#__PURE__*/ jsx("input", {
|
|
146
157
|
id: "gp-add-section-bottom-from-select-image",
|
|
147
|
-
className: "rounded-medium z-2 absolute left-0 top-0 h-full w-full cursor-pointer opacity-0 outline-none",
|
|
158
|
+
className: "rounded-medium z-2 absolute left-0 top-0 hidden h-full w-full cursor-pointer opacity-0 outline-none",
|
|
148
159
|
type: "file",
|
|
149
160
|
accept: ".png, .jpg, .jpeg"
|
|
150
161
|
})
|
|
@@ -158,6 +169,7 @@ const AddSectionImageToLayout = ()=>{
|
|
|
158
169
|
children: [
|
|
159
170
|
/*#__PURE__*/ jsx("div", {
|
|
160
171
|
"aria-hidden": true,
|
|
172
|
+
id: "image-to-layout-input-wrapper-add-section-close",
|
|
161
173
|
onClick: ()=>setIsInput(false),
|
|
162
174
|
className: "mr-2 flex h-[32px] w-[32px] cursor-pointer items-center justify-center rounded-[3px] hover:bg-black/10",
|
|
163
175
|
children: /*#__PURE__*/ jsx("svg", {
|
|
@@ -233,16 +245,16 @@ const AddSectionImageToLayout = ()=>{
|
|
|
233
245
|
]
|
|
234
246
|
}),
|
|
235
247
|
/*#__PURE__*/ jsx("input", {
|
|
236
|
-
value: link,
|
|
237
248
|
onChange: (event)=>{
|
|
238
249
|
setLink(event.target.value);
|
|
239
250
|
},
|
|
240
251
|
autoComplete: "off",
|
|
241
252
|
id: "gp-img-to-layout-bottom-input-link",
|
|
242
253
|
placeholder: "Paste your link",
|
|
243
|
-
className: "ml-2 mr-2 flex-1 text-[14px] text-[#676767] outline-none"
|
|
254
|
+
className: "ml-2 mr-2 h-[56px] flex-1 text-[14px] text-[#676767] outline-none"
|
|
244
255
|
}),
|
|
245
256
|
/*#__PURE__*/ jsx("div", {
|
|
257
|
+
"aria-disabled": !link,
|
|
246
258
|
id: "gp-img-to-layout-bottom-generate-btn",
|
|
247
259
|
className: `generate-image-to-layout-btn flex h-[36px] w-[86px] cursor-pointer items-center justify-center rounded-[3px] text-sm font-medium text-white ${!link ? 'btn-disable' : ''}`,
|
|
248
260
|
children: "Generate"
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { useMemo } from 'react';
|
|
3
3
|
import { useShopStore, useBuilderPreviewStore, cls } from '@gem-sdk/core';
|
|
4
4
|
import { DropElement } from './DropElement.js';
|
|
@@ -26,25 +26,32 @@ const ImageToLayout = ({ editorImageToLayout })=>{
|
|
|
26
26
|
if (!loaded) {
|
|
27
27
|
return null;
|
|
28
28
|
}
|
|
29
|
-
return /*#__PURE__*/
|
|
30
|
-
children:
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
29
|
+
return /*#__PURE__*/ jsxs(Fragment, {
|
|
30
|
+
children: [
|
|
31
|
+
/*#__PURE__*/ jsx("div", {
|
|
32
|
+
id: "gp-img-to-layout-wrapper",
|
|
33
|
+
className: cls(`sf-add-section-placeholder tablet:!px-0 gps-base-font-family flex-1 flex-col bg-[#F4F4F4]`, {
|
|
34
|
+
hidden: !editorImageToLayout || !!totalSection,
|
|
35
|
+
flex: editorImageToLayout && !totalSection
|
|
36
|
+
}),
|
|
37
|
+
style: {
|
|
38
|
+
height: `calc(100vh - ${offset}px)`
|
|
39
|
+
},
|
|
40
|
+
children: /*#__PURE__*/ jsxs("div", {
|
|
41
|
+
id: "gps-gem-ai-input-wrapper",
|
|
42
|
+
className: "mobile:px-[0px] flex h-full w-full flex-1 flex-col items-center justify-center rounded-[3px] bg-white px-[72px] py-[32px]",
|
|
43
|
+
children: [
|
|
44
|
+
/*#__PURE__*/ jsx(DropElement, {}),
|
|
45
|
+
/*#__PURE__*/ jsx(ImageToLayoutInput, {
|
|
46
|
+
totalSection: totalSection || 0
|
|
47
|
+
})
|
|
48
|
+
]
|
|
49
|
+
})
|
|
35
50
|
}),
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
},
|
|
39
|
-
children: /*#__PURE__*/ jsxs("div", {
|
|
40
|
-
id: "gps-gem-ai-input-wrapper",
|
|
41
|
-
className: "mobile:px-[0px] flex h-full w-full flex-1 flex-col items-center justify-center rounded-[3px] bg-white px-[72px] py-[32px]",
|
|
42
|
-
children: [
|
|
43
|
-
/*#__PURE__*/ jsx(DropElement, {}),
|
|
44
|
-
/*#__PURE__*/ jsx(ImageToLayoutInput, {})
|
|
45
|
-
]
|
|
51
|
+
/*#__PURE__*/ jsx("div", {
|
|
52
|
+
className: "limited-section"
|
|
46
53
|
})
|
|
47
|
-
|
|
54
|
+
]
|
|
48
55
|
});
|
|
49
56
|
};
|
|
50
57
|
|
|
@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import { useState, useEffect } from 'react';
|
|
3
3
|
import { PagesSuggestion } from './PagesSuggestion.js';
|
|
4
4
|
|
|
5
|
-
const ImageToLayoutInput = ()=>{
|
|
5
|
+
const ImageToLayoutInput = ({ totalSection })=>{
|
|
6
6
|
const [link, setLink] = useState('');
|
|
7
7
|
const [isFocus, setIsFocus] = useState(false);
|
|
8
8
|
const [openSuggestion, setOpenSuggestion] = useState(false);
|
|
@@ -14,6 +14,13 @@ const ImageToLayoutInput = ()=>{
|
|
|
14
14
|
isFocus,
|
|
15
15
|
openSuggestion
|
|
16
16
|
]);
|
|
17
|
+
useEffect(()=>{
|
|
18
|
+
if (totalSection > 0) {
|
|
19
|
+
setLink('');
|
|
20
|
+
}
|
|
21
|
+
}, [
|
|
22
|
+
totalSection
|
|
23
|
+
]);
|
|
17
24
|
return /*#__PURE__*/ jsxs("div", {
|
|
18
25
|
className: "relative mt-[64px] flex w-full max-w-[calc(100%_-_32px)] flex-col items-center rounded-[3px] border border-[#EEEEEE] px-[16px] pb-[24px] pt-[32px]",
|
|
19
26
|
children: [
|
|
@@ -83,7 +90,6 @@ const ImageToLayoutInput = ()=>{
|
|
|
83
90
|
]
|
|
84
91
|
}),
|
|
85
92
|
/*#__PURE__*/ jsx("input", {
|
|
86
|
-
value: link,
|
|
87
93
|
onFocus: ()=>setIsFocus(true),
|
|
88
94
|
onChange: (event)=>{
|
|
89
95
|
setLink(event.target.value);
|
|
@@ -92,9 +98,10 @@ const ImageToLayoutInput = ()=>{
|
|
|
92
98
|
autoComplete: "off",
|
|
93
99
|
id: "gp-img-to-layout-input-link",
|
|
94
100
|
placeholder: "Paste your link",
|
|
95
|
-
className: "mx-4 flex-1 text-[14px] text-[#676767] outline-none"
|
|
101
|
+
className: "mx-4 h-[60px] flex-1 text-[14px] text-[#676767] outline-none"
|
|
96
102
|
}),
|
|
97
103
|
/*#__PURE__*/ jsx("div", {
|
|
104
|
+
"aria-disabled": !link,
|
|
98
105
|
id: "gp-img-to-layout-generate-btn",
|
|
99
106
|
className: `generate-image-to-layout-btn flex h-[40px] w-[94px] cursor-pointer items-center justify-center rounded-[3px] text-sm font-medium text-white ${!link ? 'btn-disable' : ''}`,
|
|
100
107
|
children: "Generate"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gem-sdk/pages",
|
|
3
|
-
"version": "1.14.0-next.
|
|
3
|
+
"version": "1.14.0-next.58",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"next-seo": "^6.0.0"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
|
-
"@gem-sdk/core": "1.14.0-next.
|
|
28
|
+
"@gem-sdk/core": "1.14.0-next.54",
|
|
29
29
|
"@gem-sdk/plugin-cookie-bar": "*",
|
|
30
30
|
"@gem-sdk/plugin-quick-view": "*",
|
|
31
31
|
"@gem-sdk/plugin-sticky-add-to-cart": "*"
|