@fonixtree/magic-design 2.0.9 → 2.0.10

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.
@@ -0,0 +1,6 @@
1
+ <svg width="96" height="68" viewBox="0 0 96 68" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <rect x="1" y="1" width="94" height="66" rx="8" fill="#F5F6F7" stroke="#D2D9E5"/>
3
+ <path d="M53.0322 29H84.0322" stroke="#D2D9E5" stroke-width="4" stroke-linecap="round"/>
4
+ <path d="M53.0322 39H79.0322" stroke="#D2D9E5" stroke-width="4" stroke-linecap="round"/>
5
+ <rect x="11.0322" y="11" width="36" height="46" rx="2" fill="#D2D9E5"/>
6
+ </svg>
@@ -0,0 +1,6 @@
1
+ <svg width="96" height="68" viewBox="0 0 96 68" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <rect x="1" y="1" width="94" height="66" rx="8" fill="#F5F6F7" stroke="#D2D9E5"/>
3
+ <path d="M11 29H42" stroke="#D2D9E5" stroke-width="4" stroke-linecap="round"/>
4
+ <path d="M11 39H37" stroke="#D2D9E5" stroke-width="4" stroke-linecap="round"/>
5
+ <rect x="48" y="11" width="36" height="46" rx="2" fill="#D2D9E5"/>
6
+ </svg>
@@ -111,12 +111,24 @@ function (_super) {
111
111
  _this.getCardStyle = function (source, i) {
112
112
  var data = _this.props.data;
113
113
  var cardStyle = {
114
- width: _this.calcWidth(data.customize.pcRowNum),
115
- marginRight: (1 + i) % data.customize.pcRowNum !== 0 ? '2%' : 0,
116
114
  alignItems: _AlignSelector.alignItemMap[data.customize.align],
117
115
  textAlign: data.customize.align
118
116
  };
117
+
118
+ if (data.customize.layout.pcLayout === 'leftImage' || data.customize.layout.pcLayout === 'rightImage') {
119
+ if ((data === null || data === void 0 ? void 0 : data.groupSource.length) > 1 && i != (data === null || data === void 0 ? void 0 : data.groupSource.length) - 1) {
120
+ cardStyle.marginBottom = 48;
121
+ }
122
+
123
+ cardStyle.alignItems = 'center';
124
+ } else {
125
+ cardStyle.marginRight = (1 + i) % data.customize.pcRowNum !== 0 ? '2%' : 0;
126
+ cardStyle.width = _this.calcWidth(data.customize.pcRowNum);
127
+ cardStyle.alignItems = _AlignSelector.alignItemMap[data.customize.align];
128
+ }
129
+
119
130
  var wrapStyle = (0, _businessUtil.computeStyle)(source, window.magicDesign.device);
131
+ console.log('cc wrapStyle', source, wrapStyle);
120
132
  var hoverIndex = _this.state.hoverIndex;
121
133
  var hoverStyle = {};
122
134
 
@@ -127,6 +139,86 @@ function (_super) {
127
139
  return __assign(__assign(__assign({}, cardStyle), wrapStyle), hoverStyle);
128
140
  };
129
141
 
142
+ _this.getContentStyle = function () {
143
+ var data = _this.props.data;
144
+ return {
145
+ alignItems: _AlignSelector.alignItemMap[data.customize.align]
146
+ };
147
+ };
148
+
149
+ _this.getAnotherLayout = function () {
150
+ var data = _this.props.data;
151
+ var hoverIndex = _this.state.hoverIndex;
152
+ var GAData = (0, _commonUtil.getGAData)(data);
153
+ console.log('ff--image text', data);
154
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (data === null || data === void 0 ? void 0 : data.groupSource.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
155
+ className: "group-wrap"
156
+ }, data.groupSource.map(function (source, i) {
157
+ return /*#__PURE__*/_react["default"].createElement("div", {
158
+ key: source.id,
159
+ className: "one-card",
160
+ onMouseEnter: function onMouseEnter() {
161
+ if (source.hover.open) {
162
+ _this.setState({
163
+ hoverIndex: i
164
+ });
165
+ }
166
+ },
167
+ onMouseLeave: function onMouseLeave() {
168
+ _this.setState({
169
+ hoverIndex: -1
170
+ });
171
+ },
172
+ style: _this.getCardStyle(source, i)
173
+ }, (source.image.open && hoverIndex != i || hoverIndex == i && source.hover.image.open) && /*#__PURE__*/_react["default"].createElement("div", {
174
+ className: "card-image-wrap"
175
+ }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
176
+ className: "card-image",
177
+ data: hoverIndex == i ? source.hover.image : source.image,
178
+ GAData: __assign(__assign({}, GAData), {
179
+ groupId: source.id,
180
+ groupName: (0, _ConfigPanel.getSecondConfigName)(data, source.id)
181
+ }),
182
+ maxWidth: 654,
183
+ minWidth: 300,
184
+ scale: 0.5
185
+ })), /*#__PURE__*/_react["default"].createElement("div", {
186
+ className: "content-wrap",
187
+ style: _this.getContentStyle()
188
+ }, (source.title.open && hoverIndex != i || hoverIndex == i && source.hover.title.open) && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
189
+ className: "card-title",
190
+ data: hoverIndex == i ? source.hover.title : source.title,
191
+ GAData: __assign(__assign({}, GAData), {
192
+ groupId: source.id,
193
+ groupName: (0, _ConfigPanel.getSecondConfigName)(data, source.id)
194
+ })
195
+ }), (source.text.open && hoverIndex != i || hoverIndex == i && source.hover.text.open) && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
196
+ className: "card-text",
197
+ data: hoverIndex == i ? source.hover.text : source.text,
198
+ GAData: __assign(__assign({}, GAData), {
199
+ groupId: source.id,
200
+ groupName: (0, _ConfigPanel.getSecondConfigName)(data, source.id)
201
+ })
202
+ }), /*#__PURE__*/_react["default"].createElement("div", {
203
+ className: "card-btn-wrap"
204
+ }, (source.button.open && hoverIndex != i || source.hover.button.open && hoverIndex == i) && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
205
+ className: "card-first-btn",
206
+ data: hoverIndex == i ? source.hover.button : source.button,
207
+ GAData: __assign(__assign({}, GAData), {
208
+ groupId: source.id,
209
+ groupName: (0, _ConfigPanel.getSecondConfigName)(data, source.id)
210
+ })
211
+ }), (source.secondButton.open && hoverIndex != i || source.hover.secondButton.open && hoverIndex == i) && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
212
+ className: "card-second-btn",
213
+ data: hoverIndex == i ? source.hover.secondButton : source.secondButton,
214
+ GAData: __assign(__assign({}, GAData), {
215
+ groupId: source.id,
216
+ groupName: (0, _ConfigPanel.getSecondConfigName)(data, source.id)
217
+ })
218
+ }))));
219
+ })));
220
+ };
221
+
130
222
  return _this;
