pb-sxp-ui 1.14.1 → 1.15.0
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/index.cjs +713 -237
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +104 -0
- package/dist/index.js +713 -237
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +5 -5
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +5 -5
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +713 -237
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +5 -5
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/components/Consent/index.js +8 -2
- package/es/core/components/SxpPageRender/ConsentPopup.js +8 -8
- package/es/core/components/SxpPageRender/WaterFall/List.js +3 -3
- package/es/core/components/SxpPageRender/WaterFall/index.js +2 -2
- package/es/core/components/SxpPageRender/index.js +5 -2
- package/es/core/context/SxpDataSourceProvider.js +67 -30
- package/es/core/utils/materials.js +5 -3
- package/es/core/utils/tool.d.ts +2 -1
- package/es/core/utils/tool.js +38 -14
- package/es/materials/sxp/HashTag/index.d.ts +4 -1
- package/es/materials/sxp/HashTag/material.js +2 -1
- package/es/materials/sxp/HashTag/settingRender.d.ts +0 -2
- package/es/materials/sxp/HashTag/settingRender.js +2 -3
- package/es/materials/sxp/consentPopup/Click/index.d.ts +19 -0
- package/es/materials/sxp/consentPopup/Click/index.js +19 -0
- package/es/materials/sxp/consentPopup/Click/material.d.ts +2 -0
- package/es/materials/sxp/consentPopup/Click/material.js +48 -0
- package/es/materials/sxp/consentPopup/Click/settingRender.d.ts +63 -0
- package/es/materials/sxp/consentPopup/Click/settingRender.js +210 -0
- package/es/materials/sxp/consentPopup/Display/index.d.ts +2 -2
- package/es/materials/sxp/consentPopup/Display/index.js +7 -5
- package/es/materials/sxp/consentPopup/Swipe/index.d.ts +12 -0
- package/es/materials/sxp/consentPopup/Swipe/index.js +44 -0
- package/es/materials/sxp/consentPopup/Swipe/material.d.ts +2 -0
- package/es/materials/sxp/consentPopup/Swipe/material.js +24 -0
- package/es/materials/sxp/consentPopup/Swipe/settingRender.d.ts +29 -0
- package/es/materials/sxp/consentPopup/Swipe/settingRender.js +43 -0
- package/es/materials/sxp/consentPopup/index.d.ts +2 -0
- package/es/materials/sxp/consentPopup/index.js +2 -0
- package/es/materials/sxp/popup/ConsentDetail/index.d.ts +2 -1
- package/es/materials/sxp/popup/ConsentDetail/index.js +2 -2
- package/es/materials/sxp/popup/Iframe/index.d.ts +0 -4
- package/es/materials/sxp/popup/Iframe/index.js +4 -5
- package/es/materials/sxp/popup/Iframe/settingRender.js +0 -15
- package/lib/core/components/Consent/index.js +8 -2
- package/lib/core/components/SxpPageRender/ConsentPopup.js +7 -7
- package/lib/core/components/SxpPageRender/WaterFall/List.js +3 -3
- package/lib/core/components/SxpPageRender/WaterFall/index.js +2 -2
- package/lib/core/components/SxpPageRender/index.js +5 -2
- package/lib/core/context/SxpDataSourceProvider.js +66 -29
- package/lib/core/utils/materials.js +5 -3
- package/lib/core/utils/tool.d.ts +2 -1
- package/lib/core/utils/tool.js +39 -14
- package/lib/materials/sxp/HashTag/index.d.ts +4 -1
- package/lib/materials/sxp/HashTag/material.js +2 -1
- package/lib/materials/sxp/HashTag/settingRender.d.ts +0 -2
- package/lib/materials/sxp/HashTag/settingRender.js +2 -3
- package/lib/materials/sxp/consentPopup/Click/index.d.ts +19 -0
- package/lib/materials/sxp/consentPopup/Click/index.js +21 -0
- package/lib/materials/sxp/consentPopup/Click/material.d.ts +2 -0
- package/lib/materials/sxp/consentPopup/Click/material.js +52 -0
- package/lib/materials/sxp/consentPopup/Click/settingRender.d.ts +63 -0
- package/lib/materials/sxp/consentPopup/Click/settingRender.js +212 -0
- package/lib/materials/sxp/consentPopup/Display/index.d.ts +2 -2
- package/lib/materials/sxp/consentPopup/Display/index.js +7 -5
- package/lib/materials/sxp/consentPopup/Swipe/index.d.ts +12 -0
- package/lib/materials/sxp/consentPopup/Swipe/index.js +46 -0
- package/lib/materials/sxp/consentPopup/Swipe/material.d.ts +2 -0
- package/lib/materials/sxp/consentPopup/Swipe/material.js +28 -0
- package/lib/materials/sxp/consentPopup/Swipe/settingRender.d.ts +29 -0
- package/lib/materials/sxp/consentPopup/Swipe/settingRender.js +45 -0
- package/lib/materials/sxp/consentPopup/index.d.ts +2 -0
- package/lib/materials/sxp/consentPopup/index.js +2 -0
- package/lib/materials/sxp/popup/ConsentDetail/index.d.ts +2 -1
- package/lib/materials/sxp/popup/ConsentDetail/index.js +2 -2
- package/lib/materials/sxp/popup/Iframe/index.d.ts +0 -4
- package/lib/materials/sxp/popup/Iframe/index.js +4 -5
- package/lib/materials/sxp/popup/Iframe/settingRender.js +0 -15
- package/package.json +1 -1
@@ -0,0 +1,48 @@
|
|
1
|
+
import settingRender from './settingRender';
|
2
|
+
import ClickComponent from '.';
|
3
|
+
import { createMaterial } from '../../../../core/create';
|
4
|
+
const Click = createMaterial(ClickComponent, {
|
5
|
+
displayName: 'Click Consent',
|
6
|
+
icon: '',
|
7
|
+
category: 'consentPopup',
|
8
|
+
type: 'Click',
|
9
|
+
related: {
|
10
|
+
settingRender,
|
11
|
+
bindableProps: []
|
12
|
+
},
|
13
|
+
defaulSetting: {
|
14
|
+
props: {
|
15
|
+
content: '<p><strong><span style="font-size:14px"><span style="line-height:3">Your Cookie Preferences</span></span></strong></p><p>We use cookie, including third-party cookies, to ensure the proper functioning and security of this site, to analyse its use, and to show you personalised content. You can authorise the use of all cookies by clicking on "Accept all cookies". If you click on "Reject all cookies", we will only use cookies necessary for the proper functioning and security of this site. To personalise on adjust your preferences at any time, click on "Cookies Settings" below or at the bottom of any Fendi.com webpage. For more information, read our Cookie Policy.</p><p></p>',
|
16
|
+
acceptButton: {
|
17
|
+
text: 'Accept all cookies',
|
18
|
+
style: {
|
19
|
+
backgroundColor: '#000',
|
20
|
+
height: 45,
|
21
|
+
color: '#fff',
|
22
|
+
fontSize: 12,
|
23
|
+
textAlign: 'center',
|
24
|
+
marginTop: 5,
|
25
|
+
marginBottom: 5
|
26
|
+
}
|
27
|
+
},
|
28
|
+
rejectButton: {
|
29
|
+
text: 'Reject all cookies',
|
30
|
+
style: {
|
31
|
+
backgroundColor: '#000',
|
32
|
+
height: 45,
|
33
|
+
color: '#fff',
|
34
|
+
fontSize: 12,
|
35
|
+
textAlign: 'center',
|
36
|
+
marginTop: 5,
|
37
|
+
marginBottom: 5
|
38
|
+
}
|
39
|
+
}
|
40
|
+
},
|
41
|
+
style: {
|
42
|
+
backgroundColor: '#fff',
|
43
|
+
padding: 18
|
44
|
+
}
|
45
|
+
},
|
46
|
+
sort: 2
|
47
|
+
});
|
48
|
+
export { Click };
|
@@ -0,0 +1,63 @@
|
|
1
|
+
declare const _default: ({
|
2
|
+
title: string;
|
3
|
+
child: {
|
4
|
+
type: string;
|
5
|
+
name: string[];
|
6
|
+
}[];
|
7
|
+
} | {
|
8
|
+
title: string;
|
9
|
+
child: ({
|
10
|
+
type: string;
|
11
|
+
label: string;
|
12
|
+
name: string[];
|
13
|
+
addonAfter?: undefined;
|
14
|
+
child?: undefined;
|
15
|
+
} | {
|
16
|
+
type: string;
|
17
|
+
label: string;
|
18
|
+
name: string[];
|
19
|
+
addonAfter: string;
|
20
|
+
child?: undefined;
|
21
|
+
} | {
|
22
|
+
type: string;
|
23
|
+
label: string;
|
24
|
+
child: ({
|
25
|
+
type: string;
|
26
|
+
name: string[];
|
27
|
+
max: number;
|
28
|
+
addonAfter?: undefined;
|
29
|
+
} | {
|
30
|
+
type: string;
|
31
|
+
name: string[];
|
32
|
+
addonAfter: string;
|
33
|
+
max: number;
|
34
|
+
})[];
|
35
|
+
name?: undefined;
|
36
|
+
addonAfter?: undefined;
|
37
|
+
} | {
|
38
|
+
type: string;
|
39
|
+
label: string;
|
40
|
+
child: {
|
41
|
+
type: string;
|
42
|
+
name: string[];
|
43
|
+
bottomText: string;
|
44
|
+
}[];
|
45
|
+
name?: undefined;
|
46
|
+
addonAfter?: undefined;
|
47
|
+
} | {
|
48
|
+
type: string;
|
49
|
+
label: string;
|
50
|
+
child: ({
|
51
|
+
type: string;
|
52
|
+
name: string[];
|
53
|
+
addonAfter?: undefined;
|
54
|
+
} | {
|
55
|
+
type: string;
|
56
|
+
name: string[];
|
57
|
+
addonAfter: string;
|
58
|
+
})[];
|
59
|
+
name?: undefined;
|
60
|
+
addonAfter?: undefined;
|
61
|
+
})[];
|
62
|
+
})[];
|
63
|
+
export default _default;
|
@@ -0,0 +1,210 @@
|
|
1
|
+
export default [
|
2
|
+
{
|
3
|
+
title: '全局设置',
|
4
|
+
child: [
|
5
|
+
{
|
6
|
+
type: 'Switch',
|
7
|
+
label: '弹窗开关',
|
8
|
+
name: ['props', 'open']
|
9
|
+
},
|
10
|
+
{
|
11
|
+
type: 'Color',
|
12
|
+
label: '背景色',
|
13
|
+
name: ['style', 'backgroundColor']
|
14
|
+
},
|
15
|
+
{
|
16
|
+
type: 'Number',
|
17
|
+
label: '内边距',
|
18
|
+
name: ['style', 'padding'],
|
19
|
+
addonAfter: 'px'
|
20
|
+
}
|
21
|
+
]
|
22
|
+
},
|
23
|
+
{
|
24
|
+
title: '弹窗文本',
|
25
|
+
child: [
|
26
|
+
{
|
27
|
+
type: 'RichText',
|
28
|
+
name: ['props', 'content']
|
29
|
+
}
|
30
|
+
]
|
31
|
+
},
|
32
|
+
{
|
33
|
+
title: '接受按钮样式',
|
34
|
+
child: [
|
35
|
+
{
|
36
|
+
type: 'Color',
|
37
|
+
label: '背景色',
|
38
|
+
name: ['props', 'acceptButton', 'style', 'backgroundColor']
|
39
|
+
},
|
40
|
+
{
|
41
|
+
type: 'Number',
|
42
|
+
label: '尺寸',
|
43
|
+
name: ['props', 'acceptButton', 'style', 'height'],
|
44
|
+
addonAfter: 'H'
|
45
|
+
},
|
46
|
+
{
|
47
|
+
type: 'Group',
|
48
|
+
label: '圆角',
|
49
|
+
child: [
|
50
|
+
{
|
51
|
+
type: 'Slider',
|
52
|
+
name: ['props', 'acceptButton', 'style', 'borderRadius'],
|
53
|
+
max: 100
|
54
|
+
},
|
55
|
+
{
|
56
|
+
type: 'Number',
|
57
|
+
name: ['props', 'acceptButton', 'style', 'borderRadius'],
|
58
|
+
addonAfter: 'px',
|
59
|
+
max: 100
|
60
|
+
}
|
61
|
+
]
|
62
|
+
},
|
63
|
+
{
|
64
|
+
type: 'TextMargin',
|
65
|
+
label: '边距',
|
66
|
+
name: ['props', 'acceptButton', 'style']
|
67
|
+
},
|
68
|
+
{
|
69
|
+
type: 'Group',
|
70
|
+
label: '字体',
|
71
|
+
child: [
|
72
|
+
{
|
73
|
+
type: 'Select',
|
74
|
+
name: ['props', 'acceptButton', 'style', 'fontFamily-cn'],
|
75
|
+
bottomText: '中文字体'
|
76
|
+
},
|
77
|
+
{
|
78
|
+
type: 'Select',
|
79
|
+
name: ['props', 'acceptButton', 'style', 'fontFamily-en'],
|
80
|
+
bottomText: '英文/其他字体'
|
81
|
+
}
|
82
|
+
]
|
83
|
+
},
|
84
|
+
{
|
85
|
+
type: 'Group',
|
86
|
+
label: '',
|
87
|
+
child: [
|
88
|
+
{
|
89
|
+
type: 'Color',
|
90
|
+
name: ['props', 'acceptButton', 'style', 'color']
|
91
|
+
},
|
92
|
+
{
|
93
|
+
type: 'Number',
|
94
|
+
name: ['props', 'acceptButton', 'style', 'fontSize'],
|
95
|
+
addonAfter: 'px'
|
96
|
+
}
|
97
|
+
]
|
98
|
+
},
|
99
|
+
{
|
100
|
+
label: '样式',
|
101
|
+
type: 'TextStyle',
|
102
|
+
name: ['props', 'acceptButton', 'style']
|
103
|
+
},
|
104
|
+
{
|
105
|
+
label: '对齐',
|
106
|
+
type: 'TextAlign',
|
107
|
+
name: ['props', 'acceptButton', 'style']
|
108
|
+
},
|
109
|
+
{
|
110
|
+
label: '间距',
|
111
|
+
type: 'TextSpace',
|
112
|
+
name: ['props', 'acceptButton', 'style']
|
113
|
+
},
|
114
|
+
{
|
115
|
+
label: '文本',
|
116
|
+
type: 'TextArea',
|
117
|
+
name: ['props', 'acceptButton', 'text']
|
118
|
+
}
|
119
|
+
]
|
120
|
+
},
|
121
|
+
{
|
122
|
+
title: '拒绝按钮样式',
|
123
|
+
child: [
|
124
|
+
{
|
125
|
+
type: 'Color',
|
126
|
+
label: '背景色',
|
127
|
+
name: ['props', 'rejectButton', 'style', 'backgroundColor']
|
128
|
+
},
|
129
|
+
{
|
130
|
+
type: 'Number',
|
131
|
+
label: '尺寸',
|
132
|
+
name: ['props', 'rejectButton', 'style', 'height'],
|
133
|
+
addonAfter: 'H'
|
134
|
+
},
|
135
|
+
{
|
136
|
+
type: 'Group',
|
137
|
+
label: '圆角',
|
138
|
+
child: [
|
139
|
+
{
|
140
|
+
type: 'Slider',
|
141
|
+
name: ['props', 'rejectButton', 'style', 'borderRadius'],
|
142
|
+
max: 100
|
143
|
+
},
|
144
|
+
{
|
145
|
+
type: 'Number',
|
146
|
+
name: ['props', 'rejectButton', 'style', 'borderRadius'],
|
147
|
+
addonAfter: 'px',
|
148
|
+
max: 100
|
149
|
+
}
|
150
|
+
]
|
151
|
+
},
|
152
|
+
{
|
153
|
+
type: 'TextMargin',
|
154
|
+
label: '边距',
|
155
|
+
name: ['props', 'acceptButton', 'style']
|
156
|
+
},
|
157
|
+
{
|
158
|
+
type: 'Group',
|
159
|
+
label: '字体',
|
160
|
+
child: [
|
161
|
+
{
|
162
|
+
type: 'Select',
|
163
|
+
name: ['props', 'rejectButton', 'style', 'fontFamily-cn'],
|
164
|
+
bottomText: '中文字体'
|
165
|
+
},
|
166
|
+
{
|
167
|
+
type: 'Select',
|
168
|
+
name: ['props', 'rejectButton', 'style', 'fontFamily-en'],
|
169
|
+
bottomText: '英文/其他字体'
|
170
|
+
}
|
171
|
+
]
|
172
|
+
},
|
173
|
+
{
|
174
|
+
type: 'Group',
|
175
|
+
label: '',
|
176
|
+
child: [
|
177
|
+
{
|
178
|
+
type: 'Color',
|
179
|
+
name: ['props', 'rejectButton', 'style', 'color']
|
180
|
+
},
|
181
|
+
{
|
182
|
+
type: 'Number',
|
183
|
+
name: ['props', 'rejectButton', 'style', 'fontSize'],
|
184
|
+
addonAfter: 'px'
|
185
|
+
}
|
186
|
+
]
|
187
|
+
},
|
188
|
+
{
|
189
|
+
label: '样式',
|
190
|
+
type: 'TextStyle',
|
191
|
+
name: ['props', 'rejectButton', 'style']
|
192
|
+
},
|
193
|
+
{
|
194
|
+
label: '对齐',
|
195
|
+
type: 'TextAlign',
|
196
|
+
name: ['props', 'rejectButton', 'style']
|
197
|
+
},
|
198
|
+
{
|
199
|
+
label: '间距',
|
200
|
+
type: 'TextSpace',
|
201
|
+
name: ['props', 'rejectButton', 'style']
|
202
|
+
},
|
203
|
+
{
|
204
|
+
label: '文本',
|
205
|
+
type: 'TextArea',
|
206
|
+
name: ['props', 'rejectButton', 'text']
|
207
|
+
}
|
208
|
+
]
|
209
|
+
}
|
210
|
+
];
|
@@ -13,9 +13,9 @@ export interface IDisplayProps {
|
|
13
13
|
};
|
14
14
|
style?: Record<string, any>;
|
15
15
|
isTel?: boolean;
|
16
|
-
onClick?: () => void;
|
17
|
-
contsentState?: boolean;
|
18
16
|
isShowClose?: boolean;
|
17
|
+
consentPopupCate?: string;
|
18
|
+
onClick?: () => void;
|
19
19
|
}
|
20
20
|
declare const _default: React.NamedExoticComponent<IDisplayProps>;
|
21
21
|
export default _default;
|
@@ -1,18 +1,20 @@
|
|
1
1
|
import { __rest } from "tslib";
|
2
2
|
import React, { memo, useCallback, useMemo, useState } from 'react';
|
3
3
|
import './index.less';
|
4
|
-
import { useEditorDataProvider } from '../../../../core/context/EditorDataProvider';
|
5
4
|
import closeSvg from './close.svg';
|
6
5
|
import tel from './tel.png';
|
7
6
|
import { setFontForText } from '../../../../core/utils/tool';
|
7
|
+
import { getContsentState } from '../../../../core/utils/localStore';
|
8
8
|
const Display = (_a) => {
|
9
9
|
var _b, _c;
|
10
|
-
var { isTel, isShowOnce, open, content, interaction, style, onClick,
|
11
|
-
const { consentPopupCate } = useEditorDataProvider();
|
10
|
+
var { isTel, isShowOnce, open, content, interaction, style, onClick, isShowClose, consentPopupCate } = _a, props = __rest(_a, ["isTel", "isShowOnce", "open", "content", "interaction", "style", "onClick", "isShowClose", "consentPopupCate"]);
|
12
11
|
const [isClose, setIsClose] = useState(false);
|
12
|
+
const contsentState = useMemo(() => {
|
13
|
+
return getContsentState();
|
14
|
+
}, []);
|
13
15
|
const visivle = useMemo(() => {
|
14
|
-
return consentPopupCate
|
15
|
-
}, [consentPopupCate, open, isClose]);
|
16
|
+
return consentPopupCate || (open && (isShowOnce || contsentState) && style && !isClose);
|
17
|
+
}, [consentPopupCate, open, isClose, contsentState]);
|
16
18
|
const handleClickClose = useCallback(() => {
|
17
19
|
setIsClose(true);
|
18
20
|
}, []);
|
@@ -0,0 +1,12 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import './index.less';
|
3
|
+
export interface ISwipeProps {
|
4
|
+
open?: boolean;
|
5
|
+
content?: string;
|
6
|
+
style?: Record<string, any>;
|
7
|
+
isTel?: boolean;
|
8
|
+
consentPopupCate?: string;
|
9
|
+
swipeIcon?: string;
|
10
|
+
}
|
11
|
+
declare const _default: React.NamedExoticComponent<ISwipeProps>;
|
12
|
+
export default _default;
|
@@ -0,0 +1,44 @@
|
|
1
|
+
import { __rest } from "tslib";
|
2
|
+
import React, { memo, useMemo, useRef } from 'react';
|
3
|
+
import './index.less';
|
4
|
+
import tel from './tel.png';
|
5
|
+
import ConsentDetail from '../../popup/ConsentDetail';
|
6
|
+
const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
|
7
|
+
const Swipe = (_a) => {
|
8
|
+
var { isTel, open, content, style, consentPopupCate, swipeIcon } = _a, props = __rest(_a, ["isTel", "open", "content", "style", "consentPopupCate", "swipeIcon"]);
|
9
|
+
const touchInfo = useRef();
|
10
|
+
const threshold = 50;
|
11
|
+
const handleTouchStart = (event) => {
|
12
|
+
const touch = event.touches[0];
|
13
|
+
touchInfo.current = { y: touch.clientY, d: 0 };
|
14
|
+
};
|
15
|
+
const handleTouchMove = (event) => {
|
16
|
+
var _a;
|
17
|
+
if (!touchInfo.current)
|
18
|
+
return;
|
19
|
+
const touch = event.touches[0];
|
20
|
+
const dy = touch.clientY - ((_a = touchInfo === null || touchInfo === void 0 ? void 0 : touchInfo.current) === null || _a === void 0 ? void 0 : _a.y);
|
21
|
+
const currentDistance = Math.abs(dy);
|
22
|
+
touchInfo.current = Object.assign(Object.assign({}, touchInfo.current), { d: currentDistance });
|
23
|
+
};
|
24
|
+
const handleTouchEnd = () => {
|
25
|
+
if (!touchInfo.current)
|
26
|
+
return;
|
27
|
+
const { d } = touchInfo.current || {};
|
28
|
+
if (d > threshold) {
|
29
|
+
}
|
30
|
+
touchInfo.current = {};
|
31
|
+
};
|
32
|
+
const handleClickReject = () => { };
|
33
|
+
const visivle = useMemo(() => {
|
34
|
+
return consentPopupCate || (open && style);
|
35
|
+
}, [consentPopupCate, open]);
|
36
|
+
return (React.createElement(React.Fragment, null, isTel ? (React.createElement("img", { src: tel, style: { objectFit: 'cover', width: '100%', height: '100%' } })) : (React.createElement(React.Fragment, null, visivle && (React.createElement("div", { className: 'consentPopupSwipe', onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd },
|
37
|
+
React.createElement("div", { className: 'consentPopupSwipe-container', style: style },
|
38
|
+
React.createElement(ConsentDetail, { content: content, style: { padding: 0 } }),
|
39
|
+
React.createElement("button", { "aria-label": 'close', className: 'consentPopupSwipe-container-close', onClick: handleClickReject },
|
40
|
+
React.createElement("img", { src: closeIcon, alt: 'close' })),
|
41
|
+
swipeIcon && (React.createElement("div", { className: 'consentPopupSwipe-container-swipeIcon', onClick: handleClickReject },
|
42
|
+
React.createElement("img", { src: swipeIcon, alt: 'Swipe Icon' }))))))))));
|
43
|
+
};
|
44
|
+
export default memo(Swipe);
|
@@ -0,0 +1,24 @@
|
|
1
|
+
import settingRender from './settingRender';
|
2
|
+
import SwipeComponent from '.';
|
3
|
+
import { createMaterial } from '../../../../core/create';
|
4
|
+
const Swipe = createMaterial(SwipeComponent, {
|
5
|
+
displayName: 'Swipe Consent',
|
6
|
+
icon: '',
|
7
|
+
category: 'consentPopup',
|
8
|
+
type: 'Swipe',
|
9
|
+
related: {
|
10
|
+
settingRender,
|
11
|
+
bindableProps: []
|
12
|
+
},
|
13
|
+
defaulSetting: {
|
14
|
+
props: {
|
15
|
+
content: '<p><span style="font- size: 14px"><strong><span style="line - height: 3">Your Cookie Preferences</span></strong></span></p><p><span style="line- height: 1"><span style="font- size: 12px">We use cookie, including third-party cookies, to</span></span></p><p><span style="line - height: 1"><span style="font - size: 12px">ensure the proper functioning and security of</span></span></p><p><span style="line - height: 1"><span style="font - size: 12px">this site, to analyse its use, and to show you</span></span></p><p><span style="line - height: 1"><span style="font - size: 12px">personalised content.</span></span></p><p><span style="line - height: 1"><span style="font - size: 12px">You can authorise the use of all cookies by</span></span></p><p><span style="line - height: 1"><span style="font - size: 12px">clicking on 'Accept all cookies'. If you click on</span></span></p><p><span style="line - height: 1"><span style="font - size: 12px">'Reject all cookies', we will only use cookies</span></span></p><p><span style="line - height: 1"><span style="font - size: 12px">necessary for the proper functioning and </span></span></p><p><span style="line - height: 1"><span style="font - size: 12px">security of this site. To personalise or adjust</span></span></p><p><span style="line - height: 1"><span style="font - size: 12px">your preferences at any time, click on 'Cookies</span></span></p><p><span style="line - height: 1"><span style="font - size: 12px">Settings' below or at the bottom of any</span></span></p><p><span style="line - height: 1"><span style="font - size: 12px">Fendi.com webpage.</span></span></p><p><span style="line - height: 1"><span style="font - size: 12px">For more information, <u>read our Cookie Policy</u>.</span></span></p>'
|
16
|
+
},
|
17
|
+
style: {
|
18
|
+
backgroundColor: '#fff',
|
19
|
+
padding: 18
|
20
|
+
}
|
21
|
+
},
|
22
|
+
sort: 3
|
23
|
+
});
|
24
|
+
export { Swipe };
|
@@ -0,0 +1,29 @@
|
|
1
|
+
declare const _default: ({
|
2
|
+
title: string;
|
3
|
+
child: ({
|
4
|
+
type: string;
|
5
|
+
label: string;
|
6
|
+
name: string[];
|
7
|
+
addonAfter?: undefined;
|
8
|
+
} | {
|
9
|
+
type: string;
|
10
|
+
label: string;
|
11
|
+
name: string[];
|
12
|
+
addonAfter: string;
|
13
|
+
})[];
|
14
|
+
} | {
|
15
|
+
title: string;
|
16
|
+
child: {
|
17
|
+
type: string;
|
18
|
+
name: string[];
|
19
|
+
}[];
|
20
|
+
} | {
|
21
|
+
title: string;
|
22
|
+
child: {
|
23
|
+
type: string;
|
24
|
+
label: string;
|
25
|
+
name: string[];
|
26
|
+
text: string;
|
27
|
+
}[];
|
28
|
+
})[];
|
29
|
+
export default _default;
|
@@ -0,0 +1,43 @@
|
|
1
|
+
export default [
|
2
|
+
{
|
3
|
+
title: '全局设置',
|
4
|
+
child: [
|
5
|
+
{
|
6
|
+
type: 'Switch',
|
7
|
+
label: '弹窗开关',
|
8
|
+
name: ['props', 'open']
|
9
|
+
},
|
10
|
+
{
|
11
|
+
type: 'Color',
|
12
|
+
label: '背景色',
|
13
|
+
name: ['style', 'backgroundColor']
|
14
|
+
},
|
15
|
+
{
|
16
|
+
type: 'Number',
|
17
|
+
label: '内边距',
|
18
|
+
name: ['style', 'padding'],
|
19
|
+
addonAfter: 'px'
|
20
|
+
}
|
21
|
+
]
|
22
|
+
},
|
23
|
+
{
|
24
|
+
title: '弹窗文本',
|
25
|
+
child: [
|
26
|
+
{
|
27
|
+
type: 'RichText',
|
28
|
+
name: ['props', 'content']
|
29
|
+
}
|
30
|
+
]
|
31
|
+
},
|
32
|
+
{
|
33
|
+
title: '滑动图标',
|
34
|
+
child: [
|
35
|
+
{
|
36
|
+
type: 'Upload',
|
37
|
+
label: '滑动图标',
|
38
|
+
name: ['props', 'swipeIcon'],
|
39
|
+
text: '建议尺寸:252 * 185'
|
40
|
+
}
|
41
|
+
]
|
42
|
+
}
|
43
|
+
];
|
@@ -1,8 +1,9 @@
|
|
1
|
-
import React from 'react';
|
1
|
+
import React, { CSSProperties } from 'react';
|
2
2
|
import './index.less';
|
3
3
|
export interface IConsentDetailProps {
|
4
4
|
content?: string;
|
5
5
|
isTel?: boolean;
|
6
|
+
style?: CSSProperties;
|
6
7
|
}
|
7
8
|
declare const _default: React.NamedExoticComponent<IConsentDetailProps>;
|
8
9
|
export default _default;
|
@@ -2,11 +2,11 @@ import { __rest } from "tslib";
|
|
2
2
|
import React, { memo } from 'react';
|
3
3
|
import './index.less';
|
4
4
|
const ConsentDetail = (_a) => {
|
5
|
-
var { content, isTel } = _a, props = __rest(_a, ["content", "isTel"]);
|
5
|
+
var { content, isTel, style } = _a, props = __rest(_a, ["content", "isTel", "style"]);
|
6
6
|
return (React.createElement("article", { className: 'consentDetail-article', dangerouslySetInnerHTML: {
|
7
7
|
__html: typeof content === 'string' ? content : ''
|
8
8
|
}, onClick: (e) => {
|
9
9
|
e.stopPropagation();
|
10
|
-
} }));
|
10
|
+
}, style: style }));
|
11
11
|
};
|
12
12
|
export default memo(ConsentDetail);
|
@@ -12,10 +12,6 @@ export interface IIframeProps {
|
|
12
12
|
submitButtonStyle?: CSSProperties;
|
13
13
|
contentStyle?: CSSProperties;
|
14
14
|
isTel?: boolean;
|
15
|
-
iframe?: {
|
16
|
-
src?: string;
|
17
|
-
allow?: string;
|
18
|
-
};
|
19
15
|
}
|
20
16
|
declare const _default: React.NamedExoticComponent<IIframeProps>;
|
21
17
|
export default _default;
|
@@ -5,12 +5,11 @@ import './index.less';
|
|
5
5
|
import { useSxpDataSource } from '../../../../core/hooks';
|
6
6
|
const Iframe = (_a) => {
|
7
7
|
var _b, _c;
|
8
|
-
var { content, btnText, style, icon, isPopup, isExternalLink, onClose, onClick, submitButtonStyle, contentStyle, isTel
|
8
|
+
var { content, btnText, style, icon, isPopup, isExternalLink, onClose, onClick, submitButtonStyle, contentStyle, isTel } = _a, props = __rest(_a, ["content", "btnText", "style", "icon", "isPopup", "isExternalLink", "onClose", "onClick", "submitButtonStyle", "contentStyle", "isTel"]);
|
9
9
|
const { popupDetailData } = useSxpDataSource();
|
10
|
-
const
|
11
|
-
|
12
|
-
|
13
|
-
React.createElement("iframe", { src: iframeUrl, allow: allow, scrolling: 'no', style: {
|
10
|
+
const iframeUrl = (_c = (_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.video) === null || _b === void 0 ? void 0 : _b.bindCta) === null || _c === void 0 ? void 0 : _c.remark;
|
11
|
+
return (React.createElement("div", Object.assign({ className: `${css(Object.assign({}, style))}` }, props),
|
12
|
+
React.createElement("iframe", { src: iframeUrl, style: {
|
14
13
|
width: '100%',
|
15
14
|
height: 'calc(100% - 50px)',
|
16
15
|
marginTop: '50px',
|
@@ -8,20 +8,5 @@ export default [
|
|
8
8
|
name: ['style', 'backgroundColor']
|
9
9
|
}
|
10
10
|
]
|
11
|
-
},
|
12
|
-
{
|
13
|
-
title: 'iframe',
|
14
|
-
child: [
|
15
|
-
{
|
16
|
-
type: 'TextArea',
|
17
|
-
label: 'url',
|
18
|
-
name: ['props', 'iframe', 'src']
|
19
|
-
},
|
20
|
-
{
|
21
|
-
type: 'TextArea',
|
22
|
-
label: 'allow',
|
23
|
-
name: ['props', 'iframe', 'allow']
|
24
|
-
}
|
25
|
-
]
|
26
11
|
}
|
27
12
|
];
|
@@ -2,14 +2,20 @@
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
3
3
|
const tslib_1 = require("tslib");
|
4
4
|
const react_1 = tslib_1.__importStar(require("react"));
|
5
|
-
const qs_1 = tslib_1.__importDefault(require("qs"));
|
6
5
|
const hooks_1 = require("../../../core/hooks");
|
7
6
|
const localStore_1 = require("../../../core/utils/localStore");
|
7
|
+
const tool_1 = require("../../../core/utils/tool");
|
8
8
|
const Consent = ({ width = window.innerWidth, height = window.innerHeight, privacy_title, privacy_context, privacy_policy_url, privacy_policy_title }) => {
|
9
9
|
const { setIsAgreePolicy, bffEventReport } = (0, hooks_1.useSxpDataSource)();
|
10
10
|
const channelObj = (0, react_1.useMemo)(() => {
|
11
|
+
var _a;
|
11
12
|
const queryString = location.search.slice(1);
|
12
|
-
const params =
|
13
|
+
const params = {};
|
14
|
+
(_a = (0, tool_1.splitUrlParams)(queryString.replace(/\+/g, '%2B'))) === null || _a === void 0 ? void 0 : _a.map((val) => {
|
15
|
+
const key = val.split('=')[0];
|
16
|
+
const value = val.split('=')[1];
|
17
|
+
params[key] = value;
|
18
|
+
});
|
13
19
|
for (const key in params) {
|
14
20
|
params[key] = params[key].replace(/%2B/g, '+');
|
15
21
|
}
|