@tarojs/components 3.6.0-canary.1 → 3.6.0-canary.10

package/types/CommentList.d.ts

@@ -0,0 +1,127 @@
+import { ComponentType } from 'react'
+import { StandardProps } from './common'
+interface CommentListProps extends StandardProps {
+  /** 评论核心参数
+   * @supported swan
+   */
+  commentParam: CommentListProps.ICommentParam
+
+  /** 底部 toolbar 的相关配置
+   * @supported swan
+   */
+  toolbarConfig?: CommentListProps.IToolbarConfig
+
+  /** 滚动方式为页面滚动，若组件作为浮层使用，该参数需设为 false
+   * @supported swan
+   * @default true
+   */
+  isPageScroll?: boolean
+
+  /** 是否需要底部 toolbar ，若使用开发者自定义的底部 toolbar ，该参数需设为 false
+   * @supported swan
+   * @default true
+   */
+  needToolbar?: boolean
+
+  /** 用于调起评论发布器发布评论，发布成功插入列表第一条，且滚动到列表顶部
+   * @supported swan
+   * @default false
+   */
+  addComment?: boolean
+
+  /** 点击单条评论跳转的详情页页面 path ，若没有配置则不会发生跳转；配置的前提是列表与详情均是页面级
+   * @supported swan
+   */
+  detailPath?: string
+
+  /** 是否折叠列表，默认全展示
+   * @supported swan
+   * @default false
+   */
+  isFolded?: boolean
+
+  /** 折叠后列表展示最大条数，默认 3 条，最多 10 条
+   * @supported swan
+   * @default 3
+   */
+  foldNum?: number
+
+  /** 传入放置评论组件的页面路径，如'/pages/list/index'，组件内部会触发跳转逻辑
+   * @supported swan
+   */
+  viewMorePath?: string
+
+  /** 『全部 xx 条』的样式，目前只支持开发者自定义字体颜色
+   * @supported swan
+   */
+  viewMoreStyle?: CommentListProps.IViewMoreStyle
+
+  /** 绑定点击单条评论的事件，点击单条评论时触发，返回数据为{status, data:{srid}}
+   * @supported swan
+   */
+  onClickComment?: CommonEventFunction
+
+  /** 绑定点击更多事件，若除了页面跳转还需要其他操作，可通过该回调执行；若为浮层，也可使用该回调自定义交互逻辑
+   * @supported swan
+   */
+  onViewMore?: CommonEventFunction
+}
+namespace CommentListProps {
+  interface ICommentParam {
+    /** 被点赞的文章的 id，与 path 参数一一对应
+     * @example "20200101"
+     */
+    snid: string
+
+    /** 文章标题 */
+    title: string
+
+    /** 智能小程序内页链接，最长不能超过 194 字符
+     * @example "/pages/index/index"
+     */
+    path: string
+    /** 数组第一项用于收藏功能的展示图片
+     * @default ['https://b.bdstatic.com/miniapp/images/demo-dog.png']
+     */
+    images?: string[]
+  }
+  interface IToolbarConfig {
+    /** 输入框提示文字 */
+    placeholder?: string
+
+    /** 显示的互动模块，对应默认值分别是：评论数、点赞、收藏、分享
+     * @default ['comment', 'like', 'favor', 'share']
+     */
+    moduleList?: string
+
+    /** 若 moduleList 里配置了 share 模块，该参数为必填 */
+    share?: IShare
+  }
+  interface IShare {
+    /** 分享标题 */
+    title: string
+
+    /** 分享内容 */
+    content?: string
+
+    /** 分享图标 */
+    imageUrl?: string
+
+    /** 页面 path ，必须是以 / 开头的完整路径，如果 path 中参数包含中文字符，需对中文字符进行编码 */
+    path?: string
+  }
+  interface IViewMoreStyle {
+    /** 『全部 xx 条』的字体颜色，默认为视觉提供色号，开发者可传入自定义色号
+     * @default "#3388ff"
+     */
+    color?: string
+  }
+}
+
+/** 评论列表
+ * @classification open
+ * @supported swan
+ * @see https://smartprogram.baidu.com/docs/develop/extended/component-content/comment-list/
+ */
+declare const CommentList: ComponentType<CommentListProps>
+export { CommentList, CommentListProps }

package/types/ContactButton.d.ts

