pb-sxp-ui 1.15.22-alpha.5 → 1.15.23

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.
Files changed (26) hide show
  1. package/dist/index.cjs +6665 -6633
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +46 -46
  4. package/dist/index.js +6665 -6633
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.min.cjs +6 -6
  7. package/dist/index.min.cjs.map +1 -1
  8. package/dist/index.min.js +6 -6
  9. package/dist/index.min.js.map +1 -1
  10. package/dist/pb-ui.js +6665 -6633
  11. package/dist/pb-ui.js.map +1 -1
  12. package/dist/pb-ui.min.js +6 -6
  13. package/dist/pb-ui.min.js.map +1 -1
  14. package/es/core/components/SxpPageRender/ExpandableText.js +33 -44
  15. package/es/core/components/SxpPageRender/index.d.ts +1 -0
  16. package/es/core/context/SxpDataSourceProvider.d.ts +1 -1
  17. package/es/core/context/SxpDataSourceProvider.js +93 -41
  18. package/es/materials/sxp/popup/CommodityDetail/index.js +2 -2
  19. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +1 -1
  20. package/lib/core/components/SxpPageRender/ExpandableText.js +32 -44
  21. package/lib/core/components/SxpPageRender/index.d.ts +1 -0
  22. package/lib/core/context/SxpDataSourceProvider.d.ts +1 -1
  23. package/lib/core/context/SxpDataSourceProvider.js +93 -41
  24. package/lib/materials/sxp/popup/CommodityDetail/index.js +2 -2
  25. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +1 -1
  26. package/package.json +1 -1
package/es/core/components/SxpPageRender/ExpandableText.js CHANGED
@@ -1,57 +1,46 @@
1
+ import { __rest } from "tslib";
2
+ import React, { memo, useState, useCallback, useRef, useEffect } from 'react';
1
3
  import { setFontForText } from '../../../core/utils/tool';
