1 | import { ComponentType } from 'react'
|
2 | import { StandardProps, CommonEventFunction, FormItemProps } from './common'
|
3 |
|
4 | /** 选择器通用参数 */
|
5 | interface PickerStandardProps extends StandardProps, FormItemProps {
|
6 | /**
|
7 | * 选择器类型,默认是普通选择器
|
8 | * @default "selector"
|
9 | * @supported weapp, h5, rn
|
10 | */
|
11 | mode?: keyof PickerStandardProps.Mode
|
12 | /**
|
13 | * 是否禁用
|
14 | * @default false
|
15 | * @supported weapp, h5, rn
|
16 | */
|
17 | disabled?: boolean
|
18 | /**
|
19 | * 取消选择或点遮罩层收起 picker 时触发
|
20 | * @supported weapp, h5, rn
|
21 | */
|
22 | onCancel?: CommonEventFunction
|
23 | }
|
24 |
|
25 | declare namespace PickerStandardProps {
|
26 | /** 选择器类型 */
|
27 | interface Mode {
|
28 | /** 普通选择器 */
|
29 | selector
|
30 | /** 多列选择器 */
|
31 | multiSelector
|
32 | /** 时间选择器 */
|
33 | time
|
34 | /** 日期选择器 */
|
35 | date
|
36 | /** 省市区选择器 */
|
37 | region
|
38 | }
|
39 | }
|
40 |
|
41 | /** 普通选择器:mode = selector */
|
42 | interface PickerSelectorProps extends PickerStandardProps {
|
43 | /** 选择器类型 */
|
44 | mode?: 'selector'
|
45 | /**
|
46 | * mode为 selector 或 multiSelector 时,range 有效
|
47 | * @supported weapp, h5, rn
|
48 | * @default []
|
49 | */
|
50 | range: string[] | number[] | Record<string, any>[]
|
51 | /**
|
52 | * 当 range 是一个 Object Array 时,通过 rangeKey 来指定 Object 中 key 的值作为选择器显示内容
|
53 | * @supported weapp, h5, rn
|
54 | */
|
55 | rangeKey?: string
|
56 | /**
|
57 | * 表示选择了 range 中的第几个(下标从 0 开始)
|
58 | * @supported weapp, h5, rn
|
59 | * @default 0
|
60 | */
|
61 | value?: number
|
62 | /**
|
63 | * value 改变时触发 change 事件,event.detail = {value}
|
64 | * @supported weapp, h5, rn
|
65 | */
|
66 | onChange: CommonEventFunction<PickerSelectorProps.ChangeEventDetail>
|
67 | }
|
68 |
|
69 | declare namespace PickerSelectorProps {
|
70 | interface ChangeEventDetail {
|
71 | /** 表示变更值的下标 */
|
72 | value: string | number
|
73 | }
|
74 | }
|
75 |
|
76 | /** 多列选择器:mode = multiSelector */
|
77 | interface PickerMultiSelectorProps extends PickerStandardProps {
|
78 | /** 选择器类型 */
|
79 | mode: 'multiSelector'
|
80 | /**
|
81 | * mode为 selector 或 multiSelector 时,range 有效
|
82 | * @supported weapp, h5, rn
|
83 | * @default []
|
84 | */
|
85 | range: Array<string[]> | Array<number[]> | Array<Record<string, any>[]>
|
86 | /**
|
87 | * 当 range 是一个 Object Array 时,通过 rangeKey 来指定 Object 中 key 的值作为选择器显示内容
|
88 | * @supported weapp, h5, rn
|
89 | */
|
90 | rangeKey?: string
|
91 | /**
|
92 | * 表示选择了 range 中的第几个(下标从 0 开始)
|
93 | * @supported weapp, h5, rn
|
94 | * @default []
|
95 | */
|
96 | value: number[] | string[] | Record<string, any>[]
|
97 | /**
|
98 | * 当 value 改变时触发 change 事件,event.detail = {value}
|
99 | * @supported weapp, h5, rn
|
100 | */
|
101 | onChange: CommonEventFunction<PickerMultiSelectorProps.ChangeEventDetail>
|
102 | /**
|
103 | * 列改变时触发
|
104 | * @supported weapp, h5, rn
|
105 | */
|
106 | onColumnChange?: CommonEventFunction<PickerMultiSelectorProps.ColumnChangeEventDetail>
|
107 | }
|
108 |
|
109 | declare namespace PickerMultiSelectorProps {
|
110 | interface ChangeEventDetail {
|
111 | /** 表示变更值的下标 */
|
112 | value: number[]
|
113 | }
|
114 | interface ColumnChangeEventDetail {
|
115 | /** 表示改变了第几列(下标从0开始) */
|
116 | column: number
|
117 | /** 表示变更值的下标 */
|
118 | value: number
|
119 | }
|
120 | }
|
121 |
|
122 | /** 时间选择器:mode = time */
|
123 | interface PickerTimeProps extends PickerStandardProps {
|
124 | /** 选择器类型 */
|
125 | mode: 'time'
|
126 | /**
|
127 | * value 的值表示选择了 range 中的第几个(下标从 0 开始)
|
128 | * @supported weapp, h5, rn
|
129 | */
|
130 | value: string
|
131 | /**
|
132 | * 仅当 mode = time|date 时有效,表示有效时间范围的开始,字符串格式为"hh:mm"
|
133 | * @supported weapp, h5, rn
|
134 | */
|
135 | start?: string
|
136 | /**
|
137 | * 仅当 mode = time|date 时有效,表示有效时间范围的结束,字符串格式为"hh:mm"
|
138 | * @supported weapp, h5, rn
|
139 | */
|
140 | end?: string
|
141 | /**
|
142 | * value 改变时触发 change 事件,event.detail = {value}
|
143 | * @supported weapp, h5, rn
|
144 | */
|
145 | onChange: CommonEventFunction<PickerTimeProps.ChangeEventDetail>
|
146 | }
|
147 |
|
148 | declare namespace PickerTimeProps {
|
149 | interface ChangeEventDetail {
|
150 | /** 表示选中的时间 */
|
151 | value: string
|
152 | }
|
153 | }
|
154 |
|
155 | /** 日期选择器:mode = date */
|
156 | interface PickerDateProps extends PickerStandardProps {
|
157 | /** 选择器类型 */
|
158 | mode: 'date'
|
159 | /**
|
160 | * 表示选中的日期,格式为"YYYY-MM-DD"
|
161 | * @supported weapp, h5, rn
|
162 | * @default 0
|
163 | */
|
164 | value: string
|
165 | /**
|
166 | * 仅当 mode = time|date 时有效,表示有效时间范围的开始,字符串格式为"hh:mm"
|
167 | * @supported weapp, h5, rn
|
168 | */
|
169 | start?: string
|
170 | /**
|
171 | * 仅当 mode = time|date 时有效,表示有效时间范围的结束,字符串格式为"hh:mm"
|
172 | * @supported weapp, h5, rn
|
173 | */
|
174 | end?: string
|
175 | /**
|
176 | * 有效值 year, month, day,表示选择器的粒度
|
177 | * @supported weapp, h5, rn
|
178 | * @default "day"
|
179 | */
|
180 | fields?: keyof PickerDateProps.Fields
|
181 | /**
|
182 | * value 改变时触发 change 事件,event.detail = {value}
|
183 | * @supported weapp, h5, rn
|
184 | */
|
185 | onChange: CommonEventFunction<PickerDateProps.ChangeEventDetail>
|
186 | }
|
187 |
|
188 | declare namespace PickerDateProps {
|
189 | interface Fields {
|
190 | /** 选择器粒度为年 */
|
191 | year
|
192 | /** 选择器粒度为月份 */
|
193 | month
|
194 | /** 选择器粒度为天 */
|
195 | day
|
196 | }
|
197 | interface ChangeEventDetail {
|
198 | /** 表示选中的日期 */
|
199 | value: string
|
200 | }
|
201 | }
|
202 |
|
203 | /** 省市区选择器:mode = region */
|
204 | interface PickerRegionProps extends PickerStandardProps {
|
205 | /** 选择器类型 */
|
206 | mode: 'region'
|
207 | /**
|
208 | * 表示选中的省市区,默认选中每一列的第一个值
|
209 | * @supported weapp, h5, rn
|
210 | * @default []
|
211 | */
|
212 | value: string[]
|
213 | /**
|
214 | * 可为每一列的顶部添加一个自定义的项
|
215 | * @supported weapp, h5, rn
|
216 | */
|
217 | customItem?: string
|
218 | /**
|
219 | * 自定义省市区数据
|
220 | * @supported rn
|
221 | */
|
222 | regionData?: PickerRegionProps.RegionData[]
|
223 | /**
|
224 | * value 改变时触发 change 事件,event.detail = {value, code, postcode},其中字段 code 是统计用区划代码,postcode 是邮政编码
|
225 | * @supported weapp, h5, rn
|
226 | */
|
227 | onChange: CommonEventFunction<PickerRegionProps.ChangeEventDetail>
|
228 | }
|
229 |
|
230 | declare namespace PickerRegionProps {
|
231 | interface ChangeEventDetail {
|
232 | /** 表示选中的省市区 */
|
233 | value: string[]
|
234 | /** 统计用区划代码 */
|
235 | code: string[]
|
236 | /** 邮政编码 */
|
237 | postcode?: string
|
238 | }
|
239 | interface RegionData {
|
240 | value: string
|
241 | code: string
|
242 | postcode?: string
|
243 | }
|
244 | }
|
245 |
|
246 | /**
|
247 | * 从底部弹起的滚动选择器
|
248 | * @classification forms
|
249 | * @supported weapp, h5, rn, swan, alipay, tt
|
250 | * @example_react
|
251 | * ```tsx
|
252 | * export default class PagePicker extends Component {
|
253 | * state = {
|
254 | * selector: ['美国', '中国', '巴西', '日本'],
|
255 | * selectorChecked: '美国',
|
256 | * timeSel: '12:01',
|
257 | * dateSel: '2018-04-22'
|
258 | * }
|
259 | *
|
260 | * onChange = e => {
|
261 | * this.setState({
|
262 | * selectorChecked: this.state.selector[e.detail.value]
|
263 | * })
|
264 | * }
|
265 | *
|
266 | * onTimeChange = e => {
|
267 | * this.setState({
|
268 | * timeSel: e.detail.value
|
269 | * })
|
270 | * }
|
271 | * onDateChange = e => {
|
272 | * this.setState({
|
273 | * dateSel: e.detail.value
|
274 | * })
|
275 | * }
|
276 | *
|
277 | * render () {
|
278 | * return (
|
279 | * <View className='container'>
|
280 | * <View className='page-body'>
|
281 | * <View className='page-section'>
|
282 | * <Text>地区选择器</Text>
|
283 | * <View>
|
284 | * <Picker mode='selector' range={this.state.selector} onChange={this.onChange}>
|
285 | * <View className='picker'>
|
286 | * 当前选择:{this.state.selectorChecked}
|
287 | * </View>
|
288 | * </Picker>
|
289 | * </View>
|
290 | * </View>
|
291 | * <View className='page-section'>
|
292 | * <Text>时间选择器</Text>
|
293 | * <View>
|
294 | * <Picker mode='time' onChange={this.onTimeChange}>
|
295 | * <View className='picker'>
|
296 | * 当前选择:{this.state.timeSel}
|
297 | * </View>
|
298 | * </Picker>
|
299 | * </View>
|
300 | * </View>
|
301 | * <View className='page-section'>
|
302 | * <Text>日期选择器</Text>
|
303 | * <View>
|
304 | * <Picker mode='date' onChange={this.onDateChange}>
|
305 | * <View className='picker'>
|
306 | * 当前选择:{this.state.dateSel}
|
307 | * </View>
|
308 | * </Picker>
|
309 | * </View>
|
310 | * </View>
|
311 | * </View>
|
312 | * </View>
|
313 | * )
|
314 | * }
|
315 | * }
|
316 | * ```
|
317 | * @example_vue
|
318 | * ```html
|
319 | * <template>
|
320 | * <view class="page-body">
|
321 | * <view class="page-section">
|
322 | * <text>地区选择器</text>
|
323 | * <view>
|
324 | * <picker mode="selector" :range="selector" `@change="onChange">
|
325 | * <view class="picker">
|
326 | * 当前选择:{{selectorChecked}}
|
327 | * </view>
|
328 | * </picker>
|
329 | * </view>
|
330 | * </view>
|
331 | * <view class="page-section">
|
332 | * <text>时间选择器</text>
|
333 | * <view>
|
334 | * <picker mode="time" `@change="onTimeChange">
|
335 | * <view class="picker">
|
336 | * 当前选择:{{timeSel}}
|
337 | * </view>
|
338 | * </picker>
|
339 | * </view>
|
340 | * </view>
|
341 | * <view class="page-section">
|
342 | * <text>日期选择器</text>
|
343 | * <view>
|
344 | * <picker mode="date" `@change="onDateChange">
|
345 | * <view class="picker">
|
346 | * 当前选择:{{dateSel}}
|
347 | * </view>
|
348 | * </picker>
|
349 | * </view>
|
350 | * </view>
|
351 | * </view>
|
352 | * </template>
|
353 | *
|
354 | * <script>
|
355 | * export default {
|
356 | * data() {
|
357 | * return {
|
358 | * selector: ['美国', '中国', '巴西', '日本'],
|
359 | * selectorChecked: '美国',
|
360 | * timeSel: '12:01',
|
361 | * dateSel: '2018-04-22'
|
362 | * }
|
363 | * },
|
364 | * methods: {
|
365 | * onChange: function(e) {
|
366 | * this.selectorChecked = this.selector[e.detail.value]
|
367 | * },
|
368 | *
|
369 | * onTimeChange: function(e) {
|
370 | * this.timeSel = e.detail.value
|
371 | * },
|
372 | *
|
373 | * onDateChange: function(e) {
|
374 | * this.dateSel = e.detail.value
|
375 | * }
|
376 | * }
|
377 | * }
|
378 | * </script>
|
379 | * ```
|
380 | * @see https://developers.weixin.qq.com/miniprogram/dev/component/picker.html
|
381 | */
|
382 | declare const Picker: ComponentType<PickerMultiSelectorProps | PickerTimeProps | PickerDateProps | PickerRegionProps | PickerSelectorProps>
|
383 |
|
384 | export {
|
385 | Picker,
|
386 | PickerStandardProps,
|
387 | PickerSelectorProps,
|
388 | PickerMultiSelectorProps,
|
389 | PickerTimeProps,
|
390 | PickerDateProps,
|
391 | PickerRegionProps
|
392 | }
|