pb-sxp-ui 1.0.58 → 1.0.60

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/LICENSE CHANGED
@@ -1,21 +1,21 @@
1
- MIT License
2
-
3
- Copyright (c) 2023 ChatLabs
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
1
+ MIT License
2
+
3
+ Copyright (c) 2023 ChatLabs
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,111 +1,111 @@
1
- <!--
2
- * @Author : haocanweng@chatlabs.cn
3
- * @Date : 2023-08-23 18:25:31
4
- * @LastEditors: binruan@chatlabs.com
5
- * @LastEditTime: 2024-03-20 16:26:29
6
- * @FilePath: \pb-sxp-ui\README.md
7
- -->
8
- <h1 align="center">Page Builder SXP UI</h1>
9
-
10
- <div align="center">
11
- React enterprise-class UI components
12
- </div>
13
-
14
- ## 📦 安装
15
-
16
- ```bash
17
- npm install pb-sxp-ui
18
- # or
19
- yarn add pb-sxp-ui
20
- ```
21
-
22
- ## 🔨 使用
23
- 以 Next.js 框架为例子:
24
-
25
- ```jsx
26
- import { GetServerSideProps } from 'next';
27
- import React, { FC } from 'react'
28
- import Pagebuilder, { PageView } from 'pb-sxp-ui';
29
-
30
- // 初始化 PageBuilder 配置
31
- Pagebuilder.init({
32
- tenantId: 'xxxxxxxxxx',
33
- appId: 'xxxxxxxxx',
34
- env: 'live' // 可选参数,默认是 live 环境
35
- });
36
-
37
-
38
- interface IProps {
39
- path: string;
40
- data: any
41
- }
42
-
43
- const ContentPage: FC<IProps> = ({ data ,path}) => {
44
- return (
45
- <PageView data={data?.data} isSsr path={path}/>
46
- )
47
- }
48
-
49
- export const getServerSideProps: GetServerSideProps<IProps> = async (
50
- context
51
- ) => {
52
- // 接收传来的路径
53
- const path = context.query.path as string;
54
- // 获取页面数据
55
- const result = await Pagebuilder.getDetail(path)
56
- return {
57
- props: {
58
- path,
59
- data: result.data
60
- },
61
- };
62
- };
63
-
64
- export default ContentPage;
65
-
66
- ```
67
-
68
- ## ⌨️ 本地调试
69
-
70
- ### 运行开发环境
71
-
72
- ```bash
73
- $ npm install
74
- $ npm run start
75
- ```
76
-
77
- ### 生成本地开发全局链接
78
-
79
- ```bash
80
- npm link
81
- # or
82
- yarn link
83
- ```
84
-
85
- ### 在使用该包的项目中安装调试
86
-
87
- ```bash
88
- npm link pb-sxp-ui
89
- # or
90
- yarn link pb-sxp-ui
91
- ```
92
-
93
- ## 👾 发布
94
-
95
- ### 打包线上安装包
96
-
97
- ```bash
98
- npm run package
99
- # or
100
- yarn package
101
- ```
102
-
103
- ### 发布 npm
104
-
105
- ```bash
106
- $ npm version patch|minor|major
107
- $ npm publish
108
-
109
- # 自动化发布包
110
- $ npm run pub patch|minor|major|xx.xx.xx
111
- ```
1
+ <!--
2
+ * @Author : haocanweng@chatlabs.cn
3
+ * @Date : 2023-08-23 18:25:31
4
+ * @LastEditors: binruan@chatlabs.com
5
+ * @LastEditTime: 2024-03-20 16:26:29
6
+ * @FilePath: \pb-sxp-ui\README.md
7
+ -->
8
+ <h1 align="center">Page Builder SXP UI</h1>
9
+
10
+ <div align="center">
11
+ React enterprise-class UI components
12
+ </div>
13
+
14
+ ## 📦 安装
15
+
16
+ ```bash
17
+ npm install pb-sxp-ui
18
+ # or
19
+ yarn add pb-sxp-ui
20
+ ```
21
+
22
+ ## 🔨 使用
23
+ 以 Next.js 框架为例子:
24
+
25
+ ```jsx
26
+ import { GetServerSideProps } from 'next';
27
+ import React, { FC } from 'react'
28
+ import Pagebuilder, { PageView } from 'pb-sxp-ui';
29
+
30
+ // 初始化 PageBuilder 配置
31
+ Pagebuilder.init({
32
+ tenantId: 'xxxxxxxxxx',
33
+ appId: 'xxxxxxxxx',
34
+ env: 'live' // 可选参数,默认是 live 环境
35
+ });
36
+
37
+
38
+ interface IProps {
39
+ path: string;
40
+ data: any
41
+ }
42
+
43
+ const ContentPage: FC<IProps> = ({ data ,path}) => {
44
+ return (
45
+ <PageView data={data?.data} isSsr path={path}/>
46
+ )
47
+ }
48
+
49
+ export const getServerSideProps: GetServerSideProps<IProps> = async (
50
+ context
51
+ ) => {
52
+ // 接收传来的路径
53
+ const path = context.query.path as string;
54
+ // 获取页面数据
55
+ const result = await Pagebuilder.getDetail(path)
56
+ return {
57
+ props: {
58
+ path,
59
+ data: result.data
60
+ },
61
+ };
62
+ };
63
+
64
+ export default ContentPage;
65
+
66
+ ```
67
+
68
+ ## ⌨️ 本地调试
69
+
70
+ ### 运行开发环境
71
+
72
+ ```bash
73
+ $ npm install
74
+ $ npm run start
75
+ ```
76
+
77
+ ### 生成本地开发全局链接
78
+
79
+ ```bash
80
+ npm link
81
+ # or
82
+ yarn link
83
+ ```
84
+
85
+ ### 在使用该包的项目中安装调试
86
+
87
+ ```bash
88
+ npm link pb-sxp-ui
89
+ # or
90
+ yarn link pb-sxp-ui
91
+ ```
92
+
93
+ ## 👾 发布
94
+
95
+ ### 打包线上安装包
96
+
97
+ ```bash
98
+ npm run package
99
+ # or
100
+ yarn package
101
+ ```
102
+
103
+ ### 发布 npm
104
+
105
+ ```bash
106
+ $ npm version patch|minor|major
107
+ $ npm publish
108
+
109
+ # 自动化发布包
110
+ $ npm run pub patch|minor|major|xx.xx.xx
111
+ ```
package/dist/index.cjs CHANGED
@@ -1129,7 +1129,7 @@ function useEventReport() {
1129
1129
  }
