pb-sxp-ui 1.0.98 → 1.0.100

package/es/core/components/SxpPageRender/ExpandableText.js

@@ -1,3 +1,4 @@
+import { setFontForText } from '../../../core/utils/tool';
 import React, { memo, useMemo, useState, useCallback, useRef, useEffect } from 'react';
 const limitTextLastWholeWord = (originalText = '', limit) => {
     const chineseRegex = /[\u4e00-\u9fa5]+/;
@@ -45,8 +46,8 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
                 display: '-webkit-box',
                 WebkitBoxOrient: 'vertical',
                 wordBreak: 'break-word'
-            }, dangerouslySetInnerHTML: { __html: text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>') } }),
-        React.createElement("div", { ref: multiRowCopy, dangerouslySetInnerHTML: { __html: text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>') } }),
+            }, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
+        React.createElement("div", { ref: multiRowCopy, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
         text && isPost && isShow && (React.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick }, isShowMore ? unfoldText || 'show less' : foldText || 'show more'))));
 };
 export default memo(ExpandableText);

package/es/core/components/SxpPageRender/Hashtag/index.js

@@ -2,6 +2,7 @@ import React, { memo, useMemo, useState } from 'react';
 import { SwiperSlide } from 'swiper/react';
 import { useSxpDataSource } from '../../../../core/hooks';
 import Scroll from '../../../../materials/sxp/template/components/Scroll';
+import { setFontForText } from '../../../../core/utils/tool';
 const Hashtag = ({ tags, itemId, itemType, index, rec, hashTagStyle }) => {
     const [isShowMore, setIsShowMore] = useState(false);
     const { setWaterFallData, setOpenHashtag, setCacheActiveIndex, waterFallData, setIsFromHashtag } = useSxpDataSource();
@@ -35,6 +36,7 @@ const Hashtag = ({ tags, itemId, itemType, index, rec, hashTagStyle }) => {
         return (React.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer', color: '#fff' }, onClick: () => setIsShowMore(!isShowMore) }, isShowMore ? 'show less' : 'show more'));
     }, [isShowMore, tags]);
     return (React.createElement("div", { className: 'clc-sxp-bottom-hashtag' },
-        React.createElement(Scroll, null, tags === null || tags === void 0 ? void 0 : tags.map((item, index) => (React.createElement(SwiperSlide, { key: index, hidden: !isShowMore ? index >= 6 : false, className: 'clc-sxp-bottom-hashtag-item', style: hashTagStyle, onClick: () => handleClickTag(item) }, `#${item}`))))));
+        React.createElement(Scroll, null, tags === null || tags === void 0 ? void 0 : tags.map((item, index) => (React.createElement(SwiperSlide, { key: index, hidden: !isShowMore ? index >= 6 : false, className: 'clc-sxp-bottom-hashtag-item', style: hashTagStyle, onClick: () => handleClickTag(item) },
+            React.createElement("div", { dangerouslySetInnerHTML: { __html: setFontForText(`#${item}`, hashTagStyle) } })))))));
 };
 export default memo(Hashtag);

package/es/core/components/SxpPageRender/Navbar.js

@@ -1,10 +1,13 @@
 import React, { memo } from 'react';
 import { useSxpDataSource } from '../../../core/hooks';
+import { setFontForText } from '../../../core/utils/tool';
 const Navbar = ({ icon, styles, textStyle, onClose }) => {
     var _a;
     const { waterFallData, setOpenHashtag } = useSxpDataSource();
     return (React.createElement("div", { className: 'clc-sxp-nav', style: styles },
         React.createElement("img", { className: 'clc-sxp-nav-left', src: icon, alt: 'back button', onClick: onClose }),
-        React.createElement("div", { className: 'clc-sxp-nav-title', style: textStyle }, `#${(_a = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag) !== null && _a !== void 0 ? _a : '标题'}`)));
+        React.createElement("div", { className: 'clc-sxp-nav-title', style: textStyle, dangerouslySetInnerHTML: {
+                __html: setFontForText(`#${(_a = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag) !== null && _a !== void 0 ? _a : '标题'}`, textStyle)
+            } })));
 };
 export default memo(Navbar);

package/es/core/components/SxpPageRender/VideoWidget/index.d.ts

@@ -10,6 +10,7 @@ interface IVideoWidgetProps {
     activeIndex?: number;
     videoPostConfig?: postConfigType;
     videoRef?: any;
+    videoPlayIcon?: string;
 }
 declare const _default: React.NamedExoticComponent<IVideoWidgetProps>;
 export default _default;

package/es/core/components/SxpPageRender/VideoWidget/index.js

@@ -5,7 +5,7 @@ import FormatImage from '../FormatImage';
 import { useSxpDataSource } from '../../../../core/hooks';
 import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../../core/utils/event';
 import loading_gif from './loading.gif';
