@tarojs/components-react 4.1.12-beta.37 → 4.1.12-beta.39
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/components/image/index.js +5 -3
- package/dist/components/image/index.js.map +1 -1
- package/dist/components/picker/picker-group.js +130 -70
- package/dist/components/picker/picker-group.js.map +1 -1
- package/dist/index.css +1 -1
- package/dist/original/components/image/index.js +5 -3
- package/dist/original/components/image/index.js.map +1 -1
- package/dist/original/components/image/style/index.scss +5 -1
- package/dist/original/components/picker/picker-group.js +130 -70
- package/dist/original/components/picker/picker-group.js.map +1 -1
- package/dist/solid/components/image/index.js +5 -3
- package/dist/solid/components/image/index.js.map +1 -1
- package/dist/solid/components/picker/picker-group.js +130 -70
- package/dist/solid/components/picker/picker-group.js.map +1 -1
- package/dist/solid/index.css +1 -1
- package/package.json +6 -6
|
@@ -13,16 +13,18 @@ function Image(props) {
|
|
|
13
13
|
const [, setIsLoaded] = useState(false);
|
|
14
14
|
const {
|
|
15
15
|
className,
|
|
16
|
-
style: style$1
|
|
16
|
+
style: style$1,
|
|
17
17
|
src,
|
|
18
18
|
mode,
|
|
19
19
|
onError,
|
|
20
20
|
lazyLoad,
|
|
21
21
|
imgProps,
|
|
22
|
-
forwardedRef
|
|
22
|
+
forwardedRef,
|
|
23
|
+
disableDefaultSize = false
|
|
23
24
|
} = props,
|
|
24
|
-
reset = __rest(props, ["className", "style", "src", "mode", "onError", "lazyLoad", "imgProps", "forwardedRef"]);
|
|
25
|
+
reset = __rest(props, ["className", "style", "src", "mode", "onError", "lazyLoad", "imgProps", "forwardedRef", "disableDefaultSize"]);
|
|
25
26
|
const cls = classNames('taro-img', {
|
|
27
|
+
'taro-img--with-default-host-size': !disableDefaultSize,
|
|
26
28
|
'taro-img__widthfix': mode === 'widthFix'
|
|
27
29
|
}, className);
|
|
28
30
|
const imgCls = classNames('taro-img__mode-' + (mode || 'scaleToFill').toLowerCase().replace(/\s/g, ''));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/image/index.tsx"],"sourcesContent":["import './style/index.scss'\n\nimport classNames from 'classnames'\n\nimport { createForwardRefComponent } from '../../utils'\nimport { useCallback, useEffect, useRef, useState } from '../../utils/hooks'\n\nimport type React from 'react'\n\ninterface IProps extends React.HTMLAttributes<HTMLDivElement> {\n src: string\n mode: string\n onError: () => void\n onLoad: (e) => void\n lazyLoad?: boolean\n imgProps?: Record<string, any>\n forwardedRef?: React.MutableRefObject<HTMLDivElement>\n}\n\nfunction Image (props: IProps) {\n const imgRef = useRef<HTMLImageElement | null>(null)\n const observer = useRef<Partial<IntersectionObserver>>({})\n const [, setIsLoaded] = useState(false)\n const {\n className,\n style
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/image/index.tsx"],"sourcesContent":["import './style/index.scss'\n\nimport classNames from 'classnames'\n\nimport { createForwardRefComponent } from '../../utils'\nimport { useCallback, useEffect, useRef, useState } from '../../utils/hooks'\n\nimport type React from 'react'\n\ninterface IProps extends React.HTMLAttributes<HTMLDivElement> {\n src: string\n mode: string\n onError: () => void\n onLoad: (e) => void\n lazyLoad?: boolean\n imgProps?: Record<string, any>\n forwardedRef?: React.MutableRefObject<HTMLDivElement>\n /** 为 true 时不挂载默认占位尺寸(320×240),由业务 style/class 决定容器大小 */\n disableDefaultSize?: boolean\n}\n\nfunction Image (props: IProps) {\n const imgRef = useRef<HTMLImageElement | null>(null)\n const observer = useRef<Partial<IntersectionObserver>>({})\n const [, setIsLoaded] = useState(false)\n const {\n className,\n style,\n src,\n mode,\n onError,\n lazyLoad,\n imgProps,\n forwardedRef,\n disableDefaultSize = false,\n ...reset\n } = props\n\n const cls = classNames(\n 'taro-img',\n {\n 'taro-img--with-default-host-size': !disableDefaultSize,\n 'taro-img__widthfix': mode === 'widthFix'\n },\n className\n )\n const imgCls = classNames(\n 'taro-img__mode-' +\n (mode || 'scaleToFill').toLowerCase().replace(/\\s/g, '')\n )\n\n const imageOnLoad = useCallback((e) => {\n const { onLoad } = props\n Object.defineProperty(e, 'detail', {\n enumerable: true,\n writable: true,\n value: {\n width: e.target.width,\n height: e.target.height\n }\n })\n\n onLoad && onLoad(e)\n }, [props])\n\n useEffect(() => {\n if (lazyLoad) {\n observer.current = new IntersectionObserver(\n entries => {\n // 异步 api 关系\n if (entries[entries.length - 1].isIntersecting) {\n setIsLoaded(true)\n // findDOMNode(this).children[0].src = src\n imgRef.current!.src = src\n }\n },\n {\n rootMargin: '300px 0px'\n }\n )\n observer.current.observe?.(imgRef.current!)\n }\n\n return () => {\n observer.current?.disconnect?.()\n }\n }, [lazyLoad, src])\n\n return (\n <div className={cls} style={style} ref={forwardedRef} {...reset}>\n {lazyLoad ? (\n <img\n ref={img => (imgRef.current = img)}\n className={imgCls}\n data-src={src}\n onLoad={imageOnLoad}\n onError={onError}\n {...imgProps}\n />\n ) : (\n <img\n ref={img => (imgRef.current = img)}\n className={imgCls}\n src={src}\n onLoad={imageOnLoad}\n onError={onError}\n {...imgProps}\n />\n )}\n </div>\n )\n}\n\nexport default createForwardRefComponent(Image)\n"],"names":["Image","props","imgRef","useRef","observer","setIsLoaded","useState","className","style","src","mode","onError","lazyLoad","imgProps","forwardedRef","disableDefaultSize","reset","__rest","cls","classNames","imgCls","toLowerCase","replace","imageOnLoad","useCallback","e","onLoad","Object","defineProperty","enumerable","writable","value","width","target","height","useEffect","current","IntersectionObserver","entries","length","isIntersecting","rootMargin","_b","_a","observe","call","disconnect","_el$","_tmpl$","_$use","_$spread","_$insert","_el$2","_tmpl$2","_$addEventListener","img","_$setAttribute","_el$3","_$effect","_$p","_$style","createForwardRefComponent"],"mappings":"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"}
|
|
@@ -13,6 +13,80 @@ const getIndicatorStyle = lineColor => {
|
|
|
13
13
|
borderBottomColor: lineColor
|
|
14
14
|
};
|
|
15
15
|
};
|
|
16
|
+
// 大屏方案版本要求
|
|
17
|
+
const MIN_DESIGN_APP_VERSION = 16;
|
|
18
|
+
const MIN_APP_VERSION = '15.7.0';
|
|
19
|
+
// semver 版本比较
|
|
20
|
+
const isAppVersionAtLeast = (version, min) => {
|
|
21
|
+
var _a, _b;
|
|
22
|
+
if (!version || typeof version !== 'string') return false;
|
|
23
|
+
const parts = v => {
|
|
24
|
+
const m = String(v).trim().match(/^(\d+)(?:\.(\d+))?(?:\.(\d+))?/);
|
|
25
|
+
if (!m) return [];
|
|
26
|
+
return [parseInt(m[1], 10) || 0, parseInt(m[2] || '0', 10) || 0, parseInt(m[3] || '0', 10) || 0];
|
|
27
|
+
};
|
|
28
|
+
const a = parts(version);
|
|
29
|
+
const b = parts(min);
|
|
30
|
+
if (a.length === 0) return false;
|
|
31
|
+
if (b.length === 0) return true;
|
|
32
|
+
for (let i = 0; i < Math.max(a.length, b.length); i++) {
|
|
33
|
+
const da = (_a = a[i]) !== null && _a !== void 0 ? _a : 0;
|
|
34
|
+
const db = (_b = b[i]) !== null && _b !== void 0 ? _b : 0;
|
|
35
|
+
if (da > db) return true;
|
|
36
|
+
if (da < db) return false;
|
|
37
|
+
}
|
|
38
|
+
return true;
|
|
39
|
+
};
|
|
40
|
+
// 读取 JDMobileConfig,异常时返回 undefined
|
|
41
|
+
const tryGetMobileConfigSync = opt => {
|
|
42
|
+
var _a;
|
|
43
|
+
try {
|
|
44
|
+
const fn = (_a = Taro.JDMobileConfig) === null || _a === void 0 ? void 0 : _a.getMobileConfigSync;
|
|
45
|
+
if (typeof fn !== 'function') return undefined;
|
|
46
|
+
return fn(opt);
|
|
47
|
+
} catch (_b) {
|
|
48
|
+
return undefined;
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
// 判断是否启用测量值缩放适配(true=启用, false=使用系统侧缩放)
|
|
52
|
+
const resolveUseMeasuredScale = res => {
|
|
53
|
+
// H5/weapp 不参与大屏系数
|
|
54
|
+
if (process.env.TARO_ENV === 'h5' || process.env.TARO_ENV === 'weapp') {
|
|
55
|
+
return false;
|
|
56
|
+
}
|
|
57
|
+
// 条件1: designAppVersion < 16,不满足则使用系统侧缩放
|
|
58
|
+
const designAppVersionRaw = res.designAppVersion;
|
|
59
|
+
const designAppVersionMajor = designAppVersionRaw != null ? parseInt(String(designAppVersionRaw).trim(), 10) : Number.NaN;
|
|
60
|
+
if (!Number.isFinite(designAppVersionMajor) || designAppVersionMajor < MIN_DESIGN_APP_VERSION) {
|
|
61
|
+
return false;
|
|
62
|
+
}
|
|
63
|
+
// 条件2: appVersion < 15.7.0,不满足则使用系统侧缩放
|
|
64
|
+
if (!isAppVersionAtLeast(res.version, MIN_APP_VERSION)) {
|
|
65
|
+
return false;
|
|
66
|
+
}
|
|
67
|
+
// 条件3: 平台判断
|
|
68
|
+
const platform = String(res.platform || '').toLowerCase();
|
|
69
|
+
if (platform === 'harmony') {
|
|
70
|
+
return true;
|
|
71
|
+
}
|
|
72
|
+
if (platform === 'android') {
|
|
73
|
+
const raw = tryGetMobileConfigSync({
|
|
74
|
+
space: 'taro',
|
|
75
|
+
configName: 'config',
|
|
76
|
+
key: 'disableFixBoundingScaleRatio'
|
|
77
|
+
});
|
|
78
|
+
return raw !== 1 && raw !== '1';
|
|
79
|
+
}
|
|
80
|
+
if (platform === 'ios') {
|
|
81
|
+
const raw = tryGetMobileConfigSync({
|
|
82
|
+
space: 'Taro',
|
|
83
|
+
configName: 'excutor',
|
|
84
|
+
key: 'disableBoundingScaleRatio'
|
|
85
|
+
});
|
|
86
|
+
return raw !== 1 && raw !== '1';
|
|
87
|
+
}
|
|
88
|
+
return false;
|
|
89
|
+
};
|
|
16
90
|
// 辅助函数:计算 lengthScaleRatio
|
|
17
91
|
const calculateLengthScaleRatio = res => {
|
|
18
92
|
let lengthScaleRatio = res === null || res === void 0 ? void 0 : res.lengthScaleRatio;
|
|
@@ -51,6 +125,29 @@ const setTargetScrollTopWithScale = function (setTargetScrollTop, baseValue, ran
|
|
|
51
125
|
setTargetScrollTop(finalValue);
|
|
52
126
|
}
|
|
53
127
|
};
|
|
128
|
+
// 根据 scrollTop 计算选中索引
|
|
129
|
+
// 系统侧缩放模式:scrollHeight 已被系统缩放,直接相除即可
|
|
130
|
+
// 自行缩放模式:需要除以 ratio 换算(harmony 特殊处理,ratio 已内嵌在 itemHeight 中)
|
|
131
|
+
const getSelectedIndex = function (scrollTop, itemHeight) {
|
|
132
|
+
let lengthScaleRatio = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
|
|
133
|
+
let useMeasuredScale = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
|
|
134
|
+
if (!useMeasuredScale || process.env.TARO_PLATFORM === 'harmony') {
|
|
135
|
+
return Math.round(scrollTop / itemHeight);
|
|
136
|
+
}
|
|
137
|
+
return Math.round(scrollTop / lengthScaleRatio / itemHeight);
|
|
138
|
+
};
|
|
139
|
+
// 计算单项高度(返回设计稿值)
|
|
140
|
+
const calculateItemHeight = function (scrollView, lengthScaleRatio) {
|
|
141
|
+
let useMeasuredScale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
142
|
+
if (process.env.TARO_PLATFORM === 'harmony') {
|
|
143
|
+
return useMeasuredScale ? PICKER_LINE_HEIGHT * lengthScaleRatio : PICKER_LINE_HEIGHT;
|
|
144
|
+
}
|
|
145
|
+
if (scrollView && (scrollView === null || scrollView === void 0 ? void 0 : scrollView.scrollHeight)) {
|
|
146
|
+
return useMeasuredScale ? scrollView.scrollHeight / lengthScaleRatio / scrollView.childNodes.length : scrollView.scrollHeight / scrollView.childNodes.length;
|
|
147
|
+
}
|
|
148
|
+
console.warn('Height measurement anomaly');
|
|
149
|
+
return PICKER_LINE_HEIGHT;
|
|
150
|
+
};
|
|
54
151
|
function PickerGroupBasic(props) {
|
|
55
152
|
const {
|
|
56
153
|
range = [],
|
|
@@ -71,35 +168,25 @@ function PickerGroupBasic(props) {
|
|
|
71
168
|
// 触摸状态用于优化用户体验
|
|
72
169
|
const [isTouching, setIsTouching] = React.useState(false);
|
|
73
170
|
const lengthScaleRatioRef = React.useRef(1);
|
|
171
|
+
const useMeasuredScaleRef = React.useRef(false);
|
|
74
172
|
const itemHeightRef = React.useRef(PICKER_LINE_HEIGHT);
|
|
75
|
-
// 初始化时计算 lengthScaleRatio
|
|
173
|
+
// 初始化时计算 lengthScaleRatio 并判定缩放模式
|
|
76
174
|
React.useEffect(() => {
|
|
77
175
|
Taro.getSystemInfo({
|
|
78
176
|
success: res => {
|
|
79
177
|
lengthScaleRatioRef.current = calculateLengthScaleRatio(res);
|
|
178
|
+
useMeasuredScaleRef.current = resolveUseMeasuredScale(res);
|
|
179
|
+
itemHeightRef.current = calculateItemHeight(scrollViewRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
|
|
80
180
|
},
|
|
81
181
|
fail: () => {
|
|
82
|
-
// 失败时使用默认值 1
|
|
83
182
|
lengthScaleRatioRef.current = 1;
|
|
183
|
+
useMeasuredScaleRef.current = false;
|
|
84
184
|
}
|
|
85
185
|
});
|
|
86
186
|
}, []);
|
|
87
187
|
React.useEffect(() => {
|
|
88
|
-
|
|
89
|
-
if (process.env.TARO_PLATFORM === 'harmony') {
|
|
90
|
-
itemHeightRef.current = PICKER_LINE_HEIGHT * lengthScaleRatioRef.current;
|
|
91
|
-
} else {
|
|
92
|
-
if (scrollViewRef.current && ((_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight)) {
|
|
93
|
-
itemHeightRef.current = scrollViewRef.current.scrollHeight / scrollViewRef.current.childNodes.length;
|
|
94
|
-
} else {
|
|
95
|
-
console.warn('Height measurement anomaly');
|
|
96
|
-
}
|
|
97
|
-
}
|
|
188
|
+
itemHeightRef.current = calculateItemHeight(scrollViewRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
|
|
98
189
|
}, [range.length]); // 只在range长度变化时重新计算
|
|
99
|
-
// 获取选中的索引
|
|
100
|
-
const getSelectedIndex = scrollTop => {
|
|
101
|
-
return Math.round(scrollTop / itemHeightRef.current);
|
|
102
|
-
};
|
|
103
190
|
// 当selectedIndex变化时,调整滚动位置
|
|
104
191
|
React.useEffect(() => {
|
|
105
192
|
if (scrollViewRef.current && range.length > 0 && !isTouching) {
|
|
@@ -121,7 +208,7 @@ function PickerGroupBasic(props) {
|
|
|
121
208
|
isCenterTimerId.current = setTimeout(() => {
|
|
122
209
|
if (!scrollViewRef.current) return;
|
|
123
210
|
const scrollTop = scrollViewRef.current.scrollTop;
|
|
124
|
-
const newIndex = getSelectedIndex(scrollTop);
|
|
211
|
+
const newIndex = getSelectedIndex(scrollTop, itemHeightRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
|
|
125
212
|
setIsTouching(false);
|
|
126
213
|
const baseValue = newIndex * itemHeightRef.current;
|
|
127
214
|
const randomOffset = Math.random() * 0.001; // 随机数为了在一个项内滚动时强制刷新
|
|
@@ -142,7 +229,7 @@ function PickerGroupBasic(props) {
|
|
|
142
229
|
isCenterTimerId.current = null;
|
|
143
230
|
}
|
|
144
231
|
const scrollTop = scrollViewRef.current.scrollTop;
|
|
145
|
-
const newIndex = getSelectedIndex(scrollTop);
|
|
232
|
+
const newIndex = getSelectedIndex(scrollTop, itemHeightRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
|
|
146
233
|
if (newIndex !== currentIndex) {
|
|
147
234
|
setCurrentIndex(newIndex);
|
|
148
235
|
}
|
|
@@ -221,34 +308,25 @@ function PickerGroupTime(props) {
|
|
|
221
308
|
const [currentIndex, setCurrentIndex] = React.useState(selectedIndex);
|
|
222
309
|
const [isTouching, setIsTouching] = React.useState(false);
|
|
223
310
|
const lengthScaleRatioRef = React.useRef(1);
|
|
311
|
+
const useMeasuredScaleRef = React.useRef(false);
|
|
224
312
|
const itemHeightRef = React.useRef(PICKER_LINE_HEIGHT);
|
|
225
|
-
// 初始化时计算 lengthScaleRatio
|
|
313
|
+
// 初始化时计算 lengthScaleRatio 并判定缩放模式
|
|
226
314
|
React.useEffect(() => {
|
|
227
315
|
Taro.getSystemInfo({
|
|
228
316
|
success: res => {
|
|
229
317
|
lengthScaleRatioRef.current = calculateLengthScaleRatio(res);
|
|
318
|
+
useMeasuredScaleRef.current = resolveUseMeasuredScale(res);
|
|
319
|
+
itemHeightRef.current = calculateItemHeight(scrollViewRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
|
|
230
320
|
},
|
|
231
321
|
fail: () => {
|
|
232
|
-
// 失败时使用默认值 1
|
|
233
322
|
lengthScaleRatioRef.current = 1;
|
|
323
|
+
useMeasuredScaleRef.current = false;
|
|
234
324
|
}
|
|
235
325
|
});
|
|
236
326
|
}, []);
|
|
237
327
|
React.useEffect(() => {
|
|
238
|
-
|
|
239
|
-
if (process.env.TARO_PLATFORM === 'harmony') {
|
|
240
|
-
itemHeightRef.current = PICKER_LINE_HEIGHT * lengthScaleRatioRef.current;
|
|
241
|
-
} else {
|
|
242
|
-
if (scrollViewRef.current && ((_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight)) {
|
|
243
|
-
itemHeightRef.current = scrollViewRef.current.scrollHeight / scrollViewRef.current.childNodes.length;
|
|
244
|
-
} else {
|
|
245
|
-
console.warn('Height measurement anomaly');
|
|
246
|
-
}
|
|
247
|
-
}
|
|
328
|
+
itemHeightRef.current = calculateItemHeight(scrollViewRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
|
|
248
329
|
}, [range.length]); // 只在range长度变化时重新计算
|
|
249
|
-
const getSelectedIndex = scrollTop => {
|
|
250
|
-
return Math.round(scrollTop / itemHeightRef.current);
|
|
251
|
-
};
|
|
252
330
|
// 当selectedIndex变化时,调整滚动位置
|
|
253
331
|
React.useEffect(() => {
|
|
254
332
|
if (scrollViewRef.current && range.length > 0 && !isTouching) {
|
|
@@ -270,7 +348,7 @@ function PickerGroupTime(props) {
|
|
|
270
348
|
isCenterTimerId.current = setTimeout(() => {
|
|
271
349
|
if (!scrollViewRef.current) return;
|
|
272
350
|
const scrollTop = scrollViewRef.current.scrollTop;
|
|
273
|
-
const newIndex = getSelectedIndex(scrollTop);
|
|
351
|
+
const newIndex = getSelectedIndex(scrollTop, itemHeightRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
|
|
274
352
|
setIsTouching(false);
|
|
275
353
|
// 调用updateIndex执行限位逻辑,获取是否触发了限位
|
|
276
354
|
const isLimited = Boolean(updateIndex(newIndex, columnId, true));
|
|
@@ -291,7 +369,7 @@ function PickerGroupTime(props) {
|
|
|
291
369
|
isCenterTimerId.current = null;
|
|
292
370
|
}
|
|
293
371
|
const scrollTop = scrollViewRef.current.scrollTop;
|
|
294
|
-
const newIndex = getSelectedIndex(scrollTop);
|
|
372
|
+
const newIndex = getSelectedIndex(scrollTop, itemHeightRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
|
|
295
373
|
if (newIndex !== currentIndex) {
|
|
296
374
|
setCurrentIndex(newIndex);
|
|
297
375
|
}
|
|
@@ -368,34 +446,25 @@ function PickerGroupDate(props) {
|
|
|
368
446
|
const [currentIndex, setCurrentIndex] = React.useState(selectedIndex);
|
|
369
447
|
const [isTouching, setIsTouching] = React.useState(false);
|
|
370
448
|
const lengthScaleRatioRef = React.useRef(1);
|
|
449
|
+
const useMeasuredScaleRef = React.useRef(false);
|
|
371
450
|
const itemHeightRef = React.useRef(PICKER_LINE_HEIGHT);
|
|
372
|
-
// 初始化时计算 lengthScaleRatio
|
|
451
|
+
// 初始化时计算 lengthScaleRatio 并判定缩放模式
|
|
373
452
|
React.useEffect(() => {
|
|
374
453
|
Taro.getSystemInfo({
|
|
375
454
|
success: res => {
|
|
376
455
|
lengthScaleRatioRef.current = calculateLengthScaleRatio(res);
|
|
456
|
+
useMeasuredScaleRef.current = resolveUseMeasuredScale(res);
|
|
457
|
+
itemHeightRef.current = calculateItemHeight(scrollViewRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
|
|
377
458
|
},
|
|
378
459
|
fail: () => {
|
|
379
|
-
// 失败时使用默认值 1
|
|
380
460
|
lengthScaleRatioRef.current = 1;
|
|
461
|
+
useMeasuredScaleRef.current = false;
|
|
381
462
|
}
|
|
382
463
|
});
|
|
383
464
|
}, []);
|
|
384
465
|
React.useEffect(() => {
|
|
385
|
-
|
|
386
|
-
if (process.env.TARO_PLATFORM === 'harmony') {
|
|
387
|
-
itemHeightRef.current = PICKER_LINE_HEIGHT * lengthScaleRatioRef.current;
|
|
388
|
-
} else {
|
|
389
|
-
if (scrollViewRef.current && ((_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight)) {
|
|
390
|
-
itemHeightRef.current = scrollViewRef.current.scrollHeight / scrollViewRef.current.childNodes.length;
|
|
391
|
-
} else {
|
|
392
|
-
console.warn('Height measurement anomaly');
|
|
393
|
-
}
|
|
394
|
-
}
|
|
466
|
+
itemHeightRef.current = calculateItemHeight(scrollViewRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
|
|
395
467
|
}, [range.length]); // 只在range长度变化时重新计算
|
|
396
|
-
const getSelectedIndex = scrollTop => {
|
|
397
|
-
return Math.round(scrollTop / itemHeightRef.current);
|
|
398
|
-
};
|
|
399
468
|
// 当selectedIndex变化时,调整滚动位置
|
|
400
469
|
React.useEffect(() => {
|
|
401
470
|
if (scrollViewRef.current && range.length > 0 && !isTouching) {
|
|
@@ -417,7 +486,7 @@ function PickerGroupDate(props) {
|
|
|
417
486
|
isCenterTimerId.current = setTimeout(() => {
|
|
418
487
|
if (!scrollViewRef.current) return;
|
|
419
488
|
const scrollTop = scrollViewRef.current.scrollTop;
|
|
420
|
-
const newIndex = getSelectedIndex(scrollTop);
|
|
489
|
+
const newIndex = getSelectedIndex(scrollTop, itemHeightRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
|
|
421
490
|
setIsTouching(false);
|
|
422
491
|
const baseValue = newIndex * itemHeightRef.current;
|
|
423
492
|
const randomOffset = Math.random() * 0.001; // 随机数为了在一个项内滚动时强制刷新
|
|
@@ -440,7 +509,7 @@ function PickerGroupDate(props) {
|
|
|
440
509
|
isCenterTimerId.current = null;
|
|
441
510
|
}
|
|
442
511
|
const scrollTop = scrollViewRef.current.scrollTop;
|
|
443
|
-
const newIndex = getSelectedIndex(scrollTop);
|
|
512
|
+
const newIndex = getSelectedIndex(scrollTop, itemHeightRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
|
|
444
513
|
if (newIndex !== currentIndex) {
|
|
445
514
|
setCurrentIndex(newIndex);
|
|
446
515
|
}
|
|
@@ -517,40 +586,31 @@ function PickerGroupRegion(props) {
|
|
|
517
586
|
const [currentIndex, setCurrentIndex] = React.useState(selectedIndex);
|
|
518
587
|
const [isTouching, setIsTouching] = React.useState(false);
|
|
519
588
|
const lengthScaleRatioRef = React.useRef(1);
|
|
589
|
+
const useMeasuredScaleRef = React.useRef(false);
|
|
520
590
|
const itemHeightRef = React.useRef(PICKER_LINE_HEIGHT);
|
|
521
591
|
const isUserBeginScrollRef = React.useRef(false);
|
|
522
|
-
// 初始化时计算 lengthScaleRatio
|
|
592
|
+
// 初始化时计算 lengthScaleRatio 并判定缩放模式
|
|
523
593
|
React.useEffect(() => {
|
|
524
594
|
Taro.getSystemInfo({
|
|
525
595
|
success: res => {
|
|
526
596
|
lengthScaleRatioRef.current = calculateLengthScaleRatio(res);
|
|
597
|
+
useMeasuredScaleRef.current = resolveUseMeasuredScale(res);
|
|
598
|
+
itemHeightRef.current = calculateItemHeight(scrollViewRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
|
|
527
599
|
},
|
|
528
600
|
fail: () => {
|
|
529
|
-
// 失败时使用默认值 1
|
|
530
601
|
lengthScaleRatioRef.current = 1;
|
|
602
|
+
useMeasuredScaleRef.current = false;
|
|
531
603
|
}
|
|
532
604
|
});
|
|
533
605
|
}, []);
|
|
534
606
|
React.useEffect(() => {
|
|
535
|
-
|
|
536
|
-
if (process.env.TARO_PLATFORM === 'harmony') {
|
|
537
|
-
itemHeightRef.current = PICKER_LINE_HEIGHT * lengthScaleRatioRef.current;
|
|
538
|
-
} else {
|
|
539
|
-
if (scrollViewRef.current && ((_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight)) {
|
|
540
|
-
itemHeightRef.current = scrollViewRef.current.scrollHeight / scrollViewRef.current.childNodes.length;
|
|
541
|
-
} else {
|
|
542
|
-
console.warn('Height measurement anomaly');
|
|
543
|
-
}
|
|
544
|
-
}
|
|
607
|
+
itemHeightRef.current = calculateItemHeight(scrollViewRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
|
|
545
608
|
}, [range.length]); // 只在range长度变化时重新计算
|
|
546
|
-
const getSelectedIndex = scrollTop => {
|
|
547
|
-
return Math.round(scrollTop / itemHeightRef.current);
|
|
548
|
-
};
|
|
549
609
|
// 当selectedIndex变化时,调整滚动位置
|
|
550
610
|
React.useEffect(() => {
|
|
551
611
|
if (scrollViewRef.current && range.length > 0 && !isTouching) {
|
|
552
612
|
const baseValue = selectedIndex * itemHeightRef.current;
|
|
553
|
-
setTargetScrollTopWithScale(setTargetScrollTop, baseValue);
|
|
613
|
+
setTargetScrollTopWithScale(setTargetScrollTop, baseValue, undefined, lengthScaleRatioRef.current);
|
|
554
614
|
setCurrentIndex(selectedIndex);
|
|
555
615
|
}
|
|
556
616
|
}, [selectedIndex, range]);
|
|
@@ -566,7 +626,7 @@ function PickerGroupRegion(props) {
|
|
|
566
626
|
isCenterTimerId.current = setTimeout(() => {
|
|
567
627
|
if (!scrollViewRef.current) return;
|
|
568
628
|
const scrollTop = scrollViewRef.current.scrollTop;
|
|
569
|
-
const newIndex = getSelectedIndex(scrollTop);
|
|
629
|
+
const newIndex = getSelectedIndex(scrollTop, itemHeightRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
|
|
570
630
|
setIsTouching(false);
|
|
571
631
|
const baseValue = newIndex * itemHeightRef.current;
|
|
572
632
|
const randomOffset = Math.random() * 0.001; // 随机数为了在一个项内滚动时强制刷新
|
|
@@ -582,7 +642,7 @@ function PickerGroupRegion(props) {
|
|
|
582
642
|
isCenterTimerId.current = null;
|
|
583
643
|
}
|
|
584
644
|
const scrollTop = scrollViewRef.current.scrollTop;
|
|
585
|
-
const newIndex = getSelectedIndex(scrollTop);
|
|
645
|
+
const newIndex = getSelectedIndex(scrollTop, itemHeightRef.current, lengthScaleRatioRef.current, useMeasuredScaleRef.current);
|
|
586
646
|
if (newIndex !== currentIndex) {
|
|
587
647
|
setCurrentIndex(newIndex);
|
|
588
648
|
}
|