@fonixtree/magic-design 0.0.138 → 0.0.141

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 (23) hide show
  1. package/es/common/UrlPicker/index.js +1 -1
  2. package/es/composite-comp/bol/components/Text/index.js +22 -25
  3. package/es/composite-comp/common/components/ImageLabel/index.less +3 -2
  4. package/es/composite-comp/common/components/ProductItem/index.js +3 -2
  5. package/es/composite-comp/common/components/ProductItem/index.less +4 -9
  6. package/es/core/Designer/RenderHtml/index.js +5 -1
  7. package/es/core/Designer/RenderHtml/index.less +2 -1
  8. package/es/core/Designer/index.js +4 -1
  9. package/es/core/Renderer/index.js +5 -2
  10. package/es/meta-comp/components/Text/index.js +48 -13
  11. package/es/utils/coreUtil.js +1 -1
  12. package/lib/common/UrlPicker/index.js +1 -1
  13. package/lib/composite-comp/bol/components/Text/index.js +22 -25
  14. package/lib/composite-comp/common/components/ImageLabel/index.less +3 -2
  15. package/lib/composite-comp/common/components/ProductItem/index.js +3 -2
  16. package/lib/composite-comp/common/components/ProductItem/index.less +4 -9
  17. package/lib/core/Designer/RenderHtml/index.js +5 -1
  18. package/lib/core/Designer/RenderHtml/index.less +2 -1
  19. package/lib/core/Designer/index.js +4 -1
  20. package/lib/core/Renderer/index.js +5 -2
  21. package/lib/meta-comp/components/Text/index.js +48 -13
  22. package/lib/utils/coreUtil.js +1 -1
  23. package/package.json +1 -1
package/es/common/UrlPicker/index.js CHANGED
@@ -80,7 +80,7 @@ function (_super) {
80
80
  value: value
81
81
  }), /*#__PURE__*/_react["default"].createElement("div", {
82
82
  className: "icon-btns"
83
- }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
83
+ }, window.magicDesign.outputType != 'html' && /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
84
84
  color: "#000",
