vite-plugin-taro-runtime 0.7.0 → 0.7.1-beta.2

package/dist/components/types/Picker.d.ts

@@ -0,0 +1,452 @@
+import { ComponentType } from 'react'
+import { StyleProp, TextStyle, ViewStyle } from 'react-native'
+import { StandardProps, CommonEventFunction, FormItemProps } from './common'
+/** 选择器通用参数 */
+interface PickerStandardProps extends StandardProps, FormItemProps {
+  /**
+   * 选择器的标题，微信小程序中仅安卓可用
+   * @supported weapp
+   */
+  headerText?: string
+  /**
+   * 选择器类型，默认是普通选择器
+   * @default "selector"
+   * @supported weapp, h5, rn, harmony, harmony_hybrid, ascf
+   */
+  mode?: keyof PickerStandardProps.Mode
+  /**
+   * 是否禁用
+   * @default false
+   * @supported weapp, h5, rn, harmony_hybrid, ascf
+   */
+  disabled?: boolean
+  /**
+   * 取消选择或点遮罩层收起 picker 时触发
+   * @supported weapp, h5, rn, harmony, harmony_hybrid, ascf
+   */
+  onCancel?: CommonEventFunction
+  /**
+   * 用于替换组件内部文本
+   * @supported h5, harmony, harmony_hybrid
+   */
+  textProps?: PickerStandardProps.PickerText
+}
+declare namespace PickerStandardProps {
+  /** 选择器类型 */
+  interface Mode {
+    /** 普通选择器 */
+    selector
+    /** 多列选择器 */
+    multiSelector
+    /** 时间选择器 */
+    time
+    /** 日期选择器 */
+    date
+    /** 省市区选择器 */
+    region
+  }
+  interface PickerText {
+    okText?: string
+    cancelText?: string
+  }
+}
+/** 普通选择器：mode = selector */
+interface PickerSelectorProps extends PickerStandardProps {
+  /** 选择器类型 */
+  mode?: 'selector'
+  /**
+   * mode为 selector 或 multiSelector 时，range 有效
+   * @supported weapp, h5, rn, harmony, harmony_hybrid, ascf
+   * @default []
+   */
+  range: string[] | number[] | Record<string, any>[]
+  /**
+   * 当 range 是一个 Object Array 时，通过 rangeKey 来指定 Object 中 key 的值作为选择器显示内容
+   * @supported weapp, h5, rn, harmony, harmony_hybrid, ascf
+   */
+  rangeKey?: string
+  /**
+   * 表示选择了 range 中的第几个（下标从 0 开始）
+   * @supported weapp, h5, rn, harmony, harmony_hybrid, ascf
+   * @default 0
+   */
+  value?: number
+  /** 设置 React 非受控状态下的初始取值
+   * @supported weapp, h5, rn, harmony_hybrid, ascf
+   */
+  defaultValue?: number
+  /**
+   * mode为 selector 或 multiSelector 时 itemStyle 有效
+   * @supported rn
+   * @default {}
+   */
+  itemStyle?: StyleProp<TextStyle>
+  /**
+   * mode为 selector 或 multiSelector 时 indicatorStyle 有效
+   * @supported rn
+   * @default {}
+   */
+  indicatorStyle?: StyleProp<ViewStyle>
+  /**
+   * value 改变时触发 change 事件
+   * @supported weapp, h5, rn, harmony, harmony_hybrid
+   */
+  onChange?: CommonEventFunction<PickerSelectorProps.ChangeEventDetail>
+}
+declare namespace PickerSelectorProps {
+  interface ChangeEventDetail {
+    /** 表示变更值的下标 */
+    value: string | number
+  }
+}
+/** 多列选择器：mode = multiSelector */
+interface PickerMultiSelectorProps extends PickerStandardProps {
+  /** 选择器类型 */
+  mode: 'multiSelector'
+  /**
+   * mode为 selector 或 multiSelector 时，range 有效
+   * @supported weapp, h5, rn, harmony, harmony_hybrid, ascf
+   * @default []
+   */
+  range: Array<string[]> | Array<number[]> | Array<Record<string, any>[]>
+  /**
+   * 当 range 是一个 Object Array 时，通过 rangeKey 来指定 Object 中 key 的值作为选择器显示内容
+   * @supported weapp, h5, rn, harmony, harmony_hybrid, ascf
+   */
+  rangeKey?: string
+  /**
+   * 表示选择了 range 中的第几个（下标从 0 开始）
+   * @supported weapp, h5, rn, harmony, harmony_hybrid, ascf
+   * @default []
+   */
+  value: number[] | string[] | Record<string, any>[]
+  /**
+   * mode为 selector 或 multiSelector 时 itemStyle 有效
+   * @supported rn
+   * @default {}
+   */
+  itemStyle?: StyleProp<TextStyle>
+  /**
+   * mode为 selector 或 multiSelector 时 indicatorStyle 有效
+   * @supported rn
+   * @default {}
+   */
+  indicatorStyle?: StyleProp<ViewStyle>
+  /**
+   * 当 value 改变时触发 change 事件
+   * @supported weapp, h5, rn, harmony, harmony_hybrid, ascf
+   */
+  onChange: CommonEventFunction<PickerMultiSelectorProps.ChangeEventDetail>
+  /**
+   * 列改变时触发
+   * @supported weapp, h5, rn, harmony, harmony_hybrid, ascf
+   */
+  onColumnChange?: CommonEventFunction<PickerMultiSelectorProps.ColumnChangeEventDetail>
+}
+declare namespace PickerMultiSelectorProps {
+  interface ChangeEventDetail {
+    /** 表示变更值的下标 */
+    value: number[]
+  }
+  interface ColumnChangeEventDetail {
+    /** 表示改变了第几列（下标从0开始） */
+    column: number
+    /** 表示变更值的下标 */
+    value: number
+  }
+}
+/** 时间选择器：mode = time */
+interface PickerTimeProps extends PickerStandardProps {
+  /** 选择器类型 */
+  mode: 'time'
+  /**
+   * value 的值表示选择了 range 中的第几个（下标从 0 开始）
+   * @supported weapp, h5, rn, harmony, harmony_hybrid, ascf
+   */
+  value?: string
+  /** 设置 React 非受控状态下的初始取值
+   * @supported weapp, h5, rn, ascf
+   */
+  defaultValue?: string
+  /**
+   * 仅当 mode 为 "time" 或 "date" 时有效，表示有效时间范围的开始，字符串格式为"hh:mm"
+   * @supported weapp, h5, rn, harmony, harmony_hybrid, ascf
+   */
+  start?: string
+  /**
+   * 仅当 mode 为 "time" 或 "date" 时有效，表示有效时间范围的结束，字符串格式为"hh:mm"
+   * @supported weapp, h5, rn, harmony, harmony_hybrid, ascf
+   */
+  end?: string
+  /**
+   * value 改变时触发 change 事件
+   * @supported weapp, h5, rn, harmony, harmony_hybrid, ascf
+   */
+  onChange: CommonEventFunction<PickerTimeProps.ChangeEventDetail>
+}
+declare namespace PickerTimeProps {
+  interface ChangeEventDetail {
+    /** 表示选中的时间 */
+    value: string
+  }
+}
+/** 日期选择器：mode = date */
+interface PickerDateProps extends PickerStandardProps {
+  /** 选择器类型 */
+  mode: 'date'
+  /**
+   * 表示选中的日期，格式为"YYYY-MM-DD"
+   * @supported weapp, h5, rn, harmony, harmony_hybrid, ascf
+   * @default 0
+   */
+  value: string
+  /** 设置 React 非受控状态下的初始取值
+   * @supported weapp, h5, rn, ascf
+   */
+  defaultValue?: string
+  /**
+   * 仅当 mode 为 "time" 或 "date" 时有效，表示有效时间范围的开始，字符串格式为"YYYY-MM-DD"
+   * @supported weapp, h5, rn, harmony, harmony_hybrid, ascf
+   */
+  start?: string
+  /**
+   * 仅当 mode 为 "time" 或 "date" 时有效，表示有效时间范围的结束，字符串格式为"YYYY-MM-DD"
+   * @supported weapp, h5, rn, harmony, harmony_hybrid, ascf
+   */
+  end?: string
+  /**
+   * 有效值 year, month, day，表示选择器的粒度
+   * @supported weapp, h5, rn, harmony_hybrid
+   * @default "day"
+   */
+  fields?: keyof PickerDateProps.Fields
+  /**
+   * value 改变时触发 change 事件
+   * @supported weapp, h5, rn, harmony, harmony_hybrid, ascf
+   */
+  onChange: CommonEventFunction<PickerDateProps.ChangeEventDetail>
+}
+declare namespace PickerDateProps {
+  interface Fields {
+    /** 选择器粒度为年 */
+    year
+    /** 选择器粒度为月份 */
+    month
+    /** 选择器粒度为天 */
+    day
+  }
+  interface ChangeEventDetail {
+    /** 表示选中的日期 */
+    value: string
+  }
+}
+/** 省市区选择器：mode = region */
+interface PickerRegionProps extends PickerStandardProps {
+  /** 选择器类型 */
+  mode: 'region'
+  /**
+   * 表示选中的省市区，默认选中每一列的第一个值
+   * @supported weapp, h5, rn, harmony_hybrid, ascf
+   * @default []
+   */
+  value?: string[]
+  /** 设置 React 非受控状态下的初始取值
+   * @supported weapp, h5, rn, ascf
+   */
+  defaultValue?: string[]
+  /**
+   * 可为每一列的顶部添加一个自定义的项
+   * @supported weapp, h5, rn, harmony_hybrid
+   */
+  customItem?: string
+  /**
+   * 选择器层级
+   * @supported weapp
+   * @default "region"
+   */
+  level?: keyof PickerRegionProps.Level
+  /**
+   * 自定义省市区数据
+   * @supported rn
+   */
+  regionData?: PickerRegionProps.RegionData[]
+  /**
+   * value 改变时触发 change 事件
+   * @supported weapp, h5, rn, harmony_hybrid, ascf
+   */
+  onChange: CommonEventFunction<PickerRegionProps.ChangeEventDetail>
+}
+declare namespace PickerRegionProps {
+  interface ChangeEventDetail {
+    /** 表示选中的省市区 */
+    value: string[]
+    /** 统计用区划代码 */
+    code: string[]
+    /** 邮政编码 */
+    postcode?: string
+  }
+  interface RegionData {
+    value: string
+    code: string
+    postcode?: string
+    children?: RegionData[]
+  }
+  interface Level {
+    /** 省级选择器 */
+    province
+    /** 市级选择器 */
+    city
+    /** 区级选择器 */
+    region
+    /** 街道选择器 */
+    'sub-district'
+  }
+}
+/**
+ * 从底部弹起的滚动选择器
+ * @classification forms
+ * @supported weapp, swan, alipay, tt, h5, rn, harmony, harmony_hybrid, ascf
+ * @example_react
+ * ```tsx
+ * export default class PagePicker extends Component {
+ *   state = {
+ *     selector: ['美国', '中国', '巴西', '日本'],
+ *     selectorChecked: '美国',
+ *     timeSel: '12:01',
+ *     dateSel: '2018-04-22'
+ *   }
+ *
+ *   onChange = e => {
+ *     this.setState({
+ *       selectorChecked: this.state.selector[e.detail.value]
+ *     })
+ *   }
+ *
+ *   onTimeChange = e => {
+ *     this.setState({
+ *       timeSel: e.detail.value
+ *     })
+ *   }
+ *   onDateChange = e => {
+ *     this.setState({
+ *       dateSel: e.detail.value
+ *     })
+ *   }
+ *
+ *   render () {
+ *     return (
+ *       <View className='container'>
+ *         <View className='page-body'>
+ *           <View className='page-section'>
+ *             <Text>地区选择器</Text>
+ *             <View>
+ *               <Picker mode='selector' range={this.state.selector} onChange={this.onChange}>
+ *                 <View className='picker'>
+ *                   当前选择：{this.state.selectorChecked}
+ *                 </View>
+ *               </Picker>
+ *             </View>
+ *           </View>
+ *           <View className='page-section'>
+ *             <Text>时间选择器</Text>
+ *             <View>
+ *               <Picker mode='time' onChange={this.onTimeChange}>
+ *                 <View className='picker'>
+ *                   当前选择：{this.state.timeSel}
+ *                 </View>
+ *               </Picker>
+ *             </View>
+ *           </View>
+ *           <View className='page-section'>
+ *             <Text>日期选择器</Text>
+ *             <View>
+ *               <Picker mode='date' onChange={this.onDateChange}>
+ *                 <View className='picker'>
+ *                   当前选择：{this.state.dateSel}
+ *                 </View>
+ *               </Picker>
+ *             </View>
+ *           </View>
+ *         </View>
+ *       </View>
+ *     )
+ *   }
+ * }
+ * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="page-body">
+ *     <view class="page-section">
+ *       <text>地区选择器</text>
+ *       <view>
+ *         <picker mode="selector" :range="selector" `@change="onChange">
+ *           <view class="picker">
+ *             当前选择：{{selectorChecked}}
+ *           </view>
+ *         </picker>
+ *       </view>
+ *     </view>
+ *     <view class="page-section">
+ *       <text>时间选择器</text>
+ *       <view>
+ *         <picker mode="time" `@change="onTimeChange">
+ *           <view class="picker">
+ *             当前选择：{{timeSel}}
+ *           </view>
+ *         </picker>
+ *       </view>
+ *     </view>
+ *     <view class="page-section">
+ *       <text>日期选择器</text>
+ *       <view>
+ *         <picker mode="date" `@change="onDateChange">
+ *           <view class="picker">
+ *             当前选择：{{dateSel}}
+ *           </view>
+ *         </picker>
+ *       </view>
+ *     </view>
+ *   </view>
+ * </template>
+ *
+ * <script>
+ *   export default {
+ *     data() {
+ *       return {
+ *         selector: ['美国', '中国', '巴西', '日本'],
+ *         selectorChecked: '美国',
+ *         timeSel: '12:01',
+ *         dateSel: '2018-04-22'
+ *       }
+ *     },
+ *     methods: {
+ *       onChange: function(e) {
+ *         this.selectorChecked = this.selector[e.detail.value]
+ *       },
+ *
+ *       onTimeChange: function(e) {
+ *         this.timeSel = e.detail.value
+ *       },
+ *
+ *       onDateChange: function(e) {
+ *         this.dateSel = e.detail.value
+ *       }
+ *     }
+ *   }
+ * </script>
+ * ```
+ * @see https://developers.weixin.qq.com/miniprogram/dev/component/picker.html
+ */
+declare const Picker: ComponentType<
+  PickerMultiSelectorProps | PickerTimeProps | PickerDateProps | PickerRegionProps | PickerSelectorProps
+>
+export {
+  Picker,
+  PickerStandardProps,
+  PickerSelectorProps,
+  PickerMultiSelectorProps,
+  PickerTimeProps,
+  PickerDateProps,
+  PickerRegionProps,
+}