1130
1130
 
1131
1131
  const AppointForm$1 = (_a) => {
1132
- var { columns, style, title, textStyle, submitBgColor, submitColor, submitText, layoutType, isExternalLink, onClick, onClose } = _a, props = __rest(_a, ["columns", "style", "title", "textStyle", "submitBgColor", "submitColor", "submitText", "layoutType", "isExternalLink", "onClick", "onClose"]);
1132
+ var { columns, style, title, textStyle, submitBgColor, submitColor, submitText, layoutType, isExternalLink, isPopup, onClick, onClose } = _a, props = __rest(_a, ["columns", "style", "title", "textStyle", "submitBgColor", "submitColor", "submitText", "layoutType", "isExternalLink", "isPopup", "onClick", "onClose"]);
1133
1133
  const { submitForm, popupDetailData } = useSxpDataSource();
1134
1134
  const { jumpToWeb } = useEventReport();
1135
1135
  const formRef = React.useRef();
@@ -1194,7 +1194,9 @@ const AppointForm$1 = (_a) => {
1194
1194
  const position = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.index;
1195
1195
  jumpToWeb(data, product, cta, position);
1196
1196
  }
1197
- onClose === null || onClose === void 0 ? void 0 : onClose();
1197
+ if (!isPopup) {
1198
+ onClose === null || onClose === void 0 ? void 0 : onClose();
1199
+ }
1198
1200
  onClick === null || onClick === void 0 ? void 0 : onClick();
1199
1201
  }
1200
1202
  }), 1000);
