@tarojs/components-react 4.1.12-beta.4 → 4.1.12-beta.41
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/map/MapContext.js +628 -0
- package/dist/components/map/MapContext.js.map +1 -0
- package/dist/components/map/MapCustomCallout.js +91 -0
- package/dist/components/map/MapCustomCallout.js.map +1 -0
- package/dist/components/map/common.js +4 -0
- package/dist/components/map/common.js.map +1 -0
- package/dist/components/map/createMapContext.js +34 -0
- package/dist/components/map/createMapContext.js.map +1 -0
- package/dist/components/map/handler.js +50 -0
- package/dist/components/map/handler.js.map +1 -0
- package/dist/components/map/index.js +327 -0
- package/dist/components/map/index.js.map +1 -0
- package/dist/components/picker/index.js +71 -34
- package/dist/components/picker/index.js.map +1 -1
- package/dist/components/picker/picker-group.js +455 -111
- package/dist/components/picker/picker-group.js.map +1 -1
- package/dist/components/scroll-view/index.js +80 -36
- package/dist/components/scroll-view/index.js.map +1 -1
- package/dist/components/switch/index.js +125 -0
- package/dist/components/switch/index.js.map +1 -0
- package/dist/components/switch/style/index.scss.js +4 -0
- package/dist/components/switch/style/index.scss.js.map +1 -0
- package/dist/contexts/ScrollElementContext.js +6 -0
- package/dist/contexts/ScrollElementContext.js.map +1 -0
- package/dist/index.css +1 -1
- package/dist/index.js +5 -1
- package/dist/index.js.map +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/map/MapContext.js +628 -0
- package/dist/original/components/map/MapContext.js.map +1 -0
- package/dist/original/components/map/MapCustomCallout.js +91 -0
- package/dist/original/components/map/MapCustomCallout.js.map +1 -0
- package/dist/original/components/map/common.js +4 -0
- package/dist/original/components/map/common.js.map +1 -0
- package/dist/original/components/map/createMapContext.js +34 -0
- package/dist/original/components/map/createMapContext.js.map +1 -0
- package/dist/original/components/map/handler.js +50 -0
- package/dist/original/components/map/handler.js.map +1 -0
- package/dist/original/components/map/index.js +327 -0
- package/dist/original/components/map/index.js.map +1 -0
- package/dist/original/components/picker/index.js +71 -34
- package/dist/original/components/picker/index.js.map +1 -1
- package/dist/original/components/picker/picker-group.js +455 -111
- package/dist/original/components/picker/picker-group.js.map +1 -1
- package/dist/original/components/scroll-view/index.js +80 -36
- package/dist/original/components/scroll-view/index.js.map +1 -1
- package/dist/original/components/switch/index.js +125 -0
- package/dist/original/components/switch/index.js.map +1 -0
- package/dist/original/components/switch/style/index.scss +35 -0
- package/dist/original/contexts/ScrollElementContext.js +6 -0
- package/dist/original/contexts/ScrollElementContext.js.map +1 -0
- package/dist/original/index.js +5 -1
- package/dist/original/index.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/index.js +75 -38
- package/dist/solid/components/picker/index.js.map +1 -1
- package/dist/solid/components/picker/picker-group.js +478 -135
- package/dist/solid/components/picker/picker-group.js.map +1 -1
- package/dist/solid/components/scroll-view/index.js +84 -40
- package/dist/solid/components/scroll-view/index.js.map +1 -1
- package/dist/solid/contexts/ScrollElementContext.js +6 -0
- package/dist/solid/contexts/ScrollElementContext.js.map +1 -0
- package/dist/solid/index.css +1 -1
- package/package.json +8 -6
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
import { __rest } from 'tslib';
|
|
2
|
+
import './style/index.scss';
|
|
3
|
+
import { View } from '@tarojs/components';
|
|
4
|
+
import classNames from 'classnames';
|
|
5
|
+
import { omit, createForwardRefComponent } from '../../utils/index.js';
|
|
6
|
+
import { useState, useCallback } from '../../utils/hooks.react.js';
|
|
7
|
+
import { jsx } from 'react/jsx-runtime';
|
|
8
|
+
|
|
9
|
+
function Switch(props) {
|
|
10
|
+
const {
|
|
11
|
+
type = 'switch',
|
|
12
|
+
checked: controlledChecked,
|
|
13
|
+
defaultChecked = false,
|
|
14
|
+
disabled = false,
|
|
15
|
+
color = '#04BE02',
|
|
16
|
+
width,
|
|
17
|
+
height,
|
|
18
|
+
beforeChange,
|
|
19
|
+
nativeProps = {},
|
|
20
|
+
onChange,
|
|
21
|
+
forwardedRef,
|
|
22
|
+
className,
|
|
23
|
+
style
|
|
24
|
+
} = props,
|
|
25
|
+
rest = __rest(props, ["type", "checked", "defaultChecked", "disabled", "color", "width", "height", "beforeChange", "nativeProps", "onChange", "forwardedRef", "className", "style"]);
|
|
26
|
+
const [innerChecked, setInnerChecked] = useState(defaultChecked);
|
|
27
|
+
const [loading, setLoading] = useState(false);
|
|
28
|
+
const isChecked = controlledChecked !== undefined ? controlledChecked : innerChecked;
|
|
29
|
+
const applyChange = useCallback(value => {
|
|
30
|
+
if (controlledChecked === undefined) {
|
|
31
|
+
setInnerChecked(value);
|
|
32
|
+
}
|
|
33
|
+
const e = {
|
|
34
|
+
detail: {
|
|
35
|
+
value
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
onChange && onChange(e);
|
|
39
|
+
}, [controlledChecked, onChange]);
|
|
40
|
+
const handleToggle = useCallback(newValue => {
|
|
41
|
+
if (disabled || loading) return;
|
|
42
|
+
if (beforeChange) {
|
|
43
|
+
const result = beforeChange(newValue);
|
|
44
|
+
if (result === false) return;
|
|
45
|
+
if (result instanceof Promise) {
|
|
46
|
+
setLoading(true);
|
|
47
|
+
result.then(asyncResult => {
|
|
48
|
+
setLoading(false);
|
|
49
|
+
if (asyncResult === false) return;
|
|
50
|
+
applyChange(newValue);
|
|
51
|
+
}, () => {
|
|
52
|
+
setLoading(false);
|
|
53
|
+
});
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
applyChange(newValue);
|
|
58
|
+
}, [disabled, loading, beforeChange, applyChange]);
|
|
59
|
+
const isSwitch = type === 'switch';
|
|
60
|
+
const sw = width !== null && width !== void 0 ? width : isSwitch ? 52 : 20;
|
|
61
|
+
const sh = height !== null && height !== void 0 ? height : isSwitch ? 32 : 20;
|
|
62
|
+
const dynamicStyle = isSwitch ? {
|
|
63
|
+
width: `${sw}px`,
|
|
64
|
+
height: `${sh}px`,
|
|
65
|
+
borderRadius: `${sh / 2}px`,
|
|
66
|
+
backgroundColor: isChecked ? color : '#DFDFDF',
|
|
67
|
+
borderColor: isChecked ? color : '#DFDFDF'
|
|
68
|
+
} : {
|
|
69
|
+
width: `${sh}px`,
|
|
70
|
+
height: `${sh}px`,
|
|
71
|
+
borderRadius: '4px',
|
|
72
|
+
backgroundColor: isChecked ? color : 'transparent',
|
|
73
|
+
borderColor: isChecked ? color : '#c9c9c9'
|
|
74
|
+
};
|
|
75
|
+
const cls = classNames('taro-switch', `taro-switch--type-${type}`, {
|
|
76
|
+
'taro-switch--checked': isChecked,
|
|
77
|
+
'taro-switch--disabled': disabled
|
|
78
|
+
}, className);
|
|
79
|
+
const rootStyle = Object.assign(Object.assign({}, dynamicStyle), style);
|
|
80
|
+
const onClick = e => {
|
|
81
|
+
e.stopPropagation();
|
|
82
|
+
handleToggle(!isChecked);
|
|
83
|
+
};
|
|
84
|
+
if (isSwitch) {
|
|
85
|
+
const thumbStyle = {
|
|
86
|
+
width: `${sh - 4}px`,
|
|
87
|
+
height: `${sh - 4}px`,
|
|
88
|
+
transform: isChecked ? `translateX(${sw - sh}px)` : undefined
|
|
89
|
+
};
|
|
90
|
+
return /*#__PURE__*/jsx(View, {
|
|
91
|
+
className: cls,
|
|
92
|
+
style: rootStyle,
|
|
93
|
+
ref: forwardedRef,
|
|
94
|
+
onClick: onClick,
|
|
95
|
+
...omit(rest, ['forwardedRef']),
|
|
96
|
+
...nativeProps,
|
|
97
|
+
children: /*#__PURE__*/jsx(View, {
|
|
98
|
+
className: "taro-switch__thumb",
|
|
99
|
+
style: thumbStyle
|
|
100
|
+
})
|
|
101
|
+
});
|
|
102
|
+
}
|
|
103
|
+
return /*#__PURE__*/jsx(View, {
|
|
104
|
+
className: cls,
|
|
105
|
+
style: rootStyle,
|
|
106
|
+
ref: forwardedRef,
|
|
107
|
+
onClick: onClick,
|
|
108
|
+
...omit(rest, ['forwardedRef']),
|
|
109
|
+
...nativeProps,
|
|
110
|
+
children: /*#__PURE__*/jsx(View, {
|
|
111
|
+
className: "taro-switch__checkmark",
|
|
112
|
+
style: {
|
|
113
|
+
width: `${Math.round(sh * 0.3)}px`,
|
|
114
|
+
height: `${Math.round(sh * 0.5)}px`,
|
|
115
|
+
borderRight: `${Math.round(sh * 0.1)}px solid #fff`,
|
|
116
|
+
borderBottom: `${Math.round(sh * 0.1)}px solid #fff`,
|
|
117
|
+
transform: isChecked ? `translate(-50%, -65%) rotate(45deg) scale(1)` : `translate(-50%, -65%) rotate(45deg) scale(0)`
|
|
118
|
+
}
|
|
119
|
+
})
|
|
120
|
+
});
|
|
121
|
+
}
|
|
122
|
+
var index = createForwardRefComponent(Switch);
|
|
123
|
+
|
|
124
|
+
export { index as default };
|
|
125
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/switch/index.tsx"],"sourcesContent":["import './style/index.scss'\n\nimport { View } from '@tarojs/components'\nimport classNames from 'classnames'\n\nimport { createForwardRefComponent, omit } from '../../utils'\nimport { useCallback, useState } from '../../utils/hooks'\n\nimport type React from 'react'\n\nexport type BeforeChange = (value: boolean) => boolean | Promise<boolean>\n\ninterface IProps extends React.HTMLAttributes<HTMLDivElement> {\n type?: 'switch' | 'checkbox'\n checked?: boolean\n defaultChecked?: boolean\n disabled?: boolean\n color?: string\n width?: number\n height?: number\n beforeChange?: BeforeChange\n nativeProps?: Record<string, any>\n onChange?: (e: any) => void\n forwardedRef?: React.MutableRefObject<HTMLDivElement>\n}\n\nfunction Switch (props: IProps) {\n const {\n type = 'switch',\n checked: controlledChecked,\n defaultChecked = false,\n disabled = false,\n color = '#04BE02',\n width,\n height,\n beforeChange,\n nativeProps = {},\n onChange,\n forwardedRef,\n className,\n style,\n ...rest\n } = props\n\n const [innerChecked, setInnerChecked] = useState(defaultChecked)\n const [loading, setLoading] = useState(false)\n\n const isChecked = controlledChecked !== undefined\n ? controlledChecked\n : innerChecked\n\n const applyChange = useCallback((value: boolean) => {\n if (controlledChecked === undefined) {\n setInnerChecked(value)\n }\n\n const e = { detail: { value } }\n onChange && onChange(e)\n }, [controlledChecked, onChange])\n\n const handleToggle = useCallback((newValue: boolean) => {\n if (disabled || loading) return\n\n if (beforeChange) {\n const result = beforeChange(newValue)\n\n if (result === false) return\n\n if (result instanceof Promise) {\n setLoading(true)\n result\n .then((asyncResult) => {\n setLoading(false)\n if (asyncResult === false) return\n applyChange(newValue)\n }, () => {\n setLoading(false)\n })\n return\n }\n }\n\n applyChange(newValue)\n }, [disabled, loading, beforeChange, applyChange])\n\n const isSwitch = type === 'switch'\n const sw = width ?? (isSwitch ? 52 : 20)\n const sh = height ?? (isSwitch ? 32 : 20)\n\n const dynamicStyle: React.CSSProperties = isSwitch ? {\n width: `${sw}px`,\n height: `${sh}px`,\n borderRadius: `${sh / 2}px`,\n backgroundColor: isChecked ? color : '#DFDFDF',\n borderColor: isChecked ? color : '#DFDFDF'\n } : {\n width: `${sh}px`,\n height: `${sh}px`,\n borderRadius: '4px',\n backgroundColor: isChecked ? color : 'transparent',\n borderColor: isChecked ? color : '#c9c9c9'\n }\n\n const cls = classNames(\n 'taro-switch',\n `taro-switch--type-${type}`,\n {\n 'taro-switch--checked': isChecked,\n 'taro-switch--disabled': disabled\n },\n className\n )\n\n const rootStyle = {\n ...dynamicStyle,\n ...style\n } as unknown as React.CSSProperties\n\n const onClick = (e: React.MouseEvent) => {\n e.stopPropagation()\n handleToggle(!isChecked)\n }\n\n if (isSwitch) {\n const thumbStyle: React.CSSProperties = {\n width: `${sh - 4}px`,\n height: `${sh - 4}px`,\n transform: isChecked ? `translateX(${sw - sh}px)` : undefined\n }\n return (\n <View\n className={cls}\n style={rootStyle}\n ref={forwardedRef}\n onClick={onClick}\n {...omit(rest, ['forwardedRef'])}\n {...nativeProps}\n >\n <View className='taro-switch__thumb' style={thumbStyle} />\n </View>\n )\n }\n\n return (\n <View\n className={cls}\n style={rootStyle}\n ref={forwardedRef}\n onClick={onClick}\n {...omit(rest, ['forwardedRef'])}\n {...nativeProps}\n >\n <View\n className='taro-switch__checkmark'\n style={{\n width: `${Math.round(sh * 0.3)}px`,\n height: `${Math.round(sh * 0.5)}px`,\n borderRight: `${Math.round(sh * 0.1)}px solid #fff`,\n borderBottom: `${Math.round(sh * 0.1)}px solid #fff`,\n transform: isChecked\n ? `translate(-50%, -65%) rotate(45deg) scale(1)`\n : `translate(-50%, -65%) rotate(45deg) scale(0)`\n }}\n />\n </View>\n )\n}\n\nexport default createForwardRefComponent(Switch)\n"],"names":["Switch","props","type","checked","controlledChecked","defaultChecked","disabled","color","width","height","beforeChange","nativeProps","onChange","forwardedRef","className","style","rest","innerChecked","setInnerChecked","useState","loading","setLoading","isChecked","undefined","applyChange","useCallback","value","e","detail","handleToggle","newValue","result","Promise","then","asyncResult","isSwitch","sw","sh","dynamicStyle","borderRadius","backgroundColor","borderColor","cls","classNames","rootStyle","Object","assign","onClick","stopPropagation","thumbStyle","transform","_jsx","View","ref","omit","children","Math","round","borderRight","borderBottom","createForwardRefComponent"],"mappings":"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"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
.taro-switch {
|
|
2
|
+
position: relative;
|
|
3
|
+
display: inline-block;
|
|
4
|
+
cursor: pointer;
|
|
5
|
+
|
|
6
|
+
&--disabled {
|
|
7
|
+
opacity: 0.5;
|
|
8
|
+
cursor: not-allowed;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
&--type-switch {
|
|
12
|
+
border: 1px solid #DFDFDF;
|
|
13
|
+
box-sizing: border-box;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
&--type-switch &__thumb {
|
|
17
|
+
position: absolute;
|
|
18
|
+
top: 1px;
|
|
19
|
+
left: 1px;
|
|
20
|
+
border-radius: 50%;
|
|
21
|
+
background-color: #fff;
|
|
22
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
&--type-checkbox {
|
|
26
|
+
border: 1px solid #c9c9c9;
|
|
27
|
+
box-sizing: border-box;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&--type-checkbox &__checkmark {
|
|
31
|
+
position: absolute;
|
|
32
|
+
top: 50%;
|
|
33
|
+
left: 50%;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScrollElementContext.js","sources":["../../../src/contexts/ScrollElementContext.tsx"],"sourcesContent":["import React from 'react'\n\n/**\n * ScrollElementContext:嵌套滚动场景下,父容器(ScrollView/List)向子组件提供滚动容器信息。\n * 子组件(WaterFlow/List)可从 Context 获取 scrollRef、containerHeight、startOffset,\n * 实现随父容器一起滚动,无需业务方手动传 scrollElement。\n */\nexport interface ScrollElementContextValue {\n /** 外层滚动容器 ref */\n scrollRef: React.MutableRefObject<HTMLElement | null>\n /** 可视区高度 */\n containerHeight: number\n /** 内容在滚动容器中的起始偏移(上方有其他内容时使用) */\n startOffset: number\n /** 内层 WaterFlow 报告 scrollHeight 时调用(List 动高联动等) */\n reportNestedHeightChange?: (scrollHeight: number) => void\n}\n\nexport const ScrollElementContext = React.createContext<ScrollElementContextValue | null>(null)\n"],"names":["ScrollElementContext","React","createContext"],"mappings":";;AAkBO,MAAMA,oBAAoB,gBAAGC,cAAK,CAACC,aAAa,CAAmC,IAAI;;;;"}
|
package/dist/original/index.js
CHANGED
|
@@ -1,15 +1,19 @@
|
|
|
1
|
-
export { Ad, AdCustom, AnimationVideo, AnimationView, ArCamera, Audio, AwemeData, Block, Camera, Canvas, ChannelLive, ChannelVideo, Checkbox, CheckboxGroup, CommentDetail, CommentList, ContactButton, CoverImage, CoverView, CustomWrapper, DraggableSheet, Editor, FollowSwan, Form, FunctionalPageNavigator, GridBuilder, GridView, InlinePaymentPanel, KeyboardAccessory, Label, Lifestyle, Like, ListBuilder, ListView, LivePlayer, LivePusher, Login, Lottie,
|
|
1
|
+
export { Ad, AdCustom, AnimationVideo, AnimationView, ArCamera, Audio, AwemeData, Block, Camera, Canvas, ChannelLive, ChannelVideo, Checkbox, CheckboxGroup, CommentDetail, CommentList, ContactButton, CoverImage, CoverView, CustomWrapper, DraggableSheet, Editor, FollowSwan, Form, FunctionalPageNavigator, GridBuilder, GridView, InlinePaymentPanel, KeyboardAccessory, Label, Lifestyle, Like, ListBuilder, ListView, LivePlayer, LivePusher, Login, Lottie, MatchMedia, MovableArea, MovableView, NativeSlot, NavigationBar, Navigator, NestedScrollBody, NestedScrollHeader, OfficialAccount, OpenContainer, OpenData, PageContainer, PageMeta, PickerView, PickerViewColumn, Progress, Radio, RadioGroup, RichText, RootPortal, RtcRoom, RtcRoomItem, Script, ShareElement, Slider, Slot, Snapshot, Span, Tabs, Textarea, Video, VoipRoom, WebView } from '@tarojs/components/lib/react';
|
|
2
2
|
export { default as Button } from './components/button/index.js';
|
|
3
3
|
export { default as Icon } from './components/icon/index.js';
|
|
4
4
|
export { default as Image } from './components/image/index.js';
|
|
5
5
|
export { default as Input } from './components/input/index.js';
|
|
6
|
+
export { default as Map } from './components/map/index.js';
|
|
6
7
|
export { default as Picker } from './components/picker/index.js';
|
|
7
8
|
export { default as PullDownRefresh } from './components/pull-down-refresh/index.js';
|
|
8
9
|
export { Refresher } from './components/refresher/index.js';
|
|
10
|
+
export { ScrollElementContext } from './contexts/ScrollElementContext.js';
|
|
9
11
|
export { default as ScrollView } from './components/scroll-view/index.js';
|
|
10
12
|
export { Swiper, SwiperItem } from './components/swiper/index.js';
|
|
13
|
+
export { default as Switch } from './components/switch/index.js';
|
|
11
14
|
export { default as Text } from './components/text/index.js';
|
|
12
15
|
export { default as View } from './components/view/index.js';
|
|
16
|
+
export { createMapContext } from './components/map/createMapContext.js';
|
|
13
17
|
|
|
14
18
|
/* eslint-disable simple-import-sort/exports */
|
|
15
19
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/index.react.ts"],"sourcesContent":["/* eslint-disable simple-import-sort/exports */\nexport { Ad } from '@tarojs/components/lib/react'\nexport { AdCustom } from '@tarojs/components/lib/react'\nexport { AnimationVideo } from '@tarojs/components/lib/react'\nexport { AnimationView } from '@tarojs/components/lib/react'\nexport { ArCamera } from '@tarojs/components/lib/react'\nexport { Audio } from '@tarojs/components/lib/react'\nexport { AwemeData } from '@tarojs/components/lib/react'\nexport { Block } from '@tarojs/components/lib/react'\nexport { default as Button } from './components/button'\nexport { Camera } from '@tarojs/components/lib/react'\nexport { Canvas } from '@tarojs/components/lib/react'\nexport { ChannelLive } from '@tarojs/components/lib/react'\nexport { ChannelVideo } from '@tarojs/components/lib/react'\nexport { Checkbox, CheckboxGroup } from '@tarojs/components/lib/react'\nexport { CommentDetail, CommentList } from '@tarojs/components/lib/react'\nexport { ContactButton } from '@tarojs/components/lib/react'\nexport { CoverImage } from '@tarojs/components/lib/react'\nexport { CoverView } from '@tarojs/components/lib/react'\nexport { CustomWrapper } from '@tarojs/components/lib/react'\nexport { DraggableSheet } from '@tarojs/components/lib/react'\nexport { Editor } from '@tarojs/components/lib/react'\nexport { FollowSwan } from '@tarojs/components/lib/react'\nexport { Form } from '@tarojs/components/lib/react'\nexport { FunctionalPageNavigator } from '@tarojs/components/lib/react'\nexport { GridView } from '@tarojs/components/lib/react'\nexport { GridBuilder } from '@tarojs/components/lib/react'\nexport { default as Icon } from './components/icon'\nexport { default as Image } from './components/image'\nexport { InlinePaymentPanel } from '@tarojs/components/lib/react'\nexport { default as Input } from './components/input'\nexport { KeyboardAccessory } from '@tarojs/components/lib/react'\nexport { Label } from '@tarojs/components/lib/react'\nexport { Lifestyle } from '@tarojs/components/lib/react'\nexport { Like } from '@tarojs/components/lib/react'\nexport { LivePlayer } from '@tarojs/components/lib/react'\nexport { LivePusher } from '@tarojs/components/lib/react'\nexport { ListBuilder } from '@tarojs/components/lib/react'\nexport { ListView } from '@tarojs/components/lib/react'\nexport { Login } from '@tarojs/components/lib/react'\nexport { Lottie } from '@tarojs/components/lib/react'\nexport { Map } from '
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/index.react.ts"],"sourcesContent":["/* eslint-disable simple-import-sort/exports */\nexport { Ad } from '@tarojs/components/lib/react'\nexport { AdCustom } from '@tarojs/components/lib/react'\nexport { AnimationVideo } from '@tarojs/components/lib/react'\nexport { AnimationView } from '@tarojs/components/lib/react'\nexport { ArCamera } from '@tarojs/components/lib/react'\nexport { Audio } from '@tarojs/components/lib/react'\nexport { AwemeData } from '@tarojs/components/lib/react'\nexport { Block } from '@tarojs/components/lib/react'\nexport { default as Button } from './components/button'\nexport { Camera } from '@tarojs/components/lib/react'\nexport { Canvas } from '@tarojs/components/lib/react'\nexport { ChannelLive } from '@tarojs/components/lib/react'\nexport { ChannelVideo } from '@tarojs/components/lib/react'\nexport { Checkbox, CheckboxGroup } from '@tarojs/components/lib/react'\nexport { CommentDetail, CommentList } from '@tarojs/components/lib/react'\nexport { ContactButton } from '@tarojs/components/lib/react'\nexport { CoverImage } from '@tarojs/components/lib/react'\nexport { CoverView } from '@tarojs/components/lib/react'\nexport { CustomWrapper } from '@tarojs/components/lib/react'\nexport { DraggableSheet } from '@tarojs/components/lib/react'\nexport { Editor } from '@tarojs/components/lib/react'\nexport { FollowSwan } from '@tarojs/components/lib/react'\nexport { Form } from '@tarojs/components/lib/react'\nexport { FunctionalPageNavigator } from '@tarojs/components/lib/react'\nexport { GridView } from '@tarojs/components/lib/react'\nexport { GridBuilder } from '@tarojs/components/lib/react'\nexport { default as Icon } from './components/icon'\nexport { default as Image } from './components/image'\nexport { InlinePaymentPanel } from '@tarojs/components/lib/react'\nexport { default as Input } from './components/input'\nexport { KeyboardAccessory } from '@tarojs/components/lib/react'\nexport { Label } from '@tarojs/components/lib/react'\nexport { Lifestyle } from '@tarojs/components/lib/react'\nexport { Like } from '@tarojs/components/lib/react'\nexport { LivePlayer } from '@tarojs/components/lib/react'\nexport { LivePusher } from '@tarojs/components/lib/react'\nexport { ListBuilder } from '@tarojs/components/lib/react'\nexport { ListView } from '@tarojs/components/lib/react'\nexport { Login } from '@tarojs/components/lib/react'\nexport { Lottie } from '@tarojs/components/lib/react'\nexport { default as Map, type MapProps } from './components/map'\nexport { createMapContext } from './components/map'\nexport { MatchMedia } from '@tarojs/components/lib/react'\nexport { MovableArea, MovableView } from '@tarojs/components/lib/react'\nexport { NavigationBar } from '@tarojs/components/lib/react'\nexport { Navigator } from '@tarojs/components/lib/react'\nexport { NestedScrollBody } from '@tarojs/components/lib/react'\nexport { NestedScrollHeader } from '@tarojs/components/lib/react'\nexport { OfficialAccount } from '@tarojs/components/lib/react'\nexport { OpenData } from '@tarojs/components/lib/react'\nexport { OpenContainer } from '@tarojs/components/lib/react'\nexport { PageContainer } from '@tarojs/components/lib/react'\nexport { PageMeta } from '@tarojs/components/lib/react'\nexport { default as Picker } from './components/picker'\nexport { PickerView, PickerViewColumn } from '@tarojs/components/lib/react'\nexport { Progress } from '@tarojs/components/lib/react'\nexport { default as PullDownRefresh } from './components/pull-down-refresh'\n// export { PullToRefresh } from '@tarojs/components/lib/react'\nexport { default as Refresher, type RefresherProps } from './components/refresher'\nexport { Radio, RadioGroup } from '@tarojs/components/lib/react'\nexport { RichText } from '@tarojs/components/lib/react'\nexport { RootPortal } from '@tarojs/components/lib/react'\nexport { RtcRoom, RtcRoomItem } from '@tarojs/components/lib/react'\nexport { Script } from '@tarojs/components/lib/react'\nexport { ScrollElementContext, type ScrollElementContextValue } from './contexts/ScrollElementContext'\nexport { default as ScrollView } from './components/scroll-view'\nexport { ShareElement } from '@tarojs/components/lib/react'\nexport { Slider } from '@tarojs/components/lib/react'\nexport { Snapshot } from '@tarojs/components/lib/react'\nexport { Span } from '@tarojs/components/lib/react'\nexport { NativeSlot, Slot } from '@tarojs/components/lib/react'\nexport { Swiper, SwiperItem } from './components/swiper'\nexport { default as Switch } from './components/switch'\nexport { Tabs } from '@tarojs/components/lib/react'\nexport { default as Text } from './components/text'\nexport { Textarea } from '@tarojs/components/lib/react'\nexport { Video } from '@tarojs/components/lib/react'\nexport { default as View } from './components/view'\nexport { VoipRoom } from '@tarojs/components/lib/react'\nexport { WebView } from '@tarojs/components/lib/react'\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA"}
|
|
@@ -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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"}
|
|
@@ -128,12 +128,13 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
|
|
|
128
128
|
children,
|
|
129
129
|
formType,
|
|
130
130
|
lang,
|
|
131
|
-
theme = 'light'
|
|
131
|
+
theme = 'light',
|
|
132
|
+
enableClickItemScroll = true
|
|
132
133
|
} = props,
|
|
133
|
-
restProps = __rest(props, ["mode", "disabled", "range", "rangeKey", "value", "start", "end", "fields", "headerText", "level", "regionData", "textProps", "colors", "onChange", "onColumnChange", "onCancel", "children", "formType", "lang", "theme"]);
|
|
134
|
+
restProps = __rest(props, ["mode", "disabled", "range", "rangeKey", "value", "start", "end", "fields", "headerText", "level", "regionData", "textProps", "colors", "onChange", "onColumnChange", "onCancel", "children", "formType", "lang", "theme", "enableClickItemScroll"]);
|
|
134
135
|
const indexRef = React__default.useRef([]);
|
|
135
136
|
const pickerDateRef = React__default.useRef();
|
|
136
|
-
//
|
|
137
|
+
// region:首次用户滚动初始化完成前不入库
|
|
137
138
|
const isInitializationCompletedRef = React__default.useRef(false);
|
|
138
139
|
const [state, setState] = React__default.useState({
|
|
139
140
|
pickerValue: value || EMPTY_ARRAY,
|
|
@@ -142,7 +143,8 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
|
|
|
142
143
|
hidden: true,
|
|
143
144
|
fadeOut: false,
|
|
144
145
|
isWillLoadCalled: false,
|
|
145
|
-
|
|
146
|
+
a11yTimeLimitColumnId: null,
|
|
147
|
+
a11yTimeLimitNonce: 0
|
|
146
148
|
});
|
|
147
149
|
// 在组件内部
|
|
148
150
|
const [columnsCount, setColumnsCount] = React__default.useState(() => getRegionColumnsCount(level));
|
|
@@ -200,25 +202,36 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
|
|
|
200
202
|
const monthRange = getMonthRange(_start, _end, currentYear);
|
|
201
203
|
const dayRange = getDayRange(_start, _end, currentYear, currentMonth);
|
|
202
204
|
indexRef.current = [yearRange.indexOf(currentYear), monthRange.indexOf(currentMonth), dayRange.indexOf(currentDay)];
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
}
|
|
205
|
+
// 与 props 同步时始终刷新 _updateValue,避免取消后再开时日列草稿与索引不一致
|
|
206
|
+
pickerDateRef.current = {
|
|
207
|
+
_value,
|
|
208
|
+
_start,
|
|
209
|
+
_end,
|
|
210
|
+
_updateValue: [currentYear, currentMonth, currentDay]
|
|
211
|
+
};
|
|
211
212
|
} else if (mode === 'region') {
|
|
212
213
|
// region 模式处理 - 验证数据
|
|
213
214
|
if (!regionData) {
|
|
214
215
|
console.error('Picker: regionData is required for region mode');
|
|
215
|
-
indexRef.current =
|
|
216
|
+
indexRef.current = Array.from({
|
|
217
|
+
length: columnsCount
|
|
218
|
+
}, () => 0);
|
|
219
|
+
setState(prev => Object.assign(Object.assign({}, prev), {
|
|
220
|
+
selectedIndices: [...indexRef.current],
|
|
221
|
+
pickerValue: value || EMPTY_ARRAY
|
|
222
|
+
}));
|
|
216
223
|
return;
|
|
217
224
|
}
|
|
218
225
|
const validation = validateRegionData(regionData, 'Picker');
|
|
219
226
|
if (!validation.valid) {
|
|
220
227
|
console.error(validation.error);
|
|
221
|
-
indexRef.current =
|
|
228
|
+
indexRef.current = Array.from({
|
|
229
|
+
length: columnsCount
|
|
230
|
+
}, () => 0);
|
|
231
|
+
setState(prev => Object.assign(Object.assign({}, prev), {
|
|
232
|
+
selectedIndices: [...indexRef.current],
|
|
233
|
+
pickerValue: value || EMPTY_ARRAY
|
|
234
|
+
}));
|
|
222
235
|
return;
|
|
223
236
|
}
|
|
224
237
|
// 获取列数
|
|
@@ -265,16 +278,16 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
|
|
|
265
278
|
handleProps();
|
|
266
279
|
}
|
|
267
280
|
}, [handleProps, state.isWillLoadCalled, JSON.stringify(value)]);
|
|
268
|
-
//
|
|
281
|
+
// 打开时按 props 重算索引,避免未确认的滑动与 indexRef 残留导致再开抖动
|
|
269
282
|
const showPicker = React__default.useCallback(() => {
|
|
270
283
|
if (disabled) return;
|
|
271
284
|
isInitializationCompletedRef.current = false;
|
|
272
|
-
|
|
285
|
+
handleProps();
|
|
273
286
|
setState(prev => Object.assign(Object.assign({}, prev), {
|
|
274
|
-
|
|
275
|
-
|
|
287
|
+
hidden: false,
|
|
288
|
+
a11yTimeLimitColumnId: null
|
|
276
289
|
}));
|
|
277
|
-
}, [disabled,
|
|
290
|
+
}, [disabled, handleProps]);
|
|
278
291
|
// 隐藏 Picker
|
|
279
292
|
const hidePicker = React__default.useCallback(() => {
|
|
280
293
|
isInitializationCompletedRef.current = false;
|
|
@@ -349,11 +362,11 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
|
|
|
349
362
|
finalIndices = [...newIndices];
|
|
350
363
|
hasLimited = true;
|
|
351
364
|
}
|
|
352
|
-
// 触发限位,更新状态,其它状态不用主动触发滚动
|
|
353
365
|
if (hasLimited) {
|
|
354
366
|
setState(prev => Object.assign(Object.assign({}, prev), {
|
|
355
367
|
selectedIndices: finalIndices,
|
|
356
|
-
|
|
368
|
+
a11yTimeLimitColumnId: columnId,
|
|
369
|
+
a11yTimeLimitNonce: prev.a11yTimeLimitNonce + 1
|
|
357
370
|
}));
|
|
358
371
|
} else {
|
|
359
372
|
setState(prev => Object.assign(Object.assign({}, prev), {
|
|
@@ -586,11 +599,17 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
|
|
|
586
599
|
}
|
|
587
600
|
});
|
|
588
601
|
}, [onColumnChange]);
|
|
589
|
-
|
|
602
|
+
const consumeTimeA11yLimitFocus = React__default.useCallback(() => {
|
|
603
|
+
setState(prev => Object.assign(Object.assign({}, prev), {
|
|
604
|
+
a11yTimeLimitColumnId: null
|
|
605
|
+
}));
|
|
606
|
+
}, []);
|
|
607
|
+
// 取消时按 props 回同步索引,避免与 value 脱节
|
|
590
608
|
const handleCancel = React__default.useCallback(() => {
|
|
609
|
+
handleProps();
|
|
591
610
|
hidePicker();
|
|
592
611
|
onCancel === null || onCancel === void 0 ? void 0 : onCancel();
|
|
593
|
-
}, [hidePicker, onCancel]);
|
|
612
|
+
}, [handleProps, hidePicker, onCancel]);
|
|
594
613
|
// 渲染选择器组
|
|
595
614
|
const renderPickerGroup = React__default.useMemo(() => {
|
|
596
615
|
switch (mode) {
|
|
@@ -608,15 +627,18 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
|
|
|
608
627
|
get selectedIndex() {
|
|
609
628
|
return state.selectedIndices[index];
|
|
610
629
|
},
|
|
611
|
-
colors: colors
|
|
630
|
+
colors: colors,
|
|
631
|
+
enableClickItemScroll: enableClickItemScroll
|
|
612
632
|
}));
|
|
613
633
|
}
|
|
614
634
|
case 'time':
|
|
615
635
|
{
|
|
636
|
+
const timeA11yLimitFocus = state.a11yTimeLimitColumnId != null ? {
|
|
637
|
+
nonce: state.a11yTimeLimitNonce,
|
|
638
|
+
columnId: state.a11yTimeLimitColumnId
|
|
639
|
+
} : null;
|
|
616
640
|
return [createComponent(PickerGroup, {
|
|
617
|
-
|
|
618
|
-
return `hour-${state.timestamp}`;
|
|
619
|
-
},
|
|
641
|
+
key: "hour",
|
|
620
642
|
mode: "time",
|
|
621
643
|
range: hoursRange,
|
|
622
644
|
updateIndex: updateIndex,
|
|
@@ -624,11 +646,15 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
|
|
|
624
646
|
get selectedIndex() {
|
|
625
647
|
return state.selectedIndices[0];
|
|
626
648
|
},
|
|
627
|
-
colors: colors
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
649
|
+
colors: colors,
|
|
650
|
+
timeA11yLimitFocus: timeA11yLimitFocus,
|
|
651
|
+
onTimeA11yLimitFocusConsumed: consumeTimeA11yLimitFocus,
|
|
652
|
+
get timeA11yLimitEventNonce() {
|
|
653
|
+
return state.a11yTimeLimitNonce;
|
|
631
654
|
},
|
|
655
|
+
enableClickItemScroll: enableClickItemScroll
|
|
656
|
+
}), createComponent(PickerGroup, {
|
|
657
|
+
key: "minute",
|
|
632
658
|
mode: "time",
|
|
633
659
|
range: minutesRange,
|
|
634
660
|
updateIndex: updateIndex,
|
|
@@ -636,7 +662,13 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
|
|
|
636
662
|
get selectedIndex() {
|
|
637
663
|
return state.selectedIndices[1];
|
|
638
664
|
},
|
|
639
|
-
colors: colors
|
|
665
|
+
colors: colors,
|
|
666
|
+
timeA11yLimitFocus: timeA11yLimitFocus,
|
|
667
|
+
onTimeA11yLimitFocusConsumed: consumeTimeA11yLimitFocus,
|
|
668
|
+
get timeA11yLimitEventNonce() {
|
|
669
|
+
return state.a11yTimeLimitNonce;
|
|
670
|
+
},
|
|
671
|
+
enableClickItemScroll: enableClickItemScroll
|
|
640
672
|
})];
|
|
641
673
|
}
|
|
642
674
|
case 'date':
|
|
@@ -664,7 +696,8 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
|
|
|
664
696
|
get selectedIndex() {
|
|
665
697
|
return state.selectedIndices[0];
|
|
666
698
|
},
|
|
667
|
-
colors: colors
|
|
699
|
+
colors: colors,
|
|
700
|
+
enableClickItemScroll: enableClickItemScroll
|
|
668
701
|
})];
|
|
669
702
|
if (fields === 'month' || fields === 'day') {
|
|
670
703
|
renderView.push(createComponent(PickerGroup, {
|
|
@@ -677,7 +710,8 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
|
|
|
677
710
|
get selectedIndex() {
|
|
678
711
|
return state.selectedIndices[1];
|
|
679
712
|
},
|
|
680
|
-
colors: colors
|
|
713
|
+
colors: colors,
|
|
714
|
+
enableClickItemScroll: enableClickItemScroll
|
|
681
715
|
}));
|
|
682
716
|
}
|
|
683
717
|
if (fields === 'day') {
|
|
@@ -691,7 +725,8 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
|
|
|
691
725
|
get selectedIndex() {
|
|
692
726
|
return state.selectedIndices[2];
|
|
693
727
|
},
|
|
694
|
-
colors: colors
|
|
728
|
+
colors: colors,
|
|
729
|
+
enableClickItemScroll: enableClickItemScroll
|
|
695
730
|
}));
|
|
696
731
|
}
|
|
697
732
|
return renderView;
|
|
@@ -731,7 +766,8 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
|
|
|
731
766
|
get selectedIndex() {
|
|
732
767
|
return state.selectedIndices[i];
|
|
733
768
|
},
|
|
734
|
-
colors: colors
|
|
769
|
+
colors: colors,
|
|
770
|
+
enableClickItemScroll: enableClickItemScroll
|
|
735
771
|
}));
|
|
736
772
|
}
|
|
737
773
|
return columns;
|
|
@@ -745,10 +781,11 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
|
|
|
745
781
|
get selectedIndex() {
|
|
746
782
|
return state.selectedIndices[0];
|
|
747
783
|
},
|
|
748
|
-
colors: colors
|
|
784
|
+
colors: colors,
|
|
785
|
+
enableClickItemScroll: enableClickItemScroll
|
|
749
786
|
});
|
|
750
787
|
}
|
|
751
|
-
}, [mode, range, rangeKey, fields, updateIndex, updateDay, handleColumnChange, pickerDateRef.current, level, regionData, state.selectedIndices, columnsCount, lang, colors]);
|
|
788
|
+
}, [mode, range, rangeKey, fields, updateIndex, updateDay, handleColumnChange, pickerDateRef.current, level, regionData, state.selectedIndices, state.a11yTimeLimitColumnId, state.a11yTimeLimitNonce, consumeTimeA11yLimitFocus, columnsCount, lang, colors, enableClickItemScroll]);
|
|
752
789
|
// 动画类名控制逻辑
|
|
753
790
|
const clsMask = classNames('taro-picker__mask-overlay', 'taro-picker__animate-fade-in', {
|
|
754
791
|
'taro-picker__animate-fade-out': state.fadeOut
|