pixuireactcomponents 1.3.6 → 1.3.8

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.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/ui/components/button/Button.js +56 -26
  3. package/ui/components/togglegroup/ToggleGroup.d.ts +21 -3
  4. package/ui/components/togglegroup/ToggleGroup.js +38 -24
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixuireactcomponents",
3
- "version": "1.3.6",
3
+ "version": "1.3.8",
4
4
  "description": "pixui react components",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/ui/components/button/Button.js 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
- return _super !== null && _super.apply(this, arguments) || this;
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
- else
32
+ }
33
+ else {
30
34
  _this.props.clickEvent();
35
+ }
31
36
  }
32
- }, onMouseDown: function () {
33
- _this.btnImg.src = _this.props.pic_yaxia.button_pic;
34
- _this.btnText.textContent = _this.props.pic_yaxia.button_text;
35
- _this.btnText.style.fontSize = "".concat(props.pic_yaxia.font_size, "px");
36
- (_this.btnImg.style.width = "".concat(props.pic_yaxia.width, "px")),
37
- (_this.btnImg.style.height = "".concat(props.pic_yaxia.height, "px"));
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.src = _this.props.pic_xuanfu.button_pic;
40
- _this.btnText.textContent = _this.props.pic_xuanfu.button_text;
41
- _this.btnText.style.fontSize = "".concat(props.pic_xuanfu.font_size, "px");
42
- (_this.btnImg.style.width = "".concat(props.pic_xuanfu.width, "px")),
43
- (_this.btnImg.style.height = "".concat(props.pic_xuanfu.height, "px"));
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.src = _this.props.pic_xuanfu.button_pic;
46
- _this.btnText.textContent = _this.props.pic_xuanfu.button_text;
47
- _this.btnText.style.fontSize = "".concat(props.pic_xuanfu.font_size, "px");
48
- (_this.btnImg.style.width = "".concat(props.pic_xuanfu.width, "px")),
49
- (_this.btnImg.style.height = "".concat(props.pic_xuanfu.height, "px"));
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.src = _this.props.pic_changtai.button_pic;
52
- _this.btnText.textContent = _this.props.pic_changtai.button_text;
53
- _this.btnText.style.fontSize = "".concat(props.pic_changtai.font_size, "px");
54
- (_this.btnImg.style.width = "".concat(props.pic_changtai.width, "px")),
55
- (_this.btnImg.style.height = "".concat(props.pic_changtai.height, "px"));
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.pic_changtai.width, "px"), height: "".concat(props.pic_changtai.height, "px") }, src: this.props.pic_changtai.button_pic }),
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.pic_changtai.font_size, "px") } }, this.props.pic_changtai.button_text)));
92
+ }, style: { position: 'absolute', fontSize: "".concat(props.picNormal.fontSize, "px") } }, this.props.picNormal.buttonText)));
63
93
  };
64
94
  return Button;
65
95
  }(Component));
package/ui/components/togglegroup/ToggleGroup.d.ts CHANGED
@@ -1,5 +1,22 @@
1
- import { h, Component } from "preact";
2
- export declare class ToggleGroup extends Component<any, any> {
1
+ import preact, { Component } from 'preact';
2
+ interface TogglePicInfo {
3
+ selected_pic: string;
4
+ not_selected_pic: string;
5
+ }
6
+ interface ToggleInfo {
7
+ toggleText: string;
8
+ selectedFun: Function;
9
+ notSelectedFun: Function;
10
+ [key: string]: any;
11
+ }
12
+ interface ToggleGroupProps {
13
+ togglePic: TogglePicInfo;
14
+ toggleArray: ToggleInfo[];
15
+ isMultiOption: boolean;
16
+ }
17
+ export declare class ToggleGroup extends Component<ToggleGroupProps, {
18
+ refreshStatus: boolean;
19
+ }> {
3
20
  private isMultiOption;
4
21
  private toggleArray;
5
22
  private togglePic;
@@ -9,5 +26,6 @@ export declare class ToggleGroup extends Component<any, any> {
9
26
  private GenerateToggleItem;
10
27
  private checkSelected;
11
28
  constructor(props: any);
12
- render(props: any): h.JSX.Element;
29
+ render(): preact.JSX.Element;
13
30
  }
31
+ export {};
package/ui/components/togglegroup/ToggleGroup.js CHANGED
@@ -13,13 +13,19 @@ 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 "preact";
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
+ _this.isMultiOption = _this.props.isMultiOption != undefined ? _this.props.isMultiOption : true;
22
+ _this.toggleArray = _this.props.toggleArray;
23
+ _this.togglePic = _this.props.togglePic;
24
+ _this.currentIndex = -1;
25
+ _this.items = [];
26
+ _this.refreshAll = true;
21
27
  _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 });
28
+ return (h(Toggle, { toggleItem: toggleItem, togglePic: togglePic, index: index, checkSelected: _this.checkSelected, refreshAll: refreshAll }));
23
29
  };