@@ -8450,10 +8452,10 @@ const CommodityDetail$1 = (_a) => {
8450
8452
  React.createElement("div", { className: 'pb-commondity-content-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title, hidden: !!product && !(product === null || product === void 0 ? void 0 : product.title) }, (_b = product === null || product === void 0 ? void 0 : product.title) !== null && _b !== void 0 ? _b : 'Pendant in Yellow Gold with Diamonds, Medium'),
8451
8453
  React.createElement("div", { className: 'pb-commondity-content-price', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price, hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price) }, priceText),
8452
8454
  React.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
8453
- React.createElement(ExpandableText$1, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), isPost: isPost, text: (_c = product === null || product === void 0 ? void 0 : product.info) !== null && _c !== void 0 ? _c : `The design inspiration of Tiffany Lock series comes from the power of connection and inclusiveness, and the
8454
- bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
8455
- collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
8456
- necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
8455
+ React.createElement(ExpandableText$1, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), isPost: isPost, text: (_c = product === null || product === void 0 ? void 0 : product.info) !== null && _c !== void 0 ? _c : `The design inspiration of Tiffany Lock series comes from the power of connection and inclusiveness, and the
8456
+ bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
8457
+ collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
8458
+ necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
8457
8459
  18-karat gold, this necklace is embellished with hand-set diamonds.`, maxStr: 79, className: 'pb-commondity-content-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info }))));
8458
8460
  };
8459
8461
  const renderBtn = () => {
@@ -8631,10 +8633,22 @@ const getMediaValueByMode = (obj) => {
8631
8633
  };
8632
8634
 
8633
8635
  const Prompt$1 = (_a) => {
8634
- var { content, btnText, style, icon, onClick } = _a, props = __rest(_a, ["content", "btnText", "style", "icon", "onClick"]);
8636
+ var { content, btnText, style, icon, isPopup, isExternalLink, onClose, onClick } = _a, props = __rest(_a, ["content", "btnText", "style", "icon", "isPopup", "isExternalLink", "onClose", "onClick"]);
8637
+ const { popupDetailData } = useSxpDataSource();
8638
+ const { jumpToWeb } = useEventReport();
8635
8639
  const iconSrc = typeof icon === 'string' ? icon : getMediaValueByMode(icon);
8636
8640
  const handleOk = () => {
8637
- window === null || window === void 0 ? void 0 : window.sxpPopup('');
8641
+ var _a, _b, _c;
8642
+ if (isExternalLink) {
8643
+ const data = popupDetailData;
8644
+ const product = (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProduct;
8645
+ const cta = (_c = (_b = data === null || data === void 0 ? void 0 : data.video) === null || _b === void 0 ? void 0 : _b.bindProduct) === null || _c === void 0 ? void 0 : _c.bindCta;
8646
+ const position = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.index;
8647
+ jumpToWeb(data, product, cta, position);
8648
+ }
8649
+ if (!isPopup) {
8650
+ onClose === null || onClose === void 0 ? void 0 : onClose();
8651
+ }
8638
8652
  onClick === null || onClick === void 0 ? void 0 : onClick();
8639
8653
  };
8640
8654
  return (React.createElement("div", Object.assign({ className: `pb-prompt ${css.css(Object.assign({}, style))}` }, props),
@@ -8911,7 +8925,7 @@ const CommodityDetailDiroNew$1 = (_a) => {
8911
8925
  const productInfoText = ({ isPost }) => {
8912
8926
  return (React.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
8913
8927
  React.createElement(ExpandableText$1, { isPost: isPost, onClick: () => setShowModal(true), className: 'pb-commondityDiroNew-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (product === null || product === void 0 ? void 0 : product.info) ||
8914
- `Unveiled at the Spring-Summer 2023 fashion show, the Dior Toujours bag is distinguished by a casual and practical design. Crafted in black calfskin with Macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize essentials. Its leather strap closure keeps items secure while the D of the CD Lock closure twists to adjust the sides and enhance the bag's silhouette. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
8928
+ `Unveiled at the Spring-Summer 2023 fashion show, the Dior Toujours bag is distinguished by a casual and practical design. Crafted in black calfskin with Macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize essentials. Its leather strap closure keeps items secure while the D of the CD Lock closure twists to adjust the sides and enhance the bag's silhouette. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
8915
8929
  Made in Italy` })));
8916
8930
  };