131
223
  }
132
224
 
@@ -163,7 +255,7 @@ function (_super) {
163
255
  return /*#__PURE__*/_react["default"].createElement("div", {
164
256
  className: (0, _classnames["default"])('image-text-pc', data.customize.layout.pcLayout),
165
257
  style: wrapStyle
166
- }, (data === null || data === void 0 ? void 0 : data.groupSource.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
258
+ }, data.customize.layout.pcLayout === 'leftImage' || data.customize.layout.pcLayout === 'rightImage' ? this.getAnotherLayout() : (data === null || data === void 0 ? void 0 : data.groupSource.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
167
259
  className: "group-wrap"
168
260
  }, data.groupSource.map(function (source, i) {
169
261
  return /*#__PURE__*/_react["default"].createElement("div", {
@@ -116,3 +116,35 @@
116
116
  }
117
117
  }
118
118
  }
119
+
120
+
121
+ .leftImage .group-wrap .one-card {
122
+ flex-direction: row;
123
+ .card-image-wrap .card-image {
124
+ margin: 0 32px 0 0;
125
+ }
126
+ }
127
+ .rightImage .group-wrap .one-card {
128
+ flex-direction: row-reverse;
129
+ .card-image-wrap .card-image {
130
+ margin: 0 0 0 32px;
131
+ }
132
+ }
133
+
134
+ .leftImage, .rightImage {
135
+ padding: 48px 108px;
136
+ .group-wrap {
137
+ flex-direction: column;
138
+ .one-card {
139
+ // flex-direction: row;
140
+ .card-image-wrap {
141
+ width: fit-content;
142
+ }
143
+ .content-wrap {
144
+ flex: 1;
145
+ display: flex;
146
+ flex-direction: column;
147
+ }
148
+ }
149
+ }
150
+ }
@@ -37,6 +37,10 @@ var _layoutImagetextP2 = _interopRequireDefault(require("../assets/images/layout
37
37
 
38
38
  var _layoutImagetextP3 = _interopRequireDefault(require("../assets/images/layout-icon/layout-imagetext-p4.png"));
39
39
 
40
+ var _imageTextLeft = _interopRequireDefault(require("../assets/images/layout-icon/imageTextLeft.svg"));
41
+
42
+ var _imageTextRight = _interopRequireDefault(require("../assets/images/layout-icon/imageTextRight.svg"));
43
+
40
44
  var _newsletter = _interopRequireDefault(require("../assets/images/layout-icon/newsletter.svg"));
41
45
 
42
46
  var _layoutRecommend = _interopRequireDefault(require("../assets/images/layout-icon/layout-recommend-1.png"));
@@ -128,6 +132,14 @@ var imageTextLayoutPc = [{
128
132
  id: 'layout3',
129
133
  name: 'center',
130
134
  image: _layoutImagetextP3["default"]
135
+ }, {
136
+ id: 'layout4',
137
+ name: 'leftImage',
138
+ image: _imageTextLeft["default"]
139
+ }, {
140
+ id: 'layout5',
141
+ name: 'rightImage',
142
+ image: _imageTextRight["default"]
131
143
  }];
132
144
  exports.imageTextLayoutPc = imageTextLayoutPc;
133
145
  var imageTextLayoutMobile = [{
@@ -6,10 +6,7 @@
6
6
  min-height: 100%;
7
7
  background-color: #FFF;
8
8
  border-radius: 4px;
9
- ::-webkit-scrollbar {
10
- width: 0;
11
- height: 0;
12
- }
9
+
13
10
  .history_header {
14
11
  font-size: 14px;
15
12
  display: flex;
@@ -1,4 +1,8 @@
1
1
  .generate_drawer {
2
+ ::-webkit-scrollbar {
3
+ width: 0;
4
+ height: 0;
5
+ }
2
6
  .dialog_head {
3
7
  display: flex;
4
8
  align-items: center;
@@ -0,0 +1,6 @@
1
+ <svg width="96" height="68" viewBox="0 0 96 68" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <rect x="1" y="1" width="94" height="66" rx="8" fill="#F5F6F7" stroke="#D2D9E5"/>
3
+ <path d="M53.0322 29H84.0322" stroke="#D2D9E5" stroke-width="4" stroke-linecap="round"/>
4
+ <path d="M53.0322 39H79.0322" stroke="#D2D9E5" stroke-width="4" stroke-linecap="round"/>
5
+ <rect x="11.0322" y="11" width="36" height="46" rx="2" fill="#D2D9E5"/>
6
+ </svg>
@@ -0,0 +1,6 @@
1
+ <svg width="96" height="68" viewBox="0 0 96 68" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <rect x="1" y="1" width="94" height="66" rx="8" fill="#F5F6F7" stroke="#D2D9E5"/>
3
+ <path d="M11 29H42" stroke="#D2D9E5" stroke-width="4" stroke-linecap="round"/>
4
+ <path d="M11 39H37" stroke="#D2D9E5" stroke-width="4" stroke-linecap="round"/>
5
+ <rect x="48" y="11" width="36" height="46" rx="2" fill="#D2D9E5"/>
6
+ </svg>
@@ -111,12 +111,24 @@ function (_super) {
111
111
  _this.getCardStyle = function (source, i) {
112
112
  var data = _this.props.data;
113
113
  var cardStyle = {
114
- width: _this.calcWidth(data.customize.pcRowNum),
115
- marginRight: (1 + i) % data.customize.pcRowNum !== 0 ? '2%' : 0,
116
114
  alignItems: _AlignSelector.alignItemMap[data.customize.align],
117
115
  textAlign: data.customize.align
118
116
  };
117
+
118
+ if (data.customize.layout.pcLayout === 'leftImage' || data.customize.layout.pcLayout === 'rightImage') {
119
+ if ((data === null || data === void 0 ? void 0 : data.groupSource.length) > 1 && i != (data === null || data === void 0 ? void 0 : data.groupSource.length) - 1) {
120
+ cardStyle.marginBottom = 48;
121
+ }
122
+
123
+ cardStyle.alignItems = 'center';
124
+ } else {
125
+ cardStyle.marginRight = (1 + i) % data.customize.pcRowNum !== 0 ? '2%' : 0;
126
+ cardStyle.width = _this.calcWidth(data.customize.pcRowNum);
127
+ cardStyle.alignItems = _AlignSelector.alignItemMap[data.customize.align];
128
+ }
129
+
119
130
  var wrapStyle = (0, _businessUtil.computeStyle)(source, window.magicDesign.device);
131
+ console.log('cc wrapStyle', source, wrapStyle);
120
132
  var hoverIndex = _this.state.hoverIndex;
121
133
  var hoverStyle = {};
122
134
 
@@ -127,6 +139,86 @@ function (_super) {
127
139
  return __assign(__assign(__assign({}, cardStyle), wrapStyle), hoverStyle);
128
140
  };
129
141
 
142
+ _this.getContentStyle = function () {
143
+ var data = _this.props.data;
144
+ return {
145
+ alignItems: _AlignSelector.alignItemMap[data.customize.align]
146
+ };
147
+ };
148
+
149
+ _this.getAnotherLayout = function () {
150
+ var data = _this.props.data;
151
+ var hoverIndex = _this.state.hoverIndex;
152
+ var GAData = (0, _commonUtil.getGAData)(data);
153
+ console.log('ff--image text', data);
154
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (data === null || data === void 0 ? void 0 : data.groupSource.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
155
+ className: "group-wrap"
156
+ }, data.groupSource.map(function (source, i) {
157
+ return /*#__PURE__*/_react["default"].createElement("div", {
158
+ key: source.id,
159
+ className: "one-card",
160
+ onMouseEnter: function onMouseEnter() {
161
+ if (source.hover.open) {
162
+ _this.setState({
163
+ hoverIndex: i
164
+ });
165
+ }
166
+ },
167
+ onMouseLeave: function onMouseLeave() {
168
+ _this.setState({
169
+ hoverIndex: -1
170
+ });
171
+ },
172
+ style: _this.getCardStyle(source, i)
173
+ }, (source.image.open && hoverIndex != i || hoverIndex == i && source.hover.image.open) && /*#__PURE__*/_react["default"].createElement("div", {
174
+ className: "card-image-wrap"
175
+ }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
176
+ className: "card-image",
177
+ data: hoverIndex == i ? source.hover.image : source.image,
178
+ GAData: __assign(__assign({}, GAData), {
179
+ groupId: source.id,
180
+ groupName: (0, _ConfigPanel.getSecondConfigName)(data, source.id)
181
+ }),
182
+ maxWidth: 654,
183
+ minWidth: 300,
184
+ scale: 0.5
185
+ })), /*#__PURE__*/_react["default"].createElement("div", {
186
+ className: "content-wrap",
187
+ style: _this.getContentStyle()
188
+ }, (source.title.open && hoverIndex != i || hoverIndex == i && source.hover.title.open) && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
189
+ className: "card-title",
190
+ data: hoverIndex == i ? source.hover.title : source.title,
191
+ GAData: __assign(__assign({}, GAData), {
192
+ groupId: source.id,
193
+ groupName: (0, _ConfigPanel.getSecondConfigName)(data, source.id)
194
+ })
195
+ }), (source.text.open && hoverIndex != i || hoverIndex == i && source.hover.text.open) && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
196
+ className: "card-text",
197
+ data: hoverIndex == i ? source.hover.text : source.text,
198
+ GAData: __assign(__assign({}, GAData), {
199
+ groupId: source.id,
200
+ groupName: (0, _ConfigPanel.getSecondConfigName)(data, source.id)
201
+ })
202
+ }), /*#__PURE__*/_react["default"].createElement("div", {
203
+ className: "card-btn-wrap"
204
+ }, (source.button.open && hoverIndex != i || source.hover.button.open && hoverIndex == i) && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
205
+ className: "card-first-btn",
206
+ data: hoverIndex == i ? source.hover.button : source.button,
207
+ GAData: __assign(__assign({}, GAData), {
208
+ groupId: source.id,
209
+ groupName: (0, _ConfigPanel.getSecondConfigName)(data, source.id)
210
+ })
211
+ }), (source.secondButton.open && hoverIndex != i || source.hover.secondButton.open && hoverIndex == i) && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
212
+ className: "card-second-btn",
213
+ data: hoverIndex == i ? source.hover.secondButton : source.secondButton,
214
+ GAData: __assign(__assign({}, GAData), {
215
+ groupId: source.id,
216
+ groupName: (0, _ConfigPanel.getSecondConfigName)(data, source.id)
217
+ })
218
+ }))));
219
+ })));
220
+ };
221
+
130
222
  return _this;