2
- import React, { memo, useMemo, useState, useCallback, useRef, useEffect } from 'react';
3
- const limitTextLastWholeWord = (originalText = '', limit) => {
4
- const chineseRegex = /[\u4e00-\u9fa5]+/;
5
- if (chineseRegex.test(originalText)) {
6
- return originalText.slice(0, 54);
7
- }
8
- const words = originalText.split(' ');
9
- const newWords = [];
10
- for (let i = 0; i < words.length; i++) {
11
- newWords.push(words[i]);
12
- const tempText = newWords.join(' ');
13
- if (tempText.length >= limit)
14
- break;
15
- }
16
- const _words = newWords.length > 1 && newWords.length < words.length ? newWords.slice(0, newWords.length - 1) : newWords;
17
- return _words.join(' ') + ' ';
18
- };
19
4
  const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldText, unfoldText, isPost, onChange }) => {
20
5
  const [isShowMore, setIsShowMore] = useState(false);
21
6
  const [isShow, setIsShow] = useState(false);
22
- const lineClamp = Number((style === null || style === void 0 ? void 0 : style.lineClamp) || 2);
7
+ const _a = style || {}, { lineClamp } = _a, textStyle = __rest(_a, ["lineClamp"]);
8
+ const textLineClamp = Number(lineClamp || 2);
23
9
  const multiRow = useRef(null);
24
- const multiRowCopy = useRef(null);
25
- const handleClick = useCallback(() => {
10
+ const observerRef = useRef();
11
+ const handleClick = () => {
26
12
  setIsShowMore(!isShowMore);
27
- }, [isShowMore, onChange]);
28
- const renderText = useMemo(() => {
29
- return !isShowMore && text.length > maxStr ? limitTextLastWholeWord(text, maxStr) + '...' : text;
30
- }, [text, maxStr, isShowMore]);
13
+ };
14
+ const checkOverflow = useCallback(() => {
15
+ if (!multiRow.current || !isPost)
16
+ return;
17
+ const lineHeight = parseInt(getComputedStyle(multiRow.current).lineHeight) || 20;
18
+ const maxHeight = lineHeight * textLineClamp;
19
+ setIsShow(multiRow.current.scrollHeight > maxHeight + 1);
20
+ }, [isPost, text, textLineClamp]);
31
21
  useEffect(() => {
32
- var _a, _b;
33
- if (multiRowCopy === null || multiRowCopy === void 0 ? void 0 : multiRowCopy.current)
34
- multiRowCopy.current.style.display = 'block';
35
- if (((_a = multiRowCopy === null || multiRowCopy === void 0 ? void 0 : multiRowCopy.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) > ((_b = multiRow === null || multiRow === void 0 ? void 0 : multiRow.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) && isPost) {
36
- setIsShow(true);
37
- }
38
- else {
39
- setIsShow(false);
40
- }
41
- multiRowCopy.current.style.display = 'none';
42
- }, [isPost, text]);
43
- return (React.createElement("div", { className: className, style: Object.assign(Object.assign({}, style), { transform: 'translate3d(0px, 0px, 0px)' }), hidden: !text || text === '' },
44
- React.createElement("div", { ref: multiRow, style: {
45
- overflow: 'hidden',
46
- WebkitLineClamp: !isPost || isShowMore ? '' : lineClamp,
22
+ if (!multiRow.current)
23
+ return;
24
+ observerRef.current = new ResizeObserver(checkOverflow);
25
+ observerRef.current.observe(multiRow.current);
26
+ checkOverflow();
27
+ return () => {
28
+ var _a;
29
+ (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
30
+ };
31
+ }, [checkOverflow]);
32
+ return (React.createElement("div", { className: className, style: Object.assign(Object.assign({}, textStyle), { transform: 'translate3d(0px, 0px, 0px)' }), hidden: !text || text === '' },
33
+ React.createElement("div", { ref: multiRow, style: Object.assign(Object.assign({}, (!isShowMore &&
34
+ isPost && {
35
+ WebkitLineClamp: textLineClamp,
36
+ lineClamp: textLineClamp,
47
37
  textOverflow: 'ellipsis',
38
+ overflow: 'hidden',
48
39
  display: '-webkit-box',
49
- WebkitBoxOrient: 'vertical',
50
- wordBreak: 'break-word'
51
- }, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
52
- React.createElement("div", { ref: multiRowCopy, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
40
+ WebkitBoxOrient: 'vertical'
41
+ })), { wordBreak: 'break-word' }), dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), textStyle) } }),
53
42
  text && isPost && isShow && (React.createElement("button", { "aria-label": isShowMore ? unfoldText || 'show less' : foldText || 'show more', style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
54
- __html: setFontForText(isShowMore ? unfoldText || 'show less' : foldText || 'show more', style)
43
+ __html: setFontForText(isShowMore ? unfoldText || 'show less' : foldText || 'show more', textStyle)
55
44
  } }))));
56
45
  };
57
46
  export default memo(ExpandableText);
package/es/core/components/SxpPageRender/index.d.ts CHANGED
@@ -67,6 +67,7 @@ export interface ISxpPageRenderProps {
67
67
  y: number;
68
68
  };
69
69
  converApi?: any;
70
+ pixel?: any;
70
71
  consentPopup?: any;
71
72
  multiPosts?: any;
72
73
  playbook?: 'paid media' | 'organic menu';
package/es/core/context/SxpDataSourceProvider.d.ts CHANGED
@@ -72,7 +72,7 @@ export interface ISxpDataSourceContext {
72
72
  bffFbReport?: (body: {
73
73
  eventName: 'PageView' | 'ProductView' | 'ViewContent';
74
74
  product?: any;
75
- }) => Promise<any> | undefined | boolean;
75
+ }) => void;
76
76
  curTime?: any;
77
77
  h5EnterLink?: () => void;
78
78
  themeTag?: any;
package/es/core/context/SxpDataSourceProvider.js CHANGED
@@ -105,6 +105,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
105
105
  return ((_a = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _a === void 0 ? void 0 : _a['x-app-id']) + storeAndLoadFeUserId();
106
106
  }, [bffDataSource]);
107
107
  const bffFetch = useCallback((path, options) => {
108
+ var _a, _b;
108
109
  if (!bffDataSource)
109
110
  return;
110
111
  const url = bffDataSource.url;
@@ -112,7 +113,33 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
112
113
  const queryString = qs.stringify(options.query);
113
114
  path = `${path}?${queryString}`;
114
115
  }
115
- if (options.type === 'beacon' && navigator.sendBeacon) {
116
+ let isTikTokChannel = false;
117
+ const params = {};
118
+ const queryString = location.search.slice(1);
119
+ (_a = splitUrlParams(queryString)) === null || _a === void 0 ? void 0 : _a.forEach((val) => {
120
+ const key = val.split('=')[0];
121
+ const value = val.split('=')[1];
122
+ params[key] = value;
123
+ });
124
+ const cl_source = params === null || params === void 0 ? void 0 : params.cl_source;
125
+ if (cl_source &&
126
+ ((_b = [
127
+ '40A-SPRK--DRESS_EYEWEAR-',
128
+ '41A-SPRK--MADRAGUE-',
129
+ '42A-SPRK--MOOD-',
130
+ '43A-SPRK--SUMMER-',
131
+ '44A-SPRK--DRESS_EYEWEAR-',
132
+ '45A-SPRK--MADRAGUE-',
133
+ '46A-SPRK--MOOD-',
134
+ '47A-SPRK--SUMMER-',
135
+ '48A-SPRK--DRESS_EYEWEAR-',
136
+ '49A-SPRK--MADRAGUE-',
137
+ '50A-SPRK--MOOD-',
138
+ '51A-SPRK--SUMMER-'
139
+ ]) === null || _b === void 0 ? void 0 : _b.includes(cl_source))) {
140
+ isTikTokChannel = true;
141
+ }
142
+ if (options.type === 'beacon' && navigator.sendBeacon && !isTikTokChannel) {
116
143
  return navigator.sendBeacon(`${url}/api/${path}`, new Blob([
117
144
  JSON.stringify({
118
145
  body: btoa(encodeURIComponent(JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))))
@@ -122,11 +149,11 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
122
149
  }));
123
150
  }
124
151
  return window
125
- .fetch(`${url}/api/${path}`, {
126
- headers: Object.assign({ 'Content-Type': 'application/json', 'x-user-id': fakeUserId }, bffDataSource.headers),
127
- method: options.method,
128
- body: JSON.stringify(options.body)
129
- })
152
+ .fetch(`${url}/api/${path}`, Object.assign({ headers: Object.assign({ 'Content-Type': 'application/json', 'x-user-id': fakeUserId }, bffDataSource.headers), method: options.method, body: isTikTokChannel
153
+ ? JSON.stringify({
154
+ body: btoa(encodeURIComponent(JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))))
155
+ })
156
+ : JSON.stringify(options.body) }, (isTikTokChannel && { keepalive: true })))
130
157
  .then((res) => res.json())
131
158
  .catch((err) => Promise.reject(err));
132
159
  }, [bffDataSource, fakeUserId]);