-const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoRef }) => {
+const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoRef, videoPlayIcon }) => {
     const [isPauseVideo, setIsPauseVideo] = useState(false);
     const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = useSxpDataSource();
     const videoStartTime = useRef(0);
@@ -329,7 +329,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             } },
             React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
                 React.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
-                React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', alt: 'pause', src: PAUSE_ICON }))),
+                React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', alt: 'pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON }))),
         renderPoster,
         renderLoading)) : (React.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, style: {
             position: 'relative',
@@ -340,6 +340,6 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         React.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
         renderPoster,
         renderLoading,
-        React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON, alt: 'pause' })))));
+        React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })))));
 };
 export default memo(VideoWidget);

package/es/core/components/SxpPageRender/WaterFall/List.js

@@ -5,6 +5,7 @@ import FormatImage from '../FormatImage';
 import previewData from './preview.json';
 import { useSxpDataSource } from '../../../../core/hooks';
 import { css } from '@emotion/css';
+import { setFontForText } from '../../../../core/utils/tool';
 const WaterfallFlowItem = (props) => {
     const { rec, index, list, reportTagsView, textStyles, space } = props;
     const { swiperRef, setRtcList, setOpenHashtag, bffEventReport, sxpParameter } = useSxpDataSource();
@@ -110,11 +111,15 @@ const WaterfallFlowItem = (props) => {
                 React.createElement("canvas", { ref: canvasRef }))),
             React.createElement(FormatImage, { loading: 'lazy', className: 'list-content-listItem-picture-img', ref: imgDom })),
         React.createElement("div", { className: 'list-content-listItem-info' },
-            React.createElement("div", { className: `${'list-content-listItem-info-title'} ${priceText ? 'list-content-listItem-info-nowrap' : ''}`, style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.title }, title && title),
-            React.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.price, hidden: !priceText }, priceText))));
+            React.createElement("div", { className: `${'list-content-listItem-info-title'} ${priceText ? 'list-content-listItem-info-nowrap' : ''}`, style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.title, dangerouslySetInnerHTML: {
+                    __html: setFontForText(title, textStyles === null || textStyles === void 0 ? void 0 : textStyles.title)
+                } }),
+            React.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.price, hidden: !priceText, dangerouslySetInnerHTML: {
+                    __html: setFontForText(priceText, textStyles === null || textStyles === void 0 ? void 0 : textStyles.price)
+                } }))));
 };
 export default function WaterfallList(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     var { reportTagsView, showBanner } = _a, props = __rest(_a, ["reportTagsView", "showBanner"]);
     const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = useSxpDataSource();
     const [list, setList] = useState();
@@ -176,16 +181,22 @@ export default function WaterfallList(_a) {
                         objectFit: 'cover',
                         marginBottom: '20px'
                     }), src: (_c = data === null || data === void 0 ? void 0 : data.tag) === null || _c === void 0 ? void 0 : _c.picture }))),
-            React.createElement("div", { className: 'list-info', style: (_d = props === null || props === void 0 ? void 0 : props.textStyles) === null || _d === void 0 ? void 0 : _d.hashTagDesc }, (_e = data === null || data === void 0 ? void 0 : data.tag) === null || _e === void 0 ? void 0 : _e.info),
-            React.createElement("div", { hidden: !((_f = data === null || data === void 0 ? void 0 : data.tag) === null || _f === void 0 ? void 0 : _f.link), className: 'list-collection', onClick: handleClickLink, style: Object.assign(Object.assign({}, (_g = props === null || props === void 0 ? void 0 : props.textStyles) === null || _g === void 0 ? void 0 : _g.hashTagLink), { marginBottom: props === null || props === void 0 ? void 0 : props.space }) }, ((_h = data === null || data === void 0 ? void 0 : data.tag) === null || _h === void 0 ? void 0 : _h.linkTitle) || 'Shop the collection'),
+            React.createElement("div", { className: 'list-info', style: (_d = props === null || props === void 0 ? void 0 : props.textStyles) === null || _d === void 0 ? void 0 : _d.hashTagDesc, dangerouslySetInnerHTML: {
+                    __html: setFontForText((_e = data === null || data === void 0 ? void 0 : data.tag) === null || _e === void 0 ? void 0 : _e.info, (_f = props === null || props === void 0 ? void 0 : props.textStyles) === null || _f === void 0 ? void 0 : _f.hashTagDesc)
+                } }),
+            React.createElement("div", { hidden: !((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link), className: 'list-collection', onClick: handleClickLink, style: Object.assign(Object.assign({}, (_h = props === null || props === void 0 ? void 0 : props.textStyles) === null || _h === void 0 ? void 0 : _h.hashTagLink), { marginBottom: props === null || props === void 0 ? void 0 : props.space }), dangerouslySetInnerHTML: {
+                    __html: setFontForText(((_j = data === null || data === void 0 ? void 0 : data.tag) === null || _j === void 0 ? void 0 : _j.linkTitle) || 'Shop the collection', (_k = props === null || props === void 0 ? void 0 : props.textStyles) === null || _k === void 0 ? void 0 : _k.hashTagLink)
+                } }),
             React.createElement("div", { className: 'list-content' }, list === null || list === void 0 ? void 0 : list.map((item, ind) => {
                 return (React.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, rec: item, list: list, reportTagsView: reportTagsView }, props)));
             })),
             React.createElement("div", { hidden: !isLoadMore, style: { textAlign: 'center' } }, "loading..."),
