index.js
4.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var component_1 = require("../common/component");
var utils_1 = require("../common/utils");
var DEFAULT_DURATION = 200;
component_1.VantComponent({
classes: ['active-class'],
props: {
valueKey: String,
className: String,
itemHeight: Number,
visibleItemCount: Number,
initialOptions: {
type: Array,
value: []
},
defaultIndex: {
type: Number,
value: 0
}
},
data: {
startY: 0,
offset: 0,
duration: 0,
startOffset: 0,
options: [],
currentIndex: 0
},
created: function () {
var _this = this;
var _a = this.data, defaultIndex = _a.defaultIndex, initialOptions = _a.initialOptions;
this.set({
currentIndex: defaultIndex,
options: initialOptions
}).then(function () {
_this.setIndex(defaultIndex);
});
},
computed: {
count: function () {
return this.data.options.length;
},
baseOffset: function () {
var data = this.data;
return (data.itemHeight * (data.visibleItemCount - 1)) / 2;
},
wrapperStyle: function () {
var data = this.data;
return [
"transition: " + data.duration + "ms",
"transform: translate3d(0, " + (data.offset + data.baseOffset) + "px, 0)",
"line-height: " + data.itemHeight + "px"
].join('; ');
}
},
watch: {
defaultIndex: function (value) {
this.setIndex(value);
}
},
methods: {
onTouchStart: function (event) {
this.set({
startY: event.touches[0].clientY,
startOffset: this.data.offset,
duration: 0
});
},
onTouchMove: function (event) {
var data = this.data;
var deltaY = event.touches[0].clientY - data.startY;
this.set({
offset: utils_1.range(data.startOffset + deltaY, -(data.count * data.itemHeight), data.itemHeight)
});
},
onTouchEnd: function () {
var data = this.data;
if (data.offset !== data.startOffset) {
this.set({
duration: DEFAULT_DURATION
});
var index = utils_1.range(Math.round(-data.offset / data.itemHeight), 0, data.count - 1);
this.setIndex(index, true);
}
},
onClickItem: function (event) {
var index = event.currentTarget.dataset.index;
this.setIndex(index, true);
},
adjustIndex: function (index) {
var data = this.data;
index = utils_1.range(index, 0, data.count);
for (var i = index; i < data.count; i++) {
if (!this.isDisabled(data.options[i]))
return i;
}
for (var i = index - 1; i >= 0; i--) {
if (!this.isDisabled(data.options[i]))
return i;
}
},
isDisabled: function (option) {
return utils_1.isObj(option) && option.disabled;
},
getOptionText: function (option) {
var data = this.data;
return utils_1.isObj(option) && data.valueKey in option
? option[data.valueKey]
: option;
},
setIndex: function (index, userAction) {
var _this = this;
var data = this.data;
index = this.adjustIndex(index) || 0;
var offset = -index * data.itemHeight;
if (index !== data.currentIndex) {
return this.set({ offset: offset, currentIndex: index }).then(function () {
userAction && _this.$emit('change', index);
});
}
return this.set({ offset: offset });
},
setValue: function (value) {
var options = this.data.options;
for (var i = 0; i < options.length; i++) {
if (this.getOptionText(options[i]) === value) {
return this.setIndex(i);
}
}
return Promise.resolve();
},
getValue: function () {
var data = this.data;
return data.options[data.currentIndex];
}
}
});