24
30
  _this.checkSelected = function (index) {
25
31
  if (_this.isMultiOption)
@@ -41,26 +47,25 @@ var ToggleGroup = /** @class */ (function (_super) {
41
47
  _this.toggleArray[index].isSelected = true;
42
48
  _this.currentIndex = index;
43
49
  _this.items = [];
44
- _this.forceUpdate();
50
+ _this.setState({
51
+ refreshStatus: !_this.state.refreshStatus,
52
+ });
45
53
  }
46
54
  }
47
55
  };
48
- _this.toggleArray = props.toggleArray;
49
56
  for (var i = 0; i < _this.toggleArray.length; i++) {
50
57
  _this.toggleArray[i].isSelected = false;
51
58
  }
52
- _this.togglePic = props.togglePic;
53
- _this.isMultiOption = props.isMultiOption != undefined ? props.isMultiOption : true;
54
- _this.currentIndex = -1;
55
- _this.refreshAll = true;
56
- _this.items = [];
59
+ _this.state = {
60
+ refreshStatus: true,
61
+ };
57
62
  return _this;
58
63
  }
59
- ToggleGroup.prototype.render = function (props) {
64
+ ToggleGroup.prototype.render = function () {
60
65
  for (var i = 0; i < this.toggleArray.length; i++) {
61
66
  this.items.push(this.GenerateToggleItem(this.toggleArray[i], this.togglePic, i, this.refreshAll));
62
67
  }
63
- return (h("div", { style: { flexDirection: "row" } }, this.items));
68
+ return h("div", { style: { flexDirection: 'row' } }, this.items);
64
69
  };
65
70
  return ToggleGroup;
66
71
  }(Component));
@@ -69,31 +74,40 @@ var Toggle = /** @class */ (function (_super) {
69
74
  __extends(Toggle, _super);
70
75
  function Toggle(props) {
71
76
  var _this = _super.call(this, props) || this;
72
- _this.selected_pic = props.selected_pic;
73
- _this.not_selected_pic = props.not_selected_pic;
74
- _this.toggleText = props.toggleText;
75
- _this.selectedFun = props.selectedFun;
76
- _this.notSelectedFun = props.notSelectedFun;
77
- _this.index = props.index;
78
- _this.checkSelected = props.checkSelected;
79
- _this.refreshAll = props.refreshAll;
77
+ _this.selected_pic = _this.props.togglePic.selected_pic;
78
+ _this.not_selected_pic = _this.props.togglePic.not_selected_pic;
79
+ _this.toggleText = _this.props.toggleItem.toggleText;
80
+ _this.selectedFun = _this.props.toggleItem.selectedFun;
81
+ _this.notSelectedFun = _this.props.toggleItem.notSelectedFun;
82
+ _this.index = _this.props.index;
83
+ _this.checkSelected = _this.props.checkSelected;
84
+ _this.refreshAll = _this.props.refreshAll;
80
85
  _this.state = {
81
- isSelected: props.isSelected
86
+ isSelected: _this.props.toggleItem.isSelected,
82
87
  };
83
88
  return _this;
84
89
  }
85
90
  Toggle.prototype.render = function (props) {
86
91
  var _this = this;
87
- if (props.refreshAll != this.refreshAll && props.isSelected != this.state.isSelected) {
92
+ if (props.refreshAll != this.refreshAll && this.props.toggleItem.isSelected != this.state.isSelected) {
88
93
  this.setState({ isSelected: !this.state.isSelected });
89
94
  return;
90
95
  }
91
96
  this.refreshAll = props.refreshAll;
92
- return (h("div", { style: { alignItems: "flex-end", flexDirection: "row" } },
93
- h("div", { style: { width: "36px", height: "36px", backgroundSize: "contain", backgroundImage: "url(".concat(this.state.isSelected ? this.selected_pic : this.not_selected_pic, ")") }, onClick: function () { _this.state.isSelected ? _this.notSelectedFun() : _this.selectedFun(); _this.setState({ isSelected: !_this.state.isSelected }); _this.checkSelected(_this.index); } }),
97
+ return (h("div", { style: { alignItems: 'flex-end', flexDirection: 'row' } },
98
+ h("div", { style: {
99
+ width: '36px',
100
+ height: '36px',
101
+ backgroundSize: 'contain',
102
+ backgroundImage: "url(".concat(this.state.isSelected ? this.selected_pic : this.not_selected_pic, ")"),
103
+ }, onClick: function () {
104
+ _this.state.isSelected ? _this.notSelectedFun() : _this.selectedFun();
105
+ _this.setState({ isSelected: !_this.state.isSelected });
106
+ _this.checkSelected(_this.index);
107
+ } }),
94
108
  h("div", null,
95
109
  h("text", null, "".concat(this.toggleText))),
96
- h("div", { style: { width: "50px" } })));
110
+ h("div", { style: { width: '50px' } })));
97
111
  };
98
112
  return Toggle;
99
113
  }(Component));