8917
8931
  return (React.createElement("div", { className: 'pb-commondityDiroNew' },
@@ -13580,7 +13594,7 @@ var index$1 = React.memo(DiyPortalPreview);
13580
13594
  * @Author: binruan@chatlabs.com
13581
13595
  * @Date: 2023-10-31 10:56:01
13582
13596
  * @LastEditors: binruan@chatlabs.com
13583
- * @LastEditTime: 2024-05-13 15:19:20
13597
+ * @LastEditTime: 2024-05-14 10:12:52
13584
13598
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Popup\index.tsx
13585
13599
  *
13586
13600
  */
@@ -13626,13 +13640,14 @@ const Popup = () => {
13626
13640
  const renderPopupDetail = React.useMemo(() => {
13627
13641
  var _a, _b, _c;
13628
13642
  return (_c = (_b = (_a = schema === null || schema === void 0 ? void 0 : schema.sxpPageConf) === null || _a === void 0 ? void 0 : _a.globalConfig) === null || _b === void 0 ? void 0 : _b.popupList) === null || _c === void 0 ? void 0 : _c.map((value, index) => {
13629
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
13643
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
13630
13644
  if ((value === null || value === void 0 ? void 0 : value.id) === (popup === null || popup === void 0 ? void 0 : popup.id)) {
13631
13645
  const t = resolver[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
13632
13646
  const Component = withBindDataSource(t);
13633
13647
  const isExternalLink = ((_d = (_c = (_b = value === null || value === void 0 ? void 0 : value.item) === null || _b === void 0 ? void 0 : _b.event) === null || _c === void 0 ? void 0 : _c.onClick) === null || _d === void 0 ? void 0 : _d.linkType) === 'externalLink';
13634
- const defaulSetting = (_e = t === null || t === void 0 ? void 0 : t.extend) === null || _e === void 0 ? void 0 : _e.defaulSetting;
13635
- return (React.createElement(Component, Object.assign({ key: index, style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_f = value === null || value === void 0 ? void 0 : value.item) === null || _f === void 0 ? void 0 : _f.style), { width: '100%', height: '80vh', overflow: 'auto' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_g = value === null || value === void 0 ? void 0 : value.item) === null || _g === void 0 ? void 0 : _g.textStyle), bindDatas: (_j = (_h = value === null || value === void 0 ? void 0 : value.item) === null || _h === void 0 ? void 0 : _h.bindDatas) !== null && _j !== void 0 ? _j : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_k = value === null || value === void 0 ? void 0 : value.item) === null || _k === void 0 ? void 0 : _k.props, { event: ((_l = value === null || value === void 0 ? void 0 : value.item) === null || _l === void 0 ? void 0 : _l.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, isExternalLink: isExternalLink, onClose: handleClose })));
13648
+ const isPopup = ((_g = (_f = (_e = value === null || value === void 0 ? void 0 : value.item) === null || _e === void 0 ? void 0 : _e.event) === null || _f === void 0 ? void 0 : _f.onClick) === null || _g === void 0 ? void 0 : _g.linkType) === 'popup';
13649
+ const defaulSetting = (_h = t === null || t === void 0 ? void 0 : t.extend) === null || _h === void 0 ? void 0 : _h.defaulSetting;
13650
+ return (React.createElement(Component, Object.assign({ key: index, style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_j = value === null || value === void 0 ? void 0 : value.item) === null || _j === void 0 ? void 0 : _j.style), { width: '100%', height: '80vh', overflow: 'auto' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_k = value === null || value === void 0 ? void 0 : value.item) === null || _k === void 0 ? void 0 : _k.textStyle), bindDatas: (_m = (_l = value === null || value === void 0 ? void 0 : value.item) === null || _l === void 0 ? void 0 : _l.bindDatas) !== null && _m !== void 0 ? _m : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_o = value === null || value === void 0 ? void 0 : value.item) === null || _o === void 0 ? void 0 : _o.props, { event: ((_p = value === null || value === void 0 ? void 0 : value.item) === null || _p === void 0 ? void 0 : _p.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, isExternalLink: isExternalLink, isPopup: isPopup, onClose: handleClose })));
13636
13651
  }
13637
13652
  else {
13638
13653
  return React.createElement(React.Fragment, null);