85
85
  onClick: function onClick() {
86
86
  return _this.setState({
package/es/composite-comp/bol/components/Text/index.js CHANGED
@@ -9,8 +9,6 @@ var _react = _interopRequireWildcard(require("react"));
9
9
 
10
10
  var _classnames = _interopRequireDefault(require("classnames"));
11
11
 
12
- var _styledComponents = _interopRequireDefault(require("styled-components"));
13
-
14
12
  var _defaultJSON = require("./defaultJSON");
15
13
 
16
14
  var _components = require("../../../../meta-comp/components");
@@ -25,18 +23,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
25
23
 
26
24
  function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
27
25
 
28
- var __makeTemplateObject = void 0 && (void 0).__makeTemplateObject || function (cooked, raw) {
29
- if (Object.defineProperty) {
30
- Object.defineProperty(cooked, "raw", {
31
- value: raw
32
- });
33
- } else {
34
- cooked.raw = raw;
35
- }
36
-
37
- return cooked;
38
- };
39
-
40
26
  var __extends = void 0 && (void 0).__extends || function () {
41
27
  var _extendStatics = function extendStatics(d, b) {
42
28
  _extendStatics = Object.setPrototypeOf || {
@@ -75,7 +61,8 @@ var __decorate = void 0 && (void 0).__decorate || function (decorators, target,
75
61
 
76
62
  // import './index.less';
77
63
  // less to css 在线地址 https://tool.oschina.net/less
78
- var AppStyle = _styledComponents["default"].div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n.m-text .title-wrap {\n font-weight: 500;\n font-size: 20px;\n}\n.m-text .sub-title {\n font-size: 15px;\n color: #b7b7b7;\n margin-top: 10px;\n}\n.m-text .group-content-wrap {\n width: 100%;\n}\n.m-text .group-content-wrap .group-wrap-container {\n padding: 20px;\n}\n.m-text .group-content-wrap .group-wrap {\n display: flex;\n flex-direction: column;\n margin-top: 20px;\n width: 100%;\n}\n.m-text .group-content-wrap .group-wrap .group-title {\n font-size: 14px;\n}\n.m-text .group-content-wrap.col-1 .group-wrap {\n width: 100%;\n}\n.m-text .group-content-wrap.col-2 {\n display: grid;\n grid-template-columns: 50% 50%;\n}\n.m-text .group-content-wrap.col-3 {\n display: grid;\n grid-template-columns: 33.3% 33.3% 33.3%;\n}\n.m-text .group-content-wrap.mobile {\n display: block;\n}\n"], ["\n.m-text .title-wrap {\n font-weight: 500;\n font-size: 20px;\n}\n.m-text .sub-title {\n font-size: 15px;\n color: #b7b7b7;\n margin-top: 10px;\n}\n.m-text .group-content-wrap {\n width: 100%;\n}\n.m-text .group-content-wrap .group-wrap-container {\n padding: 20px;\n}\n.m-text .group-content-wrap .group-wrap {\n display: flex;\n flex-direction: column;\n margin-top: 20px;\n width: 100%;\n}\n.m-text .group-content-wrap .group-wrap .group-title {\n font-size: 14px;\n}\n.m-text .group-content-wrap.col-1 .group-wrap {\n width: 100%;\n}\n.m-text .group-content-wrap.col-2 {\n display: grid;\n grid-template-columns: 50% 50%;\n}\n.m-text .group-content-wrap.col-3 {\n display: grid;\n grid-template-columns: 33.3% 33.3% 33.3%;\n}\n.m-text .group-content-wrap.mobile {\n display: block;\n}\n"])));
64
+ // css 压缩地址 https://www.runoob.com/csspack
65
+ var style = '.m-text .title-wrap{font-weight:500;font-size:20px;}.m-text .sub-title{font-size:15px;color:#b7b7b7;margin-top:10px;}.m-text .group-content-wrap{width:100%;}.m-text .group-content-wrap .group-wrap-container{padding:20px;}.m-text .group-content-wrap .group-wrap{display:flex;flex-direction:column;margin-top:20px;width:100%;}.m-text .group-content-wrap .group-wrap .group-title{font-size:14px;}.m-text .group-content-wrap.col-1 .group-wrap{width:100%;}.m-text .group-content-wrap.col-2{display:grid;grid-template-columns:50% 50%;}.m-text .group-content-wrap.col-3{display:grid;grid-template-columns:33.3% 33.3% 33.3%;}.m-text .group-content-wrap.mobile{display:block;}';
79
66
 
80
67
  var Text =
81
68
  /** @class */
@@ -89,18 +76,25 @@ function (_super) {
89
76
  Text.prototype.render = function () {
90
77
  var _a;
91
78
 
92
- var nodeData = this.props.nodeData;
93
- return /*#__PURE__*/_react["default"].createElement(AppStyle, null, /*#__PURE__*/_react["default"].createElement("div", {
79
+ var _b = this.props,
80
+ nodeData = _b.nodeData,
81
+ mode = _b.mode,
82
+ outputType = _b.outputType;
83
+ return /*#__PURE__*/_react["default"].createElement("div", {
94
84
  className: "m-text",
95
85
  onClick: this.onComponentClick
96
- }, nodeData.title.headline.open && /*#__PURE__*/_react["default"].createElement("div", {
86
+ }, /*#__PURE__*/_react["default"].createElement("style", null, style), nodeData.title.headline.open && /*#__PURE__*/_react["default"].createElement("div", {
97
87
  className: "title-wrap"
98
88
  }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
99
- data: nodeData.title.headline
89
+ data: nodeData.title.headline,
90
+ mode: mode,
91
+ outputType: outputType
100
92
  })), nodeData.title.subtitle.open && /*#__PURE__*/_react["default"].createElement("div", {
101
93
  className: "sub-title"
102
94
  }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
103
- data: nodeData.title.subtitle
95
+ data: nodeData.title.subtitle,
96
+ mode: mode,
97
+ outputType: outputType
104
98
  })), /*#__PURE__*/_react["default"].createElement("div", {
105
99
  className: (0, _classnames["default"])('group-content-wrap', 'col-' + nodeData.customize.pcRowNum, (_a = {}, _a[window.magicDesign.device] = true, _a))
106
100
  }, nodeData.groupSource.map(function (group) {
@@ -115,13 +109,17 @@ function (_super) {
115
109
  }, group.content.title.open && /*#__PURE__*/_react["default"].createElement("div", {
116
110
  className: "group-title"
117
111
  }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
118
- data: group.content.title
112
+ data: group.content.title,
113
+ mode: mode,
114
+ outputType: outputType
119
115
  })), group.content.text.open && /*#__PURE__*/_react["default"].createElement("div", {
120
116
  className: "group-content"
121
117
  }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
122
- data: group.content.text
118
+ data: group.content.text,
119
+ mode: mode,
120
+ outputType: outputType
123
121
  }))));
124
- }))));
122
+ })));
125
123
  };
126
124
 
127
125
  Text.defaultProps = {};
@@ -132,5 +130,4 @@ function (_super) {
132
130
  }(_react.Component);
133
131
 
134
132
  var _default = Text;
