@fonixtree/magic-design 2.0.11 → 2.0.13

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.
@@ -11,6 +11,8 @@ var _defaultJSON = require("./defaultJSON");
11
11
 
12
12
  var _compositeDecorator = _interopRequireDefault(require("../../../../decorator/compositeDecorator"));
13
13
 
14
+ var _coreUtil = require("../../../../utils/coreUtil");
15
+
14
16
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
15
17
 
16
18
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -63,58 +65,66 @@ function (_super) {
63
65
  function CustomCode() {
64
66
  var _this = _super !== null && _super.apply(this, arguments) || this;
65
67
 
66
- _this.htmlTemp = '';
67
-
68
- _this.createHtml = function () {
69
- var nodeData = _this.props.nodeData;
70
- console.log('----nodeData', nodeData);
71
- var htmlCode = window.magicDesign.device === 'pc' ? nodeData.content.pcHtml : nodeData.content.h5Html;
72
- _this.htmlTemp = htmlCode;
73
-
74
- if (document.getElementById('custom-wrap')) {
75
- document.getElementById('custom-wrap').innerHTML = htmlCode;
76
- }
68
+ _this.htmlTemp = ''; // createHtml = () => {
69
+ // const { nodeData } = this.props;
70
+ // const htmlCode = window.magicDesign.device === 'pc' ? nodeData.content.pcHtml : nodeData.content.h5Html;
71
+ // this.htmlTemp = htmlCode;
72
+ // if (document.getElementById('custom-wrap')) {
73
+ // document.getElementById('custom-wrap').innerHTML = htmlCode;
74
+ // }
75
+ // }
76
+
77
+ _this.handleClick = function (e) {
78
+ console.log(e.target.getAttribute('href'));
79
+ (0, _coreUtil.clickUrl)(e.target.getAttribute('href'));
77
80
  };
78
81
 
79
82
  return _this;
80
83
  }
81
84
 
82
85
  CustomCode.prototype.componentDidMount = function () {
83
- this.createHtml();
84
- };
85
-
86
- CustomCode.prototype.componentWillReceiveProps = function (prevProps) {
87
- console.log('111111');
86
+ var _this = this;
88
87
 
89
- if (window.magicDesign.device === 'pc') {
90
- console.log('22222222');
88
+ var aElements = document.querySelectorAll('#custom-wrap a');
89
+ aElements.forEach(function (element) {
90
+ element.addEventListener('click', _this.handleClick);
91
+ });
92
+ };
91
93
 
92
- if (prevProps.nodeData.content.pcHtml != this.props.nodeData.content.pcHtml) {
93
- console.log('4444444');
94
- this.createHtml();
95
- }
96
- } else {
97
- console.log('3333333333', this.htmlTemp, this.props.nodeData.content);
94
+ CustomCode.prototype.componentWillUnmount = function () {
95
+ var _this = this;
96
+
97
+ var aElements = document.querySelectorAll('#custom-wrap a');
98
+ aElements.forEach(function (element) {
99
+ element.removeEventListener('click', _this.handleClick);
100
+ });
101
+ }; // componentWillReceiveProps(prevProps) {
102
+ // console.log('111111');
103
+ // if (window.magicDesign.device === 'pc') {
104
+ // console.log('22222222');
105
+ // if (prevProps.nodeData.content.pcHtml != this.props.nodeData.content.pcHtml) {
106
+ // console.log('4444444');
107
+ // this.createHtml();
108
+ // }
109
+ // } else {
110
+ // console.log('3333333333', this.htmlTemp, this.props.nodeData.content);
111
+ // if (this.htmlTemp != this.props.nodeData.content.h5Html) {
112
+ // console.log('5555555');
113
+ // this.createHtml();
114
+ // }
115
+ // }
116
+ // }
98
117
 
99
- if (this.htmlTemp != this.props.nodeData.content.h5Html) {
100
- console.log('5555555');
101
- this.createHtml();
102
- }
103
- }
104
- };
105
118
 
106
119
  CustomCode.prototype.render = function () {
107
- // const { nodeData } = this.props;
108
- // console.log('----nodeData', nodeData);
109
- return (
110
- /*#__PURE__*/
111
- // <div dangerouslySetInnerHTML={{ __html: window.magicDesign.device === 'pc' ? nodeData.content.pcHtml : nodeData.content.h5Html }} />
112
- _react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
113
- id: "custom-wrap"
114
- }), /*#__PURE__*/_react["default"].createElement("a", {
115
- href: "https://www.baidu.com"
116
- }, "baidu11 "))
117
- );
120
+ var nodeData = this.props.nodeData;
121
+ return /*#__PURE__*/_react["default"].createElement("div", {
122
+ id: "custom-wrap"
123
+ }, /*#__PURE__*/_react["default"].createElement("div", {
124
+ dangerouslySetInnerHTML: {
125
+ __html: window.magicDesign.device === 'pc' ? nodeData.content.pcHtml : nodeData.content.h5Html
126
+ }
127
+ }));
118
128
  };