131
223
  }
132
224
 
@@ -163,7 +255,7 @@ function (_super) {
163
255
  return /*#__PURE__*/_react["default"].createElement("div", {
164
256
  className: (0, _classnames["default"])('image-text-pc', data.customize.layout.pcLayout),
165
257
  style: wrapStyle
166
- }, (data === null || data === void 0 ? void 0 : data.groupSource.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
258
+ }, data.customize.layout.pcLayout === 'leftImage' || data.customize.layout.pcLayout === 'rightImage' ? this.getAnotherLayout() : (data === null || data === void 0 ? void 0 : data.groupSource.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
167
259
  className: "group-wrap"
168
260
  }, data.groupSource.map(function (source, i) {
169
261
  return /*#__PURE__*/_react["default"].createElement("div", {
@@ -116,3 +116,35 @@
116
116
  }
117
117
  }
118
118
  }
119
+
120
+
121
+ .leftImage .group-wrap .one-card {
122
+ flex-direction: row;
123
+ .card-image-wrap .card-image {
124
+ margin: 0 32px 0 0;
125
+ }
126
+ }
127
+ .rightImage .group-wrap .one-card {
128
+ flex-direction: row-reverse;
129
+ .card-image-wrap .card-image {
130
+ margin: 0 0 0 32px;
131
+ }
132
+ }
133
+
134
+ .leftImage, .rightImage {
135
+ padding: 48px 108px;
136
+ .group-wrap {
137
+ flex-direction: column;
138
+ .one-card {
139
+ // flex-direction: row;
140
+ .card-image-wrap {
141
+ width: fit-content;
142
+ }
143
+ .content-wrap {
144
+ flex: 1;
145
+ display: flex;
146
+ flex-direction: column;
147
+ }
148
+ }
149
+ }
150
+ }
@@ -37,6 +37,10 @@ var _layoutImagetextP2 = _interopRequireDefault(require("../assets/images/layout
37
37
 
38
38
  var _layoutImagetextP3 = _interopRequireDefault(require("../assets/images/layout-icon/layout-imagetext-p4.png"));
39
39
 
40
+ var _imageTextLeft = _interopRequireDefault(require("../assets/images/layout-icon/imageTextLeft.svg"));
41
+
42
+ var _imageTextRight = _interopRequireDefault(require("../assets/images/layout-icon/imageTextRight.svg"));
43
+
40
44
  var _newsletter = _interopRequireDefault(require("../assets/images/layout-icon/newsletter.svg"));
41
45
 
42
46
  var _layoutRecommend = _interopRequireDefault(require("../assets/images/layout-icon/layout-recommend-1.png"));
@@ -128,6 +132,14 @@ var imageTextLayoutPc = [{
128
132
  id: 'layout3',
129
133
  name: 'center',
130
134
  image: _layoutImagetextP3["default"]
135
+ }, {
136
+ id: 'layout4',
137
+ name: 'leftImage',
138
+ image: _imageTextLeft["default"]
139
+ }, {
140
+ id: 'layout5',
141
+ name: 'rightImage',
142
+ image: _imageTextRight["default"]
131
143
  }];
132
144
  exports.imageTextLayoutPc = imageTextLayoutPc;
133
145
  var imageTextLayoutMobile = [{
@@ -6,10 +6,7 @@
6
6
  min-height: 100%;
7
7
  background-color: #FFF;
8
8
  border-radius: 4px;
9
- ::-webkit-scrollbar {
10
- width: 0;
11
- height: 0;
12
- }
9
+
13
10
  .history_header {
14
11
  font-size: 14px;
15
12
  display: flex;
@@ -1,4 +1,8 @@
1
1
  .generate_drawer {
2
+ ::-webkit-scrollbar {
3
+ width: 0;
4
+ height: 0;
5
+ }
2
6
  .dialog_head {
3
7
  display: flex;
4
8
  align-items: center;
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.9",
4
+ "version": "2.0.10",
5
5
  "description": "Magic Design",
6
6
  "license": "MIT",
7
7
  "module": "es/index.js",
Binary file
Binary file