@zzdadelu/schema-builder 1.0.0-alpha.9 → 1.0.0-alpha.90
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/createIframe.js +1 -1
- package/es/main.js +105 -22
- package/lib/createIframe.js +1 -1
- package/lib/main.js +104 -21
- package/package.json +1 -1
package/es/createIframe.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
var createIframeContent = function createIframeContent() {
|
|
2
|
-
var html = "\n <html>\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" />\n <title>XRender</title>\n <link rel=\"icon\" href=\"https://img.alicdn.com/tfs/TB17UtINiLaK1RjSZFxXXamPFXa-606-643.png\">\n <link href=\"https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light@0.2.1/variables.css\" rel=\"stylesheet\" />\n <link href=\"https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light@0.2.1/dist/next.var.min.css\" rel=\"stylesheet\" />\n <link rel=\"stylesheet\" href=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.2.3/dist/css/engine-core.css\" />\n <link rel=\"stylesheet\" href=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.6/dist/css/engine-ext.css\" />\n <link rel=\"stylesheet\" href=\"https://g.alicdn.com/fone-lowcode/fr-generator/1.1.0/css/index.css\" />\n\n <script>\n window.React = window.parent.React;\n window.ReactDOM = window.parent.ReactDOM;\n </script>\n \n <script src=\"https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js\"></script>\n <script src=\"https://g.alicdn.com/platform/c/react15-polyfill/0.0.1/dist/index.js\"></script>\n <script src=\"https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js\"></script>\n <script src=\"https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js\"></script>\n <script src=\"https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.js\"></script>\n <script crossorigin=\"anonymous\" src=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.2.3/dist/js/engine-core.js\"></script>\n <script crossorigin=\"anonymous\" src=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.6/dist/js/engine-ext.js\"></script>\n\n <body>\n <div id=\"lce-container\"></div>\n <script type=\"text/javascript\" src=\"https://g.alicdn.com/fone-lowcode/fr-generator/1.1.0/js/index.js\"></script>\n </body>\n </html>\n ";
|
|
2
|
+
var html = "\n <html>\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" />\n <title>XRender</title>\n <link rel=\"icon\" href=\"https://img.alicdn.com/tfs/TB17UtINiLaK1RjSZFxXXamPFXa-606-643.png\">\n <link href=\"https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light@0.2.1/variables.css\" rel=\"stylesheet\" />\n <link href=\"https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light@0.2.1/dist/next.var.min.css\" rel=\"stylesheet\" />\n <link rel=\"stylesheet\" href=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.2.3/dist/css/engine-core.css\" />\n <link rel=\"stylesheet\" href=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.6/dist/css/engine-ext.css\" />\n <link rel=\"stylesheet\" href=\"https://g.alicdn.com/fone-lowcode/fr-generator/1.1.0/css/index.css\" />\n\n <script>\n window.React = window.parent.React;\n window.ReactDOM = window.parent.ReactDOM;\n </script>\n \n <script src=\"https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js\"></script>\n <script src=\"https://g.alicdn.com/platform/c/react15-polyfill/0.0.1/dist/index.js\"></script>\n <script src=\"https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js\"></script>\n <script src=\"https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js\"></script>\n <script src=\"https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.js\"></script>\n <script crossorigin=\"anonymous\" src=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.2.3/dist/js/engine-core.js\"></script>\n <script crossorigin=\"anonymous\" src=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.6/dist/js/engine-ext.js\"></script>\n </head>\n\n <body>\n <div id=\"lce-container\"></div>\n <script type=\"text/javascript\" src=\"https://g.alicdn.com/fone-lowcode/fr-generator/1.1.0/js/index.js\"></script>\n </body>\n </html>\n ";
|
|
3
3
|
return html;
|
|
4
4
|
};
|
|
5
5
|
export default (function () {
|
package/es/main.js
CHANGED
|
@@ -1,13 +1,23 @@
|
|
|
1
1
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
2
|
var _excluded = ["widgets", "settings"];
|
|
3
|
+
function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
|
|
4
|
+
function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
|
|
3
5
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
4
6
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
5
7
|
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
6
8
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
7
9
|
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
10
|
+
function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
|
|
11
|
+
function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
|
|
12
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
13
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
14
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
15
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
16
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
17
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
8
18
|
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
9
19
|
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
10
|
-
import React, { useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
|
|
20
|
+
import React, { useEffect, useRef, useState, useImperativeHandle, forwardRef } from 'react';
|
|
11
21
|
import createIframe from './createIframe';
|
|
12
22
|
import * as defaultSetting from './settings';
|
|
13
23
|
var iframe;
|
|
@@ -16,17 +26,19 @@ var Design = function Design(props, ref) {
|
|
|
16
26
|
settings = props.settings,
|
|
17
27
|
restProps = _objectWithoutProperties(props, _excluded);
|
|
18
28
|
var containerRef = useRef();
|
|
29
|
+
var _useState = useState(false),
|
|
30
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
31
|
+
delayDone = _useState2[0],
|
|
32
|
+
setDelayDone = _useState2[1];
|
|
19
33
|
useImperativeHandle(ref, function () {
|
|
20
34
|
return {
|
|
21
35
|
getValue: function getValue() {
|
|
22
|
-
var _iframe,
|
|
23
|
-
|
|
24
|
-
console.log("__FR_ENGINE__", (_iframe2 = iframe) === null || _iframe2 === void 0 ? void 0 : (_iframe2$contentWindo = _iframe2.contentWindow) === null || _iframe2$contentWindo === void 0 ? void 0 : _iframe2$contentWindo.__FR_ENGINE__);
|
|
25
|
-
return (_iframe3 = iframe) === null || _iframe3 === void 0 ? void 0 : (_iframe3$contentWindo = _iframe3.contentWindow) === null || _iframe3$contentWindo === void 0 ? void 0 : (_iframe3$contentWindo2 = _iframe3$contentWindo.__FR_ENGINE__) === null || _iframe3$contentWindo2 === void 0 ? void 0 : (_iframe3$contentWindo3 = _iframe3$contentWindo2.exportSchema) === null || _iframe3$contentWindo3 === void 0 ? void 0 : _iframe3$contentWindo3.call(_iframe3$contentWindo2);
|
|
36
|
+
var _iframe, _iframe$contentWindow, _iframe$contentWindow2, _iframe$contentWindow3;
|
|
37
|
+
return (_iframe = iframe) === null || _iframe === void 0 ? void 0 : (_iframe$contentWindow = _iframe.contentWindow) === null || _iframe$contentWindow === void 0 ? void 0 : (_iframe$contentWindow2 = _iframe$contentWindow.__FR_ENGINE__) === null || _iframe$contentWindow2 === void 0 ? void 0 : (_iframe$contentWindow3 = _iframe$contentWindow2.exportSchema) === null || _iframe$contentWindow3 === void 0 ? void 0 : _iframe$contentWindow3.call(_iframe$contentWindow2);
|
|
26
38
|
},
|
|
27
39
|
setValue: function setValue(schema) {
|
|
28
|
-
var
|
|
29
|
-
return (
|
|
40
|
+
var _iframe2, _iframe2$contentWindo, _iframe2$contentWindo2, _iframe2$contentWindo3;
|
|
41
|
+
return (_iframe2 = iframe) === null || _iframe2 === void 0 ? void 0 : (_iframe2$contentWindo = _iframe2.contentWindow) === null || _iframe2$contentWindo === void 0 ? void 0 : (_iframe2$contentWindo2 = _iframe2$contentWindo.__FR_ENGINE__) === null || _iframe2$contentWindo2 === void 0 ? void 0 : (_iframe2$contentWindo3 = _iframe2$contentWindo2.importSchema) === null || _iframe2$contentWindo3 === void 0 ? void 0 : _iframe2$contentWindo3.call(_iframe2$contentWindo2, schema);
|
|
30
42
|
}
|
|
31
43
|
};
|
|
32
44
|
});
|
|
@@ -38,25 +50,96 @@ var Design = function Design(props, ref) {
|
|
|
38
50
|
};
|
|
39
51
|
}, []);
|
|
40
52
|
var initIframe = function initIframe() {
|
|
41
|
-
console.log("开始创建 iframe");
|
|
42
53
|
iframe = createIframe();
|
|
43
54
|
containerRef.current.appendChild(iframe);
|
|
44
55
|
};
|
|
45
|
-
var engineOnLoad = function
|
|
46
|
-
var
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
56
|
+
var engineOnLoad = /*#__PURE__*/function () {
|
|
57
|
+
var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(event) {
|
|
58
|
+
var _iframe3, _iframeWindow$__FR_EN;
|
|
59
|
+
var iframeWindow, waitForMaterial;
|
|
60
|
+
return _regenerator().w(function (_context) {
|
|
61
|
+
while (1) switch (_context.n) {
|
|
62
|
+
case 0:
|
|
63
|
+
if (!(event.data.type !== 'engine-load')) {
|
|
64
|
+
_context.n = 1;
|
|
65
|
+
break;
|
|
66
|
+
}
|
|
67
|
+
return _context.a(2);
|
|
68
|
+
case 1:
|
|
69
|
+
iframeWindow = (_iframe3 = iframe) === null || _iframe3 === void 0 ? void 0 : _iframe3.contentWindow;
|
|
70
|
+
if (iframeWindow) {
|
|
71
|
+
_context.n = 2;
|
|
72
|
+
break;
|
|
73
|
+
}
|
|
74
|
+
return _context.a(2);
|
|
75
|
+
case 2:
|
|
76
|
+
console.log('iframe init engine: start waiting...');
|
|
77
|
+
|
|
78
|
+
// 等待 AliFormRenderMaterial 出现
|
|
79
|
+
waitForMaterial = function waitForMaterial() {
|
|
80
|
+
return new Promise(function (resolve) {
|
|
81
|
+
var attempts = 0;
|
|
82
|
+
var maxAttempts = 50; // 最长等待 50 * 100ms = 5 秒
|
|
83
|
+
|
|
84
|
+
var timer = setInterval(function () {
|
|
85
|
+
var _iframeWindow$;
|
|
86
|
+
attempts++;
|
|
87
|
+
var material = (_iframeWindow$ = iframeWindow[0]) === null || _iframeWindow$ === void 0 ? void 0 : _iframeWindow$.AliFormRenderMaterial;
|
|
88
|
+
if (material) {
|
|
89
|
+
console.log('AliFormRenderMaterial is ready:', material);
|
|
90
|
+
clearInterval(timer);
|
|
91
|
+
resolve();
|
|
92
|
+
}
|
|
93
|
+
if (attempts >= maxAttempts) {
|
|
94
|
+
console.warn('AliFormRenderMaterial load timeout');
|
|
95
|
+
clearInterval(timer);
|
|
96
|
+
resolve(); // 即使加载不到，也继续，不然永远挂住
|
|
97
|
+
}
|
|
98
|
+
}, 100); // 每 100ms 检查一次
|
|
99
|
+
});
|
|
100
|
+
}; // 1) 等待 AliFormRenderMaterial
|
|
101
|
+
_context.n = 3;
|
|
102
|
+
return waitForMaterial();
|
|
103
|
+
case 3:
|
|
104
|
+
console.log('iframe init engine: start init');
|
|
105
|
+
|
|
106
|
+
// 2) 执行初始化
|
|
107
|
+
iframeWindow === null || iframeWindow === void 0 ? void 0 : (_iframeWindow$__FR_EN = iframeWindow.__FR_ENGINE__) === null || _iframeWindow$__FR_EN === void 0 ? void 0 : _iframeWindow$__FR_EN.init(_objectSpread({
|
|
108
|
+
settings: _objectSpread(_objectSpread({}, defaultSetting), settings),
|
|
109
|
+
widgets: widgets,
|
|
110
|
+
logo: {
|
|
111
|
+
title: 'XRender'
|
|
112
|
+
}
|
|
113
|
+
}, restProps));
|
|
114
|
+
console.log('iframe init engine: init done');
|
|
115
|
+
case 4:
|
|
116
|
+
return _context.a(2);
|
|
117
|
+
}
|
|
118
|
+
}, _callee);
|
|
119
|
+
}));
|
|
120
|
+
return function engineOnLoad(_x) {
|
|
121
|
+
return _ref.apply(this, arguments);
|
|
122
|
+
};
|
|
123
|
+
}();
|
|
124
|
+
useEffect(function () {
|
|
125
|
+
// 模拟 return 前的延迟
|
|
126
|
+
var timer = setTimeout(function () {
|
|
127
|
+
setDelayDone(true);
|
|
128
|
+
}, 5000); // 延迟 300ms 可自由调整
|
|
129
|
+
|
|
130
|
+
return function () {
|
|
131
|
+
return clearTimeout(timer);
|
|
132
|
+
};
|
|
133
|
+
}, []);
|
|
134
|
+
if (!delayDone) {
|
|
135
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
136
|
+
ref: containerRef,
|
|
137
|
+
style: {
|
|
138
|
+
width: '100%',
|
|
139
|
+
height: '100%'
|
|
57
140
|
}
|
|
58
|
-
}
|
|
59
|
-
}
|
|
141
|
+
});
|
|
142
|
+
}
|
|
60
143
|
return /*#__PURE__*/React.createElement("div", {
|
|
61
144
|
ref: containerRef,
|
|
62
145
|
style: {
|
package/lib/createIframe.js
CHANGED
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var createIframeContent = function createIframeContent() {
|
|
8
|
-
var html = "\n <html>\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" />\n <title>XRender</title>\n <link rel=\"icon\" href=\"https://img.alicdn.com/tfs/TB17UtINiLaK1RjSZFxXXamPFXa-606-643.png\">\n <link href=\"https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light@0.2.1/variables.css\" rel=\"stylesheet\" />\n <link href=\"https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light@0.2.1/dist/next.var.min.css\" rel=\"stylesheet\" />\n <link rel=\"stylesheet\" href=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.2.3/dist/css/engine-core.css\" />\n <link rel=\"stylesheet\" href=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.6/dist/css/engine-ext.css\" />\n <link rel=\"stylesheet\" href=\"https://g.alicdn.com/fone-lowcode/fr-generator/1.1.0/css/index.css\" />\n\n <script>\n window.React = window.parent.React;\n window.ReactDOM = window.parent.ReactDOM;\n </script>\n \n <script src=\"https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js\"></script>\n <script src=\"https://g.alicdn.com/platform/c/react15-polyfill/0.0.1/dist/index.js\"></script>\n <script src=\"https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js\"></script>\n <script src=\"https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js\"></script>\n <script src=\"https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.js\"></script>\n <script crossorigin=\"anonymous\" src=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.2.3/dist/js/engine-core.js\"></script>\n <script crossorigin=\"anonymous\" src=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.6/dist/js/engine-ext.js\"></script>\n\n <body>\n <div id=\"lce-container\"></div>\n <script type=\"text/javascript\" src=\"https://g.alicdn.com/fone-lowcode/fr-generator/1.1.0/js/index.js\"></script>\n </body>\n </html>\n ";
|
|
8
|
+
var html = "\n <html>\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" />\n <title>XRender</title>\n <link rel=\"icon\" href=\"https://img.alicdn.com/tfs/TB17UtINiLaK1RjSZFxXXamPFXa-606-643.png\">\n <link href=\"https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light@0.2.1/variables.css\" rel=\"stylesheet\" />\n <link href=\"https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light@0.2.1/dist/next.var.min.css\" rel=\"stylesheet\" />\n <link rel=\"stylesheet\" href=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.2.3/dist/css/engine-core.css\" />\n <link rel=\"stylesheet\" href=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.6/dist/css/engine-ext.css\" />\n <link rel=\"stylesheet\" href=\"https://g.alicdn.com/fone-lowcode/fr-generator/1.1.0/css/index.css\" />\n\n <script>\n window.React = window.parent.React;\n window.ReactDOM = window.parent.ReactDOM;\n </script>\n \n <script src=\"https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js\"></script>\n <script src=\"https://g.alicdn.com/platform/c/react15-polyfill/0.0.1/dist/index.js\"></script>\n <script src=\"https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js\"></script>\n <script src=\"https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js\"></script>\n <script src=\"https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.js\"></script>\n <script crossorigin=\"anonymous\" src=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.2.3/dist/js/engine-core.js\"></script>\n <script crossorigin=\"anonymous\" src=\"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.6/dist/js/engine-ext.js\"></script>\n </head>\n\n <body>\n <div id=\"lce-container\"></div>\n <script type=\"text/javascript\" src=\"https://g.alicdn.com/fone-lowcode/fr-generator/1.1.0/js/index.js\"></script>\n </body>\n </html>\n ";
|
|
9
9
|
return html;
|
|
10
10
|
};
|
|
11
11
|
var _default = exports.default = function _default() {
|
package/lib/main.js
CHANGED
|
@@ -11,11 +11,21 @@ var defaultSetting = _interopRequireWildcard(require("./settings"));
|
|
|
11
11
|
var _excluded = ["widgets", "settings"];
|
|
12
12
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
13
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
14
|
+
function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
|
|
15
|
+
function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
|
|
14
16
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
15
17
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
16
18
|
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
17
19
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
18
20
|
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
21
|
+
function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
|
|
22
|
+
function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
|
|
23
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
24
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
25
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
26
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
27
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
28
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
19
29
|
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
20
30
|
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
21
31
|
var iframe;
|
|
@@ -24,17 +34,19 @@ var Design = function Design(props, ref) {
|
|
|
24
34
|
settings = props.settings,
|
|
25
35
|
restProps = _objectWithoutProperties(props, _excluded);
|
|
26
36
|
var containerRef = (0, _react.useRef)();
|
|
37
|
+
var _useState = (0, _react.useState)(false),
|
|
38
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
39
|
+
delayDone = _useState2[0],
|
|
40
|
+
setDelayDone = _useState2[1];
|
|
27
41
|
(0, _react.useImperativeHandle)(ref, function () {
|
|
28
42
|
return {
|
|
29
43
|
getValue: function getValue() {
|
|
30
|
-
var _iframe,
|
|
31
|
-
|
|
32
|
-
console.log("__FR_ENGINE__", (_iframe2 = iframe) === null || _iframe2 === void 0 ? void 0 : (_iframe2$contentWindo = _iframe2.contentWindow) === null || _iframe2$contentWindo === void 0 ? void 0 : _iframe2$contentWindo.__FR_ENGINE__);
|
|
33
|
-
return (_iframe3 = iframe) === null || _iframe3 === void 0 ? void 0 : (_iframe3$contentWindo = _iframe3.contentWindow) === null || _iframe3$contentWindo === void 0 ? void 0 : (_iframe3$contentWindo2 = _iframe3$contentWindo.__FR_ENGINE__) === null || _iframe3$contentWindo2 === void 0 ? void 0 : (_iframe3$contentWindo3 = _iframe3$contentWindo2.exportSchema) === null || _iframe3$contentWindo3 === void 0 ? void 0 : _iframe3$contentWindo3.call(_iframe3$contentWindo2);
|
|
44
|
+
var _iframe, _iframe$contentWindow, _iframe$contentWindow2, _iframe$contentWindow3;
|
|
45
|
+
return (_iframe = iframe) === null || _iframe === void 0 ? void 0 : (_iframe$contentWindow = _iframe.contentWindow) === null || _iframe$contentWindow === void 0 ? void 0 : (_iframe$contentWindow2 = _iframe$contentWindow.__FR_ENGINE__) === null || _iframe$contentWindow2 === void 0 ? void 0 : (_iframe$contentWindow3 = _iframe$contentWindow2.exportSchema) === null || _iframe$contentWindow3 === void 0 ? void 0 : _iframe$contentWindow3.call(_iframe$contentWindow2);
|
|
34
46
|
},
|
|
35
47
|
setValue: function setValue(schema) {
|
|
36
|
-
var
|
|
37
|
-
return (
|
|
48
|
+
var _iframe2, _iframe2$contentWindo, _iframe2$contentWindo2, _iframe2$contentWindo3;
|
|
49
|
+
return (_iframe2 = iframe) === null || _iframe2 === void 0 ? void 0 : (_iframe2$contentWindo = _iframe2.contentWindow) === null || _iframe2$contentWindo === void 0 ? void 0 : (_iframe2$contentWindo2 = _iframe2$contentWindo.__FR_ENGINE__) === null || _iframe2$contentWindo2 === void 0 ? void 0 : (_iframe2$contentWindo3 = _iframe2$contentWindo2.importSchema) === null || _iframe2$contentWindo3 === void 0 ? void 0 : _iframe2$contentWindo3.call(_iframe2$contentWindo2, schema);
|
|
38
50
|
}
|
|
39
51
|
};
|
|
40
52
|
});
|
|
@@ -46,25 +58,96 @@ var Design = function Design(props, ref) {
|
|
|
46
58
|
};
|
|
47
59
|
}, []);
|
|
48
60
|
var initIframe = function initIframe() {
|
|
49
|
-
console.log("开始创建 iframe");
|
|
50
61
|
iframe = (0, _createIframe.default)();
|
|
51
62
|
containerRef.current.appendChild(iframe);
|
|
52
63
|
};
|
|
53
|
-
var engineOnLoad = function
|
|
54
|
-
var
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
64
|
+
var engineOnLoad = /*#__PURE__*/function () {
|
|
65
|
+
var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(event) {
|
|
66
|
+
var _iframe3, _iframeWindow$__FR_EN;
|
|
67
|
+
var iframeWindow, waitForMaterial;
|
|
68
|
+
return _regenerator().w(function (_context) {
|
|
69
|
+
while (1) switch (_context.n) {
|
|
70
|
+
case 0:
|
|
71
|
+
if (!(event.data.type !== 'engine-load')) {
|
|
72
|
+
_context.n = 1;
|
|
73
|
+
break;
|
|
74
|
+
}
|
|
75
|
+
return _context.a(2);
|
|
76
|
+
case 1:
|
|
77
|
+
iframeWindow = (_iframe3 = iframe) === null || _iframe3 === void 0 ? void 0 : _iframe3.contentWindow;
|
|
78
|
+
if (iframeWindow) {
|
|
79
|
+
_context.n = 2;
|
|
80
|
+
break;
|
|
81
|
+
}
|
|
82
|
+
return _context.a(2);
|
|
83
|
+
case 2:
|
|
84
|
+
console.log('iframe init engine: start waiting...');
|
|
85
|
+
|
|
86
|
+
// 等待 AliFormRenderMaterial 出现
|
|
87
|
+
waitForMaterial = function waitForMaterial() {
|
|
88
|
+
return new Promise(function (resolve) {
|
|
89
|
+
var attempts = 0;
|
|
90
|
+
var maxAttempts = 50; // 最长等待 50 * 100ms = 5 秒
|
|
91
|
+
|
|
92
|
+
var timer = setInterval(function () {
|
|
93
|
+
var _iframeWindow$;
|
|
94
|
+
attempts++;
|
|
95
|
+
var material = (_iframeWindow$ = iframeWindow[0]) === null || _iframeWindow$ === void 0 ? void 0 : _iframeWindow$.AliFormRenderMaterial;
|
|
96
|
+
if (material) {
|
|
97
|
+
console.log('AliFormRenderMaterial is ready:', material);
|
|
98
|
+
clearInterval(timer);
|
|
99
|
+
resolve();
|
|
100
|
+
}
|
|
101
|
+
if (attempts >= maxAttempts) {
|
|
102
|
+
console.warn('AliFormRenderMaterial load timeout');
|
|
103
|
+
clearInterval(timer);
|
|
104
|
+
resolve(); // 即使加载不到，也继续，不然永远挂住
|
|
105
|
+
}
|
|
106
|
+
}, 100); // 每 100ms 检查一次
|
|
107
|
+
});
|
|
108
|
+
}; // 1) 等待 AliFormRenderMaterial
|
|
109
|
+
_context.n = 3;
|
|
110
|
+
return waitForMaterial();
|
|
111
|
+
case 3:
|
|
112
|
+
console.log('iframe init engine: start init');
|
|
113
|
+
|
|
114
|
+
// 2) 执行初始化
|
|
115
|
+
iframeWindow === null || iframeWindow === void 0 ? void 0 : (_iframeWindow$__FR_EN = iframeWindow.__FR_ENGINE__) === null || _iframeWindow$__FR_EN === void 0 ? void 0 : _iframeWindow$__FR_EN.init(_objectSpread({
|
|
116
|
+
settings: _objectSpread(_objectSpread({}, defaultSetting), settings),
|
|
117
|
+
widgets: widgets,
|
|
118
|
+
logo: {
|
|
119
|
+
title: 'XRender'
|
|
120
|
+
}
|
|
121
|
+
}, restProps));
|
|
122
|
+
console.log('iframe init engine: init done');
|
|
123
|
+
case 4:
|
|
124
|
+
return _context.a(2);
|
|
125
|
+
}
|
|
126
|
+
}, _callee);
|
|
127
|
+
}));
|
|
128
|
+
return function engineOnLoad(_x) {
|
|
129
|
+
return _ref.apply(this, arguments);
|
|
130
|
+
};
|
|
131
|
+
}();
|
|
132
|
+
(0, _react.useEffect)(function () {
|
|
133
|
+
// 模拟 return 前的延迟
|
|
134
|
+
var timer = setTimeout(function () {
|
|
135
|
+
setDelayDone(true);
|
|
136
|
+
}, 5000); // 延迟 300ms 可自由调整
|
|
137
|
+
|
|
138
|
+
return function () {
|
|
139
|
+
return clearTimeout(timer);
|
|
140
|
+
};
|
|
141
|
+
}, []);
|
|
142
|
+
if (!delayDone) {
|
|
143
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
144
|
+
ref: containerRef,
|
|
145
|
+
style: {
|
|
146
|
+
width: '100%',
|
|
147
|
+
height: '100%'
|
|
65
148
|
}
|
|
66
|
-
}
|
|
67
|
-
}
|
|
149
|
+
});
|
|
150
|
+
}
|
|
68
151
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
69
152
|
ref: containerRef,
|
|
70
153
|
style: {
|