@fonixtree/magic-design 1.0.217 → 1.0.219
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/assets/images/layout-icon/banner-layout1.png +0 -0
- package/es/assets/images/layout-icon/banner-layout2.svg +6 -0
- package/es/assets/images/layout-icon/center.png +0 -0
- package/es/assets/images/layout-icon/grouped-image-layout1.png +0 -0
- package/es/assets/images/layout-icon/left.png +0 -0
- package/es/assets/images/layout-icon/right.png +0 -0
- package/es/common/LinkModal/SelectPicture/imgs/picture-bg.png +0 -0
- package/es/common/LinkModal/SelectPicture/index.js +135 -0
- package/es/common/LinkModal/SelectPicture/index.less +88 -0
- package/es/common/LinkModal/index.js +28 -2
- package/es/common/PictureModal/index.js +37 -0
- package/es/common/PictureModal/index.less +41 -0
- package/es/composite-comp/bol/components/Banner/defaultJSON.js +28 -0
- package/es/composite-comp/bol/components/Banner/pc/components/BannerContent.js +82 -0
- package/es/composite-comp/bol/components/Banner/pc/components/SwiperBannerPc.js +265 -0
- package/es/composite-comp/bol/components/Banner/pc/index.js +43 -14
- package/es/composite-comp/bol/components/Banner/pc/index.less +82 -10
- package/es/composite-comp/bol/config-panels/BannerConfig/index.js +26 -0
- package/es/composite-comp/bol/second-config-panels/BannerSecondConfig/index.js +17 -1
- package/es/composite-comp/dito/components/GroupedImage/defaultJSON.js +150 -0
- package/es/composite-comp/dito/components/GroupedImage/index.js +88 -0
- package/es/composite-comp/dito/components/GroupedImage/pc/index.js +200 -0
- package/es/composite-comp/dito/components/GroupedImage/pc/index.less +55 -0
- package/es/composite-comp/dito/components/Recommend/pc/index.less +2 -0
- package/es/composite-comp/dito/components/SearchBanner/mobile/index.js +6 -3
- package/es/composite-comp/dito/config-panels/GroupedImageConfig/ConfigGroup/index.js +146 -0
- package/es/composite-comp/dito/config-panels/GroupedImageConfig/imgs/defaultImg.png +0 -0
- package/es/composite-comp/dito/config-panels/GroupedImageConfig/index.js +127 -0
- package/es/composite-comp/dito/second-config-panels/GroupedImageSecondConfig/index.js +192 -0
- package/es/constants/component-types.js +9 -3
- package/es/constants/index.js +6 -1
- package/es/constants/layout.js +30 -2
- package/es/core/Renderer/index.js +25 -4
- package/es/locale/en/en.json +1 -0
- package/es/locale/es/es.json +1 -0
- package/es/locale/id/id.json +1 -0
- package/es/mobx/Frame.js +5 -0
- package/es/utils/businessUtil.js +11 -0
- package/es/utils/coreUtil.js +23 -4
- package/es/utils/dataUtil.js +14 -0
- package/lib/assets/images/layout-icon/banner-layout1.png +0 -0
- package/lib/assets/images/layout-icon/banner-layout2.svg +6 -0
- package/lib/assets/images/layout-icon/center.png +0 -0
- package/lib/assets/images/layout-icon/grouped-image-layout1.png +0 -0
- package/lib/assets/images/layout-icon/left.png +0 -0
- package/lib/assets/images/layout-icon/right.png +0 -0
- package/lib/common/LinkModal/SelectPicture/imgs/picture-bg.png +0 -0
- package/lib/common/LinkModal/SelectPicture/index.js +135 -0
- package/lib/common/LinkModal/SelectPicture/index.less +88 -0
- package/lib/common/LinkModal/index.js +28 -2
- package/lib/common/PictureModal/index.js +37 -0
- package/lib/common/PictureModal/index.less +41 -0
- package/lib/composite-comp/bol/components/Banner/defaultJSON.js +28 -0
- package/lib/composite-comp/bol/components/Banner/pc/components/BannerContent.js +82 -0
- package/lib/composite-comp/bol/components/Banner/pc/components/SwiperBannerPc.js +265 -0
- package/lib/composite-comp/bol/components/Banner/pc/index.js +43 -14
- package/lib/composite-comp/bol/components/Banner/pc/index.less +82 -10
- package/lib/composite-comp/bol/config-panels/BannerConfig/index.js +26 -0
- package/lib/composite-comp/bol/second-config-panels/BannerSecondConfig/index.js +17 -1
- package/lib/composite-comp/dito/components/GroupedImage/defaultJSON.js +150 -0
- package/lib/composite-comp/dito/components/GroupedImage/index.js +88 -0
- package/lib/composite-comp/dito/components/GroupedImage/pc/index.js +200 -0
- package/lib/composite-comp/dito/components/GroupedImage/pc/index.less +55 -0
- package/lib/composite-comp/dito/components/Recommend/pc/index.less +2 -0
- package/lib/composite-comp/dito/components/SearchBanner/mobile/index.js +6 -3
- package/lib/composite-comp/dito/config-panels/GroupedImageConfig/ConfigGroup/index.js +146 -0
- package/lib/composite-comp/dito/config-panels/GroupedImageConfig/imgs/defaultImg.png +0 -0
- package/lib/composite-comp/dito/config-panels/GroupedImageConfig/index.js +127 -0
- package/lib/composite-comp/dito/second-config-panels/GroupedImageSecondConfig/index.js +192 -0
- package/lib/constants/component-types.js +9 -3
- package/lib/constants/index.js +6 -1
- package/lib/constants/layout.js +30 -2
- package/lib/core/Renderer/index.js +25 -4
- package/lib/locale/en/en.json +1 -0
- package/lib/locale/es/es.json +1 -0
- package/lib/locale/id/id.json +1 -0
- package/lib/mobx/Frame.js +5 -0
- package/lib/utils/businessUtil.js +11 -0
- package/lib/utils/coreUtil.js +23 -4
- package/lib/utils/dataUtil.js +14 -0
- package/package.json +3 -2
- package/es/utils/pluginsUtil.js +0 -1
- package/lib/utils/pluginsUtil.js +0 -1
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.groupedImageGroupSourceJSON = exports.getDefaultJSON = void 0;
|
|
7
|
+
|
|
8
|
+
var _uuid = require("uuid");
|
|
9
|
+
|
|
10
|
+
var __assign = void 0 && (void 0).__assign || function () {
|
|
11
|
+
__assign = Object.assign || function (t) {
|
|
12
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
13
|
+
s = arguments[i];
|
|
14
|
+
|
|
15
|
+
for (var p in s) {
|
|
16
|
+
if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
return t;
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
return __assign.apply(this, arguments);
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
var createTextMeta = function createTextMeta(parentId, text, color, fontSize, fontWeight) {
|
|
27
|
+
if (color === void 0) {
|
|
28
|
+
color = '#232F46';
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
if (fontSize === void 0) {
|
|
32
|
+
fontSize = 14;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
if (fontWeight === void 0) {
|
|
36
|
+
fontWeight = 400;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
return {
|
|
40
|
+
parentId: parentId,
|
|
41
|
+
id: (0, _uuid.v4)(),
|
|
42
|
+
open: true,
|
|
43
|
+
type: 'TEXT',
|
|
44
|
+
specialContent: [],
|
|
45
|
+
text: text,
|
|
46
|
+
content: {
|
|
47
|
+
sizeType: 'Customize font styles',
|
|
48
|
+
fontFamily: 'Open Sans',
|
|
49
|
+
fontWeight: fontWeight,
|
|
50
|
+
fontSize: fontSize,
|
|
51
|
+
color: color
|
|
52
|
+
},
|
|
53
|
+
underline: {
|
|
54
|
+
open: false,
|
|
55
|
+
textDecorationColor: '',
|
|
56
|
+
textDecorationStyle: 'solid'
|
|
57
|
+
},
|
|
58
|
+
vertical: {}
|
|
59
|
+
};
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
var createImageMeta = function createImageMeta(parentId) {
|
|
63
|
+
return {
|
|
64
|
+
parentId: parentId,
|
|
65
|
+
id: (0, _uuid.v4)(),
|
|
66
|
+
open: true,
|
|
67
|
+
type: 'IMAGE',
|
|
68
|
+
content: {
|
|
69
|
+
h5Name: '',
|
|
70
|
+
pcName: '',
|
|
71
|
+
h5ImgSrc: '',
|
|
72
|
+
pcImgSrc: '',
|
|
73
|
+
clickUrl: ''
|
|
74
|
+
},
|
|
75
|
+
hover: {
|
|
76
|
+
open: false,
|
|
77
|
+
backgroundType: 'enlarge',
|
|
78
|
+
magnification: 1.5,
|
|
79
|
+
pcImgHoverUrl: '',
|
|
80
|
+
h5ImgHoverUrl: ''
|
|
81
|
+
}
|
|
82
|
+
};
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
var groupedImageGroupSourceJSON = function groupedImageGroupSourceJSON(parentId, text) {
|
|
86
|
+
var groupId = (0, _uuid.v4)();
|
|
87
|
+
var baseImage = createImageMeta(groupId);
|
|
88
|
+
var baseGroupName = createTextMeta(groupId, text, '#232F46', 14, 600);
|
|
89
|
+
return {
|
|
90
|
+
id: groupId,
|
|
91
|
+
parentId: parentId,
|
|
92
|
+
image: baseImage,
|
|
93
|
+
groupName: baseGroupName,
|
|
94
|
+
title: createTextMeta(groupId, 'Group Title', '#CE1126', 16, 700),
|
|
95
|
+
image1: createImageMeta(groupId),
|
|
96
|
+
image2: createImageMeta(groupId),
|
|
97
|
+
image3: createImageMeta(groupId),
|
|
98
|
+
image4: createImageMeta(groupId),
|
|
99
|
+
hover: {
|
|
100
|
+
open: true,
|
|
101
|
+
image: __assign(__assign({}, createImageMeta(groupId)), {
|
|
102
|
+
open: false
|
|
103
|
+
}),
|
|
104
|
+
groupName: __assign(__assign({}, createTextMeta(groupId, text, '#CE1126', 14, 600)), {
|
|
105
|
+
open: false
|
|
106
|
+
})
|
|
107
|
+
}
|
|
108
|
+
};
|
|
109
|
+
};
|
|
110
|
+
|
|
111
|
+
exports.groupedImageGroupSourceJSON = groupedImageGroupSourceJSON;
|
|
112
|
+
|
|
113
|
+
var getDefaultJSON = function getDefaultJSON() {
|
|
114
|
+
var groupId = (0, _uuid.v4)();
|
|
115
|
+
return {
|
|
116
|
+
id: groupId,
|
|
117
|
+
type: 'GROUPED_IMAGE',
|
|
118
|
+
groupSource: [groupedImageGroupSourceJSON(groupId, 'Group Name'), groupedImageGroupSourceJSON(groupId, 'Group Name'), groupedImageGroupSourceJSON(groupId, 'Group Name')],
|
|
119
|
+
spacing: {
|
|
120
|
+
pc: {
|
|
121
|
+
paddingTop: 0,
|
|
122
|
+
paddingBottom: 0,
|
|
123
|
+
paddingLeft: 0,
|
|
124
|
+
paddingRight: 0,
|
|
125
|
+
marginBottom: window.magicDesign.compSpacing * 1.5
|
|
126
|
+
},
|
|
127
|
+
mobile: {
|
|
128
|
+
paddingTop: 0,
|
|
129
|
+
paddingBottom: 0,
|
|
130
|
+
paddingLeft: 0,
|
|
131
|
+
paddingRight: 0,
|
|
132
|
+
marginBottom: window.magicDesign.compSpacing
|
|
133
|
+
}
|
|
134
|
+
},
|
|
135
|
+
customize: {
|
|
136
|
+
layout: {
|
|
137
|
+
pcLayout: 'layout1',
|
|
138
|
+
h5Layout: 'layout1'
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
background: {
|
|
142
|
+
opacity: 100,
|
|
143
|
+
color: '#FFFFFF',
|
|
144
|
+
image: '',
|
|
145
|
+
bgType: 'color'
|
|
146
|
+
}
|
|
147
|
+
};
|
|
148
|
+
};
|
|
149
|
+
|
|
150
|
+
exports.getDefaultJSON = getDefaultJSON;
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
10
|
+
var _pc = _interopRequireDefault(require("./pc"));
|
|
11
|
+
|
|
12
|
+
var _defaultJSON = require("./defaultJSON");
|
|
13
|
+
|
|
14
|
+
var _coreUtil = require("../../../../utils/coreUtil");
|
|
15
|
+
|
|
16
|
+
var _compositeDecorator = _interopRequireDefault(require("../../../../decorator/compositeDecorator"));
|
|
17
|
+
|
|
18
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
19
|
+
|
|
20
|
+
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); }
|
|
21
|
+
|
|
22
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
23
|
+
|
|
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); }
|
|
25
|
+
|
|
26
|
+
var __extends = void 0 && (void 0).__extends || function () {
|
|
27
|
+
var _extendStatics = function extendStatics(d, b) {
|
|
28
|
+
_extendStatics = Object.setPrototypeOf || {
|
|
29
|
+
__proto__: []
|
|
30
|
+
} instanceof Array && function (d, b) {
|
|
31
|
+
d.__proto__ = b;
|
|
32
|
+
} || function (d, b) {
|
|
33
|
+
for (var p in b) {
|
|
34
|
+
if (b.hasOwnProperty(p)) d[p] = b[p];
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
return _extendStatics(d, b);
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
return function (d, b) {
|
|
42
|
+
_extendStatics(d, b);
|
|
43
|
+
|
|
44
|
+
function __() {
|
|
45
|
+
this.constructor = d;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
49
|
+
};
|
|
50
|
+
}();
|
|
51
|
+
|
|
52
|
+
var __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
|
|
53
|
+
var c = arguments.length,
|
|
54
|
+
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
|
|
55
|
+
d;
|
|
56
|
+
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--) {
|
|
57
|
+
if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
58
|
+
}
|
|
59
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
var GroupedImage =
|
|
63
|
+
/** @class */
|
|
64
|
+
function (_super) {
|
|
65
|
+
__extends(GroupedImage, _super);
|
|
66
|
+
|
|
67
|
+
function GroupedImage() {
|
|
68
|
+
return _super !== null && _super.apply(this, arguments) || this;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
GroupedImage.prototype.render = function () {
|
|
72
|
+
var nodeData = this.props.nodeData;
|
|
73
|
+
return /*#__PURE__*/_react["default"].createElement("div", null, (0, _coreUtil.isPc)() ? /*#__PURE__*/_react["default"].createElement(_pc["default"], {
|
|
74
|
+
panelProps: nodeData
|
|
75
|
+
}) : null);
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
GroupedImage.defaultProps = {
|
|
79
|
+
nodeData: {}
|
|
80
|
+
};
|
|
81
|
+
GroupedImage.type = 'GROUPED_IMAGE';
|
|
82
|
+
GroupedImage.getDefaultJSON = _defaultJSON.getDefaultJSON;
|
|
83
|
+
GroupedImage = __decorate([_compositeDecorator["default"]], GroupedImage);
|
|
84
|
+
return GroupedImage;
|
|
85
|
+
}(_react.Component);
|
|
86
|
+
|
|
87
|
+
var _default = GroupedImage;
|
|
88
|
+
exports["default"] = _default;
|
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
require("./index.less");
|
|
11
|
+
|
|
12
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
13
|
+
|
|
14
|
+
var _components = require("../../../../../meta-comp/components");
|
|
15
|
+
|
|
16
|
+
var _commonUtil = require("../../../../../utils/commonUtil");
|
|
17
|
+
|
|
18
|
+
var _mobx = require("../../../../../mobx");
|
|
19
|
+
|
|
20
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
21
|
+
|
|
22
|
+
var __extends = void 0 && (void 0).__extends || function () {
|
|
23
|
+
var _extendStatics = function extendStatics(d, b) {
|
|
24
|
+
_extendStatics = Object.setPrototypeOf || {
|
|
25
|
+
__proto__: []
|
|
26
|
+
} instanceof Array && function (d, b) {
|
|
27
|
+
d.__proto__ = b;
|
|
28
|
+
} || function (d, b) {
|
|
29
|
+
for (var p in b) {
|
|
30
|
+
if (b.hasOwnProperty(p)) d[p] = b[p];
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
return _extendStatics(d, b);
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
return function (d, b) {
|
|
38
|
+
_extendStatics(d, b);
|
|
39
|
+
|
|
40
|
+
function __() {
|
|
41
|
+
this.constructor = d;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
45
|
+
};
|
|
46
|
+
}();
|
|
47
|
+
|
|
48
|
+
var GroupedImagePc =
|
|
49
|
+
/** @class */
|
|
50
|
+
function (_super) {
|
|
51
|
+
__extends(GroupedImagePc, _super);
|
|
52
|
+
|
|
53
|
+
function GroupedImagePc() {
|
|
54
|
+
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
55
|
+
|
|
56
|
+
_this.state = {
|
|
57
|
+
tabIndex: 0,
|
|
58
|
+
tabLeft: 0,
|
|
59
|
+
tabWidth: 0,
|
|
60
|
+
groupSource: []
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
_this.initTab = function (index) {
|
|
64
|
+
var selectedTabDom = document.querySelector(".m-grouped-image-pc .tab-select-wrap .tabTitle:nth-child(" + (index + 1) + ")");
|
|
65
|
+
var tabLeft = 0;
|
|
66
|
+
var tabWidth = 0;
|
|
67
|
+
|
|
68
|
+
if (selectedTabDom) {
|
|
69
|
+
tabLeft = selectedTabDom.offsetLeft;
|
|
70
|
+
tabWidth = selectedTabDom.offsetWidth;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
_this.setState({
|
|
74
|
+
tabLeft: tabLeft,
|
|
75
|
+
tabWidth: tabWidth
|
|
76
|
+
});
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
_this.onTabClick = function (e, index) {
|
|
80
|
+
var _a = _this.state,
|
|
81
|
+
tabIndex = _a.tabIndex,
|
|
82
|
+
groupSource = _a.groupSource;
|
|
83
|
+
if (tabIndex === index) return;
|
|
84
|
+
var tab = groupSource[index];
|
|
85
|
+
|
|
86
|
+
_this.setState({
|
|
87
|
+
tabIndex: index
|
|
88
|
+
}, function () {
|
|
89
|
+
_this.initTab(index);
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
if (tab) {
|
|
93
|
+
_mobx.store.setState({
|
|
94
|
+
clickedGroup: tab.id,
|
|
95
|
+
clickedFloor: _mobx.store.getFloorIdByGroupId(tab.id)
|
|
96
|
+
});
|
|
97
|
+
}
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
return _this;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
GroupedImagePc.prototype.componentDidMount = function () {
|
|
104
|
+
var _this = this;
|
|
105
|
+
|
|
106
|
+
var panelProps = this.props.panelProps;
|
|
107
|
+
var source = [];
|
|
108
|
+
panelProps.groupSource.forEach(function (m) {
|
|
109
|
+
var show = m.image.open || m.groupName.open;
|
|
110
|
+
if (show) source.push(m);
|
|
111
|
+
});
|
|
112
|
+
this.setState({
|
|
113
|
+
groupSource: source.length > 0 ? source : panelProps.groupSource
|
|
114
|
+
}, function () {
|
|
115
|
+
_this.initTab(0);
|
|
116
|
+
});
|
|
117
|
+
};
|
|
118
|
+
|
|
119
|
+
GroupedImagePc.prototype.componentWillReceiveProps = function (nextProps) {
|
|
120
|
+
var _this = this;
|
|
121
|
+
|
|
122
|
+
var tabIndex = this.state.tabIndex;
|
|
123
|
+
var panelProps = nextProps.panelProps;
|
|
124
|
+
var source = [];
|
|
125
|
+
panelProps.groupSource.forEach(function (m) {
|
|
126
|
+
var show = m.image.open || m.groupName.open;
|
|
127
|
+
if (show) source.push(m);
|
|
128
|
+
});
|
|
129
|
+
var groupSource = source.length > 0 ? source : panelProps.groupSource;
|
|
130
|
+
this.setState({
|
|
131
|
+
groupSource: groupSource
|
|
132
|
+
}, function () {
|
|
133
|
+
var newTabIndex = tabIndex;
|
|
134
|
+
if (tabIndex >= groupSource.length) newTabIndex = 0;
|
|
135
|
+
|
|
136
|
+
_this.initTab(newTabIndex);
|
|
137
|
+
|
|
138
|
+
_this.setState({
|
|
139
|
+
tabIndex: newTabIndex
|
|
140
|
+
});
|
|
141
|
+
});
|
|
142
|
+
};
|
|
143
|
+
|
|
144
|
+
GroupedImagePc.prototype.render = function () {
|
|
145
|
+
var _this = this;
|
|
146
|
+
|
|
147
|
+
var _a = this.state,
|
|
148
|
+
tabIndex = _a.tabIndex,
|
|
149
|
+
tabLeft = _a.tabLeft,
|
|
150
|
+
tabWidth = _a.tabWidth,
|
|
151
|
+
groupSource = _a.groupSource;
|
|
152
|
+
var current = groupSource[tabIndex] || {};
|
|
153
|
+
|
|
154
|
+
var _image = current.hover && current.hover.open && current.hover.image.open ? current.hover.image : current.image;
|
|
155
|
+
|
|
156
|
+
var _groupName = current.hover && current.hover.open && current.hover.groupName.open ? current.hover.groupName : current.groupName;
|
|
157
|
+
|
|
158
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
159
|
+
className: "m-grouped-image-pc"
|
|
160
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
161
|
+
className: "tab-select-wrap"
|
|
162
|
+
}, groupSource.map(function (tab, index) {
|
|
163
|
+
var useImage = index === tabIndex && tab.hover.open && tab.hover.image.open ? tab.hover.image : tab.image;
|
|
164
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
165
|
+
key: tab.id,
|
|
166
|
+
className: (0, _classnames["default"])('tabTitle'),
|
|
167
|
+
onClick: function onClick(e) {
|
|
168
|
+
return _this.onTabClick(e, index);
|
|
169
|
+
}
|
|
170
|
+
}, tab.image.open && useImage && /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
|
|
171
|
+
data: useImage
|
|
172
|
+
}));
|
|
173
|
+
})), /*#__PURE__*/_react["default"].createElement("div", {
|
|
174
|
+
className: "tab-content"
|
|
175
|
+
}, current.title && current.title.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
|
|
176
|
+
className: "title",
|
|
177
|
+
data: current.title
|
|
178
|
+
}), /*#__PURE__*/_react["default"].createElement("div", {
|
|
179
|
+
className: "image-list"
|
|
180
|
+
}, [current.image1, current.image2, current.image3, current.image4].map(function (img, idx) {
|
|
181
|
+
if (!img || !img.open) return null;
|
|
182
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
183
|
+
key: (0, _commonUtil.ensure)(function () {
|
|
184
|
+
return img.id;
|
|
185
|
+
}, idx),
|
|
186
|
+
className: "image-item"
|
|
187
|
+
}, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
|
|
188
|
+
data: img
|
|
189
|
+
}));
|
|
190
|
+
}))));
|
|
191
|
+
};
|
|
192
|
+
|
|
193
|
+
GroupedImagePc.defaultProps = {
|
|
194
|
+
panelProps: {}
|
|
195
|
+
};
|
|
196
|
+
return GroupedImagePc;
|
|
197
|
+
}(_react["default"].Component);
|
|
198
|
+
|
|
199
|
+
var _default = GroupedImagePc;
|
|
200
|
+
exports["default"] = _default;
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
.m-grouped-image-pc {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
position: relative;
|
|
5
|
+
|
|
6
|
+
.tab-select-wrap {
|
|
7
|
+
display: flex;
|
|
8
|
+
align-items: center;
|
|
9
|
+
height: 50px;
|
|
10
|
+
background: #ffffff;
|
|
11
|
+
overflow: auto;
|
|
12
|
+
position: relative;
|
|
13
|
+
width: fit-content;
|
|
14
|
+
margin: 0 auto 15px;
|
|
15
|
+
|
|
16
|
+
.tabTitle {
|
|
17
|
+
display: flex;
|
|
18
|
+
align-items: center;
|
|
19
|
+
text-align: center;
|
|
20
|
+
padding: 0; // 无缝衔接:去掉左右间距
|
|
21
|
+
width: fit-content;
|
|
22
|
+
height: 100%;
|
|
23
|
+
justify-content: center;
|
|
24
|
+
white-space: nowrap;
|
|
25
|
+
flex-direction: column;
|
|
26
|
+
cursor: pointer;
|
|
27
|
+
|
|
28
|
+
img {
|
|
29
|
+
height: 50px;
|
|
30
|
+
margin-bottom: 2px;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.tab-content {
|
|
36
|
+
.title {
|
|
37
|
+
text-align: center;
|
|
38
|
+
margin-bottom: 16px;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.image-list {
|
|
42
|
+
display: flex;
|
|
43
|
+
flex-direction: row;
|
|
44
|
+
justify-content: center;
|
|
45
|
+
gap: 16px;
|
|
46
|
+
|
|
47
|
+
.image-item {
|
|
48
|
+
flex: 1;
|
|
49
|
+
max-width: 23%;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
|
|
@@ -136,9 +136,12 @@ function (_super) {
|
|
|
136
136
|
if (version === 'v1' || isNeedLogin) {
|
|
137
137
|
if ((0, _commonUtil.checkLogin)(true, url)) {
|
|
138
138
|
(0, _commonUtil.navigateTo)(url);
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
|
|
139
|
+
} // 未登录时,checkLogin已经处理了跳转到登录页的逻辑,登录后会通过redirectUrl自动跳转回来
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
return;
|
|
143
|
+
} else {
|
|
144
|
+
(0, _commonUtil.navigateTo)(url);
|
|
142
145
|
}
|
|
143
146
|
};
|
|
144
147
|
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
var _mobxReact = require("mobx-react");
|
|
11
|
+
|
|
12
|
+
var _defaultImg = _interopRequireDefault(require("../imgs/defaultImg.png"));
|
|
13
|
+
|
|
14
|
+
var _Button = _interopRequireDefault(require("../../../../../common/Button"));
|
|
15
|
+
|
|
16
|
+
var _GroupList = _interopRequireDefault(require("../../../../../common/GroupList"));
|
|
17
|
+
|
|
18
|
+
var _defaultJSON = require("../../../components/GroupedImage/defaultJSON");
|
|
19
|
+
|
|
20
|
+
var _coreUtil = require("../../../../../utils/coreUtil");
|
|
21
|
+
|
|
22
|
+
var _locale = require("../../../../../locale");
|
|
23
|
+
|
|
24
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
25
|
+
|
|
26
|
+
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
|
+
|
|
28
|
+
var __extends = void 0 && (void 0).__extends || function () {
|
|
29
|
+
var _extendStatics = function extendStatics(d, b) {
|
|
30
|
+
_extendStatics = Object.setPrototypeOf || {
|
|
31
|
+
__proto__: []
|
|
32
|
+
} instanceof Array && function (d, b) {
|
|
33
|
+
d.__proto__ = b;
|
|
34
|
+
} || function (d, b) {
|
|
35
|
+
for (var p in b) {
|
|
36
|
+
if (b.hasOwnProperty(p)) d[p] = b[p];
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
return _extendStatics(d, b);
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
return function (d, b) {
|
|
44
|
+
_extendStatics(d, b);
|
|
45
|
+
|
|
46
|
+
function __() {
|
|
47
|
+
this.constructor = d;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
51
|
+
};
|
|
52
|
+
}();
|
|
53
|
+
|
|
54
|
+
var __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
|
|
55
|
+
var c = arguments.length,
|
|
56
|
+
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
|
|
57
|
+
d;
|
|
58
|
+
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--) {
|
|
59
|
+
if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
60
|
+
}
|
|
61
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
var notice = '';
|
|
65
|
+
|
|
66
|
+
var GroupedImageConfigGroup =
|
|
67
|
+
/** @class */
|
|
68
|
+
function (_super) {
|
|
69
|
+
__extends(GroupedImageConfigGroup, _super);
|
|
70
|
+
|
|
71
|
+
function GroupedImageConfigGroup() {
|
|
72
|
+
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
73
|
+
|
|
74
|
+
_this.state = {};
|
|
75
|
+
|
|
76
|
+
_this.onClickItem = function (node) {
|
|
77
|
+
_this.props.store.setState({
|
|
78
|
+
clickedGroup: node.id
|
|
79
|
+
});
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
_this.onAddClick = function () {
|
|
83
|
+
var json = (0, _defaultJSON.groupedImageGroupSourceJSON)(_this.props.id, 'Group Name');
|
|
84
|
+
|
|
85
|
+
_this.props.source.push(json);
|
|
86
|
+
|
|
87
|
+
_this.setState({});
|
|
88
|
+
|
|
89
|
+
(0, _coreUtil.renderPreview)();
|
|
90
|
+
};
|
|
91
|
+
|
|
92
|
+
_this.reRender = function () {
|
|
93
|
+
_this.setState({});
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
return _this;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
GroupedImageConfigGroup.prototype.render = function () {
|
|
100
|
+
var source = this.props.source;
|
|
101
|
+
|
|
102
|
+
var _renderCard = function renderCard(src) {
|
|
103
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
104
|
+
className: "card_wrap"
|
|
105
|
+
}, /*#__PURE__*/_react["default"].createElement("img", {
|
|
106
|
+
alt: "",
|
|
107
|
+
src: ((0, _coreUtil.isPc)() ? src.image.content.pcImgSrc : src.image.content.h5ImgSrc) || _defaultImg["default"]
|
|
108
|
+
}), /*#__PURE__*/_react["default"].createElement("div", {
|
|
109
|
+
className: "name",
|
|
110
|
+
dangerouslySetInnerHTML: {
|
|
111
|
+
__html: src.groupName.text
|
|
112
|
+
}
|
|
113
|
+
}));
|
|
114
|
+
};
|
|
115
|
+
|
|
116
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
117
|
+
className: "group_wrap"
|
|
118
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
119
|
+
className: "node_list"
|
|
120
|
+
}, source.length === 0 ? /*#__PURE__*/_react["default"].createElement("span", {
|
|
121
|
+
className: "notice"
|
|
122
|
+
}, notice) : /*#__PURE__*/_react["default"].createElement(_GroupList["default"], {
|
|
123
|
+
onClickItem: this.onClickItem,
|
|
124
|
+
renderCard: function renderCard(v) {
|
|
125
|
+
return _renderCard(v);
|
|
126
|
+
},
|
|
127
|
+
reRender: this.reRender,
|
|
128
|
+
source: source
|
|
129
|
+
})), /*#__PURE__*/_react["default"].createElement("div", {
|
|
130
|
+
className: "btn_wrap"
|
|
131
|
+
}, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
132
|
+
icon: "icon-add",
|
|
133
|
+
onClick: this.onAddClick,
|
|
134
|
+
type: "primary"
|
|
135
|
+
}, (0, _locale.i18n)('ADD_GROUP'))));
|
|
136
|
+
};
|
|
137
|
+
|
|
138
|
+
GroupedImageConfigGroup.defaultProps = {
|
|
139
|
+
source: []
|
|
140
|
+
};
|
|
141
|
+
GroupedImageConfigGroup = __decorate([(0, _mobxReact.inject)('store'), _mobxReact.observer], GroupedImageConfigGroup);
|
|
142
|
+
return GroupedImageConfigGroup;
|
|
143
|
+
}(_react["default"].Component);
|
|
144
|
+
|
|
145
|
+
var _default = GroupedImageConfigGroup;
|
|
146
|
+
exports["default"] = _default;
|