@@ -0,0 +1,53 @@
+import { ComponentType } from 'react'
+import { StandardProps } from './common'
+interface ContactButtonProps extends StandardProps {
+  /** 必填。企业唯一编码，一个企业支付宝账号对应一个编码。
+   * @supported alipay
+   */
+  tntInstId: string
+
+  /** 必填。聊天窗编码，每个聊天窗的唯一编码。
+   * @supported alipay
+   */
+  scene: string
+
+  /** 选填。咨询按钮大小，正方形设置边长（如25*25 px）。
+   * @supported alipay
+   * @default 25
+   */
+  size?: number | string
+
+  /** 选填。咨询按钮颜色，默认白底蓝色。
+   * @supported alipay
+   * @default "#00A3FF"
+   */
+  color?: string
+
+  /** 选填。咨询按钮头像。
+   * @supported alipay
+   */
+  icon?: string
+
+  /** 选填。支付宝访客用户ID（2088开头）。
+   * 说明： 客服回答问题时，如客户已离开咨询窗口，则通过推送消息到支付宝 card 中提醒客户。
+   * @supported alipay
+   */
+  alipayCardNo?: string
+
+  /** 选填。该属性主要用于传递一些扩展信息给组件，以实现一些高级功能。该属性值的生成方式为：encodeURIComponent({"字段名":"字段值"})， 其中，字段名和字段值要根据实际使用的功能进行替换。
+   * 目前通过传入扩展信息可支持的 3 个功能：
+   * 1.访客名片。需传 cinfo 和 key 两个扩展字段，代码形如在云客服中进入 设置 > 服务窗配置 > 聊天窗 URL。点击操作栏中的 聊天窗 URL ，获取 tntInstId（企业编码）和 scene（聊天窗编码）。encodeURIComponent({"cinfo":"生成的 cinfo","key":"生成的key"})，cinfo 和 key 的值说明 支付宝小程序接入访客名片；
+   * 2.聊天窗默认带出用户的小程序订单数据。需传 appId 字段，代码形如encodeURIComponent({"appId":"商户小程序appid"})
+   * 3.未读客服消息同步至"我的小程序-我的"。同样需传 appId 字段，代码形如 encodeURIComponent({"appId":"商户小程序appid"})。
+   * @supported alipay
+   */
+  extInfo?: string
+}
+
+/** 智能客服
+ * @classification open
+ * @supported alipay
+ * @see https://opendocs.alipay.com/mini/component/contact-button
+ */
+declare const ContactButton: ComponentType<ContactButtonProps>
+export { ContactButton, ContactButtonProps }

package/types/CoverImage.d.ts