-            React.createElement("div", { hidden: !((_j = data === null || data === void 0 ? void 0 : data.tag) === null || _j === void 0 ? void 0 : _j.link), style: {
-                    height: ((_k = data === null || data === void 0 ? void 0 : data.tag) === null || _k === void 0 ? void 0 : _k.link) ? ((_l = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _l === void 0 ? void 0 : _l.height) || ((_m = props === null || props === void 0 ? void 0 : props.buttonStyle) === null || _m === void 0 ? void 0 : _m.height) || '100px' : 0
+            React.createElement("div", { hidden: !((_l = data === null || data === void 0 ? void 0 : data.tag) === null || _l === void 0 ? void 0 : _l.link), style: {
+                    height: ((_m = data === null || data === void 0 ? void 0 : data.tag) === null || _m === void 0 ? void 0 : _m.link) ? ((_o = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _o === void 0 ? void 0 : _o.height) || ((_p = props === null || props === void 0 ? void 0 : props.buttonStyle) === null || _p === void 0 ? void 0 : _p.height) || '100px' : 0
                 } })),
-        React.createElement("div", { className: 'list-bottom', hidden: !((_o = data === null || data === void 0 ? void 0 : data.tag) === null || _o === void 0 ? void 0 : _o.link), style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
-        React.createElement("div", { hidden: !((_p = data === null || data === void 0 ? void 0 : data.tag) === null || _p === void 0 ? void 0 : _p.link), className: 'list-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
-            React.createElement("button", { "aria-label": ((_q = data === null || data === void 0 ? void 0 : data.tag) === null || _q === void 0 ? void 0 : _q.linkTitle) || 'Shop the collection', className: 'list-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_r = data === null || data === void 0 ? void 0 : data.tag) === null || _r === void 0 ? void 0 : _r.linkTitle) || 'Shop the collection'))))));
+        React.createElement("div", { className: 'list-bottom', hidden: !((_q = data === null || data === void 0 ? void 0 : data.tag) === null || _q === void 0 ? void 0 : _q.link), style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
+        React.createElement("div", { hidden: !((_r = data === null || data === void 0 ? void 0 : data.tag) === null || _r === void 0 ? void 0 : _r.link), className: 'list-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
+            React.createElement("button", { "aria-label": ((_s = data === null || data === void 0 ? void 0 : data.tag) === null || _s === void 0 ? void 0 : _s.linkTitle) || 'Shop the collection', className: 'list-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink, dangerouslySetInnerHTML: {
+                    __html: setFontForText(((_t = data === null || data === void 0 ? void 0 : data.tag) === null || _t === void 0 ? void 0 : _t.linkTitle) || 'Shop the collection', props === null || props === void 0 ? void 0 : props.buttonStyle)
+                } }))))));
 }

package/es/core/components/SxpPageRender/WaterFall/WaterfallList.js

@@ -5,6 +5,7 @@ import './WaterfallList.less';
 import previewData from './preview.json';
 import FormatImage from '../FormatImage';
 import { css } from '@emotion/css';
+import { setFontForText } from '../../../../core/utils/tool';
 const WaterfallFlowItem = (props) => {
     const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView, textStyles, space } = props;
     const { swiperRef, setRtcList, setOpenHashtag, sxpParameter } = useSxpDataSource();
@@ -102,11 +103,15 @@ const WaterfallFlowItem = (props) => {
         React.createElement("div", { className: 'waterFallList-content-listItem-picture', ref: pictRef },
             React.createElement(FormatImage, { loading: 'lazy', className: 'waterFallList-content-listItem-picture-img', onLoad: imgLoad, ref: imgDom })),
         React.createElement("div", { className: 'waterFallList-content-listItem-info' },
-            React.createElement("div", { className: `${'waterFallList-content-listItem-info-title'} ${priceText ? 'waterFallList-content-listItem-info-nowrap' : ''}`, style: Object.assign({}, textStyles === null || textStyles === void 0 ? void 0 : textStyles.title) }, title && title),
-            React.createElement("div", { className: 'waterFallList-content-listItem-info-price', hidden: !priceText, style: textStyles.price }, priceText))));
+            React.createElement("div", { className: `${'waterFallList-content-listItem-info-title'} ${priceText ? 'waterFallList-content-listItem-info-nowrap' : ''}`, style: Object.assign({}, textStyles === null || textStyles === void 0 ? void 0 : textStyles.title), dangerouslySetInnerHTML: {
+                    __html: setFontForText(title, textStyles === null || textStyles === void 0 ? void 0 : textStyles.title)
+                } }),
+            React.createElement("div", { className: 'waterFallList-content-listItem-info-price', hidden: !priceText, style: textStyles.price, dangerouslySetInnerHTML: {
+                    __html: setFontForText(priceText, textStyles === null || textStyles === void 0 ? void 0 : textStyles.price)
+                } }))));
 };
 export default function WaterfallList(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
     var { reportTagsView, showBanner } = _a, props = __rest(_a, ["reportTagsView", "showBanner"]);
     const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = useSxpDataSource();
     const scrollParent = useRef(null);
@@ -284,23 +289,29 @@ export default function WaterfallList(_a) {
                         objectFit: 'cover',
                         marginBottom: '20px'
                     }), src: (_c = data === null || data === void 0 ? void 0 : data.tag) === null || _c === void 0 ? void 0 : _c.picture }))),