135
- exports["default"] = _default;
136
- var templateObject_1;
133
+ exports["default"] = _default;
package/es/composite-comp/common/components/ImageLabel/index.less CHANGED
@@ -36,9 +36,10 @@
36
36
 
37
37
 
38
38
  &.position-6 {
39
- position: relative;
40
- float: left;
39
+ position: unset;
41
40
  height: 18px;
42
41
  margin-right: 5px;
42
+ vertical-align: middle;
43
+ float: left;
43
44
  }
44
45
  }
package/es/composite-comp/common/components/ProductItem/index.js CHANGED
@@ -186,16 +186,17 @@ function (_super) {
186
186
  });
187
187
  })), /*#__PURE__*/_react["default"].createElement("div", {
188
188
  className: "product-name-wrap"
189
+ }, /*#__PURE__*/_react["default"].createElement("div", {
190
+ className: "box"
189
191
  }, prodLabels.length > 0 && /*#__PURE__*/_react["default"].createElement(_ImageLabel["default"], {
190
192
  labels: prodLabels,
191
193
  small: true
192
194
  }), showProName && panelProps.productName.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
193
- className: "product-name",
194
195
  data: __assign(__assign({}, panelProps.productName), {
195
196
  text: data.offerName
196
197
  }),
197
198
  readonly: true
198
- })), panelProps.activityPrice.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
199
+ }))), panelProps.activityPrice.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
199
200
  className: "price",
