@fonixtree/magic-design 0.0.2 → 0.0.5
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/es/composite-comp/bol/components/Button/defaultJSON.js +4 -0
- package/es/composite-comp/bol/components/Carousel/defaultJSON.js +6 -4
- package/es/composite-comp/bol/components/Carousel/mobile/index.js +9 -6
- package/es/composite-comp/bol/components/Carousel/pc/index.js +1 -5
- package/es/composite-comp/bol/components/ImageText/mobile/index.less +21 -17
- package/es/composite-comp/bol/components/Text/index.less +1 -0
- package/es/composite-comp/bol/config-panels/CarouselConfig/index.js +112 -43
- package/es/composite-comp/bol/second-config-panels/CarouselSecondConfig/index.js +2 -2
- package/es/composite-comp/common/config-panels/CustomizeConfig/index.js +3 -1
- package/es/decorator/compositeDecorator.js +2 -1
- package/es/meta-comp/components/Button/index.js +1 -1
- package/es/meta-comp/components/Text/index.js +3 -0
- package/es/meta-comp/config-panels/ButtonConfig/index.js +4 -0
- package/lib/composite-comp/bol/components/Button/defaultJSON.js +4 -0
- package/lib/composite-comp/bol/components/Carousel/defaultJSON.js +6 -4
- package/lib/composite-comp/bol/components/Carousel/mobile/index.js +9 -6
- package/lib/composite-comp/bol/components/Carousel/pc/index.js +1 -5
- package/lib/composite-comp/bol/components/ImageText/mobile/index.less +21 -17
- package/lib/composite-comp/bol/components/Text/index.less +1 -0
- package/lib/composite-comp/bol/config-panels/CarouselConfig/index.js +112 -43
- package/lib/composite-comp/bol/second-config-panels/CarouselSecondConfig/index.js +2 -2
- package/lib/composite-comp/common/config-panels/CustomizeConfig/index.js +3 -1
- package/lib/decorator/compositeDecorator.js +2 -1
- package/lib/meta-comp/components/Button/index.js +1 -1
- package/lib/meta-comp/components/Text/index.js +3 -0
- package/lib/meta-comp/config-panels/ButtonConfig/index.js +4 -0
- package/package.json +3 -3
|
@@ -11,9 +11,10 @@ var _defaultImg = _interopRequireDefault(require("./imgs/defaultImg.png"));
|
|
|
11
11
|
|
|
12
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
13
13
|
|
|
14
|
-
var imagesGroupSourceJSON = function imagesGroupSourceJSON() {
|
|
14
|
+
var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
|
|
15
15
|
var groupId = (0, _uuid.v4)();
|
|
16
16
|
return {
|
|
17
|
+
compId: compId,
|
|
17
18
|
id: groupId,
|
|
18
19
|
image: {
|
|
19
20
|
parentId: groupId,
|
|
@@ -233,10 +234,11 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON() {
|
|
|
233
234
|
exports.imagesGroupSourceJSON = imagesGroupSourceJSON;
|
|
234
235
|
|
|
235
236
|
var getDefaultJSON = function getDefaultJSON() {
|
|
237
|
+
var compId = (0, _uuid.v4)();
|
|
236
238
|
return {
|
|
237
|
-
id:
|
|
239
|
+
id: compId,
|
|
238
240
|
type: 'CAROUSEL',
|
|
239
|
-
groupSource: [imagesGroupSourceJSON()],
|
|
241
|
+
groupSource: [imagesGroupSourceJSON(compId)],
|
|
240
242
|
setting: {
|
|
241
243
|
// 自动轮播
|
|
242
244
|
autoplay: {
|
|
@@ -277,7 +279,7 @@ var getDefaultJSON = function getDefaultJSON() {
|
|
|
277
279
|
align: 'left',
|
|
278
280
|
rowNum: 1,
|
|
279
281
|
pcRowNum: 1,
|
|
280
|
-
mobileMaxRowNum:
|
|
282
|
+
mobileMaxRowNum: 5,
|
|
281
283
|
pcMaxRowNum: 6
|
|
282
284
|
},
|
|
283
285
|
background: {
|
|
@@ -23,8 +23,6 @@ require("slick-carousel/slick/slick.css");
|
|
|
23
23
|
|
|
24
24
|
require("slick-carousel/slick/slick-theme.css");
|
|
25
25
|
|
|
26
|
-
var _mobx = require("../../../../../mobx");
|
|
27
|
-
|
|
28
26
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
29
27
|
|
|
30
28
|
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); }
|
|
@@ -57,7 +55,7 @@ var __extends = void 0 && (void 0).__extends || function () {
|
|
|
57
55
|
|
|
58
56
|
var MOBILE_IMG_SIZE = [{
|
|
59
57
|
w: 282,
|
|
60
|
-
h:
|
|
58
|
+
h: 212
|
|
61
59
|
}, {
|
|
62
60
|
w: 125,
|
|
63
61
|
h: 102
|
|
@@ -67,6 +65,9 @@ var MOBILE_IMG_SIZE = [{
|
|
|
67
65
|
}, {
|
|
68
66
|
w: 60,
|
|
69
67
|
h: 45
|
|
68
|
+
}, {
|
|
69
|
+
w: 50,
|
|
70
|
+
h: 50
|
|
70
71
|
}];
|
|
71
72
|
|
|
72
73
|
var CarouselMobile =
|
|
@@ -113,6 +114,10 @@ function (_super) {
|
|
|
113
114
|
return _this;
|
|
114
115
|
}
|
|
115
116
|
|
|
117
|
+
CarouselMobile.prototype.componentDidMount = function () {// this.props.store.setState({ CarouselStore: { id: this.props.data.id, layout: this.props.data.customize.layout } });
|
|
118
|
+
// console.log('...', this.props);
|
|
119
|
+
};
|
|
120
|
+
|
|
116
121
|
CarouselMobile.prototype.componentWillReceiveProps = function (nextProps) {
|
|
117
122
|
if (nextProps.data.setting.autoplay.open) {
|
|
118
123
|
this.sliderRef.slickPlay();
|
|
@@ -124,11 +129,9 @@ function (_super) {
|
|
|
124
129
|
CarouselMobile.prototype.render = function () {
|
|
125
130
|
var _this = this;
|
|
126
131
|
|
|
127
|
-
var _a;
|
|
128
|
-
|
|
129
132
|
var data = this.props.data;
|
|
130
133
|
var sliderIndex = this.state.sliderIndex;
|
|
131
|
-
var showText =
|
|
134
|
+
var showText = data.customize.layout === 'layout2';
|
|
132
135
|
var colNum = showText ? 1 : Math.min(data.customize.rowNum, data.groupSource.length);
|
|
133
136
|
var bgStyle = {};
|
|
134
137
|
|
|
@@ -23,8 +23,6 @@ require("slick-carousel/slick/slick.css");
|
|
|
23
23
|
|
|
24
24
|
require("slick-carousel/slick/slick-theme.css");
|
|
25
25
|
|
|
26
|
-
var _mobx = require("../../../../../mobx");
|
|
27
|
-
|
|
28
26
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
29
27
|
|
|
30
28
|
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); }
|
|
@@ -130,11 +128,9 @@ function (_super) {
|
|
|
130
128
|
CarouselPc.prototype.render = function () {
|
|
131
129
|
var _this = this;
|
|
132
130
|
|
|
133
|
-
var _a;
|
|
134
|
-
|
|
135
131
|
var data = this.props.data;
|
|
136
132
|
var sliderIndex = this.state.sliderIndex;
|
|
137
|
-
var showText =
|
|
133
|
+
var showText = data.customize.layout === 'layout2';
|
|
138
134
|
var colNum = showText ? 1 : Math.min(data.customize.pcRowNum, data.groupSource.length);
|
|
139
135
|
var bgStyle = {};
|
|
140
136
|
|
|
@@ -189,34 +189,34 @@
|
|
|
189
189
|
transform: translateX(-50%);
|
|
190
190
|
}
|
|
191
191
|
.one-card {
|
|
192
|
-
width:
|
|
192
|
+
width: calc((100% - 1px)/2);
|
|
193
193
|
position: relative;
|
|
194
194
|
padding: 0 14px 16px;
|
|
195
|
-
&::before
|
|
195
|
+
&::before {
|
|
196
196
|
content: '';
|
|
197
197
|
position: absolute;
|
|
198
198
|
border-radius: 50%;
|
|
199
199
|
background: #2F54EB;
|
|
200
|
-
}
|
|
201
|
-
&::before {
|
|
202
|
-
opacity: 0.2;
|
|
203
200
|
width: 10px;
|
|
204
201
|
height: 10px;
|
|
202
|
+
z-index: 10;
|
|
203
|
+
border: 2px solid #CCE3FF;
|
|
205
204
|
}
|
|
206
|
-
&::
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
205
|
+
// &::before {
|
|
206
|
+
// opacity: 0.2;
|
|
207
|
+
// width: 10px;
|
|
208
|
+
// height: 10px;
|
|
209
|
+
// }
|
|
210
210
|
&:nth-of-type(2n-1) {
|
|
211
211
|
left: 0;
|
|
212
212
|
&::before {
|
|
213
213
|
right: -5px;
|
|
214
214
|
top: 5px;
|
|
215
215
|
}
|
|
216
|
-
&::after {
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
}
|
|
216
|
+
// &::after {
|
|
217
|
+
// right: -3px;
|
|
218
|
+
// top: 7px;
|
|
219
|
+
// }
|
|
220
220
|
.card-content-wrap {
|
|
221
221
|
display: flex;
|
|
222
222
|
flex-direction: column;
|
|
@@ -248,10 +248,10 @@
|
|
|
248
248
|
left: -5px;
|
|
249
249
|
top: 5px;
|
|
250
250
|
}
|
|
251
|
-
&::after {
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
}
|
|
251
|
+
// &::after {
|
|
252
|
+
// left: -3px;
|
|
253
|
+
// top: 7px;
|
|
254
|
+
// }
|
|
255
255
|
.card-content-wrap {
|
|
256
256
|
.card-title, .card-text {
|
|
257
257
|
text-align: left !important;
|
|
@@ -269,9 +269,13 @@
|
|
|
269
269
|
}
|
|
270
270
|
}
|
|
271
271
|
.card-content-wrap {
|
|
272
|
+
.card-title {
|
|
273
|
+
margin-bottom: 10px;
|
|
274
|
+
}
|
|
272
275
|
.image-subtext-wrap {
|
|
273
276
|
display: flex;
|
|
274
277
|
margin-bottom: 20px;
|
|
278
|
+
align-items: center;
|
|
275
279
|
}
|
|
276
280
|
.card-btn-wrap {
|
|
277
281
|
.card-second-btn {
|
|
@@ -3,14 +3,18 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports["default"] =
|
|
6
|
+
exports["default"] = void 0;
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
|
|
10
|
+
var _mobxReact = require("mobx-react");
|
|
11
|
+
|
|
10
12
|
var _CarouselConfigImageGroup = _interopRequireDefault(require("./CarouselConfigImageGroup"));
|
|
11
13
|
|
|
12
14
|
var _CarouselConfigSetting = _interopRequireDefault(require("./CarouselConfigSetting"));
|
|
13
15
|
|
|
16
|
+
var _BaseConfig = _interopRequireDefault(require("../../../../meta-comp/config-panels/BaseConfig"));
|
|
17
|
+
|
|
14
18
|
var _Collapse = _interopRequireDefault(require("../../../../common/Collapse"));
|
|
15
19
|
|
|
16
20
|
var _SpacingConfig = _interopRequireDefault(require("../../../common/config-panels/SpacingConfig"));
|
|
@@ -23,45 +27,110 @@ var _layout = require("../../../../constants/layout");
|
|
|
23
27
|
|
|
24
28
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
25
29
|
|
|
26
|
-
function
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
30
|
+
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); }
|
|
31
|
+
|
|
32
|
+
var __extends = void 0 && (void 0).__extends || function () {
|
|
33
|
+
var _extendStatics = function extendStatics(d, b) {
|
|
34
|
+
_extendStatics = Object.setPrototypeOf || {
|
|
35
|
+
__proto__: []
|
|
36
|
+
} instanceof Array && function (d, b) {
|
|
37
|
+
d.__proto__ = b;
|
|
38
|
+
} || function (d, b) {
|
|
39
|
+
for (var p in b) {
|
|
40
|
+
if (b.hasOwnProperty(p)) d[p] = b[p];
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
return _extendStatics(d, b);
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
return function (d, b) {
|
|
48
|
+
_extendStatics(d, b);
|
|
49
|
+
|
|
50
|
+
function __() {
|
|
51
|
+
this.constructor = d;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
55
|
+
};
|
|
56
|
+
}();
|
|
57
|
+
|
|
58
|
+
var __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
|
|
59
|
+
var c = arguments.length,
|
|
60
|
+
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
|
|
61
|
+
d;
|
|
62
|
+
if ((typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) {
|
|
63
|
+
if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
64
|
+
}
|
|
65
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
var CarouselConfig =
|
|
69
|
+
/** @class */
|
|
70
|
+
function (_super) {
|
|
71
|
+
__extends(CarouselConfig, _super);
|
|
72
|
+
|
|
73
|
+
function CarouselConfig() {
|
|
74
|
+
return _super !== null && _super.apply(this, arguments) || this;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
CarouselConfig.prototype.componentDidMount = function () {
|
|
78
|
+
this.props.store.setState({
|
|
79
|
+
CarouselStore: {
|
|
80
|
+
id: this.props.data.id,
|
|
81
|
+
layout: this.props.data.customize.layout
|
|
82
|
+
}
|
|
83
|
+
});
|
|
84
|
+
this.selfRender();
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
CarouselConfig.prototype.render = function () {
|
|
88
|
+
var data = this.props.data;
|
|
89
|
+
return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
|
|
90
|
+
divider: "bold",
|
|
91
|
+
headerSize: "large",
|
|
92
|
+
source: [{
|
|
93
|
+
key: '1',
|
|
94
|
+
name: 'Image',
|
|
95
|
+
value: /*#__PURE__*/_react["default"].createElement(_CarouselConfigImageGroup["default"], {
|
|
96
|
+
source: data.groupSource
|
|
97
|
+
})
|
|
98
|
+
}, {
|
|
99
|
+
key: '2',
|
|
100
|
+
name: 'Setting',
|
|
101
|
+
value: /*#__PURE__*/_react["default"].createElement(_CarouselConfigSetting["default"], {
|
|
102
|
+
setting: data.setting
|
|
103
|
+
})
|
|
104
|
+
}, {
|
|
105
|
+
key: '3',
|
|
106
|
+
name: 'Spacing',
|
|
107
|
+
value: /*#__PURE__*/_react["default"].createElement(_SpacingConfig["default"], {
|
|
108
|
+
data: data.spacing
|
|
109
|
+
})
|
|
110
|
+
}, {
|
|
111
|
+
key: '4',
|
|
112
|
+
name: 'Customize',
|
|
113
|
+
value: /*#__PURE__*/_react["default"].createElement(_CustomizeConfig["default"], {
|
|
114
|
+
component: "carousel",
|
|
115
|
+
data: data.customize,
|
|
116
|
+
id: data.id,
|
|
117
|
+
isHideAlign: true,
|
|
118
|
+
layoutSource: _layout.carouselLayout
|
|
119
|
+
})
|
|
120
|
+
}, {
|
|
121
|
+
key: '5',
|
|
122
|
+
name: 'Background',
|
|
123
|
+
value: /*#__PURE__*/_react["default"].createElement(_BackgroundConfig["default"], {
|
|
124
|
+
data: data.background
|
|
125
|
+
})
|
|
126
|
+
}],
|
|
127
|
+
type: "triangle"
|
|
128
|
+
}));
|
|
129
|
+
};
|
|
130
|
+
|
|
131
|
+
CarouselConfig = __decorate([(0, _mobxReact.inject)('store'), _mobxReact.observer], CarouselConfig);
|
|
132
|
+
return CarouselConfig;
|
|
133
|
+
}(_BaseConfig["default"]);
|
|
134
|
+
|
|
135
|
+
var _default = CarouselConfig;
|
|
136
|
+
exports["default"] = _default;
|
|
@@ -76,7 +76,7 @@ function (_super) {
|
|
|
76
76
|
}
|
|
77
77
|
|
|
78
78
|
CarouselSecondConfig.prototype.render = function () {
|
|
79
|
-
var _a;
|
|
79
|
+
var _a, _b;
|
|
80
80
|
|
|
81
81
|
var panelProps = this.props.panelProps;
|
|
82
82
|
var textSource = [{
|
|
@@ -121,7 +121,7 @@ function (_super) {
|
|
|
121
121
|
toggleType: 'switch'
|
|
122
122
|
}];
|
|
123
123
|
|
|
124
|
-
var _textSource = ((_a = _mobx.store.CarouselStore) === null || _a === void 0 ? void 0 : _a.layout) === 'layout2' ? textSource : [];
|
|
124
|
+
var _textSource = ((_a = _mobx.store.CarouselStore) === null || _a === void 0 ? void 0 : _a.id) === panelProps.compId && ((_b = _mobx.store.CarouselStore) === null || _b === void 0 ? void 0 : _b.layout) === 'layout2' ? textSource : [];
|
|
125
125
|
|
|
126
126
|
var getConfig = function getConfig() {
|
|
127
127
|
return /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
|
|
@@ -75,7 +75,8 @@ function (_super) {
|
|
|
75
75
|
var _a = _this.props,
|
|
76
76
|
selectedLayoutFun = _a.selectedLayoutFun,
|
|
77
77
|
data = _a.data,
|
|
78
|
-
component = _a.component
|
|
78
|
+
component = _a.component,
|
|
79
|
+
id = _a.id;
|
|
79
80
|
|
|
80
81
|
if (selectedLayoutFun) {
|
|
81
82
|
selectedLayoutFun(v);
|
|
@@ -99,6 +100,7 @@ function (_super) {
|
|
|
99
100
|
|
|
100
101
|
_this.props.store.setState({
|
|
101
102
|
CarouselStore: {
|
|
103
|
+
id: id,
|
|
102
104
|
layout: v
|
|
103
105
|
}
|
|
104
106
|
});
|
|
@@ -79,7 +79,8 @@ function compositeDecorator(WrappedComponent) {
|
|
|
79
79
|
}; // 处理复合组件的选中状态
|
|
80
80
|
|
|
81
81
|
if (window.magicDesign.mode === 'designer') {
|
|
82
|
-
style.border = '1px solid transparent';
|
|
82
|
+
// style.border = '1px solid transparent';
|
|
83
|
+
style.border = 'none';
|
|
83
84
|
|
|
84
85
|
if (_this.props.nodeData.id === _this.state.clickedFloor) {
|
|
85
86
|
style.border = '1px dashed red';
|
|
@@ -11,7 +11,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
11
11
|
|
|
12
12
|
require("./index.less");
|
|
13
13
|
|
|
14
|
-
var _businessUtil = require("
|
|
14
|
+
var _businessUtil = require("../../../utils/businessUtil");
|
|
15
15
|
|
|
16
16
|
var _coreUtil = require("../../../utils/coreUtil");
|
|
17
17
|
|
|
@@ -441,6 +441,9 @@ function (_super) {
|
|
|
441
441
|
onInput: function onInput(e) {
|
|
442
442
|
var text = e.target.textContent;
|
|
443
443
|
data.text = text;
|
|
444
|
+
/** 毁灭吧 累了 */
|
|
445
|
+
|
|
446
|
+
data.specialContent = [];
|
|
444
447
|
/** 主动更新历史数据避免render */
|
|
445
448
|
|
|
446
449
|
_this.preData = JSON.stringify(__assign(__assign({}, JSON.parse(_this.preData)), {
|
|
@@ -11,9 +11,10 @@ var _defaultImg = _interopRequireDefault(require("./imgs/defaultImg.png"));
|
|
|
11
11
|
|
|
12
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
13
13
|
|
|
14
|
-
var imagesGroupSourceJSON = function imagesGroupSourceJSON() {
|
|
14
|
+
var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
|
|
15
15
|
var groupId = (0, _uuid.v4)();
|
|
16
16
|
return {
|
|
17
|
+
compId: compId,
|
|
17
18
|
id: groupId,
|
|
18
19
|
image: {
|
|
19
20
|
parentId: groupId,
|
|
@@ -233,10 +234,11 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON() {
|
|
|
233
234
|
exports.imagesGroupSourceJSON = imagesGroupSourceJSON;
|
|
234
235
|
|
|
235
236
|
var getDefaultJSON = function getDefaultJSON() {
|
|
237
|
+
var compId = (0, _uuid.v4)();
|
|
236
238
|
return {
|
|
237
|
-
id:
|
|
239
|
+
id: compId,
|
|
238
240
|
type: 'CAROUSEL',
|
|
239
|
-
groupSource: [imagesGroupSourceJSON()],
|
|
241
|
+
groupSource: [imagesGroupSourceJSON(compId)],
|
|
240
242
|
setting: {
|
|
241
243
|
// 自动轮播
|
|
242
244
|
autoplay: {
|
|
@@ -277,7 +279,7 @@ var getDefaultJSON = function getDefaultJSON() {
|
|
|
277
279
|
align: 'left',
|
|
278
280
|
rowNum: 1,
|
|
279
281
|
pcRowNum: 1,
|
|
280
|
-
mobileMaxRowNum:
|
|
282
|
+
mobileMaxRowNum: 5,
|
|
281
283
|
pcMaxRowNum: 6
|
|
282
284
|
},
|
|
283
285
|
background: {
|
|
@@ -23,8 +23,6 @@ require("slick-carousel/slick/slick.css");
|
|
|
23
23
|
|
|
24
24
|
require("slick-carousel/slick/slick-theme.css");
|
|
25
25
|
|
|
26
|
-
var _mobx = require("../../../../../mobx");
|
|
27
|
-
|
|
28
26
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
29
27
|
|
|
30
28
|
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); }
|
|
@@ -57,7 +55,7 @@ var __extends = void 0 && (void 0).__extends || function () {
|
|
|
57
55
|
|
|
58
56
|
var MOBILE_IMG_SIZE = [{
|
|
59
57
|
w: 282,
|
|
60
|
-
h:
|
|
58
|
+
h: 212
|
|
61
59
|
}, {
|
|
62
60
|
w: 125,
|
|
63
61
|
h: 102
|
|
@@ -67,6 +65,9 @@ var MOBILE_IMG_SIZE = [{
|
|
|
67
65
|
}, {
|
|
68
66
|
w: 60,
|
|
69
67
|
h: 45
|
|
68
|
+
}, {
|
|
69
|
+
w: 50,
|
|
70
|
+
h: 50
|
|
70
71
|
}];
|
|
71
72
|
|
|
72
73
|
var CarouselMobile =
|
|
@@ -113,6 +114,10 @@ function (_super) {
|
|
|
113
114
|
return _this;
|
|
114
115
|
}
|
|
115
116
|
|
|
117
|
+
CarouselMobile.prototype.componentDidMount = function () {// this.props.store.setState({ CarouselStore: { id: this.props.data.id, layout: this.props.data.customize.layout } });
|
|
118
|
+
// console.log('...', this.props);
|
|
119
|
+
};
|
|
120
|
+
|
|
116
121
|
CarouselMobile.prototype.componentWillReceiveProps = function (nextProps) {
|
|
117
122
|
if (nextProps.data.setting.autoplay.open) {
|
|
118
123
|
this.sliderRef.slickPlay();
|
|
@@ -124,11 +129,9 @@ function (_super) {
|
|
|
124
129
|
CarouselMobile.prototype.render = function () {
|
|
125
130
|
var _this = this;
|
|
126
131
|
|
|
127
|
-
var _a;
|
|
128
|
-
|
|
129
132
|
var data = this.props.data;
|
|
130
133
|
var sliderIndex = this.state.sliderIndex;
|
|
131
|
-
var showText =
|
|
134
|
+
var showText = data.customize.layout === 'layout2';
|
|
132
135
|
var colNum = showText ? 1 : Math.min(data.customize.rowNum, data.groupSource.length);
|
|
133
136
|
var bgStyle = {};
|
|
134
137
|
|
|
@@ -23,8 +23,6 @@ require("slick-carousel/slick/slick.css");
|
|
|
23
23
|
|
|
24
24
|
require("slick-carousel/slick/slick-theme.css");
|
|
25
25
|
|
|
26
|
-
var _mobx = require("../../../../../mobx");
|
|
27
|
-
|
|
28
26
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
29
27
|
|
|
30
28
|
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); }
|
|
@@ -130,11 +128,9 @@ function (_super) {
|
|
|
130
128
|
CarouselPc.prototype.render = function () {
|
|
131
129
|
var _this = this;
|
|
132
130
|
|
|
133
|
-
var _a;
|
|
134
|
-
|
|
135
131
|
var data = this.props.data;
|
|
136
132
|
var sliderIndex = this.state.sliderIndex;
|
|
137
|
-
var showText =
|
|
133
|
+
var showText = data.customize.layout === 'layout2';
|
|
138
134
|
var colNum = showText ? 1 : Math.min(data.customize.pcRowNum, data.groupSource.length);
|
|
139
135
|
var bgStyle = {};
|
|
140
136
|
|
|
@@ -189,34 +189,34 @@
|
|
|
189
189
|
transform: translateX(-50%);
|
|
190
190
|
}
|
|
191
191
|
.one-card {
|
|
192
|
-
width:
|
|
192
|
+
width: calc((100% - 1px)/2);
|
|
193
193
|
position: relative;
|
|
194
194
|
padding: 0 14px 16px;
|
|
195
|
-
&::before
|
|
195
|
+
&::before {
|
|
196
196
|
content: '';
|
|
197
197
|
position: absolute;
|
|
198
198
|
border-radius: 50%;
|
|
199
199
|
background: #2F54EB;
|
|
200
|
-
}
|
|
201
|
-
&::before {
|
|
202
|
-
opacity: 0.2;
|
|
203
200
|
width: 10px;
|
|
204
201
|
height: 10px;
|
|
202
|
+
z-index: 10;
|
|
203
|
+
border: 2px solid #CCE3FF;
|
|
205
204
|
}
|
|
206
|
-
&::
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
205
|
+
// &::before {
|
|
206
|
+
// opacity: 0.2;
|
|
207
|
+
// width: 10px;
|
|
208
|
+
// height: 10px;
|
|
209
|
+
// }
|
|
210
210
|
&:nth-of-type(2n-1) {
|
|
211
211
|
left: 0;
|
|
212
212
|
&::before {
|
|
213
213
|
right: -5px;
|
|
214
214
|
top: 5px;
|
|
215
215
|
}
|
|
216
|
-
&::after {
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
}
|
|
216
|
+
// &::after {
|
|
217
|
+
// right: -3px;
|
|
218
|
+
// top: 7px;
|
|
219
|
+
// }
|
|
220
220
|
.card-content-wrap {
|
|
221
221
|
display: flex;
|
|
222
222
|
flex-direction: column;
|
|
@@ -248,10 +248,10 @@
|
|
|
248
248
|
left: -5px;
|
|
249
249
|
top: 5px;
|
|
250
250
|
}
|
|
251
|
-
&::after {
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
}
|
|
251
|
+
// &::after {
|
|
252
|
+
// left: -3px;
|
|
253
|
+
// top: 7px;
|
|
254
|
+
// }
|
|
255
255
|
.card-content-wrap {
|
|
256
256
|
.card-title, .card-text {
|
|
257
257
|
text-align: left !important;
|
|
@@ -269,9 +269,13 @@
|
|
|
269
269
|
}
|
|
270
270
|
}
|
|
271
271
|
.card-content-wrap {
|
|
272
|
+
.card-title {
|
|
273
|
+
margin-bottom: 10px;
|
|
274
|
+
}
|
|
272
275
|
.image-subtext-wrap {
|
|
273
276
|
display: flex;
|
|
274
277
|
margin-bottom: 20px;
|
|
278
|
+
align-items: center;
|
|
275
279
|
}
|
|
276
280
|
.card-btn-wrap {
|
|
277
281
|
.card-second-btn {
|
|
@@ -3,14 +3,18 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports["default"] =
|
|
6
|
+
exports["default"] = void 0;
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
|
|
10
|
+
var _mobxReact = require("mobx-react");
|
|
11
|
+
|
|
10
12
|
var _CarouselConfigImageGroup = _interopRequireDefault(require("./CarouselConfigImageGroup"));
|
|
11
13
|
|
|
12
14
|
var _CarouselConfigSetting = _interopRequireDefault(require("./CarouselConfigSetting"));
|
|
13
15
|
|
|
16
|
+
var _BaseConfig = _interopRequireDefault(require("../../../../meta-comp/config-panels/BaseConfig"));
|
|
17
|
+
|
|
14
18
|
var _Collapse = _interopRequireDefault(require("../../../../common/Collapse"));
|
|
15
19
|
|
|
16
20
|
var _SpacingConfig = _interopRequireDefault(require("../../../common/config-panels/SpacingConfig"));
|
|
@@ -23,45 +27,110 @@ var _layout = require("../../../../constants/layout");
|
|
|
23
27
|
|
|
24
28
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
25
29
|
|
|
26
|
-
function
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
30
|
+
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); }
|
|
31
|
+
|
|
32
|
+
var __extends = void 0 && (void 0).__extends || function () {
|
|
33
|
+
var _extendStatics = function extendStatics(d, b) {
|
|
34
|
+
_extendStatics = Object.setPrototypeOf || {
|
|
35
|
+
__proto__: []
|
|
36
|
+
} instanceof Array && function (d, b) {
|
|
37
|
+
d.__proto__ = b;
|
|
38
|
+
} || function (d, b) {
|
|
39
|
+
for (var p in b) {
|
|
40
|
+
if (b.hasOwnProperty(p)) d[p] = b[p];
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
return _extendStatics(d, b);
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
return function (d, b) {
|
|
48
|
+
_extendStatics(d, b);
|
|
49
|
+
|
|
50
|
+
function __() {
|
|
51
|
+
this.constructor = d;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
55
|
+
};
|
|
56
|
+
}();
|
|
57
|
+
|
|
58
|
+
var __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
|
|
59
|
+
var c = arguments.length,
|
|
60
|
+
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
|
|
61
|
+
d;
|
|
62
|
+
if ((typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) {
|
|
63
|
+
if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
64
|
+
}
|
|
65
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
var CarouselConfig =
|
|
69
|
+
/** @class */
|
|
70
|
+
function (_super) {
|
|
71
|
+
__extends(CarouselConfig, _super);
|
|
72
|
+
|
|
73
|
+
function CarouselConfig() {
|
|
74
|
+
return _super !== null && _super.apply(this, arguments) || this;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
CarouselConfig.prototype.componentDidMount = function () {
|
|
78
|
+
this.props.store.setState({
|
|
79
|
+
CarouselStore: {
|
|
80
|
+
id: this.props.data.id,
|
|
81
|
+
layout: this.props.data.customize.layout
|
|
82
|
+
}
|
|
83
|
+
});
|
|
84
|
+
this.selfRender();
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
CarouselConfig.prototype.render = function () {
|
|
88
|
+
var data = this.props.data;
|
|
89
|
+
return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
|
|
90
|
+
divider: "bold",
|
|
91
|
+
headerSize: "large",
|
|
92
|
+
source: [{
|
|
93
|
+
key: '1',
|
|
94
|
+
name: 'Image',
|
|
95
|
+
value: /*#__PURE__*/_react["default"].createElement(_CarouselConfigImageGroup["default"], {
|
|
96
|
+
source: data.groupSource
|
|
97
|
+
})
|
|
98
|
+
}, {
|
|
99
|
+
key: '2',
|
|
100
|
+
name: 'Setting',
|
|
101
|
+
value: /*#__PURE__*/_react["default"].createElement(_CarouselConfigSetting["default"], {
|
|
102
|
+
setting: data.setting
|
|
103
|
+
})
|
|
104
|
+
}, {
|
|
105
|
+
key: '3',
|
|
106
|
+
name: 'Spacing',
|
|
107
|
+
value: /*#__PURE__*/_react["default"].createElement(_SpacingConfig["default"], {
|
|
108
|
+
data: data.spacing
|
|
109
|
+
})
|
|
110
|
+
}, {
|
|
111
|
+
key: '4',
|
|
112
|
+
name: 'Customize',
|
|
113
|
+
value: /*#__PURE__*/_react["default"].createElement(_CustomizeConfig["default"], {
|
|
114
|
+
component: "carousel",
|
|
115
|
+
data: data.customize,
|
|
116
|
+
id: data.id,
|
|
117
|
+
isHideAlign: true,
|
|
118
|
+
layoutSource: _layout.carouselLayout
|
|
119
|
+
})
|
|
120
|
+
}, {
|
|
121
|
+
key: '5',
|
|
122
|
+
name: 'Background',
|
|
123
|
+
value: /*#__PURE__*/_react["default"].createElement(_BackgroundConfig["default"], {
|
|
124
|
+
data: data.background
|
|
125
|
+
})
|
|
126
|
+
}],
|
|
127
|
+
type: "triangle"
|
|
128
|
+
}));
|
|
129
|
+
};
|
|
130
|
+
|
|
131
|
+
CarouselConfig = __decorate([(0, _mobxReact.inject)('store'), _mobxReact.observer], CarouselConfig);
|
|
132
|
+
return CarouselConfig;
|
|
133
|
+
}(_BaseConfig["default"]);
|
|
134
|
+
|
|
135
|
+
var _default = CarouselConfig;
|
|
136
|
+
exports["default"] = _default;
|
|
@@ -76,7 +76,7 @@ function (_super) {
|
|
|
76
76
|
}
|
|
77
77
|
|
|
78
78
|
CarouselSecondConfig.prototype.render = function () {
|
|
79
|
-
var _a;
|
|
79
|
+
var _a, _b;
|
|
80
80
|
|
|
81
81
|
var panelProps = this.props.panelProps;
|
|
82
82
|
var textSource = [{
|
|
@@ -121,7 +121,7 @@ function (_super) {
|
|
|
121
121
|
toggleType: 'switch'
|
|
122
122
|
}];
|
|
123
123
|
|
|
124
|
-
var _textSource = ((_a = _mobx.store.CarouselStore) === null || _a === void 0 ? void 0 : _a.layout) === 'layout2' ? textSource : [];
|
|
124
|
+
var _textSource = ((_a = _mobx.store.CarouselStore) === null || _a === void 0 ? void 0 : _a.id) === panelProps.compId && ((_b = _mobx.store.CarouselStore) === null || _b === void 0 ? void 0 : _b.layout) === 'layout2' ? textSource : [];
|
|
125
125
|
|
|
126
126
|
var getConfig = function getConfig() {
|
|
127
127
|
return /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
|
|
@@ -75,7 +75,8 @@ function (_super) {
|
|
|
75
75
|
var _a = _this.props,
|
|
76
76
|
selectedLayoutFun = _a.selectedLayoutFun,
|
|
77
77
|
data = _a.data,
|
|
78
|
-
component = _a.component
|
|
78
|
+
component = _a.component,
|
|
79
|
+
id = _a.id;
|
|
79
80
|
|
|
80
81
|
if (selectedLayoutFun) {
|
|
81
82
|
selectedLayoutFun(v);
|
|
@@ -99,6 +100,7 @@ function (_super) {
|
|
|
99
100
|
|
|
100
101
|
_this.props.store.setState({
|
|
101
102
|
CarouselStore: {
|
|
103
|
+
id: id,
|
|
102
104
|
layout: v
|
|
103
105
|
}
|
|
104
106
|
});
|
|
@@ -79,7 +79,8 @@ function compositeDecorator(WrappedComponent) {
|
|
|
79
79
|
}; // 处理复合组件的选中状态
|
|
80
80
|
|
|
81
81
|
if (window.magicDesign.mode === 'designer') {
|
|
82
|
-
style.border = '1px solid transparent';
|
|
82
|
+
// style.border = '1px solid transparent';
|
|
83
|
+
style.border = 'none';
|
|
83
84
|
|
|
84
85
|
if (_this.props.nodeData.id === _this.state.clickedFloor) {
|
|
85
86
|
style.border = '1px dashed red';
|
|
@@ -11,7 +11,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
11
11
|
|
|
12
12
|
require("./index.less");
|
|
13
13
|
|
|
14
|
-
var _businessUtil = require("
|
|
14
|
+
var _businessUtil = require("../../../utils/businessUtil");
|
|
15
15
|
|
|
16
16
|
var _coreUtil = require("../../../utils/coreUtil");
|
|
17
17
|
|
|
@@ -441,6 +441,9 @@ function (_super) {
|
|
|
441
441
|
onInput: function onInput(e) {
|
|
442
442
|
var text = e.target.textContent;
|
|
443
443
|
data.text = text;
|
|
444
|
+
/** 毁灭吧 累了 */
|
|
445
|
+
|
|
446
|
+
data.specialContent = [];
|
|
444
447
|
/** 主动更新历史数据避免render */
|
|
445
448
|
|
|
446
449
|
_this.preData = JSON.stringify(__assign(__assign({}, JSON.parse(_this.preData)), {
|
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.
|
|
4
|
+
"version": "0.0.5",
|
|
5
5
|
"description": "Magic Design",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"module": "es/index.js",
|
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
"iconfont": "node ./bin/iconfont.js update",
|
|
15
15
|
"export": "rm -rf dist && npx rollup --config ./config/rollup.config.js",
|
|
16
16
|
"compile": "rc-tools run compile --src=src/components --babel-runtime && cp -r ./src/components/assets/fonts ./es/assets&& cp -r ./src/components/assets/fonts ./lib/assets",
|
|
17
|
-
"push:h5": "cp -r ./pub-dist/es ../eshoph5_pto/node_modules/@
|
|
18
|
-
"push:biz": "cp -r ./pub-dist/es ../bizme_pto/node_modules/@
|
|
17
|
+
"push:h5": "cp -r ./pub-dist/es ../eshoph5_pto/node_modules/@fonixtree/magic-design/",
|
|
18
|
+
"push:biz": "cp -r ./pub-dist/es ../bizme_pto/node_modules/@fonixtree/magic-design/"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"antd": "4.20.6",
|