@@ -59,7 +59,7 @@ interface CoverImageProps extends StandardProps {
 
 /** 覆盖在原生组件之上的图片视图。可覆盖的原生组件同cover-view，支持嵌套在cover-view里。
  * @classification viewContainer
- * @supported weapp, swan, alipay, h5
+ * @supported weapp, alipay, swan, qq, h5, harmony
  * @example_react
  * ```tsx
  * // js

package/types/CoverView.d.ts

@@ -3,7 +3,7 @@ import { CommonEventFunction } from './common'
 import { ViewProps } from './View'
 interface CoverViewProps extends ViewProps {
   /** 设置顶部滚动偏移量，仅在设置了 overflow-y: scroll 成为滚动元素后生效
-   * @supported weapp, swan, qq
+   * @supported weapp, alipay, swan, qq
    */
   scrollTop?: number
 
@@ -37,15 +37,113 @@ interface CoverViewProps extends ViewProps {
    */
   ariaLabel?: string
 
-  /** 点击事件回调。
+  /** 允许横向滚动。
    * @supported alipay
+   * @default false
    */
-  onTap?: CommonEventFunction
+  scrollX?: boolean
+
+  /** 允许纵向滚动。
+   * @supported alipay
+   * @default false
+   */
+  scrollY?: boolean
+
+  /** 距顶部/左边多远时（单位px），触发 scrolltoupper 事件。
+   * @supported alipay
+   * @default 50
+   */
+  upperThreshold?: number
+
+  /** 距底部/右边多远时（单位px），触发 scrolltolower 事件。
+   * @supported alipay
+   * @default 50
+   */
+  lowerThreshold?: number
+
+  /** 设置横向滚动条位置。
+   * @supported alipay
+   */
+  scrollLeft?: number
+
+  /** 滚动到子元素，值应为某子元素的 id。当滚动到该元素时，元素顶部对齐滚动区域顶部。
+   * 说明：scroll-into-view 的优先级高于 scroll-top。
+   * @supported alipay
+   */
+  scrollIntoView?: string
+
+  /** 在设置滚动条位置时使用动画过渡。
+   * @supported alipay
+   * @default false
+   */
+  scrollWithAnimation?: boolean
+
+  /** 当 scroll-with-animation设置为 true 时，可以设置 scroll-animation-duration 来控制动画的执行时间，单位 ms。
+   * @supported alipay
+   */
+  scrollAnimationDuration?: number
+
+  /** 当点击 iOS 顶部状态栏或者双击 Android 标题栏时，滚动条返回顶部，只支持竖向。
+   * @supported alipay
+   * @default false
+   */
+  enableBackToTop?: boolean
+
+  /** 纵向滚动时，当滚动到顶部或底部时，强制禁止触发页面滚动，仍然只触发 scroll-view 自身的滚动。
+   * @supported alipay
+   * @default false
+   */
+  trapScroll?: boolean
+
+  /** 发生滚动前，对滚动方向进行判断，当方向是顶部/左边时，如果值为 always 将始终禁止滚动，如果值为 out-of-bounds 且当前已经滚动到顶部/左边，禁止滚动。
+   * @supported alipay
+   */
+  disableLowerScroll?: string
+
+  /** 发生滚动前，对滚动方向进行判断，当方向是底部/右边时，如果值为 always 将始终禁止滚动，如果值为 out-of-bounds 且当前已经滚动到底部/右边，禁止滚动。
+   * @supported alipay
+   */
+  disableUpperScroll?: string
+
+  /** 滚动到顶部/左边，会触发 scrolltoupper 事件。
+   * @supported alipay
+   */
+  onScrollToUpper?: CommonEventFunction
+
+  /** 滚动到底部/右边，会触发 scrolltolower事件。
+   * @supported alipay
+   */
+  onScrollToLower?: CommonEventFunction
+
+  /** 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth}。
+   * @supported alipay
+   */
+  onScroll?: CommonEventFunction
+
+  /** 触摸动作开始。
+   * @supported alipay
+   */
+  onTouchStart?: CommonEventFunction
+
+  /** 触摸后移动。
+   * @supported alipay
+   */
+  onTouchMove?: CommonEventFunction
+
+  /** 触摸动作结束。
+   * @supported alipay
+   */
+  onTouchEnd?: CommonEventFunction
+
+  /** 触摸动作被打断，如来电提醒、弹窗。
+   * @supported alipay
+   */
+  onTouchCancel?: CommonEventFunction
 }
 
 /** 覆盖在原生组件之上的文本视图。可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher 只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。
  * @classification viewContainer
- * @supported weapp, swan, alipay, h5
+ * @supported weapp, alipay, swan, qq, h5
  * @example_react
  * ```tsx
  * // js

package/types/CustomWrapper.d.ts

@@ -6,7 +6,8 @@ interface CustomWrapperProps extends StandardProps {
 
 /** custom-wrapper 自定义组件包裹器
  * 当数据更新层级较深时，可用此组件将需要更新的区域包裹起来，这样更新层级将大大减少
- * @supported weapp, swan, alipay, tt, jd, qq
+ * @classification viewContainer
+ * @supported weapp, swan, alipay, tt, jd, qq, h5
  * @example
  * ```tsx
  * import { Component } from 'react'

package/types/FollowSwan.d.ts

@@ -0,0 +1,28 @@
+import { ComponentType } from 'react'
+import { StandardProps } from './common'
+interface FollowSwanProps extends StandardProps {
+  /** 组件大小
+   * @supported swan
+   * @default "default"
+   */
+  size?: string
+
+  /** 组件样式
+   * @supported swan
+   * @default "primary"
+   */
+  type?: string
+
+  /** 关注和取消关注成功的回调，返回关注状态 {isFavor: true|false}
+   * @supported swan
+   */
+  onFavorStatusChange?: CommonEventFunction
+}
+
+/** 关注小程序
+ * @classification open
+ * @supported swan
+ * @see https://smartprogram.baidu.com/docs/develop/extended/component-content/follow-swan/
+ */
+declare const FollowSwan: ComponentType<FollowSwanProps>
+export { FollowSwan, FollowSwanProps }

package/types/Form.d.ts

