pixuireactcomponents 1.1.21 → 1.1.22

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 (37) hide show
  1. package/README.md +5 -5
  2. package/index.d.ts +15 -15
  3. package/index.js +16 -16
  4. package/package.json +11 -11
  5. package/tools/EventDispatcherJs.d.ts +10 -10
  6. package/tools/EventDispatcherJs.js +71 -71
  7. package/tools/Logger.d.ts +6 -6
  8. package/tools/Logger.js +138 -138
  9. package/tools/tools.md +21 -21
  10. package/ui/components/button/Button.d.ts +5 -5
  11. package/ui/components/button/Button.js +37 -37
  12. package/ui/components/carousel/Carousel.d.ts +5 -5
  13. package/ui/components/carousel/Carousel.js +219 -219
  14. package/ui/components/dropdown/Dropdown.d.ts +30 -30
  15. package/ui/components/dropdown/Dropdown.js +92 -92
  16. package/ui/components/dropdown/DropdownOptionUI.d.ts +11 -11
  17. package/ui/components/dropdown/DropdownOptionUI.js +28 -28
  18. package/ui/components/dropdown/DropdownSpreadMainUI.d.ts +9 -9
  19. package/ui/components/dropdown/DropdownSpreadMainUI.js +27 -27
  20. package/ui/components/dropdown/DropdownUnspreadMainUI.d.ts +9 -9
  21. package/ui/components/dropdown/DropdownUnspreadMainUI.js +27 -27
  22. package/ui/components/gradient/GradientText.d.ts +63 -63
  23. package/ui/components/gradient/GradientText.js +329 -329
  24. package/ui/components/outlinetext/OutlineText.d.ts +73 -73
  25. package/ui/components/outlinetext/OutlineText.js +157 -157
  26. package/ui/components/progress/Progress.d.ts +34 -34
  27. package/ui/components/progress/Progress.js +142 -142
  28. package/ui/components/slapface/Slapface.d.ts +12 -12
  29. package/ui/components/slapface/Slapface.js +224 -227
  30. package/ui/components/slapface/less/Slapface.less +125 -0
  31. package/ui/components/slider/Slider.d.ts +57 -57
  32. package/ui/components/slider/Slider.js +289 -289
  33. package/ui/components/tab/Tab.d.ts +6 -6
  34. package/ui/components/tab/Tab.js +27 -27
  35. package/ui/components/tab/Tabs.d.ts +12 -12
  36. package/ui/components/tab/Tabs.js +54 -54
  37. package/ui/ui.md +1 -1
