@tuya-miniapp/smart-ui 2.3.0-beta-1 → 2.3.0-beta-3

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 (12) hide show
  1. package/dist/picker/index.js +19 -0
  2. package/dist/picker/index.wxml +2 -0
  3. package/dist/picker-column/index.js +42 -5
  4. package/dist/popover/index.css +1 -1
  5. package/dist/popover/index.wxss +1 -1
  6. package/lib/picker/demo/index.js +6 -0
  7. package/lib/picker/index.js +19 -0
  8. package/lib/picker/index.wxml +2 -0
  9. package/lib/picker-column/index.js +49 -12
  10. package/lib/popover/index.css +1 -1
  11. package/lib/popover/index.wxss +1 -1
  12. package/package.json +1 -1
package/dist/picker/index.js CHANGED
@@ -30,6 +30,9 @@ SmartComponent({
30
30
  }
31
31
  },
32
32
  } }),
33
+ data: {
34
+ animating: false,
35
+ },
33
36
  beforeCreate() {
34
37
  Object.defineProperty(this, 'children', {
35
38
  get: () => this.selectAllComponents('.smart-picker__column') || [],
@@ -141,5 +144,21 @@ SmartComponent({
141
144
  const stack = indexes.map((optionIndex, columnIndex) => this.setColumnIndex(columnIndex, optionIndex));
142
145
  return Promise.all(stack);
143
146
  },
147
+ animationStart() {
148
+ if (this.data.animating)
149
+ return;
150
+ this.setData({
151
+ animating: true,
152
+ });
153
+ this.$emit('animationStart');
154
+ },
155
+ animationEnd() {
156
+ if (!this.data.animating)
157
+ return;
158
+ this.setData({
159
+ animating: false,
160
+ });
161
+ this.$emit('animationEnd');
162
+ },
144
163
  },
145
164
  });
package/dist/picker/index.wxml CHANGED
@@ -30,6 +30,8 @@
30
30
  visible-item-count="{{ visibleItemCount }}"
31
31
  active-class="active-class"
32
32
  bind:change="onChange"
33
+ bind:animationStart="animationStart"
34
+ bind:animationEnd="animationEnd"
33
35
  />
34
36
 
35
37
  <view
package/dist/picker-column/index.js CHANGED
@@ -60,9 +60,9 @@ SmartComponent({
60
60
  renderNum: 0,
61
61
  renderStart: 0,
62
62
  animate: false,
63
+ playing: false,
63
64
  maxText: '',
64
65
  timer: null,
65
- // animationIndex: -1,
66
66
  preOffsetList: [],
67
67
  },
68
68
  created() {
@@ -81,10 +81,14 @@ SmartComponent({
81
81
  timer: null,
82
82
  });
83
83
  }
84
+ if (!this.data.playing) {
85
+ this.$emit('animationStart');
86
+ }
84
87
  this.setData({
85
88
  startY: event.touches[0].clientY,
86
89
  startOffset: this.data.offset,
87
90
  duration: 100,
91
+ playing: true,
88
92
  timer: null,
89
93
  preOffsetList: [this.data.offset],
90
94
  });
@@ -165,7 +169,7 @@ SmartComponent({
165
169
  }
166
170
  // 更新索引
167
171
  if (index !== data.currentIndex) {
168
- this.setData({
172
+ return this.setData({
169
173
  timer: setTimeout(() => __awaiter(this, void 0, void 0, function* () {
170
174
  this.setIndex(index, true, false);
171
175
  // await this.setData({
@@ -177,6 +181,10 @@ SmartComponent({
177
181
  }), isSameTouch ? 150 : 800),
178
182
  });
179
183
  }
184
+ this.setData({
185
+ playing: false,
186
+ });
187
+ this.$emit('animationEnd');
180
188
  });
181
189
  },
182
190
  checkIsDown(curr) {
@@ -276,6 +284,12 @@ SmartComponent({
276
284
  const { data } = this;
277
285
  index = this.adjustIndex(index) || 0;
278
286
  const offset = -index * data.itemHeight;
287
+ if (!data.playing) {
288
+ this.$emit('animationStart');
289
+ this.setData({
290
+ playing: true,
291
+ });
292
+ }
279
293
  if (index !== data.currentIndex) {
280
294
  // 需要动画的情况下，保持最大的截取
281
295
  this.updateVisibleOptions(index);
@@ -287,10 +301,18 @@ SmartComponent({
287
301
  animate: true,
288
302
  duration: time,
289
303
  }).then(() => {
290
- if (!userAction)
304
+ if (!userAction) {
305
+ this.setData({
306
+ playing: false,
307
+ });
308
+ this.$emit('animationEnd');
291
309
  return;
292
- console.log('change', index);
310
+ }
293
311
  this.$emit('change', index);
312
+ this.setData({
313
+ playing: false,
314
+ });
315
+ this.$emit('animationEnd');
294
316
  });
295
317
  }
296
318
  return this.set({
@@ -301,9 +323,24 @@ SmartComponent({
301
323
  renderStart: 0,
302
324
  animate: !!animate,
303
325
  }).then(() => {
304
- userAction && this.$emit('change', index);
326
+ if (!userAction) {
327
+ this.setData({
328
+ playing: false,
329
+ });
330
+ this.$emit('animationEnd');
331
+ return;
332
+ }
333
+ this.$emit('change', index);
334
+ this.setData({
335
+ playing: false,
336
+ });
337
+ this.$emit('animationEnd');
305
338
  });
306
339
  }
340
+ this.setData({
341
+ playing: false,
342
+ });
343
+ this.$emit('animationEnd');
307
344
  return this.set({ offset });
308
345
  },
309
346
  setValue(value) {
package/dist/popover/index.css CHANGED
@@ -1 +1 @@
1
- @import '../common/index.css';.smart-popover{--overlay-background-color:transparent;position:relative}.smart-popover,.smart-popover-button{display:inline-block}.smart-popover-overlay{background-color:var(--popover-background-color,#fff);border-radius:var(--popover-border-radius,12px);box-shadow:var(--popover-box-shadow,0 6px 12px 0 rgba(0,0,0,.1));padding:var(--popover-padding,12px);position:absolute;z-index:102}.smart-popover-overlay-arrow{background-position:50%;background-repeat:no-repeat;position:absolute}
1
+ @import '../common/index.css';.smart-popover{--overlay-background-color:transparent;position:relative}.smart-popover,.smart-popover-button{display:inline-block}.smart-popover-overlay{background-color:var(--popover-background-color,var(--app-B4,#fff));border-radius:var(--popover-border-radius,12px);box-shadow:var(--popover-box-shadow,0 6px 12px 0 rgba(0,0,0,.1));padding:var(--popover-padding,12px);position:absolute;z-index:102}.smart-popover-overlay-arrow{background-position:50%;background-repeat:no-repeat;position:absolute}
package/dist/popover/index.wxss CHANGED
@@ -1 +1 @@
1
- @import '../common/index.wxss';.smart-popover{--overlay-background-color:transparent;position:relative}.smart-popover,.smart-popover-button{display:inline-block}.smart-popover-overlay{background-color:var(--popover-background-color,#fff);border-radius:var(--popover-border-radius,12px);box-shadow:var(--popover-box-shadow,0 6px 12px 0 rgba(0,0,0,.1));padding:var(--popover-padding,12px);position:absolute;z-index:102}.smart-popover-overlay-arrow{background-position:50%;background-repeat:no-repeat;position:absolute}
1
+ @import '../common/index.wxss';.smart-popover{--overlay-background-color:transparent;position:relative}.smart-popover,.smart-popover-button{display:inline-block}.smart-popover-overlay{background-color:var(--popover-background-color,var(--app-B4,#fff));border-radius:var(--popover-border-radius,12px);box-shadow:var(--popover-box-shadow,0 6px 12px 0 rgba(0,0,0,.1));padding:var(--popover-padding,12px);position:absolute;z-index:102}.smart-popover-overlay-arrow{background-position:50%;background-repeat:no-repeat;position:absolute}
package/lib/picker/demo/index.js CHANGED
@@ -89,5 +89,11 @@ var toast_1 = __importDefault(require("../../toast/toast"));
89
89
  picker.setColumnValues(1, this.data.column3[value[0]]);
90
90
  getApp().picker = picker;
91
91
  },
92
+ animationStart: function () {
93
+ console.log('animationStart');
94
+ },
95
+ animationEnd: function () {
96
+ console.log('animationEnd');
97
+ }
92
98
  },
93
99
  });
package/lib/picker/index.js CHANGED
@@ -44,6 +44,9 @@ var shared_1 = require("./shared");
44
44
  }
45
45
  },
46
46
  } }),
47
+ data: {
48
+ animating: false,
49
+ },
47
50
  beforeCreate: function () {
48
51
  var _this = this;
49
52
  Object.defineProperty(this, 'children', {
@@ -164,5 +167,21 @@ var shared_1 = require("./shared");
164
167
  });
165
168
  return Promise.all(stack);
166
169
  },
170
+ animationStart: function () {
171
+ if (this.data.animating)
172
+ return;
173
+ this.setData({
174
+ animating: true,
175
+ });
176
+ this.$emit('animationStart');
177
+ },
178
+ animationEnd: function () {
179
+ if (!this.data.animating)
180
+ return;
181
+ this.setData({
182
+ animating: false,
183
+ });
184
+ this.$emit('animationEnd');
185
+ },
167
186
  },
168
187
  });
package/lib/picker/index.wxml CHANGED
@@ -30,6 +30,8 @@
30
30
  visible-item-count="{{ visibleItemCount }}"
31
31
  active-class="active-class"
32
32
  bind:change="onChange"
33
+ bind:animationStart="animationStart"
34
+ bind:animationEnd="animationEnd"
33
35
  />
34
36
 
35
37
  <view
package/lib/picker-column/index.js CHANGED
@@ -98,9 +98,9 @@ var DEFAULT_DURATION = 400;
98
98
  renderNum: 0,
99
99
  renderStart: 0,
100
100
  animate: false,
101
+ playing: false,
101
102
  maxText: '',
102
103
  timer: null,
103
- // animationIndex: -1,
104
104
  preOffsetList: [],
105
105
  },
106
106
  created: function () {
@@ -119,10 +119,14 @@ var DEFAULT_DURATION = 400;
119
119
  timer: null,
120
120
  });
121
121
  }
122
+ if (!this.data.playing) {
123
+ this.$emit('animationStart');
124
+ }
122
125
  this.setData({
123
126
  startY: event.touches[0].clientY,
124
127
  startOffset: this.data.offset,
125
128
  duration: 100,
129
+ playing: true,
126
130
  timer: null,
127
131
  preOffsetList: [this.data.offset],
128
132
  });
@@ -202,15 +206,19 @@ var DEFAULT_DURATION = 400;
202
206
  case 2:
203
207
  // 更新索引
204
208
  if (index !== data.currentIndex) {
205
- this.setData({
206
- timer: setTimeout(function () { return __awaiter(_this, void 0, void 0, function () {
207
- return __generator(this, function (_a) {
208
- this.setIndex(index, true, false);
209
- return [2 /*return*/];
210
- });
211
- }); }, isSameTouch ? 150 : 800),
212
- });
209
+ return [2 /*return*/, this.setData({
210
+ timer: setTimeout(function () { return __awaiter(_this, void 0, void 0, function () {
211
+ return __generator(this, function (_a) {
212
+ this.setIndex(index, true, false);
213
+ return [2 /*return*/];
214
+ });
215
+ }); }, isSameTouch ? 150 : 800),
216
+ })];
213
217
  }
218
+ this.setData({
219
+ playing: false,
220
+ });
221
+ this.$emit('animationEnd');
214
222
  return [2 /*return*/];
215
223
  }
216
224
  });