119
129
 
120
130
  CustomCode.defaultProps = {};
@@ -39,7 +39,7 @@ function History(_a) {
39
39
  var source = _a.source,
40
40
  onClick = _a.onClick,
41
41
  onChange = _a.onChange,
42
- selectIndex = _a.selectIndex;
42
+ selectKey = _a.selectKey;
43
43
 
44
44
  var _b = (0, _react.useState)(false),
45
45
  isEdit = _b[0],
@@ -65,8 +65,12 @@ function History(_a) {
65
65
  var newSource = source.filter(function (src, index) {
66
66
  return !selected.includes(index);
67
67
  });
68
- onChange(newSource.length ? newSource : []);
68
+ var newSelectIndex = newSource.findIndex(function (src) {
69
+ return src.key === selectKey;
70
+ });
71
+ onChange(newSource.length ? newSource : [], newSelectIndex);
69
72
  setIsEdit(false);
73
+ setSelected([]);
70
74
  };
71
75
 
72
76
  var onHisItemClick = function onHisItemClick(index) {
@@ -104,7 +108,7 @@ function History(_a) {
104
108
  }, source.length > 0 && source.map(function (his, index) {
105
109
  return /*#__PURE__*/_react["default"].createElement("div", {
106
110
  className: (0, _classnames["default"])('historyNode', {
107
- active: selectIndex === index
111
+ active: selectKey === his.key
108
112
  }),
109
113
  onClick: function onClick() {
110
114
  return onHisItemClick(index);
@@ -68,5 +68,6 @@
68
68
  margin-top: 10px;
69
69
  color: #FF4141;
70
70
  text-align: center;
71
+ font-size: 14px;
71
72
  }
72
73
  }
@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
11
11
 
12
12
  var _antd = require("antd");
13
13
 
14
+ var _uuid = require("uuid");
15
+
14
16
  var _GenerateSize = _interopRequireDefault(require("./GenerateSize"));
15
17
 
16
18
  var _GenerateArtist = _interopRequireDefault(require("./GenerateArtist"));
@@ -243,12 +245,22 @@ function (_super) {
243
245
 
244
246
  _this.onHisConfigClick = function () {};
245
247
 
246
- _this.historyChange = function (newHis) {
248
+ _this.historyChange = function (newHis, newIndex) {
249
+ if (newIndex === void 0) {
250
+ newIndex = null;
251
+ }
252
+
247
253
  (0, _storeUtil.setSessionStore)(_constants.STORAGE_KEY.FONIXTREE_AI_IMG_HIS, newHis);
248
254
 
249
255
  _this.setState({
250
256
  history: newHis
251
257
  });
258
+
259
+ if (newIndex !== null) {
260
+ _this.setState({
261
+ hisCursor: newIndex
262
+ });
263
+ }
252
264
  };
253
265
 
254
266
  _this.getColumnNum = function (num) {
@@ -338,6 +350,7 @@ function (_super) {
338
350
  case 2:
339
351
  result = _a.sent();
340
352
  history.push({
353
+ key: (0, _uuid.v4)(),
341
354
  images: result.imageList,
342
355
  params: params
343
356
  });
@@ -370,17 +383,17 @@ function (_super) {
370
383
 
371
384
  _this.onRegenerate = function () {
372
385
  return __awaiter(_this, void 0, void 0, function () {
373
- var _a, history, hisCursor, params, result, e_2;
386
+ var _a, history, hisCursor, _b, params, key, result, e_2;
374
387
 
375
- return __generator(this, function (_b) {
376
- switch (_b.label) {
388
+ return __generator(this, function (_c) {
389
+ switch (_c.label) {
377
390
  case 0:
378
391
  _a = this.state, history = _a.history, hisCursor = _a.hisCursor;
379
- params = history[hisCursor].params;
380
- _b.label = 1;
392
+ _b = history[hisCursor], params = _b.params, key = _b.key;
393
+ _c.label = 1;
381
394
 
382
395
  case 1:
383
- _b.trys.push([1, 3,, 4]);
396
+ _c.trys.push([1, 3,, 4]);
384
397
 
385
398
  this.setState({
386
399
  loading: true
@@ -390,8 +403,9 @@ function (_super) {
390
403
  , (0, _commonUtil.commonFetch)('/designer/v1/ai/create-image', params, 'POST')];
391
404
 
392
405
  case 2:
393
- result = _b.sent();
406
+ result = _c.sent();
394
407
  history[hisCursor] = {
408
+ key: key,
395
409
  images: result.imageList,
396
410
  params: params
397
411
  };
@@ -404,7 +418,7 @@ function (_super) {
404
418
  , 4];
405
419
 
406
420
  case 3:
407
- e_2 = _b.sent();
421
+ e_2 = _c.sent();
408
422
  this.setState({
409
423
  loading: false
410
424
  });
@@ -577,14 +591,18 @@ function (_super) {
577
591
  };
578
592
 
579
593
  AiImageGenerator.prototype.render = function () {
580
- var _a;
581
-
582
- var _b = this.state,
583
- loading = _b.loading,
584
- history = _b.history,
585
- hisCursor = _b.hisCursor;
594
+ var _a = this.state,
595
+ loading = _a.loading,
596
+ history = _a.history,
597
+ hisCursor = _a.hisCursor;
586
598
  var visible = this.props.visible;
587
- var images = ((_a = history[hisCursor]) === null || _a === void 0 ? void 0 : _a.images) || [];
599
+
600
+ var _b = history[hisCursor] || {},
601
+ _c = _b.images,
602
+ images = _c === void 0 ? [] : _c,
603
+ _d = _b.key,
604
+ key = _d === void 0 ? '' : _d;
605
+
588
606
  var columnNum = this.getColumnNum(images.length || []);
589
607
  return /*#__PURE__*/_react["default"].createElement(_antd.Drawer, {
590
608
  bodyStyle: {
@@ -699,7 +717,7 @@ function (_super) {
699
717
  }))), /*#__PURE__*/_react["default"].createElement(_History["default"], {
700
718
  onChange: this.historyChange,
701
719
  onClick: this.onHistoryClick,
702
- selectIndex: hisCursor,
720
+ selectKey: key,
703
721
  source: history
704
722
  }))));
705
723
  };
@@ -11,6 +11,8 @@ var _defaultJSON = require("./defaultJSON");
11
11
 
12
12
  var _compositeDecorator = _interopRequireDefault(require("../../../../decorator/compositeDecorator"));
13
13
 
14
+ var _coreUtil = require("../../../../utils/coreUtil");
15
+
14
16
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
15
17
 
16
18
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -63,58 +65,66 @@ function (_super) {
63
65
  function CustomCode() {
64
66
  var _this = _super !== null && _super.apply(this, arguments) || this;
65
67
 
66
- _this.htmlTemp = '';
67
-
68
- _this.createHtml = function () {
69
- var nodeData = _this.props.nodeData;
70
- console.log('----nodeData', nodeData);
71
- var htmlCode = window.magicDesign.device === 'pc' ? nodeData.content.pcHtml : nodeData.content.h5Html;
72
- _this.htmlTemp = htmlCode;
73
-
74
- if (document.getElementById('custom-wrap')) {
75
- document.getElementById('custom-wrap').innerHTML = htmlCode;
76
- }
68
+ _this.htmlTemp = ''; // createHtml = () => {
69
+ // const { nodeData } = this.props;
70
+ // const htmlCode = window.magicDesign.device === 'pc' ? nodeData.content.pcHtml : nodeData.content.h5Html;
71
+ // this.htmlTemp = htmlCode;
72
+ // if (document.getElementById('custom-wrap')) {
73
+ // document.getElementById('custom-wrap').innerHTML = htmlCode;
74
+ // }
75
+ // }
76
+
77
+ _this.handleClick = function (e) {
78
+ console.log(e.target.getAttribute('href'));
79
+ (0, _coreUtil.clickUrl)(e.target.getAttribute('href'));
77
80
  };
78
81
 
79
82
  return _this;
80
83
  }
81
84
 
82
85
  CustomCode.prototype.componentDidMount = function () {
83
- this.createHtml();
84
- };
85
-
86
- CustomCode.prototype.componentWillReceiveProps = function (prevProps) {
87
- console.log('111111');
86
+ var _this = this;
88
87
 
89
- if (window.magicDesign.device === 'pc') {
90
- console.log('22222222');
88
+ var aElements = document.querySelectorAll('#custom-wrap a');
89
+ aElements.forEach(function (element) {
90
+ element.addEventListener('click', _this.handleClick);
91
+ });
92
+ };
91
93
 
92
- if (prevProps.nodeData.content.pcHtml != this.props.nodeData.content.pcHtml) {
93
- console.log('4444444');
94
- this.createHtml();
95
- }
96
- } else {
97
- console.log('3333333333', this.htmlTemp, this.props.nodeData.content);
94
+ CustomCode.prototype.componentWillUnmount = function () {
95
+ var _this = this;
96
+
97
+ var aElements = document.querySelectorAll('#custom-wrap a');
98
+ aElements.forEach(function (element) {
99
+ element.removeEventListener('click', _this.handleClick);
100
+ });
101
+ }; // componentWillReceiveProps(prevProps) {
102
+ // console.log('111111');
103
+ // if (window.magicDesign.device === 'pc') {
104
+ // console.log('22222222');
105
+ // if (prevProps.nodeData.content.pcHtml != this.props.nodeData.content.pcHtml) {
106
+ // console.log('4444444');
107
+ // this.createHtml();
108
+ // }
109
+ // } else {
110
+ // console.log('3333333333', this.htmlTemp, this.props.nodeData.content);
111
+ // if (this.htmlTemp != this.props.nodeData.content.h5Html) {
112
+ // console.log('5555555');
113
+ // this.createHtml();
114
+ // }
115
+ // }
116
+ // }
98
117
 
99
- if (this.htmlTemp != this.props.nodeData.content.h5Html) {
100
- console.log('5555555');
101
- this.createHtml();
102
- }
103
- }
104
- };
105
118
 
106
119
  CustomCode.prototype.render = function () {
107
- // const { nodeData } = this.props;
108
- // console.log('----nodeData', nodeData);
109
- return (
110
- /*#__PURE__*/
111
- // <div dangerouslySetInnerHTML={{ __html: window.magicDesign.device === 'pc' ? nodeData.content.pcHtml : nodeData.content.h5Html }} />
112
- _react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
113
- id: "custom-wrap"
114
- }), /*#__PURE__*/_react["default"].createElement("a", {
115
- href: "https://www.baidu.com"
116
- }, "baidu11 "))
117
- );
120
+ var nodeData = this.props.nodeData;
121
+ return /*#__PURE__*/_react["default"].createElement("div", {
122
+ id: "custom-wrap"
123
+ }, /*#__PURE__*/_react["default"].createElement("div", {
124
+ dangerouslySetInnerHTML: {
125
+ __html: window.magicDesign.device === 'pc' ? nodeData.content.pcHtml : nodeData.content.h5Html
126
+ }
127
+ }));
118
128
  };
119
129
 
120
130
  CustomCode.defaultProps = {};
@@ -39,7 +39,7 @@ function History(_a) {
39
39
  var source = _a.source,
40
40
  onClick = _a.onClick,
41
41
  onChange = _a.onChange,
42
- selectIndex = _a.selectIndex;
42
+ selectKey = _a.selectKey;
43
43
 
44
44
  var _b = (0, _react.useState)(false),
45
45
  isEdit = _b[0],
@@ -65,8 +65,12 @@ function History(_a) {
65
65
  var newSource = source.filter(function (src, index) {
66
66
  return !selected.includes(index);
67
67
  });
68
- onChange(newSource.length ? newSource : []);
68
+ var newSelectIndex = newSource.findIndex(function (src) {
69
+ return src.key === selectKey;
70
+ });
71
+ onChange(newSource.length ? newSource : [], newSelectIndex);
69
72
  setIsEdit(false);
73
+ setSelected([]);
70
74
  };
71
75
 
72
76
  var onHisItemClick = function onHisItemClick(index) {
@@ -104,7 +108,7 @@ function History(_a) {
104
108
  }, source.length > 0 && source.map(function (his, index) {
105
109
  return /*#__PURE__*/_react["default"].createElement("div", {
106
110
  className: (0, _classnames["default"])('historyNode', {
107
- active: selectIndex === index
111
+ active: selectKey === his.key
108
112
  }),
109
113
  onClick: function onClick() {
110
114
  return onHisItemClick(index);
@@ -68,5 +68,6 @@
68
68
  margin-top: 10px;
69
69
  color: #FF4141;
70
70
  text-align: center;
71
+ font-size: 14px;
71
72
  }
72
73
  }
@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
11
11
 
12
12
  var _antd = require("antd");
13
13
 
14
+ var _uuid = require("uuid");
15
+
14
16
  var _GenerateSize = _interopRequireDefault(require("./GenerateSize"));
15
17
 
16
18
  var _GenerateArtist = _interopRequireDefault(require("./GenerateArtist"));
@@ -243,12 +245,22 @@ function (_super) {
243
245
 
244
246
  _this.onHisConfigClick = function () {};
245
247
 
246
- _this.historyChange = function (newHis) {
248
+ _this.historyChange = function (newHis, newIndex) {
249
+ if (newIndex === void 0) {
250
+ newIndex = null;
251
+ }
252
+
247
253
  (0, _storeUtil.setSessionStore)(_constants.STORAGE_KEY.FONIXTREE_AI_IMG_HIS, newHis);
248
254
 
249
255
  _this.setState({
250
256
  history: newHis
251
257
  });
258
+
259
+ if (newIndex !== null) {
260
+ _this.setState({
261
+ hisCursor: newIndex
262
+ });
263
+ }
252
264
  };
253
265
 
254
266
  _this.getColumnNum = function (num) {
@@ -338,6 +350,7 @@ function (_super) {
338
350
  case 2:
339
351
  result = _a.sent();
340
352
  history.push({
353
+ key: (0, _uuid.v4)(),
341
354
  images: result.imageList,
342
355
  params: params
343
356
  });
@@ -370,17 +383,17 @@ function (_super) {
370
383
 
371
384
  _this.onRegenerate = function () {
372
385
  return __awaiter(_this, void 0, void 0, function () {
373
- var _a, history, hisCursor, params, result, e_2;
386
+ var _a, history, hisCursor, _b, params, key, result, e_2;
374
387
 
375
- return __generator(this, function (_b) {
376
- switch (_b.label) {
388
+ return __generator(this, function (_c) {
389
+ switch (_c.label) {
377
390
  case 0:
378
391
  _a = this.state, history = _a.history, hisCursor = _a.hisCursor;
379
- params = history[hisCursor].params;
380
- _b.label = 1;
392
+ _b = history[hisCursor], params = _b.params, key = _b.key;
393
+ _c.label = 1;
381
394
 
382
395
  case 1:
383
- _b.trys.push([1, 3,, 4]);
396
+ _c.trys.push([1, 3,, 4]);
384
397
 
385
398
  this.setState({
386
399
  loading: true
@@ -390,8 +403,9 @@ function (_super) {
390
403
  , (0, _commonUtil.commonFetch)('/designer/v1/ai/create-image', params, 'POST')];
391
404
 
392
405
  case 2:
393
- result = _b.sent();
406
+ result = _c.sent();
394
407
  history[hisCursor] = {
408
+ key: key,
395
409
  images: result.imageList,
396
410
  params: params
397
411
  };
@@ -404,7 +418,7 @@ function (_super) {
404
418
  , 4];
405
419
 
406
420
  case 3:
407
- e_2 = _b.sent();
421
+ e_2 = _c.sent();
408
422
  this.setState({
409
423
  loading: false
410
424
  });
@@ -577,14 +591,18 @@ function (_super) {
577
591
  };
578
592
 
579
593
  AiImageGenerator.prototype.render = function () {
580
- var _a;
581
-
582
- var _b = this.state,
583
- loading = _b.loading,
584
- history = _b.history,
585
- hisCursor = _b.hisCursor;
594
+ var _a = this.state,
595
+ loading = _a.loading,
596
+ history = _a.history,
597
+ hisCursor = _a.hisCursor;
586
598
  var visible = this.props.visible;
587
- var images = ((_a = history[hisCursor]) === null || _a === void 0 ? void 0 : _a.images) || [];
599
+
600
+ var _b = history[hisCursor] || {},
601
+ _c = _b.images,
602
+ images = _c === void 0 ? [] : _c,
603
+ _d = _b.key,
604
+ key = _d === void 0 ? '' : _d;
605
+
588
606
  var columnNum = this.getColumnNum(images.length || []);
589
607
  return /*#__PURE__*/_react["default"].createElement(_antd.Drawer, {
590
608
  bodyStyle: {
@@ -699,7 +717,7 @@ function (_super) {
699
717
  }))), /*#__PURE__*/_react["default"].createElement(_History["default"], {
700
718
  onChange: this.historyChange,
701
719
  onClick: this.onHistoryClick,
702
- selectIndex: hisCursor,
720
+ selectKey: key,
703
721
  source: history
704
722
  }))));
705
723
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@fonixtree/magic-design",
3
3
  "author": "Cylon Team",
4
- "version": "2.0.11",
4
+ "version": "2.0.13",
5
5
  "description": "Magic Design",
6
6
  "license": "MIT",
7
7
  "module": "es/index.js",
Binary file
Binary file