200
201
  data: __assign(__assign({}, panelProps.activityPrice), {
201
202
  text: _price
package/es/composite-comp/common/components/ProductItem/index.less CHANGED
@@ -34,18 +34,13 @@
34
34
  }
35
35
 
36
36
  .product-name-wrap {
37
- margin-bottom: 3px;
37
+ overflow: hidden;
38
+ text-overflow: ellipsis;
38
39
  display: -webkit-box;
39
- -webkit-line-clamp: 2;
40
40
  -webkit-box-orient: vertical;
41
- overflow: hidden;
42
- clear: both;
43
- }
44
-
45
- .product-name {
41
+ -webkit-line-clamp: 2;
46
42
  line-height: 18px;
47
- word-break: break-all;
48
- white-space: normal;
43
+ max-height: 40px;
49
44
  }
50
45
 
51
46
  .price {
package/es/core/Designer/RenderHtml/index.js CHANGED
@@ -13,6 +13,8 @@ require("./index.less");
13
13
 
14
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
15
15
 
16
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
17
+
16
18
  var __extends = void 0 && (void 0).__extends || function () {
17
19
  var _extendStatics = function extendStatics(d, b) {
18
20
  _extendStatics = Object.setPrototypeOf || {
@@ -74,7 +76,9 @@ function (_super) {
74
76
  if (!renderProps) return null;
75
77
  return /*#__PURE__*/_react["default"].createElement("div", {
76
78
  id: "render-html-wrap"
77
- }, /*#__PURE__*/_react["default"].createElement(_Renderer["default"], renderProps));
79
+ }, /*#__PURE__*/_react["default"].createElement(_Renderer["default"], _extends({}, renderProps, {
80
+ outputType: "html"
81
+ })));
78
82
  };
79
83
 
80
84
  RenderHtml.defaultProps = {};
package/es/core/Designer/RenderHtml/index.less CHANGED
@@ -1,4 +1,5 @@
1
1
  #render-html-wrap {
2
2
  position: fixed;
3
- top: -9999px;
3
+ top: 10px;
4
+ left: 0;
4
5
  }
package/es/core/Designer/index.js CHANGED
@@ -602,6 +602,7 @@ function (_super) {
602
602
 
603
603
  var pageData = props.pageData,
604
604
  config = props.config,
605
+ outputType = props.outputType,
605
606
  locale = props.locale;
606
607
  var MPageData = pageData.childNodes || [];
607
608
  _this.configRef = /*#__PURE__*/_react["default"].createRef(); // this.viewAreaRef = React.createRef();
@@ -619,7 +620,9 @@ function (_super) {
619
620
  device: _constants.deviceTypeMap.PHONE,
620
621
  appointmentVisible: false
621
622
  };
622
- setDesignConfig(config);
623
+ setDesignConfig(__assign(__assign({}, config), {
624
+ outputType: outputType
625
+ }));
623
626
  return _this;
624
627
  }
625
628
 
package/es/core/Renderer/index.js CHANGED
@@ -58,7 +58,8 @@ var setDesignConfig = function setDesignConfig(props) {
58
58
 
59
59
 
60
60
  var Renderer = function Renderer(props) {
61
- var pageData = props.pageData; // console.log('pageData: ', pageData);
61
+ var pageData = props.pageData,
62
+ outputType = props.outputType; // console.log('pageData: ', pageData);
62
63
 
63
64
  setDesignConfig(props);
64
65
  window.magicDesignPageData = pageData;
@@ -102,7 +103,9 @@ var Renderer = function Renderer(props) {
102
103
  }
103
104
 
104
105
  var newInstanceProps = __assign(__assign({}, nodeData), {
105
- nodeData: nodeData
106
+ nodeData: nodeData,
107
+ mode: 'renderer',
108
+ outputType: outputType
106
109
  });
107
110
 
108
111
  return /*#__PURE__*/_react["default"].createElement("div", {
package/es/meta-comp/components/Text/index.js CHANGED
@@ -319,7 +319,8 @@ function (_super) {
319
319
  node.appendChild(closeNode);
320
320
  };
321
321
 
322
- _this.renderText = function (data) {
322
+ _this.renderText = function (data, mode) {
323
+ var outputType = _this.props.outputType || window.magicDesign.outputType;
323
324
  if (!_this.textRef.current) return;
324
325
 
325
326
  _this.textRef.current.blur();
@@ -332,23 +333,57 @@ function (_super) {
332
333
  /** 渲染html */
333
334
 
334
335
  if (data.specialContent.length == 0) {
335
- _this.textRef.current.innerHTML = data.text;
336
+ if (outputType == 'html' && mode == 'renderer') {
337
+ if (data.content.clickUrl) {
338
+ var a = document.createElement('a');
339
+ a.href = data.content.clickUrl;
340
+ a.target = '_blank';
341
+ a.innerHTML = data.text;
342
+ _this.textRef.current.innerHTML = '';
343
+
344
+ _this.textRef.current.appendChild(a);
345
+ } else {
346
+ _this.textRef.current.innerHTML = data.text;
347
+ }
348
+ } else {
349
+ _this.textRef.current.innerHTML = data.text;
350
+ }
336
351
  } else {
337
352
  _this.textRef.current.innerHTML = '';
338
353
  data.specialContent.forEach(function (c, index) {
339
- var _a;
354
+ var _a, _b, _c;
340
355
 
341
356
  var node = document.createElement('span');
342
357
  node.style = (0, _commonUtil.styleStringify)(contentStyle(c.content));
343
- node.innerText = (_a = data.text).slice.apply(_a, c.range);
344
358
 
345
- node.onclick = function (e) {
346
- if (c.content.clickUrl) {
347
- e.stopPropagation();
348
- }
359
+ if (c.content.clickUrl) {
360
+ if (outputType == 'html' && mode == 'renderer') {
361
+ var a = document.createElement('a');
362
+ a.href = c.content.clickUrl;
363
+ a.target = '_blank';
364
+
365
+ if (mode == 'designer') {
366
+ a.onclick = function (e) {
367
+ e.preventDefault();
368
+ };
369
+ }
349
370
 
350
- (0, _coreUtil.clickUrl)(c.content.clickUrl);
351
- };
371
+ a.innerText = (_a = data.text).slice.apply(_a, c.range);
372
+ node.appendChild(a);
373
+ } else {
374
+ node.innerText = (_b = data.text).slice.apply(_b, c.range);
375
+
376
+ node.onclick = function (e) {
377
+ if (c.content.clickUrl) {
378
+ e.stopPropagation();
379
+ }
380
+
381
+ (0, _coreUtil.clickUrl)(c.content.clickUrl);
382
+ };
383
+ }
384
+ } else {
385
+ node.innerText = (_c = data.text).slice.apply(_c, c.range);
386
+ }
352
387
 
353
388
  _this.selectionRefMap[JSON.stringify(c.range)] = node;
354
389
 
@@ -402,14 +437,14 @@ function (_super) {
402
437
  Text.prototype.componentDidMount = function () {
403
438
  var _this = this;
404
439
 
405
- this.renderText(this.props.data);
440
+ this.renderText(this.props.data, this.props.mode);
406
441
  initSelectionEvent();
407
442
  appendSelectionTarget({
408
443
  target: this.textRef.current,
409
444
  data: this.props.data,
410
445
  selectionRefMap: this.selectionRefMap,
411
446
  refresh: function refresh() {
412
- _this.renderText(_this.props.data);
447
+ _this.renderText(_this.props.data, _this.props.mode);
413
448
  }
414
449
  });
415
450
  };
@@ -421,7 +456,7 @@ function (_super) {
421
456
  var result = should1 || should2 || should3;
422
457
 
423
458
  if (result) {
424
- this.renderText(nextProps.data);
459
+ this.renderText(nextProps.data, this.props.mode);
425
460
  }
426
461
 
427
462
  return result;
package/es/utils/coreUtil.js CHANGED
@@ -289,7 +289,7 @@ var getCoupon = function getCoupon(couponId) {
289
289
  var clickUrl = function clickUrl(url) {
290
290
  console.log('url', url);
291
291
 
292
- if (window.magicDesign.readOnly || window.magicDesign.mode !== 'renderer' || !url) {
292
+ if (window.magicDesign.readOnly || window.magicDesign.mode !== 'renderer' || !url || window.magicDesign.outputType == 'html') {
293
293
  return;
294
294
  }
295
295
 
package/lib/common/UrlPicker/index.js CHANGED
@@ -80,7 +80,7 @@ function (_super) {
80
80
  value: value
81
81
  }), /*#__PURE__*/_react["default"].createElement("div", {
82
82
  className: "icon-btns"
83
- }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
83
+ }, window.magicDesign.outputType != 'html' && /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
84
84
  color: "#000",
85
85
  onClick: function onClick() {
86
86
  return _this.setState({
package/lib/composite-comp/bol/components/Text/index.js CHANGED
@@ -9,8 +9,6 @@ var _react = _interopRequireWildcard(require("react"));
9
9
 
10
10
  var _classnames = _interopRequireDefault(require("classnames"));
11
11
 
12
- var _styledComponents = _interopRequireDefault(require("styled-components"));
13
-
14
12
  var _defaultJSON = require("./defaultJSON");
15
13
 
16
14
  var _components = require("../../../../meta-comp/components");
@@ -25,18 +23,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
25
23
 
26
24
  function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
27
25
 
28
- var __makeTemplateObject = void 0 && (void 0).__makeTemplateObject || function (cooked, raw) {
29
- if (Object.defineProperty) {
30
- Object.defineProperty(cooked, "raw", {
31
- value: raw
32
- });
33
- } else {
34
- cooked.raw = raw;
35
- }
36
-
37
- return cooked;
38
- };
39
-
40
26
  var __extends = void 0 && (void 0).__extends || function () {
41
27
  var _extendStatics = function extendStatics(d, b) {
42
28
  _extendStatics = Object.setPrototypeOf || {
@@ -75,7 +61,8 @@ var __decorate = void 0 && (void 0).__decorate || function (decorators, target,
75
61
 
76
62
  // import './index.less';
77
63
  // less to css 在线地址 https://tool.oschina.net/less
78
- var AppStyle = _styledComponents["default"].div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n.m-text .title-wrap {\n font-weight: 500;\n font-size: 20px;\n}\n.m-text .sub-title {\n font-size: 15px;\n color: #b7b7b7;\n margin-top: 10px;\n}\n.m-text .group-content-wrap {\n width: 100%;\n}\n.m-text .group-content-wrap .group-wrap-container {\n padding: 20px;\n}\n.m-text .group-content-wrap .group-wrap {\n display: flex;\n flex-direction: column;\n margin-top: 20px;\n width: 100%;\n}\n.m-text .group-content-wrap .group-wrap .group-title {\n font-size: 14px;\n}\n.m-text .group-content-wrap.col-1 .group-wrap {\n width: 100%;\n}\n.m-text .group-content-wrap.col-2 {\n display: grid;\n grid-template-columns: 50% 50%;\n}\n.m-text .group-content-wrap.col-3 {\n display: grid;\n grid-template-columns: 33.3% 33.3% 33.3%;\n}\n.m-text .group-content-wrap.mobile {\n display: block;\n}\n"], ["\n.m-text .title-wrap {\n font-weight: 500;\n font-size: 20px;\n}\n.m-text .sub-title {\n font-size: 15px;\n color: #b7b7b7;\n margin-top: 10px;\n}\n.m-text .group-content-wrap {\n width: 100%;\n}\n.m-text .group-content-wrap .group-wrap-container {\n padding: 20px;\n}\n.m-text .group-content-wrap .group-wrap {\n display: flex;\n flex-direction: column;\n margin-top: 20px;\n width: 100%;\n}\n.m-text .group-content-wrap .group-wrap .group-title {\n font-size: 14px;\n}\n.m-text .group-content-wrap.col-1 .group-wrap {\n width: 100%;\n}\n.m-text .group-content-wrap.col-2 {\n display: grid;\n grid-template-columns: 50% 50%;\n}\n.m-text .group-content-wrap.col-3 {\n display: grid;\n grid-template-columns: 33.3% 33.3% 33.3%;\n}\n.m-text .group-content-wrap.mobile {\n display: block;\n}\n"])));
64
+ // css 压缩地址 https://www.runoob.com/csspack
65
+ var style = '.m-text .title-wrap{font-weight:500;font-size:20px;}.m-text .sub-title{font-size:15px;color:#b7b7b7;margin-top:10px;}.m-text .group-content-wrap{width:100%;}.m-text .group-content-wrap .group-wrap-container{padding:20px;}.m-text .group-content-wrap .group-wrap{display:flex;flex-direction:column;margin-top:20px;width:100%;}.m-text .group-content-wrap .group-wrap .group-title{font-size:14px;}.m-text .group-content-wrap.col-1 .group-wrap{width:100%;}.m-text .group-content-wrap.col-2{display:grid;grid-template-columns:50% 50%;}.m-text .group-content-wrap.col-3{display:grid;grid-template-columns:33.3% 33.3% 33.3%;}.m-text .group-content-wrap.mobile{display:block;}';
79
66
 
80
67
  var Text =
81
68
  /** @class */
@@ -89,18 +76,25 @@ function (_super) {
89
76
  Text.prototype.render = function () {
90
77
  var _a;
91
78
 
92
- var nodeData = this.props.nodeData;
93
- return /*#__PURE__*/_react["default"].createElement(AppStyle, null, /*#__PURE__*/_react["default"].createElement("div", {
79
+ var _b = this.props,
80
+ nodeData = _b.nodeData,
81
+ mode = _b.mode,
82
+ outputType = _b.outputType;
83
+ return /*#__PURE__*/_react["default"].createElement("div", {
94
84
  className: "m-text",
95
85
  onClick: this.onComponentClick
96
- }, nodeData.title.headline.open && /*#__PURE__*/_react["default"].createElement("div", {
86
+ }, /*#__PURE__*/_react["default"].createElement("style", null, style), nodeData.title.headline.open && /*#__PURE__*/_react["default"].createElement("div", {
97
87
  className: "title-wrap"
98
88
  }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
99
- data: nodeData.title.headline
89
+ data: nodeData.title.headline,
90
+ mode: mode,
91
+ outputType: outputType
100
92
  })), nodeData.title.subtitle.open && /*#__PURE__*/_react["default"].createElement("div", {
101
93
  className: "sub-title"
102
94
  }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
103
- data: nodeData.title.subtitle
95
+ data: nodeData.title.subtitle,
96
+ mode: mode,
97
+ outputType: outputType
104
98
  })), /*#__PURE__*/_react["default"].createElement("div", {
105
99
  className: (0, _classnames["default"])('group-content-wrap', 'col-' + nodeData.customize.pcRowNum, (_a = {}, _a[window.magicDesign.device] = true, _a))
106
100
  }, nodeData.groupSource.map(function (group) {
@@ -115,13 +109,17 @@ function (_super) {
115
109
  }, group.content.title.open && /*#__PURE__*/_react["default"].createElement("div", {
116
110
  className: "group-title"
117
111
  }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
118
- data: group.content.title
112
+ data: group.content.title,
113
+ mode: mode,
114
+ outputType: outputType
119
115
  })), group.content.text.open && /*#__PURE__*/_react["default"].createElement("div", {
120
116
  className: "group-content"
121
117
  }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
122
- data: group.content.text
118
+ data: group.content.text,
119
+ mode: mode,
120
+ outputType: outputType
123
121
  }))));
124
- }))));
122
+ })));
125
123
  };
126
124
 
127
125
  Text.defaultProps = {};
@@ -132,5 +130,4 @@ function (_super) {
132
130
  }(_react.Component);
133
131
 
134
132
  var _default = Text;
135
- exports["default"] = _default;
136
- var templateObject_1;
133
+ exports["default"] = _default;
package/lib/composite-comp/common/components/ImageLabel/index.less CHANGED
@@ -36,9 +36,10 @@
36
36
 
37
37
 
38
38
  &.position-6 {
39
- position: relative;
40
- float: left;
39
+ position: unset;
41
40
  height: 18px;
42
41
  margin-right: 5px;
42
+ vertical-align: middle;
43
+ float: left;
43
44
  }
44
45
  }
package/lib/composite-comp/common/components/ProductItem/index.js CHANGED
@@ -186,16 +186,17 @@ function (_super) {
186
186
  });
187
187
  })), /*#__PURE__*/_react["default"].createElement("div", {
188
188
  className: "product-name-wrap"
189
+ }, /*#__PURE__*/_react["default"].createElement("div", {
190
+ className: "box"
189
191
  }, prodLabels.length > 0 && /*#__PURE__*/_react["default"].createElement(_ImageLabel["default"], {
190
192
  labels: prodLabels,
191
193
  small: true
192
194
  }), showProName && panelProps.productName.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
193
- className: "product-name",
194
195
  data: __assign(__assign({}, panelProps.productName), {
195
196
  text: data.offerName
196
197
  }),
197
198
  readonly: true
198
- })), panelProps.activityPrice.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
199
+ }))), panelProps.activityPrice.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
199
200
  className: "price",
200
201
  data: __assign(__assign({}, panelProps.activityPrice), {
201
202
  text: _price
package/lib/composite-comp/common/components/ProductItem/index.less CHANGED
@@ -34,18 +34,13 @@
34
34
  }
35
35
 
36
36
  .product-name-wrap {
37
- margin-bottom: 3px;
37
+ overflow: hidden;
38
+ text-overflow: ellipsis;
38
39
  display: -webkit-box;
39
- -webkit-line-clamp: 2;
40
40
  -webkit-box-orient: vertical;
41
- overflow: hidden;
42
- clear: both;
43
- }
44
-
45
- .product-name {
41
+ -webkit-line-clamp: 2;
46
42
  line-height: 18px;
47
- word-break: break-all;
48
- white-space: normal;
43
+ max-height: 40px;
49
44
  }
50
45
 
51
46
  .price {
package/lib/core/Designer/RenderHtml/index.js CHANGED
@@ -13,6 +13,8 @@ require("./index.less");
13
13
 
14
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
15
15
 
16
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
17
+
16
18
  var __extends = void 0 && (void 0).__extends || function () {
17
19
  var _extendStatics = function extendStatics(d, b) {
18
20
  _extendStatics = Object.setPrototypeOf || {
@@ -74,7 +76,9 @@ function (_super) {
74
76
  if (!renderProps) return null;
75
77
  return /*#__PURE__*/_react["default"].createElement("div", {
76
78
  id: "render-html-wrap"
77
- }, /*#__PURE__*/_react["default"].createElement(_Renderer["default"], renderProps));
79
+ }, /*#__PURE__*/_react["default"].createElement(_Renderer["default"], _extends({}, renderProps, {
80
+ outputType: "html"
81
+ })));
78
82
  };
79
83
 
80
84
  RenderHtml.defaultProps = {};
package/lib/core/Designer/RenderHtml/index.less CHANGED
@@ -1,4 +1,5 @@
1
1
  #render-html-wrap {
2
2
  position: fixed;
3
- top: -9999px;
3
+ top: 10px;
4
+ left: 0;
4
5
  }
package/lib/core/Designer/index.js CHANGED
@@ -602,6 +602,7 @@ function (_super) {
602
602
 
603
603
  var pageData = props.pageData,
604
604
  config = props.config,
605
+ outputType = props.outputType,
605
606
  locale = props.locale;
606
607
  var MPageData = pageData.childNodes || [];
607
608
  _this.configRef = /*#__PURE__*/_react["default"].createRef(); // this.viewAreaRef = React.createRef();
@@ -619,7 +620,9 @@ function (_super) {
619
620
  device: _constants.deviceTypeMap.PHONE,
620
621
  appointmentVisible: false
621
622
  };
622
- setDesignConfig(config);
623
+ setDesignConfig(__assign(__assign({}, config), {
624
+ outputType: outputType
625
+ }));
623
626
  return _this;
624
627
  }
625
628
 
package/lib/core/Renderer/index.js CHANGED
@@ -58,7 +58,8 @@ var setDesignConfig = function setDesignConfig(props) {
58
58
 
59
59
 
60
60
  var Renderer = function Renderer(props) {
61
- var pageData = props.pageData; // console.log('pageData: ', pageData);
61
+ var pageData = props.pageData,
62
+ outputType = props.outputType; // console.log('pageData: ', pageData);
62
63
 
63
64
  setDesignConfig(props);
64
65
  window.magicDesignPageData = pageData;
@@ -102,7 +103,9 @@ var Renderer = function Renderer(props) {
102
103
  }
103
104
 
104
105
  var newInstanceProps = __assign(__assign({}, nodeData), {
105
- nodeData: nodeData
106
+ nodeData: nodeData,
107
+ mode: 'renderer',
108
+ outputType: outputType
106
109
  });
107
110
 
108
111
  return /*#__PURE__*/_react["default"].createElement("div", {
package/lib/meta-comp/components/Text/index.js CHANGED
@@ -319,7 +319,8 @@ function (_super) {
319
319
  node.appendChild(closeNode);
320
320
  };
321
321
 
322
- _this.renderText = function (data) {
322
+ _this.renderText = function (data, mode) {
323
+ var outputType = _this.props.outputType || window.magicDesign.outputType;
323
324
  if (!_this.textRef.current) return;
324
325
 
325
326
  _this.textRef.current.blur();
@@ -332,23 +333,57 @@ function (_super) {
332
333
  /** 渲染html */
333
334
 
334
335
  if (data.specialContent.length == 0) {
335
- _this.textRef.current.innerHTML = data.text;
336
+ if (outputType == 'html' && mode == 'renderer') {
337
+ if (data.content.clickUrl) {
338
+ var a = document.createElement('a');
339
+ a.href = data.content.clickUrl;
340
+ a.target = '_blank';
341
+ a.innerHTML = data.text;
342
+ _this.textRef.current.innerHTML = '';
343
+
344
+ _this.textRef.current.appendChild(a);
345
+ } else {
346
+ _this.textRef.current.innerHTML = data.text;
347
+ }
348
+ } else {
349
+ _this.textRef.current.innerHTML = data.text;
350
+ }
336
351
  } else {
337
352
  _this.textRef.current.innerHTML = '';
338
353
  data.specialContent.forEach(function (c, index) {
339
- var _a;
354
+ var _a, _b, _c;
340
355
 
341
356
  var node = document.createElement('span');
342
357
  node.style = (0, _commonUtil.styleStringify)(contentStyle(c.content));
343
- node.innerText = (_a = data.text).slice.apply(_a, c.range);
344
358
 
345
- node.onclick = function (e) {
346
- if (c.content.clickUrl) {
347
- e.stopPropagation();
348
- }
359
+ if (c.content.clickUrl) {
360
+ if (outputType == 'html' && mode == 'renderer') {
361
+ var a = document.createElement('a');
362
+ a.href = c.content.clickUrl;
363
+ a.target = '_blank';
364
+
365
+ if (mode == 'designer') {
366
+ a.onclick = function (e) {
367
+ e.preventDefault();
368
+ };
369
+ }
349
370
 
350
- (0, _coreUtil.clickUrl)(c.content.clickUrl);
351
- };
371
+ a.innerText = (_a = data.text).slice.apply(_a, c.range);
372
+ node.appendChild(a);
373
+ } else {
374
+ node.innerText = (_b = data.text).slice.apply(_b, c.range);
375
+
376
+ node.onclick = function (e) {
377
+ if (c.content.clickUrl) {
378
+ e.stopPropagation();
379
+ }
380
+
381
+ (0, _coreUtil.clickUrl)(c.content.clickUrl);
382
+ };
383
+ }
384
+ } else {
385
+ node.innerText = (_c = data.text).slice.apply(_c, c.range);
386
+ }
352
387
 
353
388
  _this.selectionRefMap[JSON.stringify(c.range)] = node;
354
389
 
@@ -402,14 +437,14 @@ function (_super) {
402
437
  Text.prototype.componentDidMount = function () {
403
438
  var _this = this;
404
439
 
405
- this.renderText(this.props.data);
440
+ this.renderText(this.props.data, this.props.mode);
406
441
  initSelectionEvent();
407
442
  appendSelectionTarget({
408
443
  target: this.textRef.current,
409
444
  data: this.props.data,
410
445
  selectionRefMap: this.selectionRefMap,
411
446
  refresh: function refresh() {
412
- _this.renderText(_this.props.data);
447
+ _this.renderText(_this.props.data, _this.props.mode);
413
448
  }
414
449
  });
415
450
  };
@@ -421,7 +456,7 @@ function (_super) {
421
456
  var result = should1 || should2 || should3;
422
457
 
423
458
  if (result) {
424
- this.renderText(nextProps.data);
459
+ this.renderText(nextProps.data, this.props.mode);
425
460
  }
426
461
 
427
462
  return result;
package/lib/utils/coreUtil.js CHANGED
@@ -289,7 +289,7 @@ var getCoupon = function getCoupon(couponId) {
289
289
  var clickUrl = function clickUrl(url) {
290
290
  console.log('url', url);
291
291
 
292
- if (window.magicDesign.readOnly || window.magicDesign.mode !== 'renderer' || !url) {
292
+ if (window.magicDesign.readOnly || window.magicDesign.mode !== 'renderer' || !url || window.magicDesign.outputType == 'html') {
293
293
  return;
294
294
  }
295
295
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@fonixtree/magic-design",
3
3
  "author": "Cylon Team",
4
- "version": "0.0.138",
4
+ "version": "0.0.141",
5
5
  "description": "Magic Design",
6
6
  "license": "MIT",
7
7
  "module": "es/index.js",