phx-react 1.3.1800 → 1.3.1801
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/Iframe/PHXIframe.d.ts +2 -1
- package/dist/cjs/components/Iframe/PHXIframe.js +46 -3
- package/dist/cjs/components/Iframe/PHXIframe.js.map +1 -1
- package/dist/cjs/components/Preview-noti/mobile-preview/mobile-preview.js +18 -10
- package/dist/cjs/components/Preview-noti/mobile-preview/mobile-preview.js.map +1 -1
- package/dist/esm/components/Iframe/PHXIframe.d.ts +2 -1
- package/dist/esm/components/Iframe/PHXIframe.js +46 -3
- package/dist/esm/components/Iframe/PHXIframe.js.map +1 -1
- package/dist/esm/components/Preview-noti/mobile-preview/mobile-preview.js +18 -10
- package/dist/esm/components/Preview-noti/mobile-preview/mobile-preview.js.map +1 -1
- package/package.json +1 -1
|
@@ -7,6 +7,7 @@ interface PHXIframeProps {
|
|
|
7
7
|
height?: 'small' | 'medium' | 'large' | 'full';
|
|
8
8
|
hasBorder?: boolean;
|
|
9
9
|
rounded?: boolean;
|
|
10
|
+
isMobile?: boolean;
|
|
10
11
|
}
|
|
11
|
-
export declare function PHXIframe({
|
|
12
|
+
export declare function PHXIframe({ hasBorder, height, isFullWidth, isMobile, rounded, src, srcDoc, title, }: PHXIframeProps): React.JSX.Element;
|
|
12
13
|
export {};
|
|
@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.PHXIframe = PHXIframe;
|
|
4
4
|
const tslib_1 = require("tslib");
|
|
5
5
|
const react_1 = tslib_1.__importDefault(require("react"));
|
|
6
|
-
function PHXIframe({
|
|
6
|
+
function PHXIframe({ hasBorder = false, height = 'large', isFullWidth = true, isMobile = false, rounded = false, src, srcDoc, title = 'Iframe Content', }) {
|
|
7
7
|
const widthClass = isFullWidth ? 'w-full' : 'w-auto';
|
|
8
8
|
const heightClass = {
|
|
9
|
-
small: 'h-
|
|
9
|
+
small: 'h-56',
|
|
10
10
|
medium: 'h-80',
|
|
11
11
|
large: 'h-96',
|
|
12
12
|
full: 'h-full',
|
|
@@ -14,6 +14,49 @@ function PHXIframe({ srcDoc, src, title = 'Iframe Content', isFullWidth = true,
|
|
|
14
14
|
const borderClass = hasBorder ? 'border border-gray-200' : 'border-none';
|
|
15
15
|
const roundedClass = rounded ? 'rounded-lg' : '';
|
|
16
16
|
const iframeClasses = `${widthClass} ${heightClass} ${borderClass} ${roundedClass}`.trim();
|
|
17
|
-
|
|
17
|
+
const baseStyle = `
|
|
18
|
+
<style>
|
|
19
|
+
html, body {
|
|
20
|
+
margin: 0;
|
|
21
|
+
padding: 0;
|
|
22
|
+
width: 100%;
|
|
23
|
+
height: 100%;
|
|
24
|
+
overflow-x: hidden !important;
|
|
25
|
+
overflow-y: auto !important;
|
|
26
|
+
-ms-overflow-style: none;
|
|
27
|
+
scrollbar-width: none;
|
|
28
|
+
}
|
|
29
|
+
html::-webkit-scrollbar, body::-webkit-scrollbar {
|
|
30
|
+
display: none !important;
|
|
31
|
+
}
|
|
32
|
+
body {
|
|
33
|
+
font-family: system-ui, -apple-system, sans-serif;
|
|
34
|
+
}
|
|
35
|
+
* {
|
|
36
|
+
line-height: 1.5 !important;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
img {
|
|
40
|
+
max-width: 100% !important;
|
|
41
|
+
height: auto !important;
|
|
42
|
+
}
|
|
43
|
+
${isMobile
|
|
44
|
+
? `
|
|
45
|
+
.preview-scale-wrapper {
|
|
46
|
+
zoom: 0.6;
|
|
47
|
+
-moz-transform: scale(0.6);
|
|
48
|
+
-moz-transform-origin: 0 0;
|
|
49
|
+
box-sizing: border-box;
|
|
50
|
+
}
|
|
51
|
+
h3 {
|
|
52
|
+
font-weight: 500 !important;
|
|
53
|
+
}
|
|
54
|
+
`
|
|
55
|
+
: ''}
|
|
56
|
+
</style>
|
|
57
|
+
`;
|
|
58
|
+
const finalSrcDoc = srcDoc ? `${baseStyle} <div class="preview-scale-wrapper">${srcDoc}</div>` : undefined;
|
|
59
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
60
|
+
react_1.default.createElement("iframe", { className: iframeClasses, src: src, srcDoc: finalSrcDoc, title: title })));
|
|
18
61
|
}
|
|
19
62
|
//# sourceMappingURL=PHXIframe.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PHXIframe.js","sourceRoot":"","sources":["../../../../src/components/Iframe/PHXIframe.tsx"],"names":[],"mappings":";;AAYA,
|
|
1
|
+
{"version":3,"file":"PHXIframe.js","sourceRoot":"","sources":["../../../../src/components/Iframe/PHXIframe.tsx"],"names":[],"mappings":";;AAYA,8BA2EC;;AAvFD,0DAAyB;AAYzB,SAAgB,SAAS,CAAC,EACxB,SAAS,GAAG,KAAK,EACjB,MAAM,GAAG,OAAO,EAChB,WAAW,GAAG,IAAI,EAClB,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,GAAG,EACH,MAAM,EACN,KAAK,GAAG,gBAAgB,GACT;IACf,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAA;IAEpD,MAAM,WAAW,GAAG;QAClB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,QAAQ;KACf,CAAC,MAAM,CAAC,CAAA;IAET,MAAM,WAAW,GAAG,SAAS,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,aAAa,CAAA;IACxE,MAAM,YAAY,GAAG,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAA;IAEhD,MAAM,aAAa,GAAG,GAAG,UAAU,IAAI,WAAW,IAAI,WAAW,IAAI,YAAY,EAAE,CAAC,IAAI,EAAE,CAAA;IAE1F,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;QA2BZ,QAAQ;QACN,CAAC,CAAC;;;;;;;;;;OAUL;QACG,CAAC,CAAC,EACN;;GAEH,CAAA;IAED,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,SAAS,uCAAuC,MAAM,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAA;IAE1G,OAAO,CACL;QACE,0CAAQ,SAAS,EAAE,aAAa,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,GAAI,CAChF,CACJ,CAAA;AACH,CAAC"}
|
|
@@ -2,16 +2,29 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.MobilePreview = exports.ENotificationType = void 0;
|
|
4
4
|
const tslib_1 = require("tslib");
|
|
5
|
-
const outline_1 = require("@heroicons/react/24/outline");
|
|
6
5
|
const image_1 = tslib_1.__importDefault(require("next/image"));
|
|
7
6
|
const react_1 = tslib_1.__importDefault(require("react"));
|
|
8
7
|
const icons_1 = require("../../../assets/icons");
|
|
9
8
|
const screens_1 = require("../../../assets/screens");
|
|
9
|
+
const Box_1 = require("../../Box");
|
|
10
|
+
const Iframe_1 = require("../../Iframe");
|
|
11
|
+
const TextV2_1 = require("../../TextV2");
|
|
10
12
|
var ENotificationType;
|
|
11
13
|
(function (ENotificationType) {
|
|
12
14
|
ENotificationType["IN_APP"] = "in_app";
|
|
13
15
|
ENotificationType["EMAIL"] = "email";
|
|
14
16
|
})(ENotificationType || (exports.ENotificationType = ENotificationType = {}));
|
|
17
|
+
const getScaledPreviewContent = (title, html) => {
|
|
18
|
+
if (!html && !title) {
|
|
19
|
+
return '';
|
|
20
|
+
}
|
|
21
|
+
return `
|
|
22
|
+
<div>
|
|
23
|
+
${title ? `<h3>${title}</h3>` : ''}
|
|
24
|
+
<div>${html || ''}</div>
|
|
25
|
+
</div>
|
|
26
|
+
`;
|
|
27
|
+
};
|
|
15
28
|
const MobilePreview = ({ content, description, isEvent = false, title, type = 'email', }) => {
|
|
16
29
|
const isApp = type === 'in_app';
|
|
17
30
|
const getImageUrl = () => {
|
|
@@ -63,15 +76,10 @@ const MobilePreview = ({ content, description, isEvent = false, title, type = 'e
|
|
|
63
76
|
react_1.default.createElement("div", { className: 'relative w-full lg:w-1/2' },
|
|
64
77
|
react_1.default.createElement(image_1.default, { alt: 'ImagePhoneDetail', className: 'h-auto w-full rounded-xl', height: 100, quality: 100, src: getImageDetailUrl(), width: 100 }),
|
|
65
78
|
react_1.default.createElement("div", { className: getDetailWrapperClass() },
|
|
66
|
-
react_1.default.createElement("div", { className: '
|
|
67
|
-
isApp && !isEvent && (react_1.default.createElement(
|
|
68
|
-
react_1.default.createElement(
|
|
69
|
-
|
|
70
|
-
react_1.default.createElement(outline_1.XMarkIcon, { className: 'h-3 w-3' })))),
|
|
71
|
-
react_1.default.createElement("div", { className: 'flex-1 text-[10px] leading-4 text-gray-900' },
|
|
72
|
-
react_1.default.createElement(react_1.default.Fragment, null, content ? (react_1.default.createElement("div", { className: 'break-words text-[10px] [&_*]:!text-[10px] [&_*]:!leading-4 [&_a]:break-all [&_a]:text-blue-600 [&_a]:hover:text-blue-800 [&_a]:hover:underline [&_h1]:!font-bold [&_h2]:!font-bold [&_h3]:!font-bold [&_h4]:!font-bold', dangerouslySetInnerHTML: {
|
|
73
|
-
__html: content,
|
|
74
|
-
} })) : (react_1.default.createElement("p", null, "N\u1ED9i dung")))))))));
|
|
79
|
+
react_1.default.createElement("div", { className: 'h-full' },
|
|
80
|
+
isApp && !isEvent && (react_1.default.createElement(Box_1.PHXBox, { pb: 'snappy' },
|
|
81
|
+
react_1.default.createElement(TextV2_1.PHXTextV2, { color: 'primary', size: 'micro', weight: 'semibold' }, "Chi ti\u1EBFt th\u00F4ng b\u00E1o"))),
|
|
82
|
+
react_1.default.createElement(Iframe_1.PHXIframe, { height: 'small', isMobile: true, srcDoc: getScaledPreviewContent(title, content) }))))));
|
|
75
83
|
};
|
|
76
84
|
exports.MobilePreview = MobilePreview;
|
|
77
85
|
//# sourceMappingURL=mobile-preview.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mobile-preview.js","sourceRoot":"","sources":["../../../../../src/components/Preview-noti/mobile-preview/mobile-preview.tsx"],"names":[],"mappings":";;;;AAAA
|
|
1
|
+
{"version":3,"file":"mobile-preview.js","sourceRoot":"","sources":["../../../../../src/components/Preview-noti/mobile-preview/mobile-preview.tsx"],"names":[],"mappings":"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"}
|
|
@@ -7,6 +7,7 @@ interface PHXIframeProps {
|
|
|
7
7
|
height?: 'small' | 'medium' | 'large' | 'full';
|
|
8
8
|
hasBorder?: boolean;
|
|
9
9
|
rounded?: boolean;
|
|
10
|
+
isMobile?: boolean;
|
|
10
11
|
}
|
|
11
|
-
export declare function PHXIframe({
|
|
12
|
+
export declare function PHXIframe({ hasBorder, height, isFullWidth, isMobile, rounded, src, srcDoc, title, }: PHXIframeProps): React.JSX.Element;
|
|
12
13
|
export {};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export function PHXIframe({
|
|
2
|
+
export function PHXIframe({ hasBorder = false, height = 'large', isFullWidth = true, isMobile = false, rounded = false, src, srcDoc, title = 'Iframe Content', }) {
|
|
3
3
|
const widthClass = isFullWidth ? 'w-full' : 'w-auto';
|
|
4
4
|
const heightClass = {
|
|
5
|
-
small: 'h-
|
|
5
|
+
small: 'h-56',
|
|
6
6
|
medium: 'h-80',
|
|
7
7
|
large: 'h-96',
|
|
8
8
|
full: 'h-full',
|
|
@@ -10,6 +10,49 @@ export function PHXIframe({ srcDoc, src, title = 'Iframe Content', isFullWidth =
|
|
|
10
10
|
const borderClass = hasBorder ? 'border border-gray-200' : 'border-none';
|
|
11
11
|
const roundedClass = rounded ? 'rounded-lg' : '';
|
|
12
12
|
const iframeClasses = `${widthClass} ${heightClass} ${borderClass} ${roundedClass}`.trim();
|
|
13
|
-
|
|
13
|
+
const baseStyle = `
|
|
14
|
+
<style>
|
|
15
|
+
html, body {
|
|
16
|
+
margin: 0;
|
|
17
|
+
padding: 0;
|
|
18
|
+
width: 100%;
|
|
19
|
+
height: 100%;
|
|
20
|
+
overflow-x: hidden !important;
|
|
21
|
+
overflow-y: auto !important;
|
|
22
|
+
-ms-overflow-style: none;
|
|
23
|
+
scrollbar-width: none;
|
|
24
|
+
}
|
|
25
|
+
html::-webkit-scrollbar, body::-webkit-scrollbar {
|
|
26
|
+
display: none !important;
|
|
27
|
+
}
|
|
28
|
+
body {
|
|
29
|
+
font-family: system-ui, -apple-system, sans-serif;
|
|
30
|
+
}
|
|
31
|
+
* {
|
|
32
|
+
line-height: 1.5 !important;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
img {
|
|
36
|
+
max-width: 100% !important;
|
|
37
|
+
height: auto !important;
|
|
38
|
+
}
|
|
39
|
+
${isMobile
|
|
40
|
+
? `
|
|
41
|
+
.preview-scale-wrapper {
|
|
42
|
+
zoom: 0.6;
|
|
43
|
+
-moz-transform: scale(0.6);
|
|
44
|
+
-moz-transform-origin: 0 0;
|
|
45
|
+
box-sizing: border-box;
|
|
46
|
+
}
|
|
47
|
+
h3 {
|
|
48
|
+
font-weight: 500 !important;
|
|
49
|
+
}
|
|
50
|
+
`
|
|
51
|
+
: ''}
|
|
52
|
+
</style>
|
|
53
|
+
`;
|
|
54
|
+
const finalSrcDoc = srcDoc ? `${baseStyle} <div class="preview-scale-wrapper">${srcDoc}</div>` : undefined;
|
|
55
|
+
return (React.createElement(React.Fragment, null,
|
|
56
|
+
React.createElement("iframe", { className: iframeClasses, src: src, srcDoc: finalSrcDoc, title: title })));
|
|
14
57
|
}
|
|
15
58
|
//# sourceMappingURL=PHXIframe.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PHXIframe.js","sourceRoot":"","sources":["../../../../src/components/Iframe/PHXIframe.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAYzB,MAAM,UAAU,SAAS,CAAC,EACxB,
|
|
1
|
+
{"version":3,"file":"PHXIframe.js","sourceRoot":"","sources":["../../../../src/components/Iframe/PHXIframe.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAYzB,MAAM,UAAU,SAAS,CAAC,EACxB,SAAS,GAAG,KAAK,EACjB,MAAM,GAAG,OAAO,EAChB,WAAW,GAAG,IAAI,EAClB,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,GAAG,EACH,MAAM,EACN,KAAK,GAAG,gBAAgB,GACT;IACf,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAA;IAEpD,MAAM,WAAW,GAAG;QAClB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,QAAQ;KACf,CAAC,MAAM,CAAC,CAAA;IAET,MAAM,WAAW,GAAG,SAAS,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,aAAa,CAAA;IACxE,MAAM,YAAY,GAAG,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAA;IAEhD,MAAM,aAAa,GAAG,GAAG,UAAU,IAAI,WAAW,IAAI,WAAW,IAAI,YAAY,EAAE,CAAC,IAAI,EAAE,CAAA;IAE1F,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;QA2BZ,QAAQ;QACN,CAAC,CAAC;;;;;;;;;;OAUL;QACG,CAAC,CAAC,EACN;;GAEH,CAAA;IAED,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,SAAS,uCAAuC,MAAM,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAA;IAE1G,OAAO,CACL;QACE,gCAAQ,SAAS,EAAE,aAAa,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,GAAI,CAChF,CACJ,CAAA;AACH,CAAC"}
|
|
@@ -1,13 +1,26 @@
|
|
|
1
|
-
import { XMarkIcon } from '@heroicons/react/24/outline';
|
|
2
1
|
import Image from 'next/image';
|
|
3
2
|
import React from 'react';
|
|
4
3
|
import { PHXIcons } from '../../../assets/icons';
|
|
5
4
|
import { PHXScreens } from '../../../assets/screens';
|
|
5
|
+
import { PHXBox } from '../../Box';
|
|
6
|
+
import { PHXIframe } from '../../Iframe';
|
|
7
|
+
import { PHXTextV2 } from '../../TextV2';
|
|
6
8
|
export var ENotificationType;
|
|
7
9
|
(function (ENotificationType) {
|
|
8
10
|
ENotificationType["IN_APP"] = "in_app";
|
|
9
11
|
ENotificationType["EMAIL"] = "email";
|
|
10
12
|
})(ENotificationType || (ENotificationType = {}));
|
|
13
|
+
const getScaledPreviewContent = (title, html) => {
|
|
14
|
+
if (!html && !title) {
|
|
15
|
+
return '';
|
|
16
|
+
}
|
|
17
|
+
return `
|
|
18
|
+
<div>
|
|
19
|
+
${title ? `<h3>${title}</h3>` : ''}
|
|
20
|
+
<div>${html || ''}</div>
|
|
21
|
+
</div>
|
|
22
|
+
`;
|
|
23
|
+
};
|
|
11
24
|
export const MobilePreview = ({ content, description, isEvent = false, title, type = 'email', }) => {
|
|
12
25
|
const isApp = type === 'in_app';
|
|
13
26
|
const getImageUrl = () => {
|
|
@@ -59,14 +72,9 @@ export const MobilePreview = ({ content, description, isEvent = false, title, ty
|
|
|
59
72
|
React.createElement("div", { className: 'relative w-full lg:w-1/2' },
|
|
60
73
|
React.createElement(Image, { alt: 'ImagePhoneDetail', className: 'h-auto w-full rounded-xl', height: 100, quality: 100, src: getImageDetailUrl(), width: 100 }),
|
|
61
74
|
React.createElement("div", { className: getDetailWrapperClass() },
|
|
62
|
-
React.createElement("div", { className: '
|
|
63
|
-
isApp && !isEvent && (React.createElement(
|
|
64
|
-
React.createElement(
|
|
65
|
-
|
|
66
|
-
React.createElement(XMarkIcon, { className: 'h-3 w-3' })))),
|
|
67
|
-
React.createElement("div", { className: 'flex-1 text-[10px] leading-4 text-gray-900' },
|
|
68
|
-
React.createElement(React.Fragment, null, content ? (React.createElement("div", { className: 'break-words text-[10px] [&_*]:!text-[10px] [&_*]:!leading-4 [&_a]:break-all [&_a]:text-blue-600 [&_a]:hover:text-blue-800 [&_a]:hover:underline [&_h1]:!font-bold [&_h2]:!font-bold [&_h3]:!font-bold [&_h4]:!font-bold', dangerouslySetInnerHTML: {
|
|
69
|
-
__html: content,
|
|
70
|
-
} })) : (React.createElement("p", null, "N\u1ED9i dung")))))))));
|
|
75
|
+
React.createElement("div", { className: 'h-full' },
|
|
76
|
+
isApp && !isEvent && (React.createElement(PHXBox, { pb: 'snappy' },
|
|
77
|
+
React.createElement(PHXTextV2, { color: 'primary', size: 'micro', weight: 'semibold' }, "Chi ti\u1EBFt th\u00F4ng b\u00E1o"))),
|
|
78
|
+
React.createElement(PHXIframe, { height: 'small', isMobile: true, srcDoc: getScaledPreviewContent(title, content) }))))));
|
|
71
79
|
};
|
|
72
80
|
//# sourceMappingURL=mobile-preview.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mobile-preview.js","sourceRoot":"","sources":["../../../../../src/components/Preview-noti/mobile-preview/mobile-preview.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"mobile-preview.js","sourceRoot":"","sources":["../../../../../src/components/Preview-noti/mobile-preview/mobile-preview.tsx"],"names":[],"mappings":"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"}
|