@tarojs/components 3.6.0-canary.2 → 3.6.0-canary.4

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/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/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/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 }

package/types/Like.d.ts

@@ -0,0 +1,107 @@
+import { ComponentType } from 'react'
+import { StandardProps } from './common'
+interface LikeProps extends StandardProps {
+  /** 是否已被点赞
+   * @supported swan
+   * @default false
+   */
+  isLiked?: boolean
+
+  /** 按钮模式。icon：表示仅有图标；mixture：表示图标文字结合
+   * @supported swan
+   * @default "icon"
+   */
+  mode?: string
+
+  /** 图标类型。hand：表示手形；heart：表示心形
+   * @supported swan
+   * @default "hand"
+   */
+  iconType?: string
+
+  /** 点赞按钮上的文案。默认为赞，仅在 mode 属性值为'mixture'时有效
+   * @supported swan
+   * @default "赞"
+   */
+  likeText?: string
+
+  /** 点赞数量
+   * @supported swan
+   * @default 0
+   */
+  likeNum?: number
+
+  /** 被点赞的对象类型。0：表示对文章内容进行点赞；1：表示对评论内容进行点赞
+   * @supported swan
+   * @default 0
+   */
+  likeType?: number
+
+  /** 点赞动效形式。0：无动效；1：轻动效；2：强动效
+   * @supported swan
+   * @default 1
+   */
+  animationType?: number
+
+  /** 点赞后是否弹出 toast 提示
+   * @supported swan
+   * @default false
+   */
+  isShowToast?: boolean
+
+  /** toast 文案，默认为已点赞、已取消
+   * @supported swan
+   * @default ['已点赞', '已取消']
+   */
+  toastText?: string[]
+
+  /** 点赞服务需要的必要参数
+   * @supported swan
+   */
+  likeParam: LikeProps.ILikeParam
+
+  /** 使用 npm 方式引入点赞组件时，点击按钮时在用户未登录状态下会触发此事件；使用动态库方式引入点赞组件时，点击按钮时在用户未登录状态下不会触发此事件
+   * @supported swan
+   */
+  onError?: CommonEventFunction
+
+  /** 点击点赞按钮，在点赞服务成功后将状态返回给使用组件者
+   * @supported swan
+   */
+  onSuccess?: CommonEventFunction
+
+  /** 点击点赞按钮，在点赞服务失败后将状态返回给使用组件者
+   * @supported swan
+   */
+  onFail?: CommonEventFunction
+}
+declare namespace LikeProps {
+  interface ILikeParam {
+    /** 用户身份唯一标识 */
+    openid: string
+
+    /** 被点赞的文章的 id，与 path 参数一一对应
+     * @example "20200101"
+     */
+    snid: string
+
+    /** 被点赞的评论 id */
+    spid?: string
+
+    /** 文章标题 */
+    title: string
+
+    /** 智能小程序内页链接，最长不能超过 194 字符
+     * @example "/pages/index/index"
+     */
+    path: string
+  }
+}
+
+/** 点赞
+ * @classification open
+ * @supported swan
+ * @see https://smartprogram.baidu.com/docs/develop/extended/component-content/like/
+ */
+declare const Like: ComponentType<LikeProps>
+export { Like, LikeProps }

package/types/Login.d.ts

@@ -0,0 +1,45 @@
+import { ComponentType } from 'react'
+import { StandardProps } from './common'
+interface LoginProps extends StandardProps {
+  /** 组件中用户授权按钮的类名，可用于自定义样式
+   * @supported swan
+   */
+  buttonClass?: string
+
+  /** 组件中用户授权勾选框选中时的颜色，同 CSS 的 color
+   * @supported swan
+   * @default "#3388FF"
+   */
+  checkedColor?: string
+
+  /** 主题颜色，设置后将应用于 “用户授权按钮背景色” 和 “用户授权勾选框选中时的颜色”
+   * 注：theme-color 的优先级低于 button-class 和 checked-color，且当 button-class 存在时，theme-color 不生效
+   * @supported swan
+   * @default "#3388FF"
+   */
+  themeColor?: string
+
+  /** 用户完成授权后，获取用户手机号：
+   * detail.errMsg 值为"getPhoneNumber:ok" 时代表用户信息获取成功；
+   * detail.errMsg 值为"getPhoneNumber:fail auth deny"时代表用户信息获取失败。
+   * 参考 用户数据的签名验证和加解密 对用户数据进行处理获得用户手机号。
+   * 用户手机号信息解密后数据示例：{"mobile":"15000000000"}
+   * 1. 非个人开发者可申请；
+   * 2. 审核通过后，进入小程序首页,在左侧导航栏单击“设置 -> 开发设置”。下拉页面，在“获取用户手机号权限申请”中单击“申请开通”
+   * @supported swan
+   */
+  onGetPhoneNumber?: CommonEventFunction
+
+  /** 组件加载失败回调
+   * @supported swan
+   */
+  onLoadError?: CommonEventFunction
+}
+
+/** 联合登录 / 手机号授权内嵌组件
+ * @classification open
+ * @supported swan
+ * @see https://smartprogram.baidu.com/docs/develop/component/login/
+ */
+declare const Login: ComponentType<LoginProps>
+export { Login, LoginProps }