-            React.createElement("div", { className: 'waterFallList-info', style: (_d = props === null || props === void 0 ? void 0 : props.textStyles) === null || _d === void 0 ? void 0 : _d.hashTagDesc }, (_e = data === null || data === void 0 ? void 0 : data.tag) === null || _e === void 0 ? void 0 : _e.info),
-            React.createElement("div", { hidden: !((_f = data === null || data === void 0 ? void 0 : data.tag) === null || _f === void 0 ? void 0 : _f.link), className: 'waterFallList-collection', style: Object.assign({}, (_g = props === null || props === void 0 ? void 0 : props.textStyles) === null || _g === void 0 ? void 0 : _g.hashTagLink), onClick: handleClickLink }, ((_h = data === null || data === void 0 ? void 0 : data.tag) === null || _h === void 0 ? void 0 : _h.linkTitle) || 'Shop the collection'),
+            React.createElement("div", { className: 'waterFallList-info', style: (_d = props === null || props === void 0 ? void 0 : props.textStyles) === null || _d === void 0 ? void 0 : _d.hashTagDesc, dangerouslySetInnerHTML: {
+                    __html: setFontForText((_e = data === null || data === void 0 ? void 0 : data.tag) === null || _e === void 0 ? void 0 : _e.info, (_f = props === null || props === void 0 ? void 0 : props.textStyles) === null || _f === void 0 ? void 0 : _f.hashTagDesc)
+                } }),
+            React.createElement("div", { hidden: !((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link), className: 'waterFallList-collection', style: Object.assign({}, (_h = props === null || props === void 0 ? void 0 : props.textStyles) === null || _h === void 0 ? void 0 : _h.hashTagLink), onClick: handleClickLink, dangerouslySetInnerHTML: {
+                    __html: setFontForText(((_j = data === null || data === void 0 ? void 0 : data.tag) === null || _j === void 0 ? void 0 : _j.linkTitle) || 'Shop the collection', (_k = props === null || props === void 0 ? void 0 : props.textStyles) === null || _k === void 0 ? void 0 : _k.hashTagLink)
+                } }),
             React.createElement("div", { className: 'waterFallList-content' }, list === null || list === void 0 ? void 0 :
                 list.map((item, ind) => {
                     var _a;
                     return (React.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, rec: item, list: list, showBorder: scrollTop + ((_a = scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.current) === null || _a === void 0 ? void 0 : _a.clientHeight), style: styleList[ind], sizeChange: onSizeChange, unitWidth: unitWidth, reportTagsView: reportTagsView }, props)));
                 }),
