@tarojs/components 3.5.0-canary.1 → 3.5.0-theta.0

package/types/Camera.d.ts

@@ -4,33 +4,33 @@ import { StandardProps, CommonEventFunction } from './common'
 interface CameraProps extends StandardProps {
   /** 模式，有效值为normal, scanCode
    * @default "normal"
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
-  mode?: keyof CameraProps.mode
+  mode?: keyof CameraProps.Mode
 
   /** 分辨率，不支持动态修改
    * @default "medium"
-   * @supported weapp
+   * @supported weapp, tt
    */
-  resolution?: keyof CameraProps.resolution
+  resolution?: keyof CameraProps.Resolution
 
   /** 摄像头朝向
    * @default "back"
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
-  devicePosition?: keyof CameraProps.devicePosition
+  devicePosition?: keyof CameraProps.DevicePosition
 
   /** 闪光灯
    * @default "auto"
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
-  flash?: keyof CameraProps.flash
+  flash?: keyof CameraProps.Flash
 
   /** 指定期望的相机帧数据尺寸
    * @default "medium"
-   * @supported weapp
+   * @supported weapp, tt
    */
-  frameSize?: keyof CameraProps.frameSize
+  frameSize?: keyof CameraProps.FrameSize
 
   /** 扫码识别区域，格式为[x, y, w, h]，
    * x,y是相对于camera显示区域的左上角，
@@ -41,37 +41,37 @@ interface CameraProps extends StandardProps {
 
   /** 摄像头在非正常终止时触发，
    * 如退出后台等情况
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
   onStop?: CommonEventFunction
 
   /** 用户不允许使用摄像头时触发
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
   onError?: CommonEventFunction
 
   /** 相机初始化完成时触发
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
   onInitDone?: CommonEventFunction<CameraProps.onInitDoneEventDetail>
 
   /** 在成功识别到一维码时触发，
    * 仅在 mode="scanCode" 时生效
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
   onScanCode?: CommonEventFunction
 }
 
 declare namespace CameraProps {
   /** mode 的合法值 */
-  interface mode {
+  interface Mode {
     /** 相机模式 */
     normal
     /** 扫码模式 */
     scanCode
   }
   /** resolution 的合法值 */
-  interface resolution {
+  interface Resolution {
     /** 低 */
     low
     /** 中 */
@@ -80,14 +80,14 @@ declare namespace CameraProps {
     high
   }
   /** device-position 的合法值 */
-  interface devicePosition {
+  interface DevicePosition {
     /** 前置 */
     front
     /** 后置 */
     back
   }
   /** flash 的合法值 */
-  interface flash {
+  interface Flash {
     /** 自动 */
     auto
     /** 打开 */
@@ -98,7 +98,7 @@ declare namespace CameraProps {
     torch
   }
   /** frame-size 的合法值 */
-  interface frameSize {
+  interface FrameSize {
     /** 小尺寸帧数据 */
     small
     /** 中尺寸帧数据 */
@@ -115,7 +115,7 @@ declare namespace CameraProps {
 
 /** 系统相机
  * @classification media
- * @supported weapp, rn
+ * @supported weapp, rn, tt
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/camera.html
  */
 declare const Camera: ComponentType<CameraProps>

package/types/Canvas.d.ts

@@ -64,7 +64,7 @@ declare namespace CanvasProps {
  *
  * `<Canvas />` 组件的 RN 版本尚未实现。
  * @classification canvas
- * @supported weapp
+ * @supported weapp, tt
  * @example_react
  * ```tsx
  * class App extends Components {

package/types/Checkbox.d.ts

@@ -4,24 +4,24 @@ import { StandardProps, CommonEventFunction, FormItemProps } from './common'
 interface CheckboxProps extends StandardProps {
 
   /** `<Checkbox/>`标识，选中时触发`<CheckboxGroup/>`的 change 事件，并携带 `<Checkbox/>` 的 value
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
   value: string
 
   /** 是否禁用
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    * @default false
    */
   disabled?: boolean
 
   /** 当前是否选中，可用来设置默认选中
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    * @default false
    */
   checked?: boolean
 
   /** checkbox的颜色，同 css 的 color
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    */
   color?: string
 
@@ -116,7 +116,7 @@ interface CheckboxProps extends StandardProps {
  *     </view>
  *   </view>
  * </template>
- * 
+ *
  * <script>
  * export default {
  *   data() {

package/types/CheckboxGroup.d.ts

@@ -3,21 +3,21 @@ import { StandardProps, CommonEventFunction, FormItemProps } from './common'
 
 interface CheckboxGroupProps extends StandardProps, FormItemProps {
   /** 表单组件中加上 name 来作为 key
-   * @supported h5
+   * @supported h5, tt
    */
   name?: string
 
   /** `<CheckboxGroup/>` 中选中项发生改变是触发 change 事件
-   * 
+   *
    * event.detail = { value: [选中的checkbox的 value 的数组] }
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    */
   onChange?: CommonEventFunction<{ value: string[] }>
 }
 
 /** 多项选择器，内部由多个checkbox组成
  * @classification forms
- * @supported weapp, h5, rn
+ * @supported weapp, h5, rn, tt
  * @example
  * ```tsx
  * export default class PageCheckbox extends Component {

package/types/CoverImage.d.ts

@@ -64,7 +64,7 @@ interface CoverImageProps extends StandardProps {
  *     </cover-view>
  *   </view>
  * </template>
- * 
+ *
  * <style>
  * .container {
  *   position: relative;

package/types/CoverView.d.ts

@@ -66,7 +66,7 @@ interface CoverViewProps extends ViewProps {
  *     </cover-view>
  *   </view>
  * </template>
- * 
+ *
  * <style>
  * .container {
  *   position: relative;

package/types/CustomWrapper.d.ts

@@ -11,7 +11,7 @@ interface CustomWrapperProps extends StandardProps {
  * ```tsx
  * import { Component } from 'react'
  * import { CustomWrapper, View, Text } from '@tarojs/components'
- * 
+ *
  * export default class C extends Component {
  *   render () {
  *     return (
@@ -27,4 +27,4 @@ interface CustomWrapperProps extends StandardProps {
  */
 declare const CustomWrapper: ComponentType<CustomWrapperProps>
 
-export { CustomWrapper, CustomWrapperProps }
+export { CustomWrapper, CustomWrapperProps }

package/types/Editor.d.ts

@@ -28,7 +28,7 @@ interface EditorProps extends StandardProps {
   /** 点击图片时显示修改尺寸控件
    * @default false
    * @supported weapp
-   */	
+   */
   showImgResize?: boolean
 
   /** 编辑器初始化完成时触发
@@ -67,15 +67,15 @@ declare namespace EditorProps {
 }
 
 /** 富文本编辑器，可以对图片、文字进行编辑。
- * 
+ *
  * 编辑器导出内容支持带标签的 html和纯文本的 text，编辑器内部采用 delta 格式进行存储。
- * 
+ *
  * 通过 setContents 接口设置内容时，解析插入的 html 可能会由于一些非法标签导致解析错误，建议开发者在小程序内使用时通过 delta 进行插入。
- * 
+ *
  * 富文本组件内部引入了一些基本的样式使得内容可以正确的展示，开发时可以进行覆盖。需要注意的是，在其它组件或环境中使用富文本组件导出的 html 时，需要额外引入 这段样式，并维护 `<ql-container><ql-editor></ql-editor></ql-container>` 的结构。
- * 
+ *
  * 图片控件仅初始化时设置有效。
- * 
+ *
  * *编辑器内支持部分 HTML 标签和内联样式，不支持 **class** 和 **id***
  * @classification forms
  * @supported weapp
@@ -85,17 +85,17 @@ declare namespace EditorProps {
  *   state = {
  *     placeholder: '来，输入隔壁的名字试试...'
  *   }
- * 
+ *
  *   editorReady = e => {
  *     Taro.createSelectorQuery().select('#editor').context((res) => {
  *       this.editorCtx = res.context
  *     }).exec()
  *   }
- * 
+ *
  *   undo = e => {
  *     this.editorCtx.undo()
  *   }
- * 
+ *
  *   render () {
  *     return (
  *       <View>
@@ -114,7 +114,7 @@ declare namespace EditorProps {
  *     <button type="warn" `@tap="undo">撤销</button>
  *   </view>
  * </template>
- * 
+ *
  * <script>
  *   import Taro from '@tarojs/taro'
  *   export default {

package/types/Form.d.ts

@@ -20,12 +20,12 @@ interface FormProps extends StandardProps {
 
   /** 携带 form 中的数据触发 submit 事件
    * event.detail = { value : {'name': 'value'} , formId: '' }
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
   onSubmit?: CommonEventFunction<FormProps.onSubmitEventDetail>
 
   /** 表单重置时会触发 reset 事件
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    */
   onReset?: CommonEventFunction
 }
@@ -46,22 +46,22 @@ declare namespace FormProps {
 }
 
 /** 表单。将组件内的用户输入的 switch input checkbox slider radio picker 提交。
- * 
+ *
  * 当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。
  * @classification forms
  * @supported weapp, h5, rn
  * @example_react
  * ```tsx
  * class App extends Component {
- * 
+ *
  *   formSubmit = e => {
  *     console.log(e)
  *   }
- * 
+ *
  *   formReset = e => {
  *     console.log(e)
  *   }
- * 
+ *
  *   render () {
  *     return (
  *       <Form onSubmit={this.formSubmit} onReset={this.formReset} >
@@ -86,7 +86,7 @@ declare namespace FormProps {
  *     </view>
  *   </form>
  * </template>
- * 
+ *
  * <script>
  * export default {
  *   data() {
@@ -96,7 +96,7 @@ declare namespace FormProps {
  *     formSubmit (e) {
  *       console.log(e)
  *     },
- * 
+ *
  *     formReset (e) {
  *       console.log(e)
  *     }

package/types/FunctionalPageNavigator.d.ts

@@ -6,12 +6,12 @@ interface FunctionalPageNavigatorProps extends StandardProps {
    * @default "release"
    * @supported weapp
    */
-  version?: keyof FunctionalPageNavigatorProps.version
+  version?: keyof FunctionalPageNavigatorProps.Version
 
   /** 要跳转到的功能页
    * @supported weapp
    */
-  name?: keyof FunctionalPageNavigatorProps.name
+  name?: keyof FunctionalPageNavigatorProps.Name
 
   /** 功能页参数，参数格式与具体功能页相关
    * @supported weapp
@@ -36,7 +36,7 @@ interface FunctionalPageNavigatorProps extends StandardProps {
 
 declare namespace FunctionalPageNavigatorProps {
   /** version 的合法值 */
-  interface version {
+  interface Version {
     /** 开发版 */
     develop
     /** 体验版 */
@@ -45,7 +45,7 @@ declare namespace FunctionalPageNavigatorProps {
     release
   }
   /** name 的合法值 */
-  interface name {
+  interface Name {
     /** [用户信息功能页](https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/functional-pages/user-info.html) */
     loginAndGetUserInfo
     /** [支付功能页](https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/functional-pages/request-payment.html) */

package/types/Image.d.ts

@@ -12,7 +12,7 @@ interface ImageProps extends StandardProps {
    * @supported weapp, h5, rn, swan, alipay, tt
    * @rn 部分支持 scaleToFill, aspectFit, aspectFill, widthFix
    */
-  mode?: keyof ImageProps.mode
+  mode?: keyof ImageProps.Mode
 
 	/** 默认不解析 webP 格式，只支持网络资源
    * @default false
@@ -62,7 +62,7 @@ interface ImageProps extends StandardProps {
 
 declare namespace ImageProps {
   /** mode 的合法值 */
-  interface mode {
+  interface Mode {
     /** 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 */
     scaleToFill
     /** 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 */

package/types/Input.d.ts

@@ -3,52 +3,57 @@ import { StandardProps, CommonEventFunction, FormItemProps } from './common'
 
 interface InputProps extends StandardProps, FormItemProps {
   /** 输入框的初始内容
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    */
   value?: string
 
   /** input 的类型
    * @default "text"
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    * @rn 部分支持
    */
   type?: 'text' | 'number' | 'idcard' | 'digit' | 'safe-password' | 'nickname'
 
   /** 是否是密码类型
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    */
   password?: boolean
 
   /** 输入框为空时占位符
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    */
   placeholder?: string
 
   /** 指定 placeholder 的样式
-   * @supported weapp
+   * @supported weapp, rn, tt
    */
   placeholderStyle?: string
 
   /** 指定 placeholder 的样式类
    * @default "input-placeholder"
-   * @supported weapp
+   * @supported weapp, tt
    */
   placeholderClass?: string
 
+  /** 指定 placeholder 的文本颜色
+   * @supported rn
+   */
+  placeholderTextColor?: string
+
   /** 是否禁用
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    */
   disabled?: boolean
 
   /** 最大输入长度，设置为 -1 的时候不限制最大长度
    * @default 140
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    */
   maxlength?: number
 
   /** 指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
    * @default 0
-   * @supported weapp
+   * @supported weapp, tt
    */
   cursorSpacing?: number
 
@@ -59,13 +64,13 @@ interface InputProps extends StandardProps, FormItemProps {
   autoFocus?: boolean
 
   /** 获取焦点
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    */
   focus?: boolean
 
   /** 设置键盘右下角按钮的文字
    * @default done
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
   confirmType?: 'send' | 'search' | 'next' | 'go' | 'done'
 
@@ -76,25 +81,25 @@ interface InputProps extends StandardProps, FormItemProps {
   confirmHold?: boolean
 
   /** 指定focus时的光标位置
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
   cursor?: number
 
   /** 光标起始位置，自动聚集时有效，需与selection-end搭配使用
    * @default -1
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
   selectionStart?: number
 
   /** 光标结束位置，自动聚集时有效，需与selection-start搭配使用
    * @default -1
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
   selectionEnd?: number
 
   /** 键盘弹起时，是否自动上推页面
    * @default false
-   * @supported weapp
+   * @supported weapp, tt
    */
   adjustPosition?: boolean
 
@@ -161,26 +166,26 @@ interface InputProps extends StandardProps, FormItemProps {
   controlled?: boolean
 
   /** 当键盘输入时，触发input事件，event.detail = {value, cursor, keyCode}，处理函数可以直接 return 一个字符串，将替换输入框的内容。
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    */
   onInput?: CommonEventFunction<InputProps.inputEventDetail>
 
   /** 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    */
   onFocus?: CommonEventFunction<InputProps.inputForceEventDetail>
 
   /** 输入框失去焦点时触发
    *
    * event.detail = {value: value}
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    */
   onBlur?: CommonEventFunction<InputProps.inputValueEventDetail>
 
   /** 点击完成按钮时触发
    *
    * event.detail = {value: value}
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    * @h5 借用[Form 组件](./form)的`onSubmit`事件来替代
    */
   onConfirm?: CommonEventFunction<InputProps.inputValueEventDetail>
@@ -233,25 +238,24 @@ declare namespace InputProps {
  * @example_react
  * ```tsx
  * class App extends Component {
- *
  *   render () {
  *     return (
- *         <View className='example-body'>
- *           <Text>可以自动聚焦的 input</Text>
- *             <Input type='text' placeholder='将会获取焦点' focus/>
- *             <Text>控制最大输入长度的 input</Text>
- *             <Input type='text' placeholder='最大输入长度为 10' maxlength='10'/>
- *             <Text>数字输入的 input</Text>
- *             <Input type='number' placeholder='这是一个数字输入框'/>
- *             <Text>密码输入的 input</Text>
- *             <Input type='password' password placeholder='这是一个密码输入框'/>
- *             <Text>带小数点的 input</Text>
- *             <Input type='digit' placeholder='带小数点的数字键盘'/>
- *             <Text>身份证输入的 input</Text>
- *             <Input type='idcard' placeholder='身份证输入键盘'/>
- *             <Text>控制占位符颜色的 input</Text>
- *             <Input type='text' placeholder='占位符字体是红色的' placeholderStyle='color:red'/>
- *         </View>
+ *       <View className='example-body'>
+ *         <Text>可以自动聚焦的 input</Text>
+ *           <Input type='text' placeholder='将会获取焦点' focus/>
+ *           <Text>控制最大输入长度的 input</Text>
+ *           <Input type='text' placeholder='最大输入长度为 10' maxLength='10'/>
+ *           <Text>数字输入的 input</Text>
+ *           <Input type='number' placeholder='这是一个数字输入框'/>
+ *           <Text>密码输入的 input</Text>
+ *           <Input type='password' password placeholder='这是一个密码输入框'/>
+ *           <Text>带小数点的 input</Text>
+ *           <Input type='digit' placeholder='带小数点的数字键盘'/>
+ *           <Text>身份证输入的 input</Text>
+ *           <Input type='idcard' placeholder='身份证输入键盘'/>
+ *           <Text>控制占位符颜色的 input</Text>
+ *           <Input type='text' placeholder='占位符字体是红色的' placeholderStyle='color:red'/>
+ *       </View>
  *     )
  *   }
  * }
@@ -263,7 +267,7 @@ declare namespace InputProps {
  *     <text>可以自动聚焦的 input</text>
  *     <input type="text" placeholder="将会获取焦点" :focus="true" />
  *     <text>控制最大输入长度的 input</text>
- *     <input type="text" placeholder="最大输入长度为 10" maxlength="10"/>
+ *     <input type="text" placeholder="最大输入长度为 10" maxLength="10"/>
  *     <text>数字输入的 input</text>
  *     <input type="number" placeholder="这是一个数字输入框"/>
  *     <text>密码输入的 input</text>

package/types/KeyboardAccessory.d.ts

@@ -1,23 +1,36 @@
 import { ComponentType } from 'react'
-import { StandardProps, CommonEventFunction } from './common'
+import { StandardProps } from './common'
 
+/** @ignore */
 type KeyboardAccessoryProps = StandardProps
 
-/** 设置 input / textarea 聚焦时键盘上方 cover-view / cover-image 工具栏视图
+/** 设置 Input / Textarea 聚焦时键盘上方 CoverView / CoverImage 工具栏视图。需要配置 Taro 插件 `@tarojs/plugin-platform-weapp` 的 `enablekeyboardAccessory` 参数为 `true` 后才能使用，请参考：[#9548](https://github.com/NervJS/taro/issues/9548#issuecomment-891682216)。
  *
  * @classification forms
  * @supported weapp
  * @example
+ * ```js
+ * // config/index.js
+ * {
+ *   // ...
+ *   plugins: [
+ *     ['@tarojs/plugin-platform-weapp', {
+ *       enablekeyboardAccessory: true
+ *     }]
+ *   ]
+ * }
+ * ```
+ *
  * ```tsx
  * class App extends Component {
  *   render () {
  *     return (
- *         <Textarea holdKeyboard="{{true}}">
- *           <KeyboardAccessory className="container" style={{ height: 50 }} >
- *             <CoverView onClick={() => { TODO }} style={{ flex: 1, background: 'green' }}>1</CoverView>
- *             <CoverView onClick={() => { TODO }} style={{ flex: 1, background: 'red' }}>2</CoverView>
- *           </KeyboardAccessory>
- *         </Textarea>
+ *       <Textarea holdKeyboard="{{true}}">
+ *         <KeyboardAccessory className="container" style={{ height: 50 }} >
+ *           <CoverView onClick={() => { TODO }} style={{ flex: 1, background: 'green' }}>1</CoverView>
+ *           <CoverView onClick={() => { TODO }} style={{ flex: 1, background: 'red' }}>2</CoverView>
+ *         </KeyboardAccessory>
+ *       </Textarea>
  *     )
  *   }
  * }

package/types/Label.d.ts

@@ -8,14 +8,14 @@ interface LabelProps extends StandardProps {
 }
 
 /** 用来改进表单组件的可用性。
- * 
+ *
  * 使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。 for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。 目前可以绑定的控件有：button, checkbox, radio, switch。
  * @classification forms
  * @supported weapp, swan, alipay, tt, h5, rn
  * @example_react
  * ```tsx
  * class App extends Components {
- * 
+ *
  *   render () {
  *     return (
  *       <RadioGroup>