@tuya-sat/micro-dev-component 0.0.1-beta.3 → 0.0.4
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/dist/index.js +33 -37
- package/package.json +12 -3
package/dist/index.js
CHANGED
|
@@ -231,7 +231,7 @@ function styleInject(css, ref) {
|
|
|
231
231
|
}
|
|
232
232
|
}
|
|
233
233
|
|
|
234
|
-
var css_248z$1 = ".ruleModal-module_cover__1peyQ {\n display: none;\n position: fixed;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100vh;\n background-color: rgba(0, 0, 0, 0.5);\n z-index:
|
|
234
|
+
var css_248z$1 = ".ruleModal-module_cover__1peyQ {\n display: none;\n position: fixed;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100vh;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 10000;\n}\n.ruleModal-module_modal__1RoS2 {\n position: fixed;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -68%);\n width: 438px;\n max-height: 400px;\n background-color: #fff;\n background-clip: padding-box;\n border: 0;\n border-radius: 2px;\n box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;\n pointer-events: auto;\n}\n.ruleModal-module_modal__1RoS2 .ruleModal-module_header__2YyfZ {\n height: 53px;\n padding-left: 20px;\n line-height: 53px;\n border-bottom: 1px solid #f0f0f0;\n}\n.ruleModal-module_modal__1RoS2 .ruleModal-module_footer__3or4l {\n border-top: 1px solid #f0f0f0;\n padding: 10px 10px 10px 0px;\n text-align: right;\n}\n.ruleModal-module_modal__1RoS2 .ruleModal-module_footer__3or4l .ruleModal-module_cancel___ly3b {\n display: inline-block;\n padding: 4px 14px;\n background: #fff;\n color: #333;\n border-radius: 4px;\n margin-right: 10px;\n cursor: pointer;\n border: 1px solid #d9d9d9;\n}\n.ruleModal-module_modal__1RoS2 .ruleModal-module_footer__3or4l .ruleModal-module_ok__1da7v {\n display: inline-block;\n padding: 5px 15px;\n background: #1890ff;\n color: #fff;\n border-radius: 4px;\n cursor: pointer;\n}\n";
|
|
235
235
|
var styles$1 = {"cover":"ruleModal-module_cover__1peyQ","modal":"ruleModal-module_modal__1RoS2","header":"ruleModal-module_header__2YyfZ","footer":"ruleModal-module_footer__3or4l","cancel":"ruleModal-module_cancel___ly3b","ok":"ruleModal-module_ok__1da7v"};
|
|
236
236
|
styleInject(css_248z$1);
|
|
237
237
|
|
|
@@ -278,25 +278,25 @@ class RuleModal {
|
|
|
278
278
|
}
|
|
279
279
|
}
|
|
280
280
|
|
|
281
|
-
var css_248z = ".fixed-module_container__1Xxoe {\n position: fixed;\n z-index: 9999;\n transform: translate(50%, 50%);\n color: #fff;\n}\n.fixed-module_mainIcon__3nAvB {\n position: relative;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background-color: #
|
|
281
|
+
var css_248z = ".fixed-module_container__1Xxoe {\n position: fixed;\n z-index: 9999;\n transform: translate(50%, 50%);\n color: #fff;\n border-radius: 50%;\n}\n.fixed-module_mainIcon__3nAvB {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background-color: #fff;\n cursor: pointer;\n user-select: none;\n box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;\n}\n.fixed-module_mIcon__2NGQU,\n.fixed-module_rIcon__2R8tZ {\n position: absolute;\n left: 10px;\n top: 10px;\n width: 30px;\n height: 30px;\n text-align: center;\n line-height: 30px;\n border-radius: 50%;\n transform-origin: 50% 50%;\n background-color: #1890ff;\n transition: all 0.5s;\n cursor: pointer;\n user-select: none;\n}\n.fixed-module_mIconActive__2_wrS {\n transform: translate(-60px, 0px);\n}\n.fixed-module_rIconActive__7DJBC {\n transform: translate(0px, -60px);\n}\n";
|
|
282
282
|
var styles = {"container":"fixed-module_container__1Xxoe","mainIcon":"fixed-module_mainIcon__3nAvB","mIcon":"fixed-module_mIcon__2NGQU","rIcon":"fixed-module_rIcon__2R8tZ","mIconActive":"fixed-module_mIconActive__2_wrS","rIconActive":"fixed-module_rIconActive__7DJBC"};
|
|
283
283
|
styleInject(css_248z);
|
|
284
284
|
|
|
285
285
|
class Fixed {
|
|
286
286
|
constructor(container) {
|
|
287
|
-
this.container = container;
|
|
288
287
|
this.isMove = false;
|
|
288
|
+
this.dowmTime = 0;
|
|
289
289
|
this.windowSize = {
|
|
290
290
|
width: window.innerWidth,
|
|
291
291
|
height: window.innerHeight,
|
|
292
292
|
};
|
|
293
|
+
this.container = container;
|
|
293
294
|
this.proxyData = this.observable({
|
|
294
295
|
position: {
|
|
295
296
|
right: 80,
|
|
296
297
|
bottom: 80,
|
|
297
298
|
},
|
|
298
299
|
visible: false,
|
|
299
|
-
spread: false,
|
|
300
300
|
}, [
|
|
301
301
|
"position",
|
|
302
302
|
({ right, bottom }) => {
|
|
@@ -308,14 +308,6 @@ class Fixed {
|
|
|
308
308
|
(visible) => {
|
|
309
309
|
this.children.element.style.display = visible ? "block" : "none";
|
|
310
310
|
},
|
|
311
|
-
], [
|
|
312
|
-
"spread",
|
|
313
|
-
(value) => {
|
|
314
|
-
const dom = this.element.children[1];
|
|
315
|
-
value
|
|
316
|
-
? (dom.className += " " + styles.mIconActive)
|
|
317
|
-
: (dom.className = styles.mIcon);
|
|
318
|
-
},
|
|
319
311
|
]);
|
|
320
312
|
this.children = new RuleModal({
|
|
321
313
|
handleClose: function () {
|
|
@@ -323,6 +315,7 @@ class Fixed {
|
|
|
323
315
|
}.bind(this),
|
|
324
316
|
});
|
|
325
317
|
this.addResizeListener();
|
|
318
|
+
this.addGlobalListener();
|
|
326
319
|
this.init();
|
|
327
320
|
}
|
|
328
321
|
init() {
|
|
@@ -330,31 +323,21 @@ class Fixed {
|
|
|
330
323
|
const fixedDom = (React.createElement("div", { className: styles.container, style: {
|
|
331
324
|
right: right,
|
|
332
325
|
bottom: bottom,
|
|
333
|
-
}, onMouseDown: (
|
|
334
|
-
console.log("start");
|
|
326
|
+
}, onMouseDown: () => {
|
|
335
327
|
this.isMove = true;
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
bottom: height - clientY,
|
|
343
|
-
};
|
|
328
|
+
this.dowmTime = new Date().valueOf();
|
|
329
|
+
}, onMouseUp: () => {
|
|
330
|
+
const upTime = new Date().valueOf();
|
|
331
|
+
const leftTime = upTime - this.dowmTime;
|
|
332
|
+
if (leftTime > 238) {
|
|
333
|
+
return;
|
|
344
334
|
}
|
|
345
|
-
|
|
346
|
-
console.log("leave");
|
|
347
|
-
this.isMove = false;
|
|
348
|
-
}, onMouseUp: (e) => {
|
|
349
|
-
console.log("end");
|
|
350
|
-
this.isMove = false;
|
|
335
|
+
this.proxyData.visible = !this.proxyData.visible;
|
|
351
336
|
} },
|
|
352
|
-
React.createElement("div", { className: styles.mainIcon,
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
this.proxyData.visible = !this.proxyData.visible;
|
|
357
|
-
} }, "M")));
|
|
337
|
+
React.createElement("div", { className: styles.mainIcon },
|
|
338
|
+
React.createElement("svg", { viewBox: "0 0 1024 1024", version: "1.1", xmlns: "http://www.w3.org/2000/svg", "p-id": "2748", width: "27", height: "27" },
|
|
339
|
+
React.createElement("path", { d: "M951.4 797.5L563.8 409.9c10.2-11 9.9-28.1-0.8-38.8l-32.4-32.4c12.1-74.4-11.9-149.4-65.6-203.1C420.8 91.4 362 67 299.4 67c-29.3 0-57.9 5.4-85.1 15.9-8.8 3.4-15.3 11.1-17.3 20.3-1.9 9.3 0.9 18.9 7.6 25.6l126.7 126.7-74.4 74.4-128.1-128.1c-6.6-6.6-16-9.5-25.2-7.7-9.2 1.8-16.8 8.1-20.4 16.7-37 88.1-17.2 188.8 50.4 256.3 44.2 44.3 103.1 68.6 165.7 68.6 14.2 0 28.5-1.3 42.4-3.8l30.3 30.3c10.7 10.7 27.8 10.9 38.8 0.8l387.6 387.6c5.5 5.5 12.6 8.2 19.8 8.2 7.2 0 14.3-2.7 19.8-8.2l113.4-113.4c10.9-11 10.9-28.8 0-39.7z m-133.2 93.6L435.9 508.9l37.6-37.6c7.3-7.3 7.3-19.1 0-26.4-7.3-7.3-19.1-7.3-26.4 0l-56.6 56.6-20-20c-7-7-17.2-9.8-26.7-7.3-14.5 3.7-29.5 5.6-44.5 5.6-47.6 0-92.4-18.5-126.1-52.2-40.8-40.8-58.7-97.4-50.4-152.5l114.3 114.3c10.9 11 28.6 11 39.6 0L390.2 276l0.7-0.7c10.8-10.9 10.7-28.6-0.2-39.4L279.2 124.2c6.7-0.7 13.4-1.1 20.2-1.1 47.6 0 92.4 18.5 126.1 52.2 43.8 43.8 61.5 106 47.6 166.5-2.1 9.4 0.7 19.3 7.5 26.1l23.2 23.1c-10.2 11-9.9 28.1 0.8 38.8L892 817.3 868.3 841 565.8 538.5c-7.3-7.3-19.1-7.3-26.4 0-7.3 7.3-7.3 19.1 0 26.4l302.5 302.5-23.7 23.7z", fill: "#4F4F4F", "p-id": "2749" }),
|
|
340
|
+
React.createElement("path", { d: "M395.3 321.8l-74.4 74.4c-7.3 7.3-7.3 19.1 0 26.4 3.7 3.6 8.4 5.5 13.2 5.5s9.5-1.8 13.2-5.5l74.4-74.4c7.3-7.3 7.3-19.1 0-26.4-7.4-7.3-19.2-7.3-26.4 0z", fill: "#4F4F4F", "p-id": "2750" })))));
|
|
358
341
|
this.element = fixedDom;
|
|
359
342
|
}
|
|
360
343
|
observable(target, ...cbs) {
|
|
@@ -380,9 +363,22 @@ class Fixed {
|
|
|
380
363
|
};
|
|
381
364
|
};
|
|
382
365
|
window.addEventListener("resize", resize);
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
366
|
+
}
|
|
367
|
+
addGlobalListener() {
|
|
368
|
+
const bodyDom = document.querySelector("body");
|
|
369
|
+
bodyDom.addEventListener("mouseup", () => {
|
|
370
|
+
this.isMove = false;
|
|
371
|
+
});
|
|
372
|
+
bodyDom.addEventListener("mousemove", (e) => {
|
|
373
|
+
if (this.isMove) {
|
|
374
|
+
const { clientX, clientY } = e;
|
|
375
|
+
const { width, height } = this.windowSize;
|
|
376
|
+
this.proxyData.position = {
|
|
377
|
+
right: width - clientX,
|
|
378
|
+
bottom: height - clientY,
|
|
379
|
+
};
|
|
380
|
+
}
|
|
381
|
+
});
|
|
386
382
|
}
|
|
387
383
|
render() {
|
|
388
384
|
this.container.appendChild(this.element);
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tuya-sat/micro-dev-component",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"scripts": {
|
|
7
|
-
"dev": "rollup -w",
|
|
7
|
+
"dev": "rollup -c -w",
|
|
8
8
|
"build": "rollup -c",
|
|
9
9
|
"prepublish": "yarn build"
|
|
10
10
|
},
|
|
@@ -26,5 +26,14 @@
|
|
|
26
26
|
"rollup-plugin-postcss": "^4.0.1",
|
|
27
27
|
"rollup-plugin-typescript2": "^0.30.0",
|
|
28
28
|
"typescript": "^4.4.4"
|
|
29
|
-
}
|
|
29
|
+
},
|
|
30
|
+
"keywords": [
|
|
31
|
+
"saturn-project",
|
|
32
|
+
"micro-frontend",
|
|
33
|
+
"no-code",
|
|
34
|
+
"IoT",
|
|
35
|
+
"saas",
|
|
36
|
+
"cloud",
|
|
37
|
+
"tuya"
|
|
38
|
+
]
|
|
30
39
|
}
|