@@ -317,6 +325,12 @@ var DEFAULT_DURATION = 400;
317
325
  var data = this.data;
318
326
  index = this.adjustIndex(index) || 0;
319
327
  var offset = -index * data.itemHeight;
328
+ if (!data.playing) {
329
+ this.$emit('animationStart');
330
+ this.setData({
331
+ playing: true,
332
+ });
333
+ }
320
334
  if (index !== data.currentIndex) {
321
335
  // 需要动画的情况下，保持最大的截取
322
336
  this.updateVisibleOptions(index);
@@ -328,10 +342,18 @@ var DEFAULT_DURATION = 400;
328
342
  animate: true,
329
343
  duration: time,
330
344
  }).then(function () {
331
- if (!userAction)
345
+ if (!userAction) {
346
+ _this.setData({
347
+ playing: false,
348
+ });
349
+ _this.$emit('animationEnd');
332
350
  return;
333
- console.log('change', index);
351
+ }
334
352
  _this.$emit('change', index);
353
+ _this.setData({
354
+ playing: false,
355
+ });
356
+ _this.$emit('animationEnd');
335
357
  });
336
358
  }
337
359
  return this.set({
@@ -342,9 +364,24 @@ var DEFAULT_DURATION = 400;
342
364
  renderStart: 0,
343
365
  animate: !!animate,
344
366
  }).then(function () {
345
- userAction && _this.$emit('change', index);
367
+ if (!userAction) {
368
+ _this.setData({
369
+ playing: false,
370
+ });
371
+ _this.$emit('animationEnd');
372
+ return;
373
+ }
374
+ _this.$emit('change', index);
375
+ _this.setData({
376
+ playing: false,
377
+ });
378
+ _this.$emit('animationEnd');
346
379
  });
