@tuya-sat/micro-dev-component 0.0.1-beta.3 → 0.0.1

package/dist/index.js

@@ -231,7 +231,7 @@ function styleInject(css, ref) {
   }
 }
 
-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: 100;\n}\n.ruleModal-module_modal__1RoS2 {\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  background: #fff;\n  width: 400px;\n  min-height: 200px;\n  border: 1px solid #333;\n  border-radius: 4px;\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 #ccc;\n}\n.ruleModal-module_modal__1RoS2 .ruleModal-module_footer__3or4l {\n  border-top: 1px solid #ccc;\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";
+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";
 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"};
 styleInject(css_248z$1);
 
@@ -278,25 +278,25 @@ class RuleModal {
     }
 }
 
-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: #1890ff;\n  text-align: center;\n  line-height: 50px;\n  font-size: 18;\n  cursor: pointer;\n  z-index: 1;\n  user-select: none;\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";
+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";
 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"};
 styleInject(css_248z);
 
 class Fixed {
     constructor(container) {
-        this.container = container;
         this.isMove = false;
+        this.dowmTime = 0;
         this.windowSize = {
             width: window.innerWidth,
             height: window.innerHeight,
         };
+        this.container = container;
         this.proxyData = this.observable({
             position: {
                 right: 80,
                 bottom: 80,
             },
             visible: false,
-            spread: false,
         }, [
             "position",
             ({ right, bottom }) => {
@@ -308,14 +308,6 @@ class Fixed {
             (visible) => {
                 this.children.element.style.display = visible ? "block" : "none";
             },
-        ], [
-            "spread",
-            (value) => {
-                const dom = this.element.children[1];
-                value
-                    ? (dom.className += " " + styles.mIconActive)
-                    : (dom.className = styles.mIcon);
-            },
         ]);
         this.children = new RuleModal({
             handleClose: function () {
@@ -323,6 +315,7 @@ class Fixed {
             }.bind(this),
         });
         this.addResizeListener();
+        this.addGlobalListener();
         this.init();
     }
     init() {
@@ -330,31 +323,21 @@ class Fixed {
         const fixedDom = (React.createElement("div", { className: styles.container, style: {
                 right: right,
                 bottom: bottom,
-            }, onMouseDown: (e) => {
-                console.log("start");
+            }, onMouseDown: () => {
                 this.isMove = true;
-            }, onMouseMove: (e) => {
-                if (this.isMove) {
-                    const { clientX, clientY } = e;
-                    const { width, height } = this.windowSize;
-                    this.proxyData.position = {
-                        right: width - clientX,
-                        bottom: height - clientY,
-                    };
+                this.dowmTime = new Date().valueOf();
+            }, onMouseUp: () => {
+                const upTime = new Date().valueOf();
+                const leftTime = upTime - this.dowmTime;
+                if (leftTime > 13) {
+                    return;
                 }
-            }, onMouseLeave: () => {
-                console.log("leave");
-                this.isMove = false;
-            }, onMouseUp: (e) => {
-                console.log("end");
-                this.isMove = false;
+                this.proxyData.visible = !this.proxyData.visible;
             } },
-            React.createElement("div", { className: styles.mainIcon, onClick: () => {
-                    this.proxyData.spread = !this.proxyData.spread;
-                } }, "D"),
-            React.createElement("div", { className: styles.mIcon, onClick: () => {
-                    this.proxyData.visible = !this.proxyData.visible;
-                } }, "M")));
+            React.createElement("div", { className: styles.mainIcon },
+                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" },
+                    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" }),
+                    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" })))));
         this.element = fixedDom;
     }
     observable(target, ...cbs) {
@@ -380,9 +363,22 @@ class Fixed {
             };
         };
         window.addEventListener("resize", resize);
-        return () => {
-            window.removeEventListener("resize", resize);
-        };
+    }
+    addGlobalListener() {
+        const bodyDom = document.querySelector("body");
+        bodyDom.addEventListener("mouseup", () => {
+            this.isMove = false;
+        });
+        bodyDom.addEventListener("mousemove", (e) => {
+            if (this.isMove) {
+                const { clientX, clientY } = e;
+                const { width, height } = this.windowSize;
+                this.proxyData.position = {
+                    right: width - clientX,
+                    bottom: height - clientY,
+                };
+            }
+        });
     }
     render() {
         this.container.appendChild(this.element);

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@tuya-sat/micro-dev-component",
-  "version": "0.0.1-beta.3",
+  "version": "0.0.1",
   "main": "dist/index.js",
   "license": "MIT",
   "scripts": {
-    "dev": "rollup -w",
+    "dev": "rollup -c -w",
     "build": "rollup -c",
     "prepublish": "yarn build"
   },
@@ -26,5 +26,14 @@
     "rollup-plugin-postcss": "^4.0.1",
     "rollup-plugin-typescript2": "^0.30.0",
     "typescript": "^4.4.4"
-  }
+  },
+  "keywords": [
+    "saturn-project",
+    "micro-frontend",
+    "no-code",
+    "IoT",
+    "saas",
+    "cloud",
+    "tuya"
+  ]
 }