@@ -1,289 +1,289 @@
1
- var __extends = (this && this.__extends) || (function () {
2
- var extendStatics = function (d, b) {
3
- extendStatics = Object.setPrototypeOf ||
4
- ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
5
- function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
6
- return extendStatics(d, b);
7
- };
8
- return function (d, b) {
9
- if (typeof b !== "function" && b !== null)
10
- throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
11
- extendStatics(d, b);
12
- function __() { this.constructor = d; }
13
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
14
- };
15
- })();
16
- var __assign = (this && this.__assign) || function () {
17
- __assign = Object.assign || function(t) {
18
- for (var s, i = 1, n = arguments.length; i < n; i++) {
19
- s = arguments[i];
20
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
21
- t[p] = s[p];
22
- }
23
- return t;
24
- };
25
- return __assign.apply(this, arguments);
26
- };
27
- import { Component, createRef, h } from 'preact';
28
- var row_center_center = {
29
- display: 'flex',
30
- flexDirection: 'row',
31
- justifyContent: 'center',
32
- alignItems: 'center'
33
- };
34
- var row_between_center = {
35
- display: 'flex',
36
- flexDirection: 'row',
37
- justifyContent: 'space-between',
38
- alignItems: 'center'
39
- };
40
- var wrapperStyle;
41
- var outerStyle;
42
- var innerStyle;
43
- var dotStyle;
44
- var dotWrapperStyle;
45
- var incButtonStyle;
46
- var decButtonStyle;
47
- var withButtonStyle;
48
- var lastX = undefined; // 上一次位置的横坐标
49
- var count = 0; // 拖动条距离最左端的位置 [0, this.props.wrapperWidth]
50
- var rect = undefined; // 滑动区域
51
- var Slider = /** @class */ (function (_super) {
52
- __extends(Slider, _super);
53
- function Slider(props) {
54
- var _this = _super.call(this, props) || this;
55
- _this.discrete = Math.round(_this.props.discrete == null ? 0 : _this.props.discrete);
56
- _this.refWrapper = createRef();
57
- _this.onDragStart = function (event) {
58
- console.log('【Slider】DragStart event.clientX--' + event.clientX + '-----percent----' + _this.state.percent + '-----currentX----' + (_this.state.percent / 10000 * _this.props.wrapperWidth));
59
- lastX = event.clentX;
60
- count = _this.state.percent / 10000 * _this.props.wrapperWidth;
61
- if (_this.props.onDragStart) {
62
- _this.props.onDragStart();
63
- }
64
- };
65
- _this.onDrag = function (event) {
66
- if (event.clientX < rect.left - 50 || event.clientX > rect.right + 50)
67
- return;
68
- if (lastX == undefined) {
69
- lastX = event.clientX;
70
- return;
71
- }
72
- var move = Number(event.clientX) - Number(lastX);
73
- count += move;
74
- count = Math.min(_this.props.wrapperWidth, count);
75
- count = Math.max(0, count);
76
- var newPercent = count / _this.props.wrapperWidth * 10000;
77
- if (_this.props.isDiscrete == true && _this.props.maxDiscrete != null) {
78
- newPercent = count / _this.props.wrapperWidth * _this.props.maxDiscrete;
79
- _this.discrete = Math.round(newPercent);
80
- // this.setState({
81
- // discrete: Math.round(newPercent),
82
- // })
83
- if (_this.props.rangeControl) {
84
- if (_this.props.endRange != null)
85
- _this.discrete = Math.min(_this.discrete, _this.props.endRange);
86
- if (_this.props.startRange != null)
87
- _this.discrete = Math.max(_this.discrete, _this.props.startRange);
88
- }
89
- newPercent = _this.discrete * (10000 / _this.props.maxDiscrete);
90
- }
91
- _this.setState({
92
- percent: newPercent
93
- }, function () {
94
- console.log('【Slider】OnDrag event.clientX--' + event.clientX + '-----percent----' + _this.state.percent + '-----discrete----' + _this.discrete + '-----currentX----' + (_this.state.percent / 10000 * _this.props.wrapperWidth));
95
- if (_this.props.onDrag)
96
- _this.props.onDrag(_this.props.isDiscrete ? _this.discrete : newPercent);
97
- });
98
- lastX = event.clientX;
99
- };
100
- _this.onDragEnd = function (event) {
101
- lastX = undefined;
102
- if (_this.props.isDiscrete == true && _this.props.maxDiscrete != null) {
103
- //console.log("OnDragEnd -----discrete----"+this.state.discrete)
104
- _this.setState({
105
- percent: _this.discrete * (10000 / _this.props.maxDiscrete),
106
- }, function () {
107
- console.log('【Slider】DragEnd event.clientX--' + event.clientX + '-----percent----' + _this.state.percent + '-----discrete----' + _this.discrete + '-----currentX----' + (_this.state.percent / 10000 * _this.props.wrapperWidth));
108
- if (_this.props.onDragEnd) {
109
- _this.props.onDragEnd(_this.props.isDiscrete ? _this.discrete : _this.state.percent);
110
- }
111
- });
112
- }
113
- else {
114
- console.log('【Slider】DragEnd event.clientX--' + event.clientX + '-----percent----' + _this.state.percent + '-----currentX----' + (_this.state.percent / 10000 * _this.props.wrapperWidth));
115
- if (_this.props.onDragEnd) {
116
- _this.props.onDragEnd(_this.props.isDiscrete ? _this.discrete : _this.state.percent);
117
- }
118
- }
119
- };
120
- _this.onDecClick = function () {
121
- //离散的情况
122
- if (_this.props.isDiscrete && _this.props.maxDiscrete) {
123
- if (_this.discrete >= 1) {
124
- _this.discrete -= 1;
125
- if (_this.props.rangeControl && _this.props.startRange != null) {
126
- _this.discrete = Math.max(_this.discrete, _this.props.startRange);
127
- }
128
- var newPercent = _this.discrete * (10000 / _this.props.maxDiscrete);
129
- _this.setState({
130
- //discrete: this.state.discrete - 1,
131
- percent: newPercent
132
- }, function () {
133
- if (_this.props.onDecClick) {
134
- _this.props.onDecClick(_this.discrete);
135
- }
136
- });
137
- }
138
- }
139
- //连续的情况
140
- else {
141
- if (_this.state.percent > 0) {
142
- _this.setState({
143
- percent: _this.state.percent - 1
144
- }, function () {
145
- if (_this.props.onIncClick) {
146
- _this.props.onIncClick(_this.state.percent);
147
- }
148
- });
149
- }
150
- }
151
- };
152
- _this.onIncClick = function () {
153
- //离散的情况
154
- if (_this.props.isDiscrete && _this.props.maxDiscrete) {
155
- if (_this.discrete < _this.props.maxDiscrete) {
156
- _this.discrete += 1;
157
- if (_this.props.rangeControl && _this.props.startRange != null) {
158
- _this.discrete = Math.max(_this.discrete, _this.props.startRange);
159
- }
160
- var newPercent = _this.discrete * (10000 / _this.props.maxDiscrete);
161
- _this.setState({
162
- // discrete: this.state.discrete + 1,
163
- percent: newPercent
164
- }, function () {
165
- if (_this.props.onIncClick) {
166
- _this.props.onIncClick(_this.discrete);
167
- }
168
- });
169
- }
170
- }
171
- //连续的情况
172
- else {
173
- if (_this.state.percent < 10000) {
174
- _this.setState({
175
- percent: _this.state.percent + 1
176
- }, function () {
177
- if (_this.props.onIncClick) {
178
- _this.props.onIncClick(_this.state.percent);
179
- }
180
- });
181
- }
182
- }
183
- };
184
- _this.computeWrapperStyle = function () {
185
- wrapperStyle = __assign({ width: _this.props.wrapperWidth + 'px', height: _this.props.wrapperHeight + 'px' }, row_center_center);
186
- };
187
- _this.computeOuterStyle = function () {
188
- outerStyle = {
189
- width: '100%',
190
- height: _this.props.height + 'px',
191
- backgroundImage: "url(".concat(_this.props.outerBg, ")"),
192
- backgroundSize: '100% 100%',
193
- display: 'flex',
194
- flexDirection: 'row',
195
- justifyContent: 'start',
196
- alignItems: 'center'
197
- };
198
- };
199
- _this.computeInnerStyle = function () {
200
- var _width = Math.floor(_this.state.percent / 100) + '%';
201
- innerStyle = {
202
- width: _width,
203
- height: (_this.props.innerHeight != null) ? _this.props.innerHeight + 'px' : '100%',
204
- backgroundImage: "url(".concat(_this.props.innerBg, ")"),
205
- backgroundSize: '100% 100%',
206
- display: 'flex',
207
- flexDirection: 'row',
208
- justifyContent: 'start',
209
- alignItems: 'center'
210
- };
211
- };
212
- _this.computeDotWrapperStyle = function () {
213
- dotWrapperStyle = __assign({ position: 'absolute', width: _this.props.dotWrapperWidth + 'px', height: _this.props.dotWrapperHeight + 'px',
214
- //marginTop: (this.props.height - this.props.dotWrapperHeight) / 2 + "px",
215
- marginLeft: (_this.props.wrapperWidth * _this.state.percent / 10000 - _this.props.dotWrapperWidth / 2) + 'px' }, row_center_center
216
- // backgroundColor: '#FF000066'
217
- );
218
- };
219
- _this.computeDotStyle = function () {
220
- dotStyle = {
221
- width: _this.props.dotWidth + 'px',
222
- height: _this.props.dotHeight + 'px',
223
- };
224
- };
225
- _this.computeIncButtonStyle = function () {
226
- incButtonStyle = {
227
- width: _this.props.incButtonWidth + 'px',
228
- height: _this.props.incButtonHeight + 'px',
229
- //marginLeft:this.props.incButtonLeft+"px",
230
- //backgroundImage: `url(${this.props.incButtonBg})`,
231
- };
232
- };
233
- _this.computeDecButtonStyle = function () {
234
- decButtonStyle = {
235
- width: _this.props.decButtonWidth + 'px',
236
- height: _this.props.decButtonHeight + 'px',
237
- //marginRight:this.props.decButtonRight+"px",
238
- //backgroundImage: `url(${this.props.decButtonBg})`,
239
- };
240
- };
241
- _this.computeWithButtonStyle = function () {
242
- withButtonStyle = __assign({ minWidth: _this.props.overallWidth + 'px' }, row_between_center);
243
- };
244
- _this.state = {
245
- percent: (props.discrete != null && _this.props.maxDiscrete != null && _this.props.discrete != null) ? _this.props.discrete * (10000 / _this.props.maxDiscrete) : Math.floor(_this.props.percent),
246
- //discrete: Math.round(this.props.discrete==null?0:this.props.discrete)
247
- };
248
- _this.computeWrapperStyle();
249
- _this.computeOuterStyle();
250
- return _this;
251
- }
252
- Slider.prototype.componentDidMount = function () {
253
- rect = this.refWrapper.current.getBoundingClientRect();
254
- };
255
- Slider.prototype.componentWillReceiveProps = function (nextProps) {
256
- if (nextProps.percent == this.props.percent && nextProps.discrete == this.props.discrete)
257
- return;
258
- if (this.props.isDiscrete == true && this.props.maxDiscrete != null) {
259
- this.discrete = nextProps.discrete;
260
- this.setState({
261
- //discrete:nextProps.discrete,
262
- percent: this.discrete * (10000 / this.props.maxDiscrete)
263
- });
264
- }
265
- else {
266
- this.setState({
267
- percent: nextProps.percent,
268
- });
269
- }
270
- };
271
- Slider.prototype.render = function () {
272
- this.computeInnerStyle();
273
- this.computeDotWrapperStyle();
274
- this.computeDotStyle();
275
- this.computeIncButtonStyle();
276
- this.computeDecButtonStyle();
277
- this.computeWithButtonStyle();
278
- return (h("div", { style: this.props.hasIncDecButton ? withButtonStyle : {} },
279
- this.props.hasIncDecButton && h("img", { src: this.props.decButtonBg, style: decButtonStyle, onClick: this.onDecClick }),
280
- h("div", { ref: this.refWrapper, style: wrapperStyle },
281
- h("div", { style: outerStyle },
282
- h("div", { style: innerStyle },
283
- h("div", { style: dotWrapperStyle, draggable: true, onDragStart: this.onDragStart, onDrag: this.onDrag, onDragEnd: this.onDragEnd },
284
- h("img", { src: this.props.dotBg, style: dotStyle }))))),
285
- this.props.hasIncDecButton && h("img", { src: this.props.incButtonBg, style: incButtonStyle, onClick: this.onIncClick })));
286
- };
287
- return Slider;
288
- }(Component));
289
- export { Slider };
1
+ var __extends = (this && this.__extends) || (function () {
2
+ var extendStatics = function (d, b) {
3
+ extendStatics = Object.setPrototypeOf ||
4
+ ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
5
+ function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
6
+ return extendStatics(d, b);
7
+ };
8
+ return function (d, b) {
9
+ if (typeof b !== "function" && b !== null)
10
+ throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
11
+ extendStatics(d, b);
12
+ function __() { this.constructor = d; }
13
+ d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
14
+ };
15
+ })();
16
+ var __assign = (this && this.__assign) || function () {
17
+ __assign = Object.assign || function(t) {
18
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
19
+ s = arguments[i];
20
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
21
+ t[p] = s[p];
22
+ }
23
+ return t;
24
+ };
25
+ return __assign.apply(this, arguments);
26
+ };
27
+ import { Component, createRef, h } from 'preact';
28
+ var row_center_center = {
29
+ display: 'flex',
30
+ flexDirection: 'row',
31
+ justifyContent: 'center',
32
+ alignItems: 'center'
33
+ };
34
+ var row_between_center = {
35
+ display: 'flex',
36
+ flexDirection: 'row',
37
+ justifyContent: 'space-between',
38
+ alignItems: 'center'
39
+ };
40
+ var wrapperStyle;
41
+ var outerStyle;
42
+ var innerStyle;
43
+ var dotStyle;
44
+ var dotWrapperStyle;
45
+ var incButtonStyle;
46
+ var decButtonStyle;
47
+ var withButtonStyle;
48
+ var lastX = undefined; // 上一次位置的横坐标
49
+ var count = 0; // 拖动条距离最左端的位置 [0, this.props.wrapperWidth]
50
+ var rect = undefined; // 滑动区域
51
+ var Slider = /** @class */ (function (_super) {
52
+ __extends(Slider, _super);
53
+ function Slider(props) {
54
+ var _this = _super.call(this, props) || this;
55
+ _this.discrete = Math.round(_this.props.discrete == null ? 0 : _this.props.discrete);
56
+ _this.refWrapper = createRef();
57
+ _this.onDragStart = function (event) {
58
+ console.log('【Slider】DragStart event.clientX--' + event.clientX + '-----percent----' + _this.state.percent + '-----currentX----' + (_this.state.percent / 10000 * _this.props.wrapperWidth));
59
+ lastX = event.clentX;
60
+ count = _this.state.percent / 10000 * _this.props.wrapperWidth;
61
+ if (_this.props.onDragStart) {
62
+ _this.props.onDragStart();
63
+ }
64
+ };
65
+ _this.onDrag = function (event) {
66
+ if (event.clientX < rect.left - 50 || event.clientX > rect.right + 50)
67
+ return;
68
+ if (lastX == undefined) {
69
+ lastX = event.clientX;
70
+ return;
71
+ }
72
+ var move = Number(event.clientX) - Number(lastX);
73
+ count += move;
74
+ count = Math.min(_this.props.wrapperWidth, count);
75
+ count = Math.max(0, count);
76
+ var newPercent = count / _this.props.wrapperWidth * 10000;
77
+ if (_this.props.isDiscrete == true && _this.props.maxDiscrete != null) {
78
+ newPercent = count / _this.props.wrapperWidth * _this.props.maxDiscrete;
79
+ _this.discrete = Math.round(newPercent);
80
+ // this.setState({
81
+ // discrete: Math.round(newPercent),
82
+ // })
83
+ if (_this.props.rangeControl) {
84
+ if (_this.props.endRange != null)
85
+ _this.discrete = Math.min(_this.discrete, _this.props.endRange);
86
+ if (_this.props.startRange != null)
87
+ _this.discrete = Math.max(_this.discrete, _this.props.startRange);
88
+ }
89
+ newPercent = _this.discrete * (10000 / _this.props.maxDiscrete);
90
+ }
91
+ _this.setState({
92
+ percent: newPercent
93
+ }, function () {
94
+ console.log('【Slider】OnDrag event.clientX--' + event.clientX + '-----percent----' + _this.state.percent + '-----discrete----' + _this.discrete + '-----currentX----' + (_this.state.percent / 10000 * _this.props.wrapperWidth));
95
+ if (_this.props.onDrag)
96
+ _this.props.onDrag(_this.props.isDiscrete ? _this.discrete : newPercent);
97
+ });
98
+ lastX = event.clientX;
99
+ };
100
+ _this.onDragEnd = function (event) {
101
+ lastX = undefined;
102
+ if (_this.props.isDiscrete == true && _this.props.maxDiscrete != null) {
103
+ //console.log("OnDragEnd -----discrete----"+this.state.discrete)
104
+ _this.setState({
105
+ percent: _this.discrete * (10000 / _this.props.maxDiscrete),
106
+ }, function () {
107
+ console.log('【Slider】DragEnd event.clientX--' + event.clientX + '-----percent----' + _this.state.percent + '-----discrete----' + _this.discrete + '-----currentX----' + (_this.state.percent / 10000 * _this.props.wrapperWidth));
108
+ if (_this.props.onDragEnd) {
109
+ _this.props.onDragEnd(_this.props.isDiscrete ? _this.discrete : _this.state.percent);
110
+ }
111
+ });
112
+ }
113
+ else {
114
+ console.log('【Slider】DragEnd event.clientX--' + event.clientX + '-----percent----' + _this.state.percent + '-----currentX----' + (_this.state.percent / 10000 * _this.props.wrapperWidth));
115
+ if (_this.props.onDragEnd) {
116
+ _this.props.onDragEnd(_this.props.isDiscrete ? _this.discrete : _this.state.percent);
117
+ }
118
+ }
119
+ };
120
+ _this.onDecClick = function () {
121
+ //离散的情况
122
+ if (_this.props.isDiscrete && _this.props.maxDiscrete) {
123
+ if (_this.discrete >= 1) {
124
+ _this.discrete -= 1;
125
+ if (_this.props.rangeControl && _this.props.startRange != null) {
126
+ _this.discrete = Math.max(_this.discrete, _this.props.startRange);
127
+ }
128
+ var newPercent = _this.discrete * (10000 / _this.props.maxDiscrete);
129
+ _this.setState({
130
+ //discrete: this.state.discrete - 1,
131
+ percent: newPercent
132
+ }, function () {
133
+ if (_this.props.onDecClick) {
134
+ _this.props.onDecClick(_this.discrete);
135
+ }
136
+ });
137
+ }
138
+ }
139
+ //连续的情况
140
+ else {
141
+ if (_this.state.percent > 0) {
142
+ _this.setState({
143
+ percent: _this.state.percent - 1
144
+ }, function () {
145
+ if (_this.props.onIncClick) {
146
+ _this.props.onIncClick(_this.state.percent);
147
+ }
148
+ });
149
+ }
150
+ }
151
+ };
152
+ _this.onIncClick = function () {
153
+ //离散的情况
154
+ if (_this.props.isDiscrete && _this.props.maxDiscrete) {
155
+ if (_this.discrete < _this.props.maxDiscrete) {
156
+ _this.discrete += 1;
157
+ if (_this.props.rangeControl && _this.props.startRange != null) {
158
+ _this.discrete = Math.max(_this.discrete, _this.props.startRange);
159
+ }
160
+ var newPercent = _this.discrete * (10000 / _this.props.maxDiscrete);
161
+ _this.setState({
162
+ // discrete: this.state.discrete + 1,
163
+ percent: newPercent
164
+ }, function () {
165
+ if (_this.props.onIncClick) {
166
+ _this.props.onIncClick(_this.discrete);
167
+ }
168
+ });
169
+ }
170
+ }
171
+ //连续的情况
172
+ else {
173
+ if (_this.state.percent < 10000) {
174
+ _this.setState({
175
+ percent: _this.state.percent + 1
176
+ }, function () {
177
+ if (_this.props.onIncClick) {
178
+ _this.props.onIncClick(_this.state.percent);
179
+ }
180
+ });
181
+ }
182
+ }
183
+ };
184
+ _this.computeWrapperStyle = function () {
185
+ wrapperStyle = __assign({ width: _this.props.wrapperWidth + 'px', height: _this.props.wrapperHeight + 'px' }, row_center_center);
186
+ };
187
+ _this.computeOuterStyle = function () {
188
+ outerStyle = {
189
+ width: '100%',
190
+ height: _this.props.height + 'px',
191
+ backgroundImage: "url(".concat(_this.props.outerBg, ")"),
192
+ backgroundSize: '100% 100%',
193
+ display: 'flex',
194
+ flexDirection: 'row',
195
+ justifyContent: 'start',
196
+ alignItems: 'center'
197
+ };
198
+ };
199
+ _this.computeInnerStyle = function () {
200
+ var _width = Math.floor(_this.state.percent / 100) + '%';
201
+ innerStyle = {
202
+ width: _width,
203
+ height: (_this.props.innerHeight != null) ? _this.props.innerHeight + 'px' : '100%',
204
+ backgroundImage: "url(".concat(_this.props.innerBg, ")"),
205
+ backgroundSize: '100% 100%',
206
+ display: 'flex',
207
+ flexDirection: 'row',
208
+ justifyContent: 'start',
209
+ alignItems: 'center'
210
+ };
211
+ };
212
+ _this.computeDotWrapperStyle = function () {
213
+ dotWrapperStyle = __assign({ position: 'absolute', width: _this.props.dotWrapperWidth + 'px', height: _this.props.dotWrapperHeight + 'px',
214
+ //marginTop: (this.props.height - this.props.dotWrapperHeight) / 2 + "px",
215
+ marginLeft: (_this.props.wrapperWidth * _this.state.percent / 10000 - _this.props.dotWrapperWidth / 2) + 'px' }, row_center_center
216
+ // backgroundColor: '#FF000066'
217
+ );
218
+ };
219
+ _this.computeDotStyle = function () {
220
+ dotStyle = {
221
+ width: _this.props.dotWidth + 'px',
222
+ height: _this.props.dotHeight + 'px',
223
+ };
224
+ };
225
+ _this.computeIncButtonStyle = function () {
226
+ incButtonStyle = {
227
+ width: _this.props.incButtonWidth + 'px',
228
+ height: _this.props.incButtonHeight + 'px',
229
+ //marginLeft:this.props.incButtonLeft+"px",
230
+ //backgroundImage: `url(${this.props.incButtonBg})`,
231
+ };
232
+ };
233
+ _this.computeDecButtonStyle = function () {
234
+ decButtonStyle = {
235
+ width: _this.props.decButtonWidth + 'px',
236
+ height: _this.props.decButtonHeight + 'px',
237
+ //marginRight:this.props.decButtonRight+"px",
238
+ //backgroundImage: `url(${this.props.decButtonBg})`,
239
+ };
240
+ };
241
+ _this.computeWithButtonStyle = function () {
242
+ withButtonStyle = __assign({ minWidth: _this.props.overallWidth + 'px' }, row_between_center);
243
+ };
244
+ _this.state = {
245
+ percent: (props.discrete != null && _this.props.maxDiscrete != null && _this.props.discrete != null) ? _this.props.discrete * (10000 / _this.props.maxDiscrete) : Math.floor(_this.props.percent),
246
+ //discrete: Math.round(this.props.discrete==null?0:this.props.discrete)
247
+ };
248
+ _this.computeWrapperStyle();
249
+ _this.computeOuterStyle();
250
+ return _this;
251
+ }
252
+ Slider.prototype.componentDidMount = function () {
253
+ rect = this.refWrapper.current.getBoundingClientRect();
254
+ };
255
+ Slider.prototype.componentWillReceiveProps = function (nextProps) {
256
+ if (nextProps.percent == this.props.percent && nextProps.discrete == this.props.discrete)
257
+ return;
258
+ if (this.props.isDiscrete == true && this.props.maxDiscrete != null) {
259
+ this.discrete = nextProps.discrete;
260
+ this.setState({
261
+ //discrete:nextProps.discrete,
262
+ percent: this.discrete * (10000 / this.props.maxDiscrete)
263
+ });
264
+ }
265
+ else {
266
+ this.setState({
267
+ percent: nextProps.percent,
268
+ });
269
+ }
270
+ };
271
+ Slider.prototype.render = function () {
272
+ this.computeInnerStyle();
273
+ this.computeDotWrapperStyle();
274
+ this.computeDotStyle();
275
+ this.computeIncButtonStyle();
276
+ this.computeDecButtonStyle();
277
+ this.computeWithButtonStyle();
278
+ return (h("div", { style: this.props.hasIncDecButton ? withButtonStyle : {} },
279
+ this.props.hasIncDecButton && h("img", { src: this.props.decButtonBg, style: decButtonStyle, onClick: this.onDecClick }),
280
+ h("div", { ref: this.refWrapper, style: wrapperStyle },
281
+ h("div", { style: outerStyle },
282
+ h("div", { style: innerStyle },
283
+ h("div", { style: dotWrapperStyle, draggable: true, onDragStart: this.onDragStart, onDrag: this.onDrag, onDragEnd: this.onDragEnd },
284
+ h("img", { src: this.props.dotBg, style: dotStyle }))))),
285
+ this.props.hasIncDecButton && h("img", { src: this.props.incButtonBg, style: incButtonStyle, onClick: this.onIncClick })));
286
+ };
287
+ return Slider;
288
+ }(Component));
289
+ export { Slider };
@@ -1,6 +1,6 @@
1
- import { Component, JSX } from "preact";
2
- export declare class Tab extends Component<{
3
- realTab: JSX.Element;
4
- }, any> {
5
- render(): JSX.Element;
6
- }
1
+ import { Component, JSX } from "preact";
2
+ export declare class Tab extends Component<{
3
+ realTab: JSX.Element;
4
+ }, any> {
5
+ render(): JSX.Element;
6
+ }
@@ -1,27 +1,27 @@
1
- var __extends = (this && this.__extends) || (function () {
2
- var extendStatics = function (d, b) {
3
- extendStatics = Object.setPrototypeOf ||
4
- ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
5
- function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
6
- return extendStatics(d, b);
7
- };
8
- return function (d, b) {
9
- if (typeof b !== "function" && b !== null)
10
- throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
11
- extendStatics(d, b);
12
- function __() { this.constructor = d; }
13
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
14
- };
15
- })();
16
- import { Component } from "preact";
17
- var Tab = /** @class */ (function (_super) {
18
- __extends(Tab, _super);
19
- function Tab() {
20
- return _super !== null && _super.apply(this, arguments) || this;
21
- }
22
- Tab.prototype.render = function () {
23
- return (this.props.realTab);
24
- };
25
- return Tab;
26
- }(Component));
27
- export { Tab };
1
+ var __extends = (this && this.__extends) || (function () {
2
+ var extendStatics = function (d, b) {
3
+ extendStatics = Object.setPrototypeOf ||
4
+ ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
5
+ function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
6
+ return extendStatics(d, b);
7
+ };
8
+ return function (d, b) {
9
+ if (typeof b !== "function" && b !== null)
10
+ throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
11
+ extendStatics(d, b);
12
+ function __() { this.constructor = d; }
13
+ d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
14
+ };
15
+ })();
16
+ import { Component } from "preact";
17
+ var Tab = /** @class */ (function (_super) {
18
+ __extends(Tab, _super);
19
+ function Tab() {
20
+ return _super !== null && _super.apply(this, arguments) || this;
21
+ }
22
+ Tab.prototype.render = function () {
23
+ return (this.props.realTab);
24
+ };
25
+ return Tab;
26
+ }(Component));
27
+ export { Tab };