web:add Switch Shader

doric-web/dist/index.js

@@ -6170,6 +6170,101 @@ var doric_web = (function (exports, axios, sandbox) {
         }
     }
 
+    class DoricSwitchNode extends DoricViewNode {
+        build() {
+            const ret = document.createElement('div');
+            ret.style.position = "relative";
+            ret.style.width = "50px";
+            ret.style.height = "30px";
+            const input = document.createElement('input');
+            input.type = "checkbox";
+            input.style.display = "none";
+            const box = document.createElement('div');
+            box.style.width = "100%";
+            box.style.height = "100%";
+            box.style.backgroundColor = "#ccc";
+            box.style.borderRadius = "15px";
+            const span = document.createElement('span');
+            span.style.display = "inline-block";
+            span.style.height = "30px";
+            span.style.width = "30px";
+            span.style.borderRadius = "15px";
+            span.style.background = "#fff";
+            box.appendChild(span);
+            ret.appendChild(input);
+            ret.appendChild(box);
+            ret.onclick = () => {
+                if (input.checked === false) {
+                    span.animate([{ transform: "translateX(30px)" }], {
+                        duration: 200,
+                        fill: "forwards"
+                    });
+                    box.animate([{ backgroundColor: "forestgreen" }], {
+                        duration: 200,
+                        fill: "forwards"
+                    });
+                    input.checked = true;
+                }
+                else {
+                    span.animate([{ transform: "translateX(0px)" }], {
+                        duration: 200,
+                        fill: "forwards"
+                    });
+                    box.animate([{ backgroundColor: "#ccc" }], {
+                        duration: 200,
+                        fill: "forwards"
+                    });
+                    input.checked = false;
+                }
+                if (this.onSwitchFuncId) {
+                    this.callJSResponse(this.onSwitchFuncId, input.checked);
+                }
+            };
+            this.input = input;
+            this.span = span;
+            this.box = box;
+            return ret;
+        }
+        setChecked(v) {
+            if (!this.input || !this.span || !this.box) {
+                return;
+            }
+            if (this.input.checked === false) {
+                this.span.style.transform = "translateX(30px)";
+                this.box.style.backgroundColor = "forestgreen";
+                this.input.checked = true;
+            }
+            else {
+                this.span.style.transform = "translateX(0px)";
+                this.box.style.backgroundColor = "#ccc";
+                this.input.checked = false;
+            }
+        }
+        blendProps(v, propName, prop) {
+            switch (propName) {
+                case "state":
+                    this.setChecked(prop);
+                    break;
+                case "onSwitch":
+                    this.onSwitchFuncId = prop;
+                    break;
+                case "offTintColor":
+                    break;
+                case "onTintColor":
+                    break;
+                case "thumbTintColor":
+                    break;
+                default:
+                    super.blendProps(v, propName, prop);
+                    break;
+            }
+        }
+        getState() {
+            var _a;
+            return ((_a = this.input) === null || _a === void 0 ? void 0 : _a.checked) || false;
+        }
+    }
+
     const bundles = new Map;
     const plugins = new Map;
     const nodes = new Map;
@@ -6207,6 +6302,7 @@ var doric_web = (function (exports, axios, sandbox) {
     registerViewNode('List', DoricListNode);
     registerViewNode('Draggable', DoricDraggableNode);
     registerViewNode('Refreshable', DoricRefreshableNode);
+    registerViewNode('Switch', DoricSwitchNode);
 
     function getScriptId(contextId) {
         return `__doric_script_${contextId}`;