@@ -291,23 +318,17 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
291
318
  playbookType,
292
319
  bffDataSource
293
320
  ]);
294
- const bffFbReport = useCallback(({ eventName, product }) => {
295
- var _a, _b, _c, _d, _e, _f, _g;
296
- if (!enableReportEvent ||
297
- !enabledMetaConversionApi ||
298
- (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) ||
299
- !((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _a === void 0 ? void 0 : _a[eventName])) {
300
- return;
301
- }
302
- const jsonParams = cloneDeep((_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _b === void 0 ? void 0 : _b[eventName]);
321
+ const getEventParamsByJson = useCallback((json, product) => {
322
+ var _a, _b, _c;
323
+ const jsonParams = cloneDeep(json);
303
324
  const urlParams = new URLSearchParams(window.location.search);
304
325
  const fbclid = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('fbclid');
305
326
  const fix_par = {
306
- event_source_url: (_c = window === null || window === void 0 ? void 0 : window.location) === null || _c === void 0 ? void 0 : _c.href,
327
+ event_source_url: (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.href,
307
328
  external_id: fakeUserId,
308
- client_user_agent: (_e = (_d = window === null || window === void 0 ? void 0 : window.navigator) === null || _d === void 0 ? void 0 : _d.userAgent) !== null && _e !== void 0 ? _e : '',
329
+ client_user_agent: (_c = (_b = window === null || window === void 0 ? void 0 : window.navigator) === null || _b === void 0 ? void 0 : _b.userAgent) !== null && _c !== void 0 ? _c : '',
309
330
  fbc: fbclid ? `fb.2.${new Date().getTime()}.${fbclid}` : '',
310
- fbp: getCookie('_fbp') ? `fb.2.${new Date().getTime()}.${getCookie('_fbp')}` : '',
331
+ fbp: getCookie('_fbp') ? `${getCookie('_fbp')}` : '',
311
332
  time: Math.floor(Date.now() / 1000)
312
333
  };
313
334
  const regex = /\{\{(.*?)\}\}/g;
@@ -319,7 +340,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
319
340
  }
320
341
  else {
321
342
  for (const key in obj) {
322
- if (obj.hasOwnProperty(key)) {
343
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
323
344
  const value = obj === null || obj === void 0 ? void 0 : obj[key];
324
345
  if (typeof value === 'object') {
325
346
  getEventParams(value);
@@ -356,28 +377,59 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
356
377
  }
357
378
  };
358
379
  getEventParams(jsonParams);
359
- const params = {};
360
- const queryString = location.search.slice(1);
361
- (_f = splitUrlParams(queryString)) === null || _f === void 0 ? void 0 : _f.map((val) => {
362
- const key = val.split('=')[0];
363
- const value = val.split('=')[1];
364
- params[key] = value;
365
- });
366
- const cl_source = params === null || params === void 0 ? void 0 : params.cl_source;
367
- return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/fb/${(_g = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _g === void 0 ? void 0 : _g['x-app-id']}/${eventName}${cl_source ? `/${decodeURIComponent(cl_source)}` : ''}`, {
368
- method: 'POST',
369
- body: jsonParams,
370
- type: 'beacon'
371
- });
372
- }, [
373
- bffFetch,
374
- enableReportEvent,
375
- enabledMetaConversionApi,
376
- globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview,
377
- globalConfig,
378
- fakeUserId,
379
- bffDataSource
380
- ]);
380
+ return jsonParams;
381
+ }, [fakeUserId]);
382
+ const bffFbReport = useCallback(({ eventName, product }) => {
383
+ var _a, _b, _c, _d;
384
+ if (!enableReportEvent || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
385
+ return;
386
+ }
387
+ const pixelEventParamsJson = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.pixel) === null || _a === void 0 ? void 0 : _a[eventName];
388
+ if ((pixelEventParamsJson === null || pixelEventParamsJson === void 0 ? void 0 : pixelEventParamsJson.event_name) && typeof (window === null || window === void 0 ? void 0 : window.fbq) === 'function') {
389
+ function updateQueryStringParameter(uri, key, value) {
390
+ const re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i');
391
+ const separator = uri.indexOf('?') !== -1 ? '&' : '?';
392
+ if (uri.match(re)) {
393
+ return uri.replace(re, '$1' + key + '=' + value + '$2');
394
+ }
395
+ else {
396
+ return uri + separator + key + '=' + value;
397
+ }
398
+ }
399
+ if (eventName === 'PageView' && (pixelEventParamsJson === null || pixelEventParamsJson === void 0 ? void 0 : pixelEventParamsJson.event_name) === 'PageView') {
400
+ const currentUrl = window.location.href;
401
+ const newUrl = updateQueryStringParameter(currentUrl, 'timestamp', Date.now());
402
+ history.pushState({ path: newUrl }, '', newUrl);
403
+ }
404
+ else {
405
+ const body = getEventParamsByJson(pixelEventParamsJson);
406
+ window === null || window === void 0 ? void 0 : window.fbq('track', pixelEventParamsJson === null || pixelEventParamsJson === void 0 ? void 0 : pixelEventParamsJson.event_name, body);
407
+ if (eventName === 'PageView' && typeof (window === null || window === void 0 ? void 0 : window.gtag) === 'function') {
408
+ window === null || window === void 0 ? void 0 : window.gtag('event', 'page_view');
409
+ }
410
+ }
411
+ }
412
+ else if (eventName === 'PageView' && typeof (window === null || window === void 0 ? void 0 : window.gtag) === 'function') {
413
+ window === null || window === void 0 ? void 0 : window.gtag('event', 'page_view');
414
+ }
415
+ const converApiEventParamsJson = (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _b === void 0 ? void 0 : _b[eventName];
416
+ if (enabledMetaConversionApi && converApiEventParamsJson) {
417
+ const body = getEventParamsByJson(converApiEventParamsJson, product);
418
+ const params = {};
419
+ const queryString = location.search.slice(1);
420
+ (_c = splitUrlParams(queryString)) === null || _c === void 0 ? void 0 : _c.forEach((val) => {
421
+ const key = val.split('=')[0];
422
+ const value = val.split('=')[1];
423
+ params[key] = value;
424
+ });
425
+ const cl_source = params === null || params === void 0 ? void 0 : params.cl_source;
426
+ bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/fb/${(_d = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _d === void 0 ? void 0 : _d['x-app-id']}/${eventName}${cl_source ? `/${decodeURIComponent(cl_source)}` : ''}`, {
427
+ method: 'POST',
428
+ body,
429
+ type: 'beacon'
430
+ });
431
+ }
432
+ }, [bffFetch, enableReportEvent, enabledMetaConversionApi, globalConfig, bffDataSource, getEventParamsByJson]);
381
433
  const bffMutateLike = useCallback((body) => __awaiter(void 0, void 0, void 0, function* () {
382
434
  const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/like', { method: 'POST', body }));
383
435
  return res === null || res === void 0 ? void 0 : res.success;
package/es/materials/sxp/popup/CommodityDetail/index.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { __rest } from "tslib";
2
2
  import { css } from '@emotion/css';
3
3
  import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
4
+ import CommodityGroup from '../../template/components/CommodityGroup';
4
5
  import { useSxpDataSource } from '../../../../core/hooks';
5
6
  import './index.less';
6
7
  import { A11y, Autoplay, Keyboard, Mousewheel, Navigation, Pagination } from 'swiper/modules';
@@ -10,7 +11,6 @@ import Modal from '../../../../core/components/SxpPageRender/Modal';
10
11
  import ExpandableText from '../../../../core/components/SxpPageRender/ExpandableText';
11
12
  import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
12
13
  import { getScreenReader, setFontForText } from '../../../../core/utils/tool';
13
- import CommodityGroup from '../../template/components/CommodityGroup';
14
14
  import { getPriceText } from '../../../../core/utils/materials';
15
15
  const CommodityDetail = (_a) => {
16
16
  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
@@ -67,7 +67,7 @@ const CommodityDetail = (_a) => {
67
67
  };
68
68
  }, []);
69
69
  const priceText = getPriceText({
70
- product: product,
70
+ product,
71
71
  enableFormattedPrice: (_t = commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price) === null || _t === void 0 ? void 0 : _t.enableFormattedPrice,
72
72
  globalConfig,
73
73
  style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price
package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { __rest } from "tslib";
2
2
  import { css } from '@emotion/css';
3
3
  import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
4
+ import CommodityGroup from '../../template/components/CommodityGroup';
4
5
  import { useSxpDataSource } from '../../../../core/hooks';
5
6
  import './index.less';
6
7
  import { Autoplay, Pagination, Navigation, A11y, Mousewheel, Keyboard } from 'swiper/modules';
@@ -10,7 +11,6 @@ import ExpandableText from '../../../../core/components/SxpPageRender/Expandable
10
11
  import { useEventReport } from '../../../../core/hooks/useEventReport';
11
12
  import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
12
13
  import { getScreenReader, setFontForText } from '../../../../core/utils/tool';
13
- import CommodityGroup from '../../template/components/CommodityGroup';
14
14
  import { getPriceText } from '../../../../core/utils/materials';
15
15
  const CommodityDetailDiroNew = (_a) => {
16
16
  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
package/lib/core/components/SxpPageRender/ExpandableText.js CHANGED
@@ -1,60 +1,48 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
- const tool_1 = require("../../../core/utils/tool");
5
4
  const react_1 = tslib_1.__importStar(require("react"));
6
- const limitTextLastWholeWord = (originalText = '', limit) => {
7
- const chineseRegex = /[\u4e00-\u9fa5]+/;
8
- if (chineseRegex.test(originalText)) {
9
- return originalText.slice(0, 54);
10
- }
11
- const words = originalText.split(' ');
12
- const newWords = [];
13
- for (let i = 0; i < words.length; i++) {
14
- newWords.push(words[i]);
15
- const tempText = newWords.join(' ');
16
- if (tempText.length >= limit)
17
- break;
18
- }
19
- const _words = newWords.length > 1 && newWords.length < words.length ? newWords.slice(0, newWords.length - 1) : newWords;
20
- return _words.join(' ') + ' ';
21
- };
5
+ const tool_1 = require("../../../core/utils/tool");
22
6
  const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldText, unfoldText, isPost, onChange }) => {
23
7
  const [isShowMore, setIsShowMore] = (0, react_1.useState)(false);
24
8
  const [isShow, setIsShow] = (0, react_1.useState)(false);
25
- const lineClamp = Number((style === null || style === void 0 ? void 0 : style.lineClamp) || 2);
9
+ const _a = style || {}, { lineClamp } = _a, textStyle = tslib_1.__rest(_a, ["lineClamp"]);
10
+ const textLineClamp = Number(lineClamp || 2);
26
11
  const multiRow = (0, react_1.useRef)(null);
27
- const multiRowCopy = (0, react_1.useRef)(null);
28
- const handleClick = (0, react_1.useCallback)(() => {
12
+ const observerRef = (0, react_1.useRef)();
13
+ const handleClick = () => {
29
14
  setIsShowMore(!isShowMore);
30
- }, [isShowMore, onChange]);
31
- const renderText = (0, react_1.useMemo)(() => {
32
- return !isShowMore && text.length > maxStr ? limitTextLastWholeWord(text, maxStr) + '...' : text;
33
- }, [text, maxStr, isShowMore]);
15
+ };
16
+ const checkOverflow = (0, react_1.useCallback)(() => {
17
+ if (!multiRow.current || !isPost)
18
+ return;
19
+ const lineHeight = parseInt(getComputedStyle(multiRow.current).lineHeight) || 20;
20
+ const maxHeight = lineHeight * textLineClamp;
21
+ setIsShow(multiRow.current.scrollHeight > maxHeight + 1);
22
+ }, [isPost, text, textLineClamp]);
34
23
  (0, react_1.useEffect)(() => {
35
- var _a, _b;
36
- if (multiRowCopy === null || multiRowCopy === void 0 ? void 0 : multiRowCopy.current)
37
- multiRowCopy.current.style.display = 'block';
38
- if (((_a = multiRowCopy === null || multiRowCopy === void 0 ? void 0 : multiRowCopy.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) > ((_b = multiRow === null || multiRow === void 0 ? void 0 : multiRow.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) && isPost) {
39
- setIsShow(true);
40
- }
41
- else {
42
- setIsShow(false);
43
- }
44
- multiRowCopy.current.style.display = 'none';
45
- }, [isPost, text]);
46
- return (react_1.default.createElement("div", { className: className, style: Object.assign(Object.assign({}, style), { transform: 'translate3d(0px, 0px, 0px)' }), hidden: !text || text === '' },
47
- react_1.default.createElement("div", { ref: multiRow, style: {
48
- overflow: 'hidden',
49
- WebkitLineClamp: !isPost || isShowMore ? '' : lineClamp,
24
+ if (!multiRow.current)
25
+ return;
26
+ observerRef.current = new ResizeObserver(checkOverflow);
27
+ observerRef.current.observe(multiRow.current);
28
+ checkOverflow();
29
+ return () => {
30
+ var _a;
31
+ (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
32
+ };
33
+ }, [checkOverflow]);
34
+ return (react_1.default.createElement("div", { className: className, style: Object.assign(Object.assign({}, textStyle), { transform: 'translate3d(0px, 0px, 0px)' }), hidden: !text || text === '' },
35
+ react_1.default.createElement("div", { ref: multiRow, style: Object.assign(Object.assign({}, (!isShowMore &&
36
+ isPost && {
37
+ WebkitLineClamp: textLineClamp,
38
+ lineClamp: textLineClamp,
50
39
  textOverflow: 'ellipsis',
40
+ overflow: 'hidden',
51
41
  display: '-webkit-box',
52
- WebkitBoxOrient: 'vertical',
53
- wordBreak: 'break-word'
54
- }, dangerouslySetInnerHTML: { __html: (0, tool_1.setFontForText)(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
55
- react_1.default.createElement("div", { ref: multiRowCopy, dangerouslySetInnerHTML: { __html: (0, tool_1.setFontForText)(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
42
+ WebkitBoxOrient: 'vertical'
43
+ })), { wordBreak: 'break-word' }), dangerouslySetInnerHTML: { __html: (0, tool_1.setFontForText)(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), textStyle) } }),
56
44
  text && isPost && isShow && (react_1.default.createElement("button", { "aria-label": isShowMore ? unfoldText || 'show less' : foldText || 'show more', style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
57
- __html: (0, tool_1.setFontForText)(isShowMore ? unfoldText || 'show less' : foldText || 'show more', style)
45
+ __html: (0, tool_1.setFontForText)(isShowMore ? unfoldText || 'show less' : foldText || 'show more', textStyle)
58
46
  } }))));
59
47
  };
60
48
  exports.default = (0, react_1.memo)(ExpandableText);
package/lib/core/components/SxpPageRender/index.d.ts CHANGED
@@ -67,6 +67,7 @@ export interface ISxpPageRenderProps {
67
67
  y: number;
68
68
  };
69
69
  converApi?: any;
70
+ pixel?: any;
70
71
  consentPopup?: any;
71
72
  multiPosts?: any;
72
73
  playbook?: 'paid media' | 'organic menu';
package/lib/core/context/SxpDataSourceProvider.d.ts CHANGED
@@ -72,7 +72,7 @@ export interface ISxpDataSourceContext {
72
72
  bffFbReport?: (body: {
73
73
  eventName: 'PageView' | 'ProductView' | 'ViewContent';
74
74
  product?: any;
75
- }) => Promise<any> | undefined | boolean;
75
+ }) => void;
76
76
  curTime?: any;
77
77
  h5EnterLink?: () => void;
78
78
  themeTag?: any;