tianzixuan/Doric
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

web:Switch Node full support

Browse Source
This commit is contained in:
pengfei.zhou 2021-04-19 11:27:15 +08:00 committed by osborn
parent 8486f80b11
commit 9ac6597e8d
3 changed files with 40 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
doric-web/dist/index.js vendored
View File

@ -6171,6 +6171,11 @@ var doric_web = (function (exports, axios, sandbox) {
}
class DoricSwitchNode extends DoricViewNode {
constructor() {
super(...arguments);
this.offTintColor = "#e6e6e6";
this.onTintColor = "#52d769";
}
build() {
const ret = document.createElement('div');
ret.style.position = "relative";
@ -6190,6 +6195,7 @@ var doric_web = (function (exports, axios, sandbox) {
span.style.width = "30px";
span.style.borderRadius = "15px";
span.style.background = "#fff";
span.style.boxShadow = "0px 3px 3px #eee";
box.appendChild(span);
ret.appendChild(input);
ret.appendChild(box);
@ -6199,7 +6205,7 @@ var doric_web = (function (exports, axios, sandbox) {
duration: 200,
fill: "forwards"
});
box.animate([{ backgroundColor: "forestgreen" }], {
box.animate([{ backgroundColor: this.onTintColor }], {
duration: 200,
fill: "forwards"
});
@ -6210,7 +6216,7 @@ var doric_web = (function (exports, axios, sandbox) {
duration: 200,
fill: "forwards"
});
box.animate([{ backgroundColor: "#ccc" }], {
box.animate([{ backgroundColor: this.offTintColor }], {
duration: 200,
fill: "forwards"
});
@ -6229,15 +6235,15 @@ var doric_web = (function (exports, axios, sandbox) {
if (!this.input || !this.span || !this.box) {
return;
}
if (this.input.checked === false) {
if (v) {
this.span.style.transform = "translateX(30px)";
this.box.style.backgroundColor = "forestgreen";
this.input.checked = true;
this.box.style.backgroundColor = this.onTintColor;
this.input.checked = v;
}
else {
this.span.style.transform = "translateX(0px)";
this.box.style.backgroundColor = "#ccc";
this.input.checked = false;
this.box.style.backgroundColor = this.offTintColor;
this.input.checked = v;
}
}
blendProps(v, propName, prop) {
@ -6249,10 +6255,17 @@ var doric_web = (function (exports, axios, sandbox) {
this.onSwitchFuncId = prop;
break;
case "offTintColor":
this.offTintColor = toRGBAString(prop);
this.setChecked(this.getState());
break;
case "onTintColor":
this.onTintColor = toRGBAString(prop);
this.setChecked(this.getState());
break;
case "thumbTintColor":
if (this.span) {
this.span.style.backgroundColor = toRGBAString(prop);
}
break;
default:
super.blendProps(v, propName, prop);

2
doric-web/dist/index.js.map vendored
View File

File diff suppressed because one or more lines are too long

27
doric-web/src/shader/DoricSwitchNode.ts
View File

@ -1,4 +1,4 @@
import { DoricViewNode } from "./DoricViewNode";
import { DoricViewNode, toRGBAString } from "./DoricViewNode";
export class DoricSwitchNode extends DoricViewNode {
input?: HTMLInputElement
@ -6,6 +6,9 @@ export class DoricSwitchNode extends DoricViewNode {
span?: HTMLSpanElement
onSwitchFuncId?: string
private offTintColor = "#e6e6e6"
private onTintColor = "#52d769"
build() {
const ret = document.createElement('div')
ret.style.position = "relative"
@ -25,6 +28,7 @@ export class DoricSwitchNode extends DoricViewNode {
span.style.width = "30px"
span.style.borderRadius = "15px"
span.style.background = "#fff"
span.style.boxShadow = "0px 3px 3px #eee"
box.appendChild(span)
ret.appendChild(input)
ret.appendChild(box)
@ -35,7 +39,7 @@ export class DoricSwitchNode extends DoricViewNode {
duration: 200,
fill: "forwards"
})
box.animate([{ backgroundColor: "forestgreen" }], {
box.animate([{ backgroundColor: this.onTintColor }], {
duration: 200,
fill: "forwards"
})
@ -45,7 +49,7 @@ export class DoricSwitchNode extends DoricViewNode {
duration: 200,
fill: "forwards"
})
box.animate([{ backgroundColor: "#ccc" }], {
box.animate([{ backgroundColor: this.offTintColor }], {
duration: 200,
fill: "forwards"
})
@ -65,14 +69,14 @@ export class DoricSwitchNode extends DoricViewNode {
if (!this.input || !this.span || !this.box) {
return
}
if (this.input.checked === false) {
if (v) {
this.span.style.transform = "translateX(30px)"
this.box.style.backgroundColor = "forestgreen"
this.input.checked = true
this.box.style.backgroundColor = this.onTintColor
this.input.checked = v
} else {
this.span.style.transform = "translateX(0px)"
this.box.style.backgroundColor = "#ccc"
this.input.checked = false
this.box.style.backgroundColor = this.offTintColor
this.input.checked = v
}
}
@ -85,10 +89,17 @@ export class DoricSwitchNode extends DoricViewNode {
this.onSwitchFuncId = prop
break
case "offTintColor":
this.offTintColor = toRGBAString(prop)
this.setChecked(this.getState())
break
case "onTintColor":
this.onTintColor = toRGBAString(prop)
this.setChecked(this.getState())
break
case "thumbTintColor":
if (this.span) {
this.span.style.backgroundColor = toRGBAString(prop)
}
break
default:
super.blendProps(v, propName, prop)