-                React.createElement("div", { hidden: !((_j = data === null || data === void 0 ? void 0 : data.tag) === null || _j === void 0 ? void 0 : _j.link), style: {
+                React.createElement("div", { hidden: !((_l = data === null || data === void 0 ? void 0 : data.tag) === null || _l === void 0 ? void 0 : _l.link), style: {
                         position: 'absolute',
                         width: '100%',
-                        transform: `translate(0px,${(_p = ((_l = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current[((_k = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current) === null || _k === void 0 ? void 0 : _k.length) - 1]) === null || _l === void 0 ? void 0 : _l.top) +
-                            ((_o = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current[((_m = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current) === null || _m === void 0 ? void 0 : _m.length) - 1]) === null || _o === void 0 ? void 0 : _o.height)) !== null && _p !== void 0 ? _p : 0}px)`,
-                        height: ((_q = data === null || data === void 0 ? void 0 : data.tag) === null || _q === void 0 ? void 0 : _q.link)
-                            ? ((_r = buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) === null || _r === void 0 ? void 0 : _r.offsetHeight) || ((_s = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _s === void 0 ? void 0 : _s.height) || '100px'
+                        transform: `translate(0px,${(_r = ((_o = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current[((_m = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current) === null || _m === void 0 ? void 0 : _m.length) - 1]) === null || _o === void 0 ? void 0 : _o.top) +
+                            ((_q = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current[((_p = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current) === null || _p === void 0 ? void 0 : _p.length) - 1]) === null || _q === void 0 ? void 0 : _q.height)) !== null && _r !== void 0 ? _r : 0}px)`,
+                        height: ((_s = data === null || data === void 0 ? void 0 : data.tag) === null || _s === void 0 ? void 0 : _s.link)
+                            ? ((_t = buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) === null || _t === void 0 ? void 0 : _t.offsetHeight) || ((_u = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _u === void 0 ? void 0 : _u.height) || '100px'
                             : 0
                     } }))),
-        React.createElement("div", { className: 'waterFallList-bottom', hidden: !((_t = data === null || data === void 0 ? void 0 : data.tag) === null || _t === void 0 ? void 0 : _t.link), style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
-        React.createElement("div", { ref: buttonRef, hidden: !((_u = data === null || data === void 0 ? void 0 : data.tag) === null || _u === void 0 ? void 0 : _u.link), className: 'waterFallList-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
-            React.createElement("button", { "aria-label": ((_v = data === null || data === void 0 ? void 0 : data.tag) === null || _v === void 0 ? void 0 : _v.linkTitle) || 'Shop the collection', className: 'waterFallList-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_w = data === null || data === void 0 ? void 0 : data.tag) === null || _w === void 0 ? void 0 : _w.linkTitle) || 'Shop the collection'))))));
+        React.createElement("div", { className: 'waterFallList-bottom', hidden: !((_v = data === null || data === void 0 ? void 0 : data.tag) === null || _v === void 0 ? void 0 : _v.link), style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
+        React.createElement("div", { ref: buttonRef, hidden: !((_w = data === null || data === void 0 ? void 0 : data.tag) === null || _w === void 0 ? void 0 : _w.link), className: 'waterFallList-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
+            React.createElement("button", { "aria-label": ((_x = data === null || data === void 0 ? void 0 : data.tag) === null || _x === void 0 ? void 0 : _x.linkTitle) || 'Shop the collection', className: 'waterFallList-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink, dangerouslySetInnerHTML: {
+                    __html: setFontForText(((_y = data === null || data === void 0 ? void 0 : data.tag) === null || _y === void 0 ? void 0 : _y.linkTitle) || 'Shop the collection', props === null || props === void 0 ? void 0 : props.buttonStyle)
+                } }))))));
 }

package/es/core/components/SxpPageRender/index.d.ts

@@ -35,6 +35,7 @@ export interface ISxpPageRenderProps {
         likeIconXPosit?: string;
         swipeTipOffset?: number;
         consent?: any[];
+        videoPlayIcon?: string;
     };
     descStyle?: CSSProperties;
     tipText?: {

package/es/core/components/SxpPageRender/index.js

@@ -185,7 +185,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const renderContent = useCallback((rec, index) => {
         var _a, _b, _c, _d;
         if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) {
-            return (React.createElement(VideoWidget, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoRef: videoRef.current }));
+            return (React.createElement(VideoWidget, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoRef: videoRef.current, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon }));
         }
         if ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
             return (React.createElement(PictureGroup, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
@@ -207,6 +207,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         isMuted,
         activeIndex,
         globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost,
+        globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon,
         viewTime,
         tipText,
         resolver,

package/es/core/context/EditorDataProvider.d.ts

@@ -20,6 +20,7 @@ interface IEditorDataContext {
     setOpenHashtag?: React.Dispatch<React.SetStateAction<boolean>>;
     openConsent?: boolean;
     setOpenConsent?: React.Dispatch<React.SetStateAction<boolean>>;
+    sxpFontLinks?: any[];
 }
 interface IEditorProviderProps {
     data?: any;

package/es/core/context/EditorDataProvider.js

@@ -24,7 +24,8 @@ const EditorDataProvider = ({ children, data }) => {
             openHashtag,
             setOpenHashtag,
             openConsent,
-            setOpenConsent
+            setOpenConsent,
+            sxpFontLinks: data === null || data === void 0 ? void 0 : data.sxpFontLinks
         } }, children));
 };
 export function useEditorDataProvider() {

package/es/core/utils/tool.d.ts

@@ -2,4 +2,9 @@ declare function uuid(len: number, radix: number): string;
 declare const getIndexByblockType: (type: string, index: number) => number | "initial";
 export declare const generateRandomString: (length: number) => string;
 export declare const getUid: () => string;
+interface IfontType {
+    'fontFamily-cn': string;
+    'fontFamily-en': string;
+}
+export declare const setFontForText: (textContent?: string | null, style?: IfontType | any) => string;
 export { uuid, getIndexByblockType };

package/es/core/utils/tool.js

@@ -45,4 +45,47 @@ export const getUid = () => {
     const uid = (originalUid === null || originalUid === void 0 ? void 0 : originalUid.replaceAll) ? originalUid.replaceAll('-', '') : generateRandomString(32);
     return uid;
 };
+export const setFontForText = (textContent, style) => {
+    if (!textContent)
+        return '';
+    let content = '';
+    const cn = style === null || style === void 0 ? void 0 : style['fontFamily-cn'];
+    const en = style === null || style === void 0 ? void 0 : style['fontFamily-en'];
+    if (!cn && !en) {
+        return textContent;
+    }
+    let text = textContent;
+    const chineseRegex = /[\u4e00-\u9fa5]/g;
+    const englishRegex = /[^\u4e00-\u9fa5]/g;
+    const cnStyle = `font-family:${cn !== null && cn !== void 0 ? cn : 'inherit'}`;
+    const enStyle = `font-family:${en !== null && en !== void 0 ? en : 'inherit'}`;
+    const fn = (str) => {
+        let chineseStartIndex = str.search(chineseRegex);
+        let englishStartIndex = str.search(englishRegex);
+        if (chineseStartIndex !== -1 && englishStartIndex !== -1 && chineseStartIndex < englishStartIndex) {
+            content += `<span style="${cnStyle}">${str.substring(chineseStartIndex, englishStartIndex)}</span>`;
+            text = str.substring(englishStartIndex, str === null || str === void 0 ? void 0 : str.length);
+        }
+        if (chineseStartIndex !== -1 && englishStartIndex !== -1 && chineseStartIndex > englishStartIndex) {
+            content += `<span style="${enStyle}">${str.substring(englishStartIndex, chineseStartIndex)}</span>`;
+            text = str.substring(chineseStartIndex, str === null || str === void 0 ? void 0 : str.length);
+        }
+        if (chineseStartIndex === -1) {
+            content += `<span style="${enStyle}">${str.substring(englishStartIndex, str === null || str === void 0 ? void 0 : str.length)}</span>`;
+            text = '';
+            return false;
+        }
+        if (englishStartIndex === -1) {
+            content += `<span style="${cnStyle}">${str.substring(chineseStartIndex, str === null || str === void 0 ? void 0 : str.length)}</span>`;
+            text = '';
+            return false;
+        }
+        return true;
+    };
+    let w = true;
+    while (w) {
+        w = fn(text);
+    }
+    return content;
+};
 export { uuid, getIndexByblockType };

package/es/index.d.ts

@@ -8,5 +8,4 @@ export { default as SxpDataSourceProvider } from './core/context/SxpDataSourcePr
 export { default as SxpPageCore } from './core/components/SxpPageCore';
 export { default as EditorDataProvider } from './core/context/EditorDataProvider';
 export { useEditorDataProvider } from './core/context/EditorDataProvider';
-export { default as defaultSetting } from './materials/sxp/defaultSetting';
 export default Pagebuilder;

package/es/index.js

@@ -10,5 +10,4 @@ export { default as SxpDataSourceProvider } from './core/context/SxpDataSourcePr
 export { default as SxpPageCore } from './core/components/SxpPageCore';
 export { default as EditorDataProvider } from './core/context/EditorDataProvider';
 export { useEditorDataProvider } from './core/context/EditorDataProvider';
-export { default as defaultSetting } from './materials/sxp/defaultSetting';
 export default Pagebuilder;

package/es/materials/sxp/HashTag/settingRender.d.ts

@@ -38,27 +38,25 @@ declare const _default: ({
         } | {
             type: string;
             label: string;
-            child: ({
+            child: {
                 type: string;
                 name: string[];
-                options?: undefined;
-                initialValue?: undefined;
-                addonAfter?: undefined;
-            } | {
+                bottomText: string;
+            }[];
+            options?: undefined;
+            name?: undefined;
+            initialValue?: undefined;
+        } | {
+            type: string;
+            label: string;
+            child: ({
                 type: string;
-                options: {
-                    label: string;
-                    value: string;
-                }[];
                 name: string[];
-                initialValue: string;
                 addonAfter?: undefined;
             } | {
                 type: string;
                 addonAfter: string;
                 name: string[];
-                options?: undefined;
-                initialValue?: undefined;
             })[];
             options?: undefined;
             name?: undefined;
@@ -105,19 +103,19 @@ declare const _default: ({
     } | {
         type: string;
         label: string;
-        child: ({
+        child: {
             type: string;
             name: string[];
-            initialValue: string;
-            options?: undefined;
-            addonAfter?: undefined;
-        } | {
+            bottomText: string;
+        }[];
+        name?: undefined;
+        initialValue?: undefined;
+    } | {
+        type: string;
+        label: string;
+        child: ({
             type: string;
             name: string[];
-            options: {
-                label: string;
-                value: string;
-            }[];
             initialValue: string;
             addonAfter?: undefined;
         } | {
@@ -125,7 +123,6 @@ declare const _default: ({
             name: string[];
             addonAfter: string;
             initialValue?: undefined;
-            options?: undefined;
         })[];
         name?: undefined;
         initialValue?: undefined;

package/es/materials/sxp/HashTag/settingRender.js

@@ -1,5 +1,3 @@
-var _a, _b;
-import { fontOptions } from '../defaultSetting';
 export default [
     {
         title: 'Banner',
@@ -68,14 +66,24 @@ export default [
                         label: '标题字体',
                         child: [
                             {
-                                type: 'Color',
-                                name: ['color']
+                                type: 'Select',
+                                name: ['fontFamily-cn'],
+                                bottomText: '中文字体'
                             },
                             {
                                 type: 'Select',
-                                options: fontOptions,
-                                name: ['fontFamily'],
-                                initialValue: (_a = fontOptions === null || fontOptions === void 0 ? void 0 : fontOptions[0]) === null || _a === void 0 ? void 0 : _a.value
+                                name: ['fontFamily-en'],
+                                bottomText: '英文/其他字体'
+                            }
+                        ]
+                    },
+                    {
+                        type: 'Group',
+                        label: '',
+                        child: [
+                            {
+                                type: 'Color',
+                                name: ['color']
                             },
                             {
                                 type: 'Number',
@@ -142,15 +150,25 @@ export default [
                 label: '字体',
                 child: [
                     {
-                        type: 'Color',
-                        name: ['props', 'buttonStyle', 'color'],
-                        initialValue: '#fff'
+                        type: 'Select',
+                        name: ['props', 'buttonStyle', 'fontFamily-cn'],
+                        bottomText: '中文字体'
                     },
                     {
                         type: 'Select',
-                        name: ['props', 'buttonStyle', 'fontFamily'],
-                        options: fontOptions,
-                        initialValue: (_b = fontOptions === null || fontOptions === void 0 ? void 0 : fontOptions[0]) === null || _b === void 0 ? void 0 : _b.value
+                        name: ['props', 'buttonStyle', 'fontFamily-en'],
+                        bottomText: '英文/其他字体'
+                    }
+                ]
+            },
+            {
+                type: 'Group',
+                label: '',
+                child: [
+                    {
+                        type: 'Color',
+                        name: ['props', 'buttonStyle', 'color'],
+                        initialValue: '#fff'
                     },
                     {
                         type: 'Number',

package/es/materials/sxp/popup/AppointForm/Form.d.ts

@@ -0,0 +1,14 @@
+import { IAppointFormProps } from '.';
+import React from 'react';
+interface IFormProps {
+    columns?: {
+        title?: string;
+        dataIndex?: string;
+        valueType?: string;
+        key?: string;
+    }[];
+    layout?: IAppointFormProps['layoutType'];
+    onChange?: (data: Record<string, any>) => void;
+}
+declare const _default: React.NamedExoticComponent<IFormProps>;
+export default _default;

package/es/materials/sxp/popup/AppointForm/Form.js

@@ -0,0 +1,8 @@
+import { memo } from 'react';
+import React from 'react';
+const Form = ({ layout, columns, onChange }) => {
+    return (React.createElement(React.Fragment, null, columns === null || columns === void 0 ? void 0 : columns.map((item, index) => (React.createElement("div", { key: index, className: 'pb-appoint-form-container-item', style: { flexDirection: layout === 'horizontal' ? 'row' : 'column' } },
+        layout !== 'inline' && React.createElement("label", { className: 'pb-appoint-form-container-label' }, item === null || item === void 0 ? void 0 : item.title),
+        (item === null || item === void 0 ? void 0 : item.valueType) === 'text' && (React.createElement("input", { className: 'pb-appoint-form-container-input', type: 'text', placeholder: layout === 'inline' ? item === null || item === void 0 ? void 0 : item.title : '请输入', name: item === null || item === void 0 ? void 0 : item.dataIndex, onChange: onChange })))))));
+};
+export default memo(Form);

package/es/materials/sxp/popup/AppointForm/index.js

@@ -1,15 +1,16 @@
 import { __awaiter, __rest } from "tslib";
 import { css } from '@emotion/css';
-import React, { memo, useMemo, useRef, useState } from 'react';
+import React, { memo, useCallback, useMemo, useState } from 'react';
 import { cloneDeep, debounce } from 'lodash';
 import { useSxpDataSource } from '../../../../core/hooks';
 import './index.less';
 import { useEventReport } from '../../../../core/hooks/useEventReport';
+import { setFontForText } from '../../../../core/utils/tool';
+import Form from './Form';
 const AppointForm = (_a) => {
-    var { columns, style, title, textStyle, submitBgColor, submitColor, submitText, layoutType, isExternalLink, isPopup, onClick, onClose, submitButtonStyle } = _a, props = __rest(_a, ["columns", "style", "title", "textStyle", "submitBgColor", "submitColor", "submitText", "layoutType", "isExternalLink", "isPopup", "onClick", "onClose", "submitButtonStyle"]);
+    var { columns, style, title, textStyle, submitBgColor, submitColor, submitText, layoutType = 'inline', isExternalLink, isPopup, onClick, onClose, submitButtonStyle } = _a, props = __rest(_a, ["columns", "style", "title", "textStyle", "submitBgColor", "submitColor", "submitText", "layoutType", "isExternalLink", "isPopup", "onClick", "onClose", "submitButtonStyle"]);
     const { submitForm, popupDetailData } = useSxpDataSource();
     const { jumpToWeb } = useEventReport();
-    const formRef = useRef();
     const [loading, setLoading] = useState(false);
     const defaultColumns = useMemo(() => [
         {
@@ -37,27 +38,26 @@ const AppointForm = (_a) => {
             key: '4'
         }
     ], []);
+    const [formData, setFormData] = useState({});
     const columnsData = useMemo(() => {
-        if (layoutType === undefined) {
-            const list = cloneDeep(columns) || defaultColumns;
-            return list === null || list === void 0 ? void 0 : list.map((obj) => (Object.assign(Object.assign({}, obj), { title: undefined, fieldProps: { placeholder: obj === null || obj === void 0 ? void 0 : obj.title } })));
-        }
-        else {
-            return cloneDeep(columns) || defaultColumns;
-        }
-    }, [layoutType, columns, defaultColumns]);
+        return cloneDeep(columns) || defaultColumns;
+    }, [columns, defaultColumns]);
+    const handleChange = useCallback((e) => {
+        const { name, value } = e.target;
+        setFormData(Object.assign(Object.assign({}, formData), { [name]: value }));
+    }, [formData]);
     const handleSubmit = debounce(() => __awaiter(void 0, void 0, void 0, function* () {
-        var _b, _c, _d, _e, _f, _g;
-        const vals = yield ((_b = formRef === null || formRef === void 0 ? void 0 : formRef.current) === null || _b === void 0 ? void 0 : _b.getFieldsValue());
+        var _b, _c, _d, _e, _f;
+        const vals = formData;
         if (!vals)
             return;
-        const arr = (_d = (_c = Object.keys(vals)) === null || _c === void 0 ? void 0 : _c.map((key) => {
+        const arr = (_c = (_b = Object.keys(vals)) === null || _b === void 0 ? void 0 : _b.map((key) => {
             var _a;
             return ({
                 name: key,
                 value: (_a = vals[key]) !== null && _a !== void 0 ? _a : ''
             });
-        })) === null || _d === void 0 ? void 0 : _d.filter((item) => item === null || item === void 0 ? void 0 : item.value);
+        })) === null || _c === void 0 ? void 0 : _c.filter((item) => item === null || item === void 0 ? void 0 : item.value);
         if (!arr || !(arr === null || arr === void 0 ? void 0 : arr.length))
             return;
         setLoading(true);
@@ -66,8 +66,8 @@ const AppointForm = (_a) => {
         if (res) {
             if (isExternalLink) {
                 const data = popupDetailData;
-                const product = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.bindProduct;
-                const cta = (_g = (_f = data === null || data === void 0 ? void 0 : data.video) === null || _f === void 0 ? void 0 : _f.bindProduct) === null || _g === void 0 ? void 0 : _g.bindCta;
+                const product = (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.bindProduct;
+                const cta = (_f = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.bindProduct) === null || _f === void 0 ? void 0 : _f.bindCta;
                 const position = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.index;
                 jumpToWeb(data, product, cta, position);
             }
@@ -78,10 +78,15 @@ const AppointForm = (_a) => {
         }
     }), 1000);
     return (React.createElement("div", { className: 'pb-appoint-form' },
-        React.createElement("div", { className: `pb-appoint-form-title ${css(Object.assign({}, textStyle))}` }, title),
+        React.createElement("div", { className: `pb-appoint-form-title ${css(Object.assign({}, textStyle))}`, dangerouslySetInnerHTML: {
+                __html: setFontForText(title, textStyle)
+            } }),
         React.createElement("div", Object.assign({ className: css(Object.assign({}, style)) }, props),
-            React.createElement("div", { className: 'pb-appoint-form-container' })),
+            React.createElement("div", { className: 'pb-appoint-form-container' },
+                React.createElement(Form, { columns: columnsData, layout: layoutType, onChange: handleChange }))),
         React.createElement("div", { className: 'pb-appoint-form-btn-wrapper' },
-            React.createElement("button", { "aria-label": submitText, onClick: handleSubmit, className: 'pb-appoint-form-btn', style: Object.assign({ color: submitColor, background: submitBgColor }, submitButtonStyle) }, loading ? React.createElement(React.Fragment, null, "loading...") : submitText))));
+            React.createElement("button", { "aria-label": submitText, onClick: handleSubmit, className: 'pb-appoint-form-btn', style: Object.assign({ color: submitColor, background: submitBgColor }, submitButtonStyle), dangerouslySetInnerHTML: {
+                    __html: setFontForText(loading ? 'loading...' : submitText, submitButtonStyle)
+                } }))));
 };
 export default memo(AppointForm);