package/dist/components/types/PickerView.d.ts

@@ -0,0 +1,198 @@
+import { ComponentType } from 'react'
+import { StandardProps, CommonEventFunction } from './common'
+interface PickerViewProps extends StandardProps {
+  /** 数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。
+   * @supported weapp, alipay, swan, tt, qq, jd, rn, ascf
+   */
+  value?: number[]
+  /** 设置 React 非受控状态下的初始取值
+   * @supported weapp, alipay, swan, tt, qq, jd, rn, ascf
+   * @unique
+   */
+  defaultValue?: number[]
+  /** 设置选择器中间选中框的样式
+   * @supported weapp, alipay, swan, tt, qq, jd, rn, ascf
+   */
+  indicatorStyle?: string
+  /** 设置选择器中间选中框的类名
+   * @supported weapp, alipay, swan, tt, qq, jd
+   */
+  indicatorClass?: string
+  /** 设置蒙层的样式
+   * @supported weapp, alipay, swan, tt, qq, jd
+   */
+  maskStyle?: string
+  /** 设置蒙层的类名
+   * @supported weapp, alipay, swan, tt, qq, jd
+   */
+  maskClass?: string
+  /** 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件。
+   * @supported weapp, alipay, tt
+   * @default false
+   */
+  immediateChange?: boolean
+  /** 选择器标题，建议标题控制在 12 个中文汉字长度内，避免出现截断现象, 截断部分将以 ... 形式展示
+   * @supported swan
+   */
+  title?: string
+  /** 无障碍访问，（属性）元素的额外描述
+   * @supported qq
+   */
+  ariaLabel?: string
+  /** 当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）
+   * @supported weapp, alipay, swan, tt, qq, jd, rn, ascf
+   */
+  onChange?: CommonEventFunction<PickerViewProps.onChangeEventDetail>
+  /** 当滚动选择开始时候触发事件
+   * @supported weapp, alipay, tt, qq, ascf
+   */
+  onPickStart?: CommonEventFunction
+  /** 当滚动选择结束时候触发事件
+   * @supported weapp, alipay, tt, qq, ascf
+   */
+  onPickEnd?: CommonEventFunction
+}
+declare namespace PickerViewProps {
+  interface onChangeEventDetail {
+    value: number[]
+  }
+}
+/** 嵌入页面的滚动选择器
+ * 其中只可放置 picker-view-column 组件，其它节点不会显示
+ * @classification forms
+ * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf
+ * @example_react
+ * ```tsx
+ * export default class Picks extends Component {
+ *
+ *   constructor () {
+ *     super(...arguments)
+ *     const date = new Date()
+ *     const years = []
+ *     const months = []
+ *     const days = []
+ *     for (let i = 1990; i <= date.getFullYear(); i++) {
+ *       years.push(i)
+ *     }
+ *     for (let i = 1; i <= 12; i++) {
+ *       months.push(i)
+ *     }
+ *     for (let i = 1; i <= 31; i++) {
+ *       days.push(i)
+ *     }
+ *     this.state = {
+ *       years: years,
+ *       year: date.getFullYear(),
+ *       months: months,
+ *       month: 2,
+ *       days: days,
+ *       day: 2,
+ *       value: [9999, 1, 1]
+ *     }
+ *   }
+ *
+ *   onChange = e => {
+ *     const val = e.detail.value
+ *     this.setState({
+ *       year: this.state.years[val[0]],
+ *       month: this.state.months[val[1]],
+ *       day: this.state.days[val[2]],
+ *       value: val
+ *     })
+ *   }
+ *
+ *   render() {
+ *     return (
+ *       <View>
+ *         <View>{this.state.year}年{this.state.month}月{this.state.day}日</View>
+ *         <PickerView indicatorStyle='height: 50px;' style='width: 100%; height: 300px;' value={this.state.value} onChange={this.onChange}>
+ *           <PickerViewColumn>
+ *             {this.state.years.map(item => {
+ *               return (
+ *                 <View>{item}年</View>
+ *               );
+ *             })}
+ *           </PickerViewColumn>
+ *           <PickerViewColumn>
+ *             {this.state.months.map(item => {
+ *               return (
+ *                 <View>{item}月</View>
+ *               )
+ *             })}
+ *           </PickerViewColumn>
+ *           <PickerViewColumn>
+ *             {this.state.days.map(item => {
+ *               return (
+ *                 <View>{item}日</View>
+ *               )
+ *             })}
+ *           </PickerViewColumn>
+ *         </PickerView>
+ *       </View>
+ *     )
+ *   }
+ * }
+ * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="taro-example">
+ *   <view>{{year}}年{{month}}月{{day}}日</view>
+ *   <picker-view indicator-style="height: 30px;" style="width: 100%; height: 300px;" :value="value" `@change="onChange">
+ *     <picker-view-column>
+ *       <view v-for="(item, index) in years" :key="index">{{item}}年</view>
+ *     </picker-view-column>
+ *     <picker-view-column>
+ *       <view v-for="(item, index) in months" :key="index">{{item}}月</view>
+ *     </picker-view-column>
+ *     <picker-view-column>
+ *       <view v-for="(item, index) in days" :key="index">{{item}}日</view>
+ *     </picker-view-column>
+ *   </picker-view>
+ * </view>
+ * </template>
+ *
+ * <script>
+ *   export default {
+ *     name: "Index",
+ *     data() {
+ *       const date = new Date()
+ *       const years = []
+ *       const months = []
+ *       const days = []
+ *       for (let i = 1990; i <= date.getFullYear(); i++) {
+ *         years.push(i)
+ *       }
+ *       for (let i = 1; i <= 12; i++) {
+ *         months.push(i)
+ *       }
+ *       for (let i = 1; i <= 31; i++) {
+ *         days.push(i)
+ *       }
+ *       return {
+ *         years: years,
+ *         year: date.getFullYear(),
+ *         months: months,
+ *         month: 2,
+ *         days: days,
+ *         day: 2,
+ *         value: [3, 1, 1]
+ *       }
+ *     },
+ *
+ *     methods: {
+ *       onChange: function(e) {
+ *         const val = e.detail.value
+ *         console.log(val)
+ *         this.year = this.years[val[0]]
+ *         this.month = this.months[val[1]]
+ *         this.day = this.days[val[2]]
+ *       }
+ *     }
+ *   }
+ * </script>
+ * ```
+ * @see https://developers.weixin.qq.com/miniprogram/dev/component/picker-view.html
+ */
+declare const PickerView: ComponentType<PickerViewProps>
+export { PickerView, PickerViewProps }

package/dist/components/types/PickerViewColumn.d.ts

@@ -0,0 +1,12 @@
+import { ComponentType } from 'react'
+import { StandardProps } from './common'
+type PickerViewColumnProps = StandardProps
+
+/** 滚动选择器子项
+ * 仅可放置于 `<PickerView />` 中，其孩子节点的高度会自动设置成与 picker-view 的选中框的高度一致
+ * @classification forms
+ * @supported weapp, swan, alipay, tt, h5, rn, harmony_hybrid, ascf
+ * @see https://developers.weixin.qq.com/miniprogram/dev/component/picker-view-column.html
+ */
+declare const PickerViewColumn: ComponentType<StandardProps>
+export { PickerViewColumn, PickerViewColumnProps }