package/types/Lottie.d.ts

@@ -0,0 +1,119 @@
+import { ComponentType } from 'react'
+import { StandardProps } from './common'
+interface LottieProps extends StandardProps {
+  /** 是否自动播放。
+   * @supported alipay
+   * @default false
+   */
+  autoplay?: boolean
+
+  /** Lottie 资源地址。包含近端（包内地址）和远端（网络）的 JSON 文件地址。
+   * 与 djangoId 二选一。
+   * @supported alipay
+   */
+  path?: string
+
+  /** 播放速度。正数为正向播放，负数负向播放。
+   * @supported alipay
+   * @default 1.0
+   */
+  speed?: number
+
+  /** 循环次数。
+   *
+   * 如果是负数表示无限次。
+   * 如果是 0 表示不循环，播放一次。
+   * 如果是 1 表示循环一次，播放两次。
+   * @supported alipay
+   * @default 0
+   */
+  repeatCount?: number
+
+  /** 是否自动回播。
+   * @supported alipay
+   * @default false
+   */
+  autoReverse?: boolean
+
+  /** 资源地址。"/" 表明是小程序根目录。
+   * @supported alipay
+   */
+  assetsPath?: string
+
+  /** 兜底图或者降级图地址。
+   *
+   * 1. 支持本地资源，案例：'/image/lottie/lottie2_default.png'。
+   * 支持 http 的 cdn 地址、近端地址。
+   * 小程序场景不支持 djangoId。
+   * @supported alipay
+   */
+  placeholder?: string
+
+  /** Lottie 在线资源。远端的 Zip 文件地址。Lottie 组件会执行 MD5 校验、解压、获取等过程，在过程中显示 placeholder 图片。
+   * 与 path 二选一
+   * @supported alipay
+   */
+  djangoId?: string
+
+  /** 在线资源的 md5 校验。
+   * djangoId=https://b.zip。
+   * 可以使用 b.zip 加密 获取 md5 值
+   * md5="77c6c86fc89ba94cc0a9271b77ae77d2"
+   * @supported alipay
+   */
+  md5?: string
+
+  /** 降级。降级是指如遇低端设备，Lottie 会降级展示为 placeholder。
+   * 当 optimize 为 true ，并且传入了 placeholder 时，在低端设备上只会展示 placeholder，不展示 Lottie。
+   * 低端设备如下所示：
+   *
+   * iOS ：小于等于 iPhone6P
+   * Android：内存容量小于 3G
+   * @supported alipay
+   * @default false
+   */
+  optimize?: boolean
+
+  /** 当数据下载+视图创建完成时触发。
+   * @supported alipay
+   */
+  onDataReady?: CommonEventFunction
+
+  /** 数据加载失败时触发。
+   * @supported alipay
+   */
+  onDataFailed?: CommonEventFunction
+
+  /** 动画开始时触发。
+   * @supported alipay
+   */
+  onAnimationStart?: CommonEventFunction
+
+  /** 动画结束时触发。
+   * @supported alipay
+   */
+  onAnimationEnd?: CommonEventFunction
+
+  /** 动画一次重播结束。
+   * @supported alipay
+   */
+  onAnimationRepeat?: CommonEventFunction
+
+  /** 动画取消。业务调用 Cancel 时回调。
+   * @supported alipay
+   */
+  onAnimationCancel?: CommonEventFunction
+
+  /** 参数化时，数据准备完成，等待业务传入参数化值。
+   * @supported alipay
+   */
+  onDataLoadReady?: CommonEventFunction
+}
+
+/** Lottie
+ * @classification media
+ * @supported alipay
+ * @see https://opendocs.alipay.com/mini/component/lottie
+ */
+declare const Lottie: ComponentType<LottieProps>
+export { Lottie, LottieProps }

package/types/Map.d.ts

@@ -212,7 +212,7 @@ interface MapProps extends StandardProps {
    * @supported weapp, swan, tt, qq
    * @default false
    */
-  enable3D?: string
+  enable3D?: boolean
 
   /** 点击地图时触发
    * @supported weapp, alipay, swan, tt, qq, jd

package/types/NativeSlot.d.ts

@@ -0,0 +1,32 @@
+import { ComponentType } from 'react'
+
+interface NativeSlotProps {
+  /** 指定插入的 slot 位置
+   * @default none
+   * @supported weapp, swan, alipay, tt, jd, qq
+   */
+  name?: string
+}
+
+/** 编译的原生组件支持使用 slot 插槽
+ * @supported weapp, swan, alipay, tt, jd, qq
+ * @version 3.5.7+
+ * @example
+ * ```tsx
+ * import { NativeSlot, View } from '@tarojs/components'
+ *
+ * export default function () {
+ *   render () {
+ *     return (
+ *       <View>
+ *         <NativeSlot />
+ *       </View>
+ *     )
+ *   }
+ * }
+ * ```
+ * @see https://github.com/NervJS/taro/pull/12627
+ */
+declare const NativeSlot: ComponentType<NativeSlotProps>
+
+export { NativeSlot, NativeSlotProps }