@tuya-miniapp/smart-ui 2.6.0-beta-6 → 2.6.0-beta-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.
- package/dist/datetime-picker/index.js +96 -44
- package/dist/picker/index.js +1 -1
- package/dist/picker/index.wxml +1 -1
- package/dist/picker/index.wxs +1 -0
- package/dist/picker-column/index.css +1 -1
- package/dist/picker-column/index.js +20 -13
- package/dist/picker-column/index.wxml +3 -3
- package/dist/picker-column/index.wxs +16 -5
- package/dist/picker-column/index.wxss +1 -1
- package/lib/datetime-picker/index.js +102 -50
- package/lib/picker/index.js +1 -1
- package/lib/picker/index.wxml +1 -1
- package/lib/picker/index.wxs +1 -0
- package/lib/picker-column/index.css +1 -1
- package/lib/picker-column/index.js +21 -8
- package/lib/picker-column/index.wxml +3 -3
- package/lib/picker-column/index.wxs +16 -5
- package/lib/picker-column/index.wxss +1 -1
- package/package.json +1 -1
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
1
12
|
import { SmartComponent } from '../common/component';
|
|
2
13
|
import { isDef } from '../common/validator';
|
|
3
14
|
import { pickerProps } from '../picker/shared';
|
|
@@ -29,6 +40,18 @@ function getTrueValue(formattedValue) {
|
|
|
29
40
|
function getMonthEndDay(year, month) {
|
|
30
41
|
return 32 - new Date(year, month - 1, 32).getDate();
|
|
31
42
|
}
|
|
43
|
+
function findIntersection(range1, range2) {
|
|
44
|
+
const [start1, end1] = range1;
|
|
45
|
+
const [start2, end2] = range2;
|
|
46
|
+
// 确定交集的开始和结束
|
|
47
|
+
const intersectionStart = Math.max(start1, start2);
|
|
48
|
+
const intersectionEnd = Math.min(end1, end2);
|
|
49
|
+
// 检查是否有交集
|
|
50
|
+
if (intersectionStart <= intersectionEnd) {
|
|
51
|
+
return [intersectionStart, intersectionEnd];
|
|
52
|
+
}
|
|
53
|
+
return []; // 没有交集
|
|
54
|
+
}
|
|
32
55
|
const defaultFormatter = (type, value) => value;
|
|
33
56
|
SmartComponent({
|
|
34
57
|
classes: ['active-class', 'toolbar-class', 'column-class'],
|
|
@@ -94,8 +117,9 @@ SmartComponent({
|
|
|
94
117
|
value: undefined,
|
|
95
118
|
} }),
|
|
96
119
|
data: {
|
|
97
|
-
part:
|
|
120
|
+
part: 'am',
|
|
98
121
|
innerValue: Date.now(),
|
|
122
|
+
isCreated: false,
|
|
99
123
|
columns: [],
|
|
100
124
|
},
|
|
101
125
|
created() {
|
|
@@ -104,12 +128,17 @@ SmartComponent({
|
|
|
104
128
|
if (innerValue !== this.data.value) {
|
|
105
129
|
this.$emit('input', innerValue);
|
|
106
130
|
}
|
|
131
|
+
this.setData({
|
|
132
|
+
isCreated: true,
|
|
133
|
+
});
|
|
107
134
|
},
|
|
108
135
|
methods: {
|
|
109
136
|
updateValue() {
|
|
110
|
-
const {
|
|
111
|
-
|
|
112
|
-
|
|
137
|
+
const { value, innerValue, isCreated } = this.data;
|
|
138
|
+
if (!isCreated)
|
|
139
|
+
return;
|
|
140
|
+
const val = this.correctValue(value);
|
|
141
|
+
const isEqual = val === innerValue;
|
|
113
142
|
this.updateColumnValue(val);
|
|
114
143
|
if (!isEqual) {
|
|
115
144
|
this.$emit('input', val);
|
|
@@ -127,7 +156,7 @@ SmartComponent({
|
|
|
127
156
|
formatterFunc(type, value, data) {
|
|
128
157
|
var _a, _b;
|
|
129
158
|
if (type === 'part') {
|
|
130
|
-
return value ===
|
|
159
|
+
return value === 'am' ? data.amText : data.pmText;
|
|
131
160
|
}
|
|
132
161
|
const { formatterMap, formatter = defaultFormatter } = (_a = this === null || this === void 0 ? void 0 : this.data) !== null && _a !== void 0 ? _a : data;
|
|
133
162
|
const mapDetail = formatterMap === null || formatterMap === void 0 ? void 0 : formatterMap[type];
|
|
@@ -139,35 +168,51 @@ SmartComponent({
|
|
|
139
168
|
}
|
|
140
169
|
return formatter(type, value);
|
|
141
170
|
},
|
|
142
|
-
updateColumns() {
|
|
171
|
+
updateColumns(values) {
|
|
143
172
|
const { locale, columnStyles, fontStyles } = this.data;
|
|
144
|
-
const results = this.getOriginColumns().map(column =>
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
173
|
+
const results = this.getOriginColumns().map((column, index) => {
|
|
174
|
+
const value = values[index];
|
|
175
|
+
const list = column.values.map(value => this.formatterFunc(column.type, value, this.data));
|
|
176
|
+
const activeIndex = list.findIndex(item => item === value);
|
|
177
|
+
return {
|
|
178
|
+
values: list,
|
|
179
|
+
order: column.order,
|
|
180
|
+
unit: locale === null || locale === void 0 ? void 0 : locale[column.type],
|
|
181
|
+
style: columnStyles === null || columnStyles === void 0 ? void 0 : columnStyles[column.type],
|
|
182
|
+
fontStyle: fontStyles === null || fontStyles === void 0 ? void 0 : fontStyles[column.type],
|
|
183
|
+
activeIndex,
|
|
184
|
+
};
|
|
185
|
+
});
|
|
186
|
+
return this.setData({ columns: results });
|
|
152
187
|
},
|
|
153
188
|
getOriginColumns() {
|
|
154
|
-
const { filter, is12HourClock, type, amText, pmText, columnsOrder } = this.data;
|
|
155
|
-
const results = this.getRanges().map(({ type, range }, index) => {
|
|
189
|
+
const { part, filter, is12HourClock, type, amText, pmText, columnsOrder, minHour, maxHour } = this.data;
|
|
190
|
+
const results = this.getRanges().map(({ type: timeType, range }, index) => {
|
|
156
191
|
const order = columnsOrder[index];
|
|
157
192
|
let values = times(range[1] - range[0] + 1, index => {
|
|
158
193
|
const value = range[0] + index;
|
|
159
|
-
|
|
194
|
+
if (is12HourClock && type === 'time' && timeType === 'hour') {
|
|
195
|
+
if (part === 'pm') {
|
|
196
|
+
if (value === 12)
|
|
197
|
+
return '12';
|
|
198
|
+
return padZero(value - 12);
|
|
199
|
+
}
|
|
200
|
+
if (value === 0)
|
|
201
|
+
return '12';
|
|
202
|
+
return padZero(value);
|
|
203
|
+
}
|
|
204
|
+
return timeType === 'year' ? `${value}` : padZero(value);
|
|
160
205
|
});
|
|
161
206
|
if (filter) {
|
|
162
|
-
values = filter(
|
|
207
|
+
values = filter(timeType, values);
|
|
163
208
|
}
|
|
164
|
-
return { type, values, order };
|
|
209
|
+
return { type: timeType, values, order };
|
|
165
210
|
});
|
|
166
211
|
if (is12HourClock && type === 'time') {
|
|
167
212
|
return [
|
|
168
213
|
{
|
|
169
214
|
type: '12HourClock',
|
|
170
|
-
values: [amText, pmText],
|
|
215
|
+
values: minHour > 11 ? [pmText] : maxHour < 12 ? [amText] : [amText, pmText],
|
|
171
216
|
order: columnsOrder[0],
|
|
172
217
|
},
|
|
173
218
|
...results.map((item, index) => (Object.assign(Object.assign({}, item), { order: columnsOrder[index + 1] }))),
|
|
@@ -179,13 +224,11 @@ SmartComponent({
|
|
|
179
224
|
const { data } = this;
|
|
180
225
|
if (data.type === 'time' && data.is12HourClock) {
|
|
181
226
|
const { part } = data;
|
|
227
|
+
const time12Range = part === 'pm' ? [12, 23] : [0, 11];
|
|
182
228
|
return [
|
|
183
229
|
{
|
|
184
230
|
type: 'hour',
|
|
185
|
-
range: [
|
|
186
|
-
Math.max(part ? 13 : 1, data.minHour) - (part ? 12 : 0),
|
|
187
|
-
Math.min(part ? 24 : 12, data.maxHour) - (part ? 12 : 0),
|
|
188
|
-
],
|
|
231
|
+
range: findIntersection(time12Range, [data.minHour, data.maxHour]),
|
|
189
232
|
},
|
|
190
233
|
{
|
|
191
234
|
type: 'minute',
|
|
@@ -235,7 +278,7 @@ SmartComponent({
|
|
|
235
278
|
result.splice(2, 3);
|
|
236
279
|
return result;
|
|
237
280
|
},
|
|
238
|
-
correctValue(value
|
|
281
|
+
correctValue(value) {
|
|
239
282
|
const { data } = this;
|
|
240
283
|
// validate value
|
|
241
284
|
const isDateType = data.type !== 'time';
|
|
@@ -249,17 +292,11 @@ SmartComponent({
|
|
|
249
292
|
// time type
|
|
250
293
|
if (!isDateType) {
|
|
251
294
|
let [hour, minute] = value.split(':');
|
|
252
|
-
if (Number(hour) ===
|
|
253
|
-
hour = 24;
|
|
254
|
-
}
|
|
255
|
-
if (Number(hour) === 24 && data.maxHour < 24) {
|
|
295
|
+
if (Number(hour) === 24) {
|
|
256
296
|
hour = 0;
|
|
257
297
|
}
|
|
258
298
|
hour = padZero(range(hour, data.minHour, data.maxHour));
|
|
259
299
|
minute = padZero(range(minute, data.minMinute, data.maxMinute));
|
|
260
|
-
if (isOutSide && Number(hour) === 24) {
|
|
261
|
-
hour = 0;
|
|
262
|
-
}
|
|
263
300
|
return `${hour}:${minute}`;
|
|
264
301
|
}
|
|
265
302
|
// date type
|
|
@@ -313,15 +350,19 @@ SmartComponent({
|
|
|
313
350
|
const picker = this.getPicker();
|
|
314
351
|
const indexes = picker.getIndexes();
|
|
315
352
|
if (data.type === 'time' && data.is12HourClock) {
|
|
316
|
-
const
|
|
353
|
+
const originColumns = this.getOriginColumns();
|
|
354
|
+
const [partText, hour, minute] = indexes.map((item, index) => originColumns[index].values[item]);
|
|
355
|
+
const part = partText === this.data.pmText ? 'pm' : 'am';
|
|
317
356
|
this.setData({
|
|
318
357
|
part,
|
|
319
358
|
});
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
:
|
|
359
|
+
value = `${part === 'pm'
|
|
360
|
+
? hour === '12'
|
|
361
|
+
? 12
|
|
362
|
+
: Number(hour) + 12
|
|
363
|
+
: hour === '12'
|
|
364
|
+
? 0
|
|
365
|
+
: Number(hour)}:${Number(minute)}`;
|
|
325
366
|
}
|
|
326
367
|
else if (data.type === 'time') {
|
|
327
368
|
const originColumns = this.getOriginColumns();
|
|
@@ -347,7 +388,7 @@ SmartComponent({
|
|
|
347
388
|
}
|
|
348
389
|
value = new Date(year, month - 1, date, hour, minute);
|
|
349
390
|
}
|
|
350
|
-
value = this.correctValue(value
|
|
391
|
+
value = this.correctValue(value);
|
|
351
392
|
this.updateColumnValue(value);
|
|
352
393
|
picker.value = value;
|
|
353
394
|
this.$emit('input', value);
|
|
@@ -355,18 +396,29 @@ SmartComponent({
|
|
|
355
396
|
},
|
|
356
397
|
updateColumnValue(value) {
|
|
357
398
|
let values = [];
|
|
399
|
+
const _a = this.data, { columns, part, value: outerValue } = _a, rest = __rest(_a, ["columns", "part", "value"]);
|
|
400
|
+
rest.innerValue = value;
|
|
401
|
+
const dataStr = JSON.stringify(rest);
|
|
402
|
+
if (dataStr === this.preDataStr)
|
|
403
|
+
return;
|
|
404
|
+
this.preDataStr = dataStr;
|
|
358
405
|
const { type, is12HourClock } = this.data;
|
|
359
406
|
const formatter = this.formatterFunc;
|
|
360
|
-
const picker = this.getPicker();
|
|
361
407
|
if (type === 'time' && is12HourClock) {
|
|
362
408
|
const [hour, minute] = value.split(':');
|
|
363
|
-
const part = Number(hour)
|
|
409
|
+
const part = Number(hour) < 12 ? 'am' : 'pm';
|
|
364
410
|
this.setData({
|
|
365
411
|
part,
|
|
366
412
|
});
|
|
367
413
|
values = [
|
|
368
414
|
formatter('part', part, this.data),
|
|
369
|
-
formatter('hour', part
|
|
415
|
+
formatter('hour', part === 'am'
|
|
416
|
+
? hour === '0'
|
|
417
|
+
? '12'
|
|
418
|
+
: hour
|
|
419
|
+
: hour === '12'
|
|
420
|
+
? '12'
|
|
421
|
+
: padZero(Number(hour) - 12), this.data),
|
|
370
422
|
formatter('minute', minute, this.data),
|
|
371
423
|
];
|
|
372
424
|
}
|
|
@@ -388,8 +440,8 @@ SmartComponent({
|
|
|
388
440
|
}
|
|
389
441
|
}
|
|
390
442
|
this.setData({ innerValue: value });
|
|
391
|
-
this.updateColumns();
|
|
392
|
-
picker.setValues(values);
|
|
443
|
+
this.updateColumns(values);
|
|
444
|
+
// picker.setValues(values);
|
|
393
445
|
// return this.set({ innerValue: value })
|
|
394
446
|
// .then(() => this.updateColumns())
|
|
395
447
|
// .then(() => picker.setValues(values));
|
package/dist/picker/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { SmartComponent } from '../common/component';
|
|
2
2
|
import { pickerProps } from './shared';
|
|
3
3
|
SmartComponent({
|
|
4
|
-
classes: ['active-class', 'toolbar-class', 'column-class'],
|
|
4
|
+
classes: ['hairline-class', 'active-class', 'toolbar-class', 'column-class'],
|
|
5
5
|
props: Object.assign(Object.assign({}, pickerProps), { valueKey: {
|
|
6
6
|
type: String,
|
|
7
7
|
value: 'text',
|
package/dist/picker/index.wxml
CHANGED
package/dist/picker/index.wxs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.css';:root{--app-overlay:rgba(0,0,0,.4)}:root[theme=dark]{--app-overlay:rgba(0,0,0,.7)}.smart-picker-column{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-size:var(--picker-option-font-size,16px);font-weight:var(--font-weight-bold,500);text-align:center}.smart-picker-column,.smart-picker-column__offset{position:relative;width:100%}.smart-picker-column__visual{position:absolute;top:0;width:100%}.smart-picker-column__item{pointer-events:none}.smart-picker-column__item--selected{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-weight:var(--font-weight-bold,
|
|
1
|
+
@import '../common/index.css';:root{--app-overlay:rgba(0,0,0,.4)}:root[theme=dark]{--app-overlay:rgba(0,0,0,.7)}.smart-picker-column{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-size:var(--picker-option-font-size,16px);font-weight:var(--font-weight-bold,500);text-align:center}.smart-picker-column,.smart-picker-column__offset{position:relative;width:100%}.smart-picker-column__visual{position:absolute;top:0;width:100%}.smart-picker-column__item{pointer-events:none}.smart-picker-column__item--selected{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-weight:var(--picker-option-selected-font-weight-bold,var(--font-weight-bold,700))}.smart-picker-column__item--disabled{opacity:var(--picker-option-disabled-opacity,.3)}.smart-picker-column__mask{background:transparent;display:flex;flex-direction:column;height:100%;position:absolute;top:0;width:100%;z-index:10}.smart-picker-column__mask__item{flex:1}.smart-picker-column__unit{align-items:center;display:flex;gap:var(--picker-option-unit-mid-size,0);justify-content:center;position:absolute;top:50%;transform:translateY(-50%);width:100%}.smart-picker-column__unit_text{color:var(--picker-option-unit-text-color,var(--app-B6-N4,rgba(0,0,0,.4)));font-size:var(--picker-option-unit-font-size,12px)}.smart-picker-column__unit_hidden{opacity:0}.smart-picker-column__max-text{font-weight:var(--font-weight-bold,500);opacity:0}.smart-picker-column--disabled{opacity:var(--picker-option-disabled-opacity,.3)}
|
|
@@ -52,7 +52,7 @@ SmartComponent({
|
|
|
52
52
|
observer(index) {
|
|
53
53
|
if (!this.data.isInit)
|
|
54
54
|
return;
|
|
55
|
-
this.setIndex(index, false, this.data.changeAnimation);
|
|
55
|
+
this.setIndex(index, false, this.data.changeAnimation, this.data.animationTime);
|
|
56
56
|
},
|
|
57
57
|
},
|
|
58
58
|
unit: {
|
|
@@ -83,7 +83,7 @@ SmartComponent({
|
|
|
83
83
|
created() {
|
|
84
84
|
const { defaultIndex, activeIndex, options } = this.data;
|
|
85
85
|
this.updateUint(options);
|
|
86
|
-
this.setIndex(activeIndex !== -1 ? activeIndex : defaultIndex, false, this.data.changeAnimation);
|
|
86
|
+
this.setIndex(activeIndex !== -1 ? activeIndex : defaultIndex, false, this.data.changeAnimation, this.data.animationTime);
|
|
87
87
|
this.setData({
|
|
88
88
|
isInit: true,
|
|
89
89
|
});
|
|
@@ -196,16 +196,19 @@ SmartComponent({
|
|
|
196
196
|
}
|
|
197
197
|
// 更新索引
|
|
198
198
|
if (index !== data.currentIndex) {
|
|
199
|
+
const time = isSameTouch ? 150 : data.animationTime;
|
|
200
|
+
// if (!isSameTouch) {
|
|
201
|
+
// this.timer = setInterval(() => {
|
|
202
|
+
// if (Math.abs(this.data.animationIndex - index) < 0.5) return clearInterval(this.timer);
|
|
203
|
+
// this.setData({
|
|
204
|
+
// animationIndex: this.data.animationIndex + (index - data.currentIndex > 0 ? 1 : -1),
|
|
205
|
+
// });
|
|
206
|
+
// }, data.animationTime / Math.abs(index - data.currentIndex));
|
|
207
|
+
// }
|
|
199
208
|
return this.setData({
|
|
200
209
|
timer: setTimeout(() => __awaiter(this, void 0, void 0, function* () {
|
|
201
|
-
this.setIndex(index, true, false);
|
|
202
|
-
|
|
203
|
-
// timer: null,
|
|
204
|
-
// currentIndex: index,
|
|
205
|
-
// // animationIndex: index,
|
|
206
|
-
// });
|
|
207
|
-
// this.$emit('change', index);
|
|
208
|
-
}), isSameTouch ? 150 : data.animationTime),
|
|
210
|
+
this.setIndex(index, true, false, this.data.animationTime);
|
|
211
|
+
}), time),
|
|
209
212
|
});
|
|
210
213
|
}
|
|
211
214
|
this.setData({
|
|
@@ -225,7 +228,7 @@ SmartComponent({
|
|
|
225
228
|
return;
|
|
226
229
|
return currOffset < preOffset ? 'down' : 'up';
|
|
227
230
|
},
|
|
228
|
-
vibrateShort(count, time =
|
|
231
|
+
vibrateShort(count, time = DEFAULT_DURATION) {
|
|
229
232
|
if (!count) {
|
|
230
233
|
ty.vibrateShort({ type: 'light' });
|
|
231
234
|
return;
|
|
@@ -248,7 +251,7 @@ SmartComponent({
|
|
|
248
251
|
return;
|
|
249
252
|
}
|
|
250
253
|
this.vibrateShort(Math.abs(index - this.data.currentIndex), DEFAULT_DURATION);
|
|
251
|
-
this.setIndex(index, true, true);
|
|
254
|
+
this.setIndex(index, true, true, this.data.animationTime);
|
|
252
255
|
},
|
|
253
256
|
updateUint(options) {
|
|
254
257
|
const { unit, valueKey } = this.data;
|
|
@@ -312,6 +315,10 @@ SmartComponent({
|
|
|
312
315
|
const { data } = this;
|
|
313
316
|
index = this.adjustIndex(index) || 0;
|
|
314
317
|
const offset = -index * data.itemHeight;
|
|
318
|
+
if (this.timer) {
|
|
319
|
+
clearTimeout(this.timer);
|
|
320
|
+
this.timer = null;
|
|
321
|
+
}
|
|
315
322
|
if (!data.playing) {
|
|
316
323
|
this.$emit('animation-start');
|
|
317
324
|
this.setData({
|
|
@@ -373,7 +380,7 @@ SmartComponent({
|
|
|
373
380
|
const { options } = this.data;
|
|
374
381
|
for (let i = 0; i < options.length; i++) {
|
|
375
382
|
if (this.getOptionText(options[i]) === value) {
|
|
376
|
-
return this.setIndex(i, false, this.data.changeAnimation);
|
|
383
|
+
return this.setIndex(i, false, this.data.changeAnimation, this.data.animationTime);
|
|
377
384
|
}
|
|
378
385
|
}
|
|
379
386
|
return Promise.resolve();
|
|
@@ -14,10 +14,10 @@
|
|
|
14
14
|
<view
|
|
15
15
|
wx:for="{{ optionsV }}"
|
|
16
16
|
wx:for-item="option"
|
|
17
|
-
wx:key="
|
|
17
|
+
wx:key="*this"
|
|
18
18
|
data-index="{{ renderStart + index }}"
|
|
19
|
-
style="{{computed.wrapperItemStyle({ itemHeight, fontStyle, activeStyle: renderStart + index === currentIndex ? activeStyle : '', animationIndex, index: renderStart + index })}}"
|
|
20
|
-
class="
|
|
19
|
+
style="{{computed.wrapperItemStyle({ itemHeight, fontStyle, activeStyle: renderStart + index === currentIndex ? activeStyle : '', animationIndex, index: renderStart + index, visibleItemCount })}}"
|
|
20
|
+
class="{{ computed.wrapperItemClass({ index, renderStart, animationIndex, option })}}"
|
|
21
21
|
>
|
|
22
22
|
{{ computed.optionText(option, valueKey) }}
|
|
23
23
|
</view>
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/* eslint-disable */
|
|
2
2
|
var style = require('../wxs/style.wxs');
|
|
3
3
|
var addUnit = require('../wxs/add-unit.wxs');
|
|
4
|
+
var wxUtils = require('../wxs/utils.wxs');
|
|
4
5
|
|
|
5
6
|
function isObj(x) {
|
|
6
7
|
var type = typeof x;
|
|
@@ -49,20 +50,30 @@ function wrapperItemStyle(data) {
|
|
|
49
50
|
var fontStyleStr = style(data.fontStyle);
|
|
50
51
|
var activeStyleStr = style(data.activeStyle);
|
|
51
52
|
|
|
53
|
+
// var maxSideShow = Math.floor(data.visibleItemCount / 2) + 1;
|
|
52
54
|
// var offsetIndex = data.animationIndex - data.index;
|
|
53
|
-
// var scale = Math.min(Math.abs(offsetIndex * 0.
|
|
54
|
-
// var rotateX = offsetIndex * 25 > 0 ? Math.min(offsetIndex * 25, 25 *
|
|
55
|
+
// var scale = Math.min(Math.abs(offsetIndex * 0.2), 0.2 * maxSideShow)
|
|
56
|
+
// var rotateX = offsetIndex * 25 > 0 ? Math.min(offsetIndex * 25, 25 * maxSideShow) : Math.max(offsetIndex * 25, -25 * maxSideShow)
|
|
57
|
+
// var translateYIndex = offsetIndex > 0 ? Math.min(offsetIndex, maxSideShow) : Math.max(offsetIndex, -maxSideShow)
|
|
55
58
|
// const transStyle = style({
|
|
56
|
-
// transform: `rotateX(${rotateX}deg) scale(${1 - scale})
|
|
59
|
+
// transform: `rotateX(${rotateX}deg) scale(${1 - scale}) translateY(${translateYIndex * Math.abs(translateYIndex) * Math.abs(translateYIndex) * data.itemHeight * 0.1}px) translateZ(0)`,
|
|
57
60
|
// });
|
|
58
|
-
// return
|
|
61
|
+
// return transStyle + ';' + heightStyleStr + (fontStyleStr ? fontStyleStr + ';' : fontStyleStr) + activeStyleStr
|
|
59
62
|
return heightStyleStr + (fontStyleStr ? fontStyleStr + ';' : fontStyleStr) + activeStyleStr
|
|
60
63
|
}
|
|
61
64
|
|
|
65
|
+
function wrapperItemClass(data) {
|
|
66
|
+
var staticClass = 'smart-ellipsis';
|
|
67
|
+
var activeClass = 'active-class';
|
|
68
|
+
var isActive = Math.abs(data.renderStart + data.index - data.animationIndex) < 0.9;
|
|
69
|
+
return staticClass + ' ' + wxUtils.bem('picker-column__item', { disabled: data.option && data.option.disabled, selected: isActive }) + ' ' + (isActive ? activeClass : '');
|
|
70
|
+
}
|
|
71
|
+
|
|
62
72
|
module.exports = {
|
|
63
73
|
optionText: optionText,
|
|
64
74
|
rootStyle: rootStyle,
|
|
65
75
|
wrapperStyle: wrapperStyle,
|
|
66
76
|
wrapperInterStyle: wrapperInterStyle,
|
|
67
|
-
wrapperItemStyle: wrapperItemStyle
|
|
77
|
+
wrapperItemStyle: wrapperItemStyle,
|
|
78
|
+
wrapperItemClass: wrapperItemClass
|
|
68
79
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.wxss';:root{--app-overlay:rgba(0,0,0,.4)}:root[theme=dark]{--app-overlay:rgba(0,0,0,.7)}.smart-picker-column{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-size:var(--picker-option-font-size,16px);font-weight:var(--font-weight-bold,500);text-align:center}.smart-picker-column,.smart-picker-column__offset{position:relative;width:100%}.smart-picker-column__visual{position:absolute;top:0;width:100%}.smart-picker-column__item{pointer-events:none}.smart-picker-column__item--selected{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-weight:var(--font-weight-bold,
|
|
1
|
+
@import '../common/index.wxss';:root{--app-overlay:rgba(0,0,0,.4)}:root[theme=dark]{--app-overlay:rgba(0,0,0,.7)}.smart-picker-column{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-size:var(--picker-option-font-size,16px);font-weight:var(--font-weight-bold,500);text-align:center}.smart-picker-column,.smart-picker-column__offset{position:relative;width:100%}.smart-picker-column__visual{position:absolute;top:0;width:100%}.smart-picker-column__item{pointer-events:none}.smart-picker-column__item--selected{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-weight:var(--picker-option-selected-font-weight-bold,var(--font-weight-bold,700))}.smart-picker-column__item--disabled{opacity:var(--picker-option-disabled-opacity,.3)}.smart-picker-column__mask{background:transparent;display:flex;flex-direction:column;height:100%;position:absolute;top:0;width:100%;z-index:10}.smart-picker-column__mask__item{flex:1}.smart-picker-column__unit{align-items:center;display:flex;gap:var(--picker-option-unit-mid-size,0);justify-content:center;position:absolute;top:50%;transform:translateY(-50%);width:100%}.smart-picker-column__unit_text{color:var(--picker-option-unit-text-color,var(--app-B6-N4,rgba(0,0,0,.4)));font-size:var(--picker-option-unit-font-size,12px)}.smart-picker-column__unit_hidden{opacity:0}.smart-picker-column__max-text{font-weight:var(--font-weight-bold,500);opacity:0}.smart-picker-column--disabled{opacity:var(--picker-option-disabled-opacity,.3)}
|
|
@@ -10,6 +10,17 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
};
|
|
11
11
|
return __assign.apply(this, arguments);
|
|
12
12
|
};
|
|
13
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
+
var t = {};
|
|
15
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
+
t[p] = s[p];
|
|
17
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
+
t[p[i]] = s[p[i]];
|
|
21
|
+
}
|
|
22
|
+
return t;
|
|
23
|
+
};
|
|
13
24
|
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
14
25
|
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
15
26
|
if (ar || !(i in from)) {
|
|
@@ -51,6 +62,18 @@ function getTrueValue(formattedValue) {
|
|
|
51
62
|
function getMonthEndDay(year, month) {
|
|
52
63
|
return 32 - new Date(year, month - 1, 32).getDate();
|
|
53
64
|
}
|
|
65
|
+
function findIntersection(range1, range2) {
|
|
66
|
+
var start1 = range1[0], end1 = range1[1];
|
|
67
|
+
var start2 = range2[0], end2 = range2[1];
|
|
68
|
+
// 确定交集的开始和结束
|
|
69
|
+
var intersectionStart = Math.max(start1, start2);
|
|
70
|
+
var intersectionEnd = Math.min(end1, end2);
|
|
71
|
+
// 检查是否有交集
|
|
72
|
+
if (intersectionStart <= intersectionEnd) {
|
|
73
|
+
return [intersectionStart, intersectionEnd];
|
|
74
|
+
}
|
|
75
|
+
return []; // 没有交集
|
|
76
|
+
}
|
|
54
77
|
var defaultFormatter = function (type, value) {
|
|
55
78
|
return value;
|
|
56
79
|
};
|
|
@@ -118,8 +141,9 @@ var defaultFormatter = function (type, value) {
|
|
|
118
141
|
value: undefined,
|
|
119
142
|
} }),
|
|
120
143
|
data: {
|
|
121
|
-
part:
|
|
144
|
+
part: 'am',
|
|
122
145
|
innerValue: Date.now(),
|
|
146
|
+
isCreated: false,
|
|
123
147
|
columns: [],
|
|
124
148
|
},
|
|
125
149
|
created: function () {
|
|
@@ -128,12 +152,17 @@ var defaultFormatter = function (type, value) {
|
|
|
128
152
|
if (innerValue !== this.data.value) {
|
|
129
153
|
this.$emit('input', innerValue);
|
|
130
154
|
}
|
|
155
|
+
this.setData({
|
|
156
|
+
isCreated: true,
|
|
157
|
+
});
|
|
131
158
|
},
|
|
132
159
|
methods: {
|
|
133
160
|
updateValue: function () {
|
|
134
|
-
var
|
|
135
|
-
|
|
136
|
-
|
|
161
|
+
var _a = this.data, value = _a.value, innerValue = _a.innerValue, isCreated = _a.isCreated;
|
|
162
|
+
if (!isCreated)
|
|
163
|
+
return;
|
|
164
|
+
var val = this.correctValue(value);
|
|
165
|
+
var isEqual = val === innerValue;
|
|
137
166
|
this.updateColumnValue(val);
|
|
138
167
|
if (!isEqual) {
|
|
139
168
|
this.$emit('input', val);
|
|
@@ -158,7 +187,7 @@ var defaultFormatter = function (type, value) {
|
|
|
158
187
|
var _a;
|
|
159
188
|
var _b, _c;
|
|
160
189
|
if (type === 'part') {
|
|
161
|
-
return value ===
|
|
190
|
+
return value === 'am' ? data.amText : data.pmText;
|
|
162
191
|
}
|
|
163
192
|
var _d = (_b = this === null || this === void 0 ? void 0 : this.data) !== null && _b !== void 0 ? _b : data, formatterMap = _d.formatterMap, _e = _d.formatter, formatter = _e === void 0 ? defaultFormatter : _e;
|
|
164
193
|
var mapDetail = formatterMap === null || formatterMap === void 0 ? void 0 : formatterMap[type];
|
|
@@ -170,37 +199,53 @@ var defaultFormatter = function (type, value) {
|
|
|
170
199
|
}
|
|
171
200
|
return formatter(type, value);
|
|
172
201
|
},
|
|
173
|
-
updateColumns: function () {
|
|
202
|
+
updateColumns: function (values) {
|
|
174
203
|
var _this = this;
|
|
175
204
|
var _a = this.data, locale = _a.locale, columnStyles = _a.columnStyles, fontStyles = _a.fontStyles;
|
|
176
|
-
var results = this.getOriginColumns().map(function (column) {
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
205
|
+
var results = this.getOriginColumns().map(function (column, index) {
|
|
206
|
+
var value = values[index];
|
|
207
|
+
var list = column.values.map(function (value) { return _this.formatterFunc(column.type, value, _this.data); });
|
|
208
|
+
var activeIndex = list.findIndex(function (item) { return item === value; });
|
|
209
|
+
return {
|
|
210
|
+
values: list,
|
|
211
|
+
order: column.order,
|
|
212
|
+
unit: locale === null || locale === void 0 ? void 0 : locale[column.type],
|
|
213
|
+
style: columnStyles === null || columnStyles === void 0 ? void 0 : columnStyles[column.type],
|
|
214
|
+
fontStyle: fontStyles === null || fontStyles === void 0 ? void 0 : fontStyles[column.type],
|
|
215
|
+
activeIndex: activeIndex,
|
|
216
|
+
};
|
|
217
|
+
});
|
|
218
|
+
return this.setData({ columns: results });
|
|
184
219
|
},
|
|
185
220
|
getOriginColumns: function () {
|
|
186
|
-
var _a = this.data, filter = _a.filter, is12HourClock = _a.is12HourClock, type = _a.type, amText = _a.amText, pmText = _a.pmText, columnsOrder = _a.columnsOrder;
|
|
221
|
+
var _a = this.data, part = _a.part, filter = _a.filter, is12HourClock = _a.is12HourClock, type = _a.type, amText = _a.amText, pmText = _a.pmText, columnsOrder = _a.columnsOrder, minHour = _a.minHour, maxHour = _a.maxHour;
|
|
187
222
|
var results = this.getRanges().map(function (_a, index) {
|
|
188
|
-
var
|
|
223
|
+
var timeType = _a.type, range = _a.range;
|
|
189
224
|
var order = columnsOrder[index];
|
|
190
225
|
var values = times(range[1] - range[0] + 1, function (index) {
|
|
191
226
|
var value = range[0] + index;
|
|
192
|
-
|
|
227
|
+
if (is12HourClock && type === 'time' && timeType === 'hour') {
|
|
228
|
+
if (part === 'pm') {
|
|
229
|
+
if (value === 12)
|
|
230
|
+
return '12';
|
|
231
|
+
return padZero(value - 12);
|
|
232
|
+
}
|
|
233
|
+
if (value === 0)
|
|
234
|
+
return '12';
|
|
235
|
+
return padZero(value);
|
|
236
|
+
}
|
|
237
|
+
return timeType === 'year' ? "".concat(value) : padZero(value);
|
|
193
238
|
});
|
|
194
239
|
if (filter) {
|
|
195
|
-
values = filter(
|
|
240
|
+
values = filter(timeType, values);
|
|
196
241
|
}
|
|
197
|
-
return { type:
|
|
242
|
+
return { type: timeType, values: values, order: order };
|
|
198
243
|
});
|
|
199
244
|
if (is12HourClock && type === 'time') {
|
|
200
245
|
return __spreadArray([
|
|
201
246
|
{
|
|
202
247
|
type: '12HourClock',
|
|
203
|
-
values: [amText, pmText],
|
|
248
|
+
values: minHour > 11 ? [pmText] : maxHour < 12 ? [amText] : [amText, pmText],
|
|
204
249
|
order: columnsOrder[0],
|
|
205
250
|
}
|
|
206
251
|
], results.map(function (item, index) { return (__assign(__assign({}, item), { order: columnsOrder[index + 1] })); }), true).filter(Boolean);
|
|
@@ -211,13 +256,11 @@ var defaultFormatter = function (type, value) {
|
|
|
211
256
|
var data = this.data;
|
|
212
257
|
if (data.type === 'time' && data.is12HourClock) {
|
|
213
258
|
var part = data.part;
|
|
259
|
+
var time12Range = part === 'pm' ? [12, 23] : [0, 11];
|
|
214
260
|
return [
|
|
215
261
|
{
|
|
216
262
|
type: 'hour',
|
|
217
|
-
range: [
|
|
218
|
-
Math.max(part ? 13 : 1, data.minHour) - (part ? 12 : 0),
|
|
219
|
-
Math.min(part ? 24 : 12, data.maxHour) - (part ? 12 : 0),
|
|
220
|
-
],
|
|
263
|
+
range: findIntersection(time12Range, [data.minHour, data.maxHour]),
|
|
221
264
|
},
|
|
222
265
|
{
|
|
223
266
|
type: 'minute',
|
|
@@ -267,7 +310,7 @@ var defaultFormatter = function (type, value) {
|
|
|
267
310
|
result.splice(2, 3);
|
|
268
311
|
return result;
|
|
269
312
|
},
|
|
270
|
-
correctValue: function (value
|
|
313
|
+
correctValue: function (value) {
|
|
271
314
|
var data = this.data;
|
|
272
315
|
// validate value
|
|
273
316
|
var isDateType = data.type !== 'time';
|
|
@@ -281,17 +324,11 @@ var defaultFormatter = function (type, value) {
|
|
|
281
324
|
// time type
|
|
282
325
|
if (!isDateType) {
|
|
283
326
|
var _a = value.split(':'), hour = _a[0], minute = _a[1];
|
|
284
|
-
if (Number(hour) ===
|
|
285
|
-
hour = 24;
|
|
286
|
-
}
|
|
287
|
-
if (Number(hour) === 24 && data.maxHour < 24) {
|
|
327
|
+
if (Number(hour) === 24) {
|
|
288
328
|
hour = 0;
|
|
289
329
|
}
|
|
290
330
|
hour = padZero((0, utils_1.range)(hour, data.minHour, data.maxHour));
|
|
291
331
|
minute = padZero((0, utils_1.range)(minute, data.minMinute, data.maxMinute));
|
|
292
|
-
if (isOutSide && Number(hour) === 24) {
|
|
293
|
-
hour = 0;
|
|
294
|
-
}
|
|
295
332
|
return "".concat(hour, ":").concat(minute);
|
|
296
333
|
}
|
|
297
334
|
// date type
|
|
@@ -346,24 +383,28 @@ var defaultFormatter = function (type, value) {
|
|
|
346
383
|
var picker = this.getPicker();
|
|
347
384
|
var indexes = picker.getIndexes();
|
|
348
385
|
if (data.type === 'time' && data.is12HourClock) {
|
|
349
|
-
var
|
|
386
|
+
var originColumns_1 = this.getOriginColumns();
|
|
387
|
+
var _a = indexes.map(function (item, index) { return originColumns_1[index].values[item]; }), partText = _a[0], hour = _a[1], minute = _a[2];
|
|
388
|
+
var part = partText === this.data.pmText ? 'pm' : 'am';
|
|
350
389
|
this.setData({
|
|
351
390
|
part: part,
|
|
352
391
|
});
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
:
|
|
392
|
+
value = "".concat(part === 'pm'
|
|
393
|
+
? hour === '12'
|
|
394
|
+
? 12
|
|
395
|
+
: Number(hour) + 12
|
|
396
|
+
: hour === '12'
|
|
397
|
+
? 0
|
|
398
|
+
: Number(hour), ":").concat(Number(minute));
|
|
358
399
|
}
|
|
359
400
|
else if (data.type === 'time') {
|
|
360
401
|
var originColumns = this.getOriginColumns();
|
|
361
402
|
value = "".concat(+originColumns[0].values[indexes[0]], ":").concat(+originColumns[1].values[indexes[1]]);
|
|
362
403
|
}
|
|
363
404
|
else {
|
|
364
|
-
var
|
|
405
|
+
var originColumns_2 = this.getOriginColumns();
|
|
365
406
|
var indexes_1 = picker.getIndexes();
|
|
366
|
-
var values = indexes_1.map(function (value, index) { return
|
|
407
|
+
var values = indexes_1.map(function (value, index) { return originColumns_2[index].values[value]; });
|
|
367
408
|
var year = getTrueValue(values[0]);
|
|
368
409
|
var month = getTrueValue(values[1]);
|
|
369
410
|
var maxDate = getMonthEndDay(year, month);
|
|
@@ -380,7 +421,7 @@ var defaultFormatter = function (type, value) {
|
|
|
380
421
|
}
|
|
381
422
|
value = new Date(year, month - 1, date, hour, minute);
|
|
382
423
|
}
|
|
383
|
-
value = this.correctValue(value
|
|
424
|
+
value = this.correctValue(value);
|
|
384
425
|
this.updateColumnValue(value);
|
|
385
426
|
picker.value = value;
|
|
386
427
|
this.$emit('input', value);
|
|
@@ -388,18 +429,29 @@ var defaultFormatter = function (type, value) {
|
|
|
388
429
|
},
|
|
389
430
|
updateColumnValue: function (value) {
|
|
390
431
|
var values = [];
|
|
391
|
-
var _a = this.data,
|
|
432
|
+
var _a = this.data, columns = _a.columns, part = _a.part, outerValue = _a.value, rest = __rest(_a, ["columns", "part", "value"]);
|
|
433
|
+
rest.innerValue = value;
|
|
434
|
+
var dataStr = JSON.stringify(rest);
|
|
435
|
+
if (dataStr === this.preDataStr)
|
|
436
|
+
return;
|
|
437
|
+
this.preDataStr = dataStr;
|
|
438
|
+
var _b = this.data, type = _b.type, is12HourClock = _b.is12HourClock;
|
|
392
439
|
var formatter = this.formatterFunc;
|
|
393
|
-
var picker = this.getPicker();
|
|
394
440
|
if (type === 'time' && is12HourClock) {
|
|
395
|
-
var
|
|
396
|
-
var
|
|
441
|
+
var _c = value.split(':'), hour = _c[0], minute = _c[1];
|
|
442
|
+
var part_1 = Number(hour) < 12 ? 'am' : 'pm';
|
|
397
443
|
this.setData({
|
|
398
|
-
part:
|
|
444
|
+
part: part_1,
|
|
399
445
|
});
|
|
400
446
|
values = [
|
|
401
|
-
formatter('part',
|
|
402
|
-
formatter('hour',
|
|
447
|
+
formatter('part', part_1, this.data),
|
|
448
|
+
formatter('hour', part_1 === 'am'
|
|
449
|
+
? hour === '0'
|
|
450
|
+
? '12'
|
|
451
|
+
: hour
|
|
452
|
+
: hour === '12'
|
|
453
|
+
? '12'
|
|
454
|
+
: padZero(Number(hour) - 12), this.data),
|
|
403
455
|
formatter('minute', minute, this.data),
|
|
404
456
|
];
|
|
405
457
|
}
|
|
@@ -421,8 +473,8 @@ var defaultFormatter = function (type, value) {
|
|
|
421
473
|
}
|
|
422
474
|
}
|
|
423
475
|
this.setData({ innerValue: value });
|
|
424
|
-
this.updateColumns();
|
|
425
|
-
picker.setValues(values);
|
|
476
|
+
this.updateColumns(values);
|
|
477
|
+
// picker.setValues(values);
|
|
426
478
|
// return this.set({ innerValue: value })
|
|
427
479
|
// .then(() => this.updateColumns())
|
|
428
480
|
// .then(() => picker.setValues(values));
|
package/lib/picker/index.js
CHANGED
|
@@ -14,7 +14,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
14
14
|
var component_1 = require("../common/component");
|
|
15
15
|
var shared_1 = require("./shared");
|
|
16
16
|
(0, component_1.SmartComponent)({
|
|
17
|
-
classes: ['active-class', 'toolbar-class', 'column-class'],
|
|
17
|
+
classes: ['hairline-class', 'active-class', 'toolbar-class', 'column-class'],
|
|
18
18
|
props: __assign(__assign({}, shared_1.pickerProps), { valueKey: {
|
|
19
19
|
type: String,
|
|
20
20
|
value: 'text',
|
package/lib/picker/index.wxml
CHANGED
package/lib/picker/index.wxs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.css';:root{--app-overlay:rgba(0,0,0,.4)}:root[theme=dark]{--app-overlay:rgba(0,0,0,.7)}.smart-picker-column{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-size:var(--picker-option-font-size,16px);font-weight:var(--font-weight-bold,500);text-align:center}.smart-picker-column,.smart-picker-column__offset{position:relative;width:100%}.smart-picker-column__visual{position:absolute;top:0;width:100%}.smart-picker-column__item{pointer-events:none}.smart-picker-column__item--selected{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-weight:var(--font-weight-bold,
|
|
1
|
+
@import '../common/index.css';:root{--app-overlay:rgba(0,0,0,.4)}:root[theme=dark]{--app-overlay:rgba(0,0,0,.7)}.smart-picker-column{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-size:var(--picker-option-font-size,16px);font-weight:var(--font-weight-bold,500);text-align:center}.smart-picker-column,.smart-picker-column__offset{position:relative;width:100%}.smart-picker-column__visual{position:absolute;top:0;width:100%}.smart-picker-column__item{pointer-events:none}.smart-picker-column__item--selected{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-weight:var(--picker-option-selected-font-weight-bold,var(--font-weight-bold,700))}.smart-picker-column__item--disabled{opacity:var(--picker-option-disabled-opacity,.3)}.smart-picker-column__mask{background:transparent;display:flex;flex-direction:column;height:100%;position:absolute;top:0;width:100%;z-index:10}.smart-picker-column__mask__item{flex:1}.smart-picker-column__unit{align-items:center;display:flex;gap:var(--picker-option-unit-mid-size,0);justify-content:center;position:absolute;top:50%;transform:translateY(-50%);width:100%}.smart-picker-column__unit_text{color:var(--picker-option-unit-text-color,var(--app-B6-N4,rgba(0,0,0,.4)));font-size:var(--picker-option-unit-font-size,12px)}.smart-picker-column__unit_hidden{opacity:0}.smart-picker-column__max-text{font-weight:var(--font-weight-bold,500);opacity:0}.smart-picker-column--disabled{opacity:var(--picker-option-disabled-opacity,.3)}
|
|
@@ -93,7 +93,7 @@ var DEFAULT_DURATION = 400;
|
|
|
93
93
|
observer: function (index) {
|
|
94
94
|
if (!this.data.isInit)
|
|
95
95
|
return;
|
|
96
|
-
this.setIndex(index, false, this.data.changeAnimation);
|
|
96
|
+
this.setIndex(index, false, this.data.changeAnimation, this.data.animationTime);
|
|
97
97
|
},
|
|
98
98
|
},
|
|
99
99
|
unit: {
|
|
@@ -124,7 +124,7 @@ var DEFAULT_DURATION = 400;
|
|
|
124
124
|
created: function () {
|
|
125
125
|
var _a = this.data, defaultIndex = _a.defaultIndex, activeIndex = _a.activeIndex, options = _a.options;
|
|
126
126
|
this.updateUint(options);
|
|
127
|
-
this.setIndex(activeIndex !== -1 ? activeIndex : defaultIndex, false, this.data.changeAnimation);
|
|
127
|
+
this.setIndex(activeIndex !== -1 ? activeIndex : defaultIndex, false, this.data.changeAnimation, this.data.animationTime);
|
|
128
128
|
this.setData({
|
|
129
129
|
isInit: true,
|
|
130
130
|
});
|
|
@@ -187,7 +187,7 @@ var DEFAULT_DURATION = 400;
|
|
|
187
187
|
},
|
|
188
188
|
onTouchEnd: function () {
|
|
189
189
|
return __awaiter(this, void 0, void 0, function () {
|
|
190
|
-
var data, preOffsetList, preOffset, isSameTouch, direction, offset, countHeight, animationOffset, finOffset, index, offsetData, countVibrate;
|
|
190
|
+
var data, preOffsetList, preOffset, isSameTouch, direction, offset, countHeight, animationOffset, finOffset, index, offsetData, countVibrate, time;
|
|
191
191
|
var _this = this;
|
|
192
192
|
return __generator(this, function (_a) {
|
|
193
193
|
switch (_a.label) {
|
|
@@ -236,13 +236,22 @@ var DEFAULT_DURATION = 400;
|
|
|
236
236
|
case 2:
|
|
237
237
|
// 更新索引
|
|
238
238
|
if (index !== data.currentIndex) {
|
|
239
|
+
time = isSameTouch ? 150 : data.animationTime;
|
|
240
|
+
// if (!isSameTouch) {
|
|
241
|
+
// this.timer = setInterval(() => {
|
|
242
|
+
// if (Math.abs(this.data.animationIndex - index) < 0.5) return clearInterval(this.timer);
|
|
243
|
+
// this.setData({
|
|
244
|
+
// animationIndex: this.data.animationIndex + (index - data.currentIndex > 0 ? 1 : -1),
|
|
245
|
+
// });
|
|
246
|
+
// }, data.animationTime / Math.abs(index - data.currentIndex));
|
|
247
|
+
// }
|
|
239
248
|
return [2 /*return*/, this.setData({
|
|
240
249
|
timer: setTimeout(function () { return __awaiter(_this, void 0, void 0, function () {
|
|
241
250
|
return __generator(this, function (_a) {
|
|
242
|
-
this.setIndex(index, true, false);
|
|
251
|
+
this.setIndex(index, true, false, this.data.animationTime);
|
|
243
252
|
return [2 /*return*/];
|
|
244
253
|
});
|
|
245
|
-
}); },
|
|
254
|
+
}); }, time),
|
|
246
255
|
})];
|
|
247
256
|
}
|
|
248
257
|
this.setData({
|
|
@@ -267,7 +276,7 @@ var DEFAULT_DURATION = 400;
|
|
|
267
276
|
},
|
|
268
277
|
vibrateShort: function (count, time) {
|
|
269
278
|
var _this = this;
|
|
270
|
-
if (time === void 0) { time =
|
|
279
|
+
if (time === void 0) { time = DEFAULT_DURATION; }
|
|
271
280
|
if (!count) {
|
|
272
281
|
ty_1.default.vibrateShort({ type: 'light' });
|
|
273
282
|
return;
|
|
@@ -290,7 +299,7 @@ var DEFAULT_DURATION = 400;
|
|
|
290
299
|
return;
|
|
291
300
|
}
|
|
292
301
|
this.vibrateShort(Math.abs(index - this.data.currentIndex), DEFAULT_DURATION);
|
|
293
|
-
this.setIndex(index, true, true);
|
|
302
|
+
this.setIndex(index, true, true, this.data.animationTime);
|
|
294
303
|
},
|
|
295
304
|
updateUint: function (options) {
|
|
296
305
|
var _a = this.data, unit = _a.unit, valueKey = _a.valueKey;
|
|
@@ -356,6 +365,10 @@ var DEFAULT_DURATION = 400;
|
|
|
356
365
|
var data = this.data;
|
|
357
366
|
index = this.adjustIndex(index) || 0;
|
|
358
367
|
var offset = -index * data.itemHeight;
|
|
368
|
+
if (this.timer) {
|
|
369
|
+
clearTimeout(this.timer);
|
|
370
|
+
this.timer = null;
|
|
371
|
+
}
|
|
359
372
|
if (!data.playing) {
|
|
360
373
|
this.$emit('animation-start');
|
|
361
374
|
this.setData({
|
|
@@ -417,7 +430,7 @@ var DEFAULT_DURATION = 400;
|
|
|
417
430
|
var options = this.data.options;
|
|
418
431
|
for (var i = 0; i < options.length; i++) {
|
|
419
432
|
if (this.getOptionText(options[i]) === value) {
|
|
420
|
-
return this.setIndex(i, false, this.data.changeAnimation);
|
|
433
|
+
return this.setIndex(i, false, this.data.changeAnimation, this.data.animationTime);
|
|
421
434
|
}
|
|
422
435
|
}
|
|
423
436
|
return Promise.resolve();
|
|
@@ -14,10 +14,10 @@
|
|
|
14
14
|
<view
|
|
15
15
|
wx:for="{{ optionsV }}"
|
|
16
16
|
wx:for-item="option"
|
|
17
|
-
wx:key="
|
|
17
|
+
wx:key="*this"
|
|
18
18
|
data-index="{{ renderStart + index }}"
|
|
19
|
-
style="{{computed.wrapperItemStyle({ itemHeight, fontStyle, activeStyle: renderStart + index === currentIndex ? activeStyle : '', animationIndex, index: renderStart + index })}}"
|
|
20
|
-
class="
|
|
19
|
+
style="{{computed.wrapperItemStyle({ itemHeight, fontStyle, activeStyle: renderStart + index === currentIndex ? activeStyle : '', animationIndex, index: renderStart + index, visibleItemCount })}}"
|
|
20
|
+
class="{{ computed.wrapperItemClass({ index, renderStart, animationIndex, option })}}"
|
|
21
21
|
>
|
|
22
22
|
{{ computed.optionText(option, valueKey) }}
|
|
23
23
|
</view>
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/* eslint-disable */
|
|
2
2
|
var style = require('../wxs/style.wxs');
|
|
3
3
|
var addUnit = require('../wxs/add-unit.wxs');
|
|
4
|
+
var wxUtils = require('../wxs/utils.wxs');
|
|
4
5
|
|
|
5
6
|
function isObj(x) {
|
|
6
7
|
var type = typeof x;
|
|
@@ -49,20 +50,30 @@ function wrapperItemStyle(data) {
|
|
|
49
50
|
var fontStyleStr = style(data.fontStyle);
|
|
50
51
|
var activeStyleStr = style(data.activeStyle);
|
|
51
52
|
|
|
53
|
+
// var maxSideShow = Math.floor(data.visibleItemCount / 2) + 1;
|
|
52
54
|
// var offsetIndex = data.animationIndex - data.index;
|
|
53
|
-
// var scale = Math.min(Math.abs(offsetIndex * 0.
|
|
54
|
-
// var rotateX = offsetIndex * 25 > 0 ? Math.min(offsetIndex * 25, 25 *
|
|
55
|
+
// var scale = Math.min(Math.abs(offsetIndex * 0.2), 0.2 * maxSideShow)
|
|
56
|
+
// var rotateX = offsetIndex * 25 > 0 ? Math.min(offsetIndex * 25, 25 * maxSideShow) : Math.max(offsetIndex * 25, -25 * maxSideShow)
|
|
57
|
+
// var translateYIndex = offsetIndex > 0 ? Math.min(offsetIndex, maxSideShow) : Math.max(offsetIndex, -maxSideShow)
|
|
55
58
|
// const transStyle = style({
|
|
56
|
-
// transform: `rotateX(${rotateX}deg) scale(${1 - scale})
|
|
59
|
+
// transform: `rotateX(${rotateX}deg) scale(${1 - scale}) translateY(${translateYIndex * Math.abs(translateYIndex) * Math.abs(translateYIndex) * data.itemHeight * 0.1}px) translateZ(0)`,
|
|
57
60
|
// });
|
|
58
|
-
// return
|
|
61
|
+
// return transStyle + ';' + heightStyleStr + (fontStyleStr ? fontStyleStr + ';' : fontStyleStr) + activeStyleStr
|
|
59
62
|
return heightStyleStr + (fontStyleStr ? fontStyleStr + ';' : fontStyleStr) + activeStyleStr
|
|
60
63
|
}
|
|
61
64
|
|
|
65
|
+
function wrapperItemClass(data) {
|
|
66
|
+
var staticClass = 'smart-ellipsis';
|
|
67
|
+
var activeClass = 'active-class';
|
|
68
|
+
var isActive = Math.abs(data.renderStart + data.index - data.animationIndex) < 0.9;
|
|
69
|
+
return staticClass + ' ' + wxUtils.bem('picker-column__item', { disabled: data.option && data.option.disabled, selected: isActive }) + ' ' + (isActive ? activeClass : '');
|
|
70
|
+
}
|
|
71
|
+
|
|
62
72
|
module.exports = {
|
|
63
73
|
optionText: optionText,
|
|
64
74
|
rootStyle: rootStyle,
|
|
65
75
|
wrapperStyle: wrapperStyle,
|
|
66
76
|
wrapperInterStyle: wrapperInterStyle,
|
|
67
|
-
wrapperItemStyle: wrapperItemStyle
|
|
77
|
+
wrapperItemStyle: wrapperItemStyle,
|
|
78
|
+
wrapperItemClass: wrapperItemClass
|
|
68
79
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.wxss';:root{--app-overlay:rgba(0,0,0,.4)}:root[theme=dark]{--app-overlay:rgba(0,0,0,.7)}.smart-picker-column{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-size:var(--picker-option-font-size,16px);font-weight:var(--font-weight-bold,500);text-align:center}.smart-picker-column,.smart-picker-column__offset{position:relative;width:100%}.smart-picker-column__visual{position:absolute;top:0;width:100%}.smart-picker-column__item{pointer-events:none}.smart-picker-column__item--selected{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-weight:var(--font-weight-bold,
|
|
1
|
+
@import '../common/index.wxss';:root{--app-overlay:rgba(0,0,0,.4)}:root[theme=dark]{--app-overlay:rgba(0,0,0,.7)}.smart-picker-column{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-size:var(--picker-option-font-size,16px);font-weight:var(--font-weight-bold,500);text-align:center}.smart-picker-column,.smart-picker-column__offset{position:relative;width:100%}.smart-picker-column__visual{position:absolute;top:0;width:100%}.smart-picker-column__item{pointer-events:none}.smart-picker-column__item--selected{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-weight:var(--picker-option-selected-font-weight-bold,var(--font-weight-bold,700))}.smart-picker-column__item--disabled{opacity:var(--picker-option-disabled-opacity,.3)}.smart-picker-column__mask{background:transparent;display:flex;flex-direction:column;height:100%;position:absolute;top:0;width:100%;z-index:10}.smart-picker-column__mask__item{flex:1}.smart-picker-column__unit{align-items:center;display:flex;gap:var(--picker-option-unit-mid-size,0);justify-content:center;position:absolute;top:50%;transform:translateY(-50%);width:100%}.smart-picker-column__unit_text{color:var(--picker-option-unit-text-color,var(--app-B6-N4,rgba(0,0,0,.4)));font-size:var(--picker-option-unit-font-size,12px)}.smart-picker-column__unit_hidden{opacity:0}.smart-picker-column__max-text{font-weight:var(--font-weight-bold,500);opacity:0}.smart-picker-column--disabled{opacity:var(--picker-option-disabled-opacity,.3)}
|