@@ -66,7 +66,7 @@ declare namespace FormProps {
  *
  * 当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。
  * @classification forms
- * @supported weapp, h5, rn
+ * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
  * @example_react
  * ```tsx
  * class App extends Component {

package/types/Icon.d.ts

@@ -62,7 +62,7 @@ declare namespace IconProps {
 
 /** 图标。组件属性的长度单位默认为 px
  * @classification base
- * @supported weapp, swan, alipay, tt, h5, rn
+ * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
  * @example_react
  * ```tsx
  * export default class PageView extends Component {

package/types/Image.d.ts

@@ -155,7 +155,7 @@ declare namespace ImageProps {
  *
  * **Note:** 为实现小程序的 `mode` 特性，在 H5 组件中使用一个 `div` 容器来对内部的 `img` 进行展示区域的裁剪，因此请勿使用元素选择器来重置 `img` 的样式！
  * @classification media
- * @supported weapp, h5, rn, swan, alipay, tt
+ * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
  * @example_react
  * ```tsx
  * export default class PageView extends Component {

package/types/InlinePaymentPanel.d.ts

@@ -0,0 +1,58 @@
+import { ComponentType } from 'react'
+import { StandardProps } from './common'
+interface InlinePaymentPanelProps extends StandardProps {
+  /** 总金额，金额单位分，tip：仅支持整数型字符串
+   * @supported swan
+   */
+  totalAmount?: string
+
+  /** 百度收银台的财务结算凭证，详见平台术语
+   * @supported swan
+   */
+  dealId?: string
+
+  /** 支付能力开通后分配的支付 appKey，详见平台术语
+   * @supported swan
+   */
+  appKey?: string
+
+  /** 平台营销信息，此处传当前订单中可使用平台券的 spuid，同时需在 支付能力中搭配使用传入该参数；注：仅与百度合作平台类目券的开发者需要填写该参数
+   * @supported swan
+   */
+  promotionTag?: string | Array<string>
+
+  /** 是否设置挽留弹窗
+   * @supported swan
+   * @default false
+   */
+  enablePageBackModal?: boolean
+
+  /** 自定义样式设置
+   * @supported swan
+   */
+  customStyle?: string
+
+  /** 自定义样式档位配置，各档位配置项包括支付渠道/优惠券条高度、渠道图标大小、支付渠道文案字体大小、营销文案字体大小、选择器图标大小
+   * @supported swan
+   * @default "default"
+   */
+  styleType?: 'tiny' | 'small' | 'default' | 'medium' | 'large'
+
+  /** 获取支付相关信息，具体信息在返回值的 detail 字段中
+   * @supported swan
+   */
+  onGetPaymentInfo?: CommonEventFunction
+
+  /** 当发生错误时触发 error 事件，具体信息在返回值的 detail 字段中，例如 {detail: {errMsg: "something is wrong"}}
+   * @supported swan
+   */
+  onError?: CommonEventFunction
+}
+
+/** 内嵌支付组件
+ * @classification open
+ * @supported swan
+ * @see https://smartprogram.baidu.com/docs/develop/component/inline_payment_panel/
+ */
+declare const InlinePaymentPanel: ComponentType<InlinePaymentPanelProps>
+export { InlinePaymentPanel, InlinePaymentPanelProps }

package/types/Input.d.ts

@@ -9,11 +9,11 @@ interface InputProps extends StandardProps, FormItemProps {
   /** input 的类型
    * @default "text"
    * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
-   * @rn 部分支持
    */
-  type?: 'text' | 'number' | 'idcard' | 'digit' | 'safe-password' | 'nickname'
+  type?: keyof InputProps.Type
 
   /** 是否是密码类型
+   * @default false
    * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
    */
   password?: boolean
@@ -30,7 +30,7 @@ interface InputProps extends StandardProps, FormItemProps {
 
   /** 指定 placeholder 的样式类
    * @default "input-placeholder"
-   * @supported weapp, alipay, swan, qq, jd
+   * @supported weapp, alipay, swan, tt, qq, jd
    */
   placeholderClass?: string
 
@@ -40,6 +40,7 @@ interface InputProps extends StandardProps, FormItemProps {
   placeholderTextColor?: string
 
   /** 是否禁用
+   * @default false
    * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
    */
   disabled?: boolean
@@ -69,15 +70,16 @@ interface InputProps extends StandardProps, FormItemProps {
    */
   focus?: boolean
 
-  /** 设置键盘右下角按钮的文字
+  /** 设置键盘右下角按钮的文字，仅在type='text'时生效
+   * @alipay confirm-type 与 enableNative 属性冲突，若希望 confirm-type 生效，enableNative 不能设定为 false，而且不能设定 always-system
    * @default done
    * @supported weapp, alipay, swan, tt, qq, jd, rn
    */
-  confirmType?: 'send' | 'search' | 'next' | 'go' | 'done'
+  confirmType?: keyof InputProps.ConfirmType
 
   /** 点击键盘右下角按钮时是否保持键盘不收起
    * @default false
-   * @supported weapp, alipay, swan, qq, jd
+   * @supported weapp, alipay, swan, tt, qq, jd
    */
   confirmHold?: boolean
 
@@ -99,14 +101,14 @@ interface InputProps extends StandardProps, FormItemProps {
   selectionEnd?: number
 
   /** 键盘弹起时，是否自动上推页面
-   * @default false
+   * @default true
    * @supported weapp, swan, tt, qq, jd
    */
   adjustPosition?: boolean
 
   /** focus 时，点击页面的时候不收起键盘
    * @default false
-   * @supported weapp
+   * @supported weapp, tt
    */
   holdKeyboard?: boolean
 
@@ -161,7 +163,9 @@ interface InputProps extends StandardProps, FormItemProps {
   randomNumber?: boolean
 
   /**
-   * 是否为受控组件
+   * 是否为受控组件。为 true 时，value 内容会完全受 setData 控制。
+   *
+   * 建议当 type 值为 text 时不要将 controlled 设置为 true,详见 [Bugs & Tips](https://opendocs.alipay.com/mini/component/input#Bug%20%26%20Tip)
    * @default false
    * @supported alipay
    */
@@ -178,9 +182,16 @@ interface InputProps extends StandardProps, FormItemProps {
   name?: string
 
   /** 是否强制使用系统键盘和 Web-view 创建的 input 元素。为 true 时，confirm-type、confirm-hold 可能失效。
+   * @default false
+   * @supported alipay
+   */
+  alwaysSystem?: boolean
+
+  /** 使用原生键盘
+   * @default true
    * @supported alipay
    */
-  alwaysSystem?: string
+  enableNative?: boolean
 
   /** 无障碍访问，（属性）元素的额外描述
    * @supported qq
@@ -214,6 +225,72 @@ interface InputProps extends StandardProps, FormItemProps {
   onKeyboardHeightChange?: CommonEventFunction<InputProps.onKeyboardHeightChangeEventDetail>
 }
 declare namespace InputProps {
+  /** Input 类型 */
+  interface Type {
+    /** 文本输入键盘
+     * @supported weapp, alipay, h5, rn
+     */
+    text
+
+    /** 数字输入键盘
+     * @supported weapp, alipay, h5, rn
+     */
+    number
+
+    /** 身份证输入键盘
+     *@supported weapp, alipay, rn
+     */
+    idcard
+
+    /** 带小数点的数字键盘
+     * @supported weapp, alipay, h5, rn
+     */
+    digit
+
+    /** 密码安全输入键盘[指引](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/safe-password.html)
+     * @supported weapp, alipay
+     */
+    'safe-password'
+
+    /** 昵称输入键盘
+     * @supported weapp, alipay
+     */
+    nickname
+
+    /** 数字输入键盘
+     * @supported alipay
+     */
+    numberpad
+
+    /** 带小数点的数字键盘
+     * @supported alipay
+     */
+    digitpad
+
+    /** 身份证输入键盘
+     * @supported alipay
+     */
+    idcardpad
+  }
+
+  /** Confirm 类型 */
+  interface ConfirmType {
+    /** 右下角按钮为“发送” */
+    send
+
+    /** 右下角按钮为“搜索” */
+    search
+
+    /** 右下角按钮为“下一个” */
+    next
+
+    /** 右下角按钮为“前往” */
+    go
+
+    /** 右下角按钮为“完成” */
+    done
+  }
+
   /** > 注意：React-Native 端 `inputEventDetail` 仅实现参数 `value`，若需实时获取光标位置则可通过 [`onSelectionChange`](https://reactnative.dev/docs/textinput#onselectionchange) 实现。 */
   interface inputEventDetail {
     /** 输入值 */
@@ -247,7 +324,7 @@ declare namespace InputProps {
 
 /** 输入框。该组件是原生组件，使用时请注意相关限制
  * @classification forms
- * @supported weapp, h5, rn
+ * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
  * @example_react
  * ```tsx
  * class App extends Component {

package/types/Label.d.ts

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

package/types/Lifestyle.d.ts

@@ -0,0 +1,26 @@
+import { ComponentType } from 'react'
+import { StandardProps } from './common'
+interface LifestyleProps extends StandardProps {
+  /** 必填，生活号 ID（即生活号 APPID），必须是当前小程序同账号主体且已关联的生活号。
+   * @supported alipay
+   */
+  publicId?: string
+
+  /** 文案。支持商家自定义，最多展示一行。
+   * @supported alipay
+   */
+  memo?: string
+
+  /** 当用户关注生活号成功后执行。
+   * @supported alipay
+   */
+  onFollow?: CommonEventFunction
+}
+
+/** 关注生活号
+ * @classification open
+ * @supported alipay
+ * @see https://opendocs.alipay.com/mini/component/lifestyle
+ */
+declare const Lifestyle: ComponentType<LifestyleProps>
+export { Lifestyle, LifestyleProps }