pixuireactcomponents 1.3.5 → 1.3.7
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/package.json +1 -1
- package/ui/components/button/Button.js +56 -26
- package/ui/components/outlinetext/OutlineText.js +0 -2
- package/ui/components/slapface/Slapface.d.ts +1 -1
- package/ui/components/slapface/Slapface.js +3 -2
- package/ui/components/togglegroup/ToggleGroup.d.ts +1 -1
- package/ui/components/togglegroup/ToggleGroup.js +16 -7
package/package.json
CHANGED
|
@@ -17,49 +17,79 @@ import { h, Component } from 'preact';
|
|
|
17
17
|
var Button = /** @class */ (function (_super) {
|
|
18
18
|
__extends(Button, _super);
|
|
19
19
|
function Button() {
|
|
20
|
-
|
|
20
|
+
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
21
|
+
_this.btnImg = document.createElement('img');
|
|
22
|
+
_this.btnText = document.createElement('div');
|
|
23
|
+
return _this;
|
|
21
24
|
}
|
|
22
25
|
Button.prototype.render = function (props) {
|
|
23
26
|
var _this = this;
|
|
24
27
|
return (h("div", { style: { alignItems: 'center', justifyContent: 'center' }, onClick: function () {
|
|
25
28
|
var _a;
|
|
26
29
|
if (_this.props.clickEvent) {
|
|
27
|
-
if (_this.props.clickArr)
|
|
30
|
+
if (_this.props.clickArr) {
|
|
28
31
|
(_a = _this.props).clickEvent.apply(_a, props.clickArr);
|
|
29
|
-
|
|
32
|
+
}
|
|
33
|
+
else {
|
|
30
34
|
_this.props.clickEvent();
|
|
35
|
+
}
|
|
31
36
|
}
|
|
32
|
-
}, onMouseDown: function () {
|
|
33
|
-
_this.btnImg
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
37
|
+
}, onMouseDown: function (e) {
|
|
38
|
+
if (!_this.btnImg) {
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
41
|
+
_this.btnImg.src = _this.props.picPress.buttonPic;
|
|
42
|
+
_this.btnImg.style.width = "".concat(props.picPress.width, "px"),
|
|
43
|
+
_this.btnImg.style.height = "".concat(props.picPress.height, "px");
|
|
44
|
+
if (!_this.btnText) {
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
_this.btnText.textContent = _this.props.picPress.buttonText;
|
|
48
|
+
_this.btnText.style.fontSize = "".concat(props.picPress.fontSize, "px");
|
|
38
49
|
}, onMouseUp: function () {
|
|
39
|
-
_this.btnImg
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
50
|
+
if (!_this.btnImg) {
|
|
51
|
+
return;
|
|
52
|
+
}
|
|
53
|
+
_this.btnImg.src = _this.props.picHover.buttonPic;
|
|
54
|
+
_this.btnImg.style.width = "".concat(props.picHover.width, "px"),
|
|
55
|
+
_this.btnImg.style.height = "".concat(props.picHover.height, "px");
|
|
56
|
+
if (!_this.btnText) {
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
_this.btnText.textContent = _this.props.picHover.buttonText;
|
|
60
|
+
_this.btnText.style.fontSize = "".concat(props.picHover.fontSize, "px");
|
|
44
61
|
}, onMouseOver: function () {
|
|
45
|
-
_this.btnImg
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
62
|
+
if (!_this.btnImg) {
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
65
|
+
_this.btnImg.src = _this.props.picHover.buttonPic;
|
|
66
|
+
_this.btnImg.style.width = "".concat(props.picHover.width, "px"),
|
|
67
|
+
_this.btnImg.style.height = "".concat(props.picHover.height, "px");
|
|
68
|
+
if (!_this.btnText) {
|
|
69
|
+
return;
|
|
70
|
+
}
|
|
71
|
+
;
|
|
72
|
+
_this.btnText.textContent = _this.props.picHover.buttonText;
|
|
73
|
+
_this.btnText.style.fontSize = "".concat(props.picHover.fontSize, "px");
|
|
50
74
|
}, onMouseOut: function () {
|
|
51
|
-
_this.btnImg
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
75
|
+
if (!_this.btnImg) {
|
|
76
|
+
return;
|
|
77
|
+
}
|
|
78
|
+
_this.btnImg.src = _this.props.picNormal.buttonPic;
|
|
79
|
+
_this.btnImg.style.width = "".concat(props.picNormal.width, "px"),
|
|
80
|
+
_this.btnImg.style.height = "".concat(props.picNormal.height, "px");
|
|
81
|
+
if (!_this.btnText) {
|
|
82
|
+
return;
|
|
83
|
+
}
|
|
84
|
+
_this.btnText.textContent = _this.props.picNormal.buttonText;
|
|
85
|
+
_this.btnText.style.fontSize = "".concat(props.picNormal.fontSize, "px");
|
|
56
86
|
} },
|
|
57
87
|
h("img", { ref: function (img) {
|
|
58
88
|
_this.btnImg = img;
|
|
59
|
-
}, style: { width: "".concat(props.
|
|
89
|
+
}, style: { width: "".concat(props.picNormal.width, "px"), height: "".concat(props.picNormal.height, "px") }, src: this.props.picNormal.buttonPic }),
|
|
60
90
|
h("div", { ref: function (text) {
|
|
61
91
|
_this.btnText = text;
|
|
62
|
-
}, style: { position: 'absolute', fontSize: "".concat(props.
|
|
92
|
+
}, style: { position: 'absolute', fontSize: "".concat(props.picNormal.fontSize, "px") } }, this.props.picNormal.buttonText)));
|
|
63
93
|
};
|
|
64
94
|
return Button;
|
|
65
95
|
}(Component));
|
|
@@ -52,7 +52,6 @@ export var OutlineText = /** @class */ (function (_super) {
|
|
|
52
52
|
function OutlineText(props) {
|
|
53
53
|
var _this = _super.call(this, props) || this;
|
|
54
54
|
_this.OnLoad = function (e) {
|
|
55
|
-
console.log('!!!!!!!!!!!!!!');
|
|
56
55
|
if (!window.require) {
|
|
57
56
|
console.error('need puerts env');
|
|
58
57
|
}
|
|
@@ -62,7 +61,6 @@ export var OutlineText = /** @class */ (function (_super) {
|
|
|
62
61
|
return;
|
|
63
62
|
}
|
|
64
63
|
var puerts = window.require('puerts');
|
|
65
|
-
console.log('?????');
|
|
66
64
|
var windowId = window.external.id;
|
|
67
65
|
var handle = e.target.attachment.handle;
|
|
68
66
|
var attachment = CS.com.tencent.pandora.CSharpInterface.GetSlotAttachmentByHandle(windowId, handle);
|
|
@@ -60,8 +60,9 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
|
60
60
|
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
61
61
|
}
|
|
62
62
|
};
|
|
63
|
-
import { h, Component } from '
|
|
64
|
-
|
|
63
|
+
import { h, Component } from 'preact';
|
|
64
|
+
//@ts-ignore
|
|
65
|
+
import { platformAPI } from 'src/common/frame/platform-api';
|
|
65
66
|
//@ts-ignore
|
|
66
67
|
import SlapfaceLess from './Slapface.less';
|
|
67
68
|
import { Images } from '../../sample/Images';
|
|
@@ -13,13 +13,13 @@ var __extends = (this && this.__extends) || (function () {
|
|
|
13
13
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
14
14
|
};
|
|
15
15
|
})();
|
|
16
|
-
import { h, Component } from
|
|
16
|
+
import { h, Component } from 'preact';
|
|
17
17
|
var ToggleGroup = /** @class */ (function (_super) {
|
|
18
18
|
__extends(ToggleGroup, _super);
|
|
19
19
|
function ToggleGroup(props) {
|
|
20
20
|
var _this = _super.call(this, props) || this;
|
|
21
21
|
_this.GenerateToggleItem = function (toggleItem, togglePic, index, refreshAll) {
|
|
22
|
-
return h(Toggle, { toggleText: toggleItem.toggleText, selectedFun: toggleItem.selectedFun, notSelectedFun: toggleItem.notSelectedFun, isSelected: toggleItem.isSelected, selected_pic: togglePic.selected_pic, not_selected_pic: togglePic.not_selected_pic, index: index, checkSelected: _this.checkSelected, refreshAll: _this.refreshAll });
|
|
22
|
+
return (h(Toggle, { toggleText: toggleItem.toggleText, selectedFun: toggleItem.selectedFun, notSelectedFun: toggleItem.notSelectedFun, isSelected: toggleItem.isSelected, selected_pic: togglePic.selected_pic, not_selected_pic: togglePic.not_selected_pic, index: index, checkSelected: _this.checkSelected, refreshAll: _this.refreshAll }));
|
|
23
23
|
};
|
|
24
24
|
_this.checkSelected = function (index) {
|
|
25
25
|
if (_this.isMultiOption)
|
|
@@ -60,7 +60,7 @@ var ToggleGroup = /** @class */ (function (_super) {
|
|
|
60
60
|
for (var i = 0; i < this.toggleArray.length; i++) {
|
|
61
61
|
this.items.push(this.GenerateToggleItem(this.toggleArray[i], this.togglePic, i, this.refreshAll));
|
|
62
62
|
}
|
|
63
|
-
return
|
|
63
|
+
return h("div", { style: { flexDirection: 'row' } }, this.items);
|
|
64
64
|
};
|
|
65
65
|
return ToggleGroup;
|
|
66
66
|
}(Component));
|
|
@@ -78,7 +78,7 @@ var Toggle = /** @class */ (function (_super) {
|
|
|
78
78
|
_this.checkSelected = props.checkSelected;
|
|
79
79
|
_this.refreshAll = props.refreshAll;
|
|
80
80
|
_this.state = {
|
|
81
|
-
isSelected: props.isSelected
|
|
81
|
+
isSelected: props.isSelected,
|
|
82
82
|
};
|
|
83
83
|
return _this;
|
|
84
84
|
}
|
|
@@ -89,11 +89,20 @@ var Toggle = /** @class */ (function (_super) {
|
|
|
89
89
|
return;
|
|
90
90
|
}
|
|
91
91
|
this.refreshAll = props.refreshAll;
|
|
92
|
-
return (h("div", { style: { alignItems:
|
|
93
|
-
h("div", { style: {
|
|
92
|
+
return (h("div", { style: { alignItems: 'flex-end', flexDirection: 'row' } },
|
|
93
|
+
h("div", { style: {
|
|
94
|
+
width: '36px',
|
|
95
|
+
height: '36px',
|
|
96
|
+
backgroundSize: 'contain',
|
|
97
|
+
backgroundImage: "url(".concat(this.state.isSelected ? this.selected_pic : this.not_selected_pic, ")"),
|
|
98
|
+
}, onClick: function () {
|
|
99
|
+
_this.state.isSelected ? _this.notSelectedFun() : _this.selectedFun();
|
|
100
|
+
_this.setState({ isSelected: !_this.state.isSelected });
|
|
101
|
+
_this.checkSelected(_this.index);
|
|
102
|
+
} }),
|
|
94
103
|
h("div", null,
|
|
95
104
|
h("text", null, "".concat(this.toggleText))),
|
|
96
|
-
h("div", { style: { width:
|
|
105
|
+
h("div", { style: { width: '50px' } })));
|
|
97
106
|
};
|
|
98
107
|
return Toggle;
|
|
99
108
|
}(Component));
|