347
380
  }
381
+ this.setData({
382
+ playing: false,
383
+ });
384
+ this.$emit('animationEnd');
348
385
  return this.set({ offset: offset });
349
386
  },
350
387
  setValue: function (value) {
package/lib/popover/index.css CHANGED
@@ -1 +1 @@
1
- @import '../common/index.css';.smart-popover{--overlay-background-color:transparent;position:relative}.smart-popover,.smart-popover-button{display:inline-block}.smart-popover-overlay{background-color:var(--popover-background-color,#fff);border-radius:var(--popover-border-radius,12px);box-shadow:var(--popover-box-shadow,0 6px 12px 0 rgba(0,0,0,.1));padding:var(--popover-padding,12px);position:absolute;z-index:102}.smart-popover-overlay-arrow{background-position:50%;background-repeat:no-repeat;position:absolute}
1
+ @import '../common/index.css';.smart-popover{--overlay-background-color:transparent;position:relative}.smart-popover,.smart-popover-button{display:inline-block}.smart-popover-overlay{background-color:var(--popover-background-color,var(--app-B4,#fff));border-radius:var(--popover-border-radius,12px);box-shadow:var(--popover-box-shadow,0 6px 12px 0 rgba(0,0,0,.1));padding:var(--popover-padding,12px);position:absolute;z-index:102}.smart-popover-overlay-arrow{background-position:50%;background-repeat:no-repeat;position:absolute}
package/lib/popover/index.wxss CHANGED
@@ -1 +1 @@
1
- @import '../common/index.wxss';.smart-popover{--overlay-background-color:transparent;position:relative}.smart-popover,.smart-popover-button{display:inline-block}.smart-popover-overlay{background-color:var(--popover-background-color,#fff);border-radius:var(--popover-border-radius,12px);box-shadow:var(--popover-box-shadow,0 6px 12px 0 rgba(0,0,0,.1));padding:var(--popover-padding,12px);position:absolute;z-index:102}.smart-popover-overlay-arrow{background-position:50%;background-repeat:no-repeat;position:absolute}
1
+ @import '../common/index.wxss';.smart-popover{--overlay-background-color:transparent;position:relative}.smart-popover,.smart-popover-button{display:inline-block}.smart-popover-overlay{background-color:var(--popover-background-color,var(--app-B4,#fff));border-radius:var(--popover-border-radius,12px);box-shadow:var(--popover-box-shadow,0 6px 12px 0 rgba(0,0,0,.1));padding:var(--popover-padding,12px);position:absolute;z-index:102}.smart-popover-overlay-arrow{background-position:50%;background-repeat:no-repeat;position:absolute}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tuya-miniapp/smart-ui",
3
- "version": "2.3.0-beta-1",
3
+ "version": "2.3.0-beta-3",
4
4
  "author": "MiniApp Team",
5
5
  "license": "MIT",
6
6
  "miniprogram": "lib",