@tarojs/components 3.5.0-canary.1 → 3.5.0

package/types/OfficialAccount.d.ts

@@ -5,24 +5,24 @@ interface OfficialAccountProps extends StandardProps {
   /** 组件加载成功时触发
    * @supported weapp
    */
-  onLoad?: CommonEventFunction<OfficialAccountProps.detail>
+  onLoad?: CommonEventFunction<OfficialAccountProps.Detail>
 
   /** 组件加载失败时触发
    * @supported weapp
    */
-  onError?: CommonEventFunction<OfficialAccountProps.detail>
+  onError?: CommonEventFunction<OfficialAccountProps.Detail>
 }
 
 declare namespace OfficialAccountProps {
   /** detail 对象 */
-  interface detail {
+  interface Detail {
     /** 状态码 */
     status: number
     /** 错误信息 */
     errMsg: string
   }
   /** status 有效值 */
-  interface status {
+  interface Status {
     /** 网络错误 */
     '-2'
     /** 数据解析错误 */
@@ -45,12 +45,12 @@ declare namespace OfficialAccountProps {
 }
 
 /** 公众号关注组件。当用户扫小程序码打开小程序时，开发者可在小程序内配置公众号关注组件，方便用户快捷关注公众号，可嵌套在原生组件内。
- * 
+ *
  * Tips
  * 使用组件前，需前往小程序后台，在“设置”->“关注公众号”中设置要展示的公众号。注：设置的公众号需与小程序主体一致。
- * 
+ *
  * 在一个小程序的生命周期内，只有从以下场景进入小程序，才具有展示引导关注公众号组件的能力:
- * 
+ *
  * 当小程序从扫小程序码场景（场景值1047，场景值1124）打开时
  * 当小程序从聊天顶部场景（场景值1089）中的「最近使用」内打开时，若小程序之前未被销毁，则该组件保持上一次打开小程序时的状态
  * 当从其他小程序返回小程序（场景值1038）时，若小程序之前未被销毁，则该组件保持上一次打开小程序时的状态

package/types/OpenData.d.ts

@@ -3,9 +3,9 @@ import { StandardProps, CommonEventFunction } from './common'
 
 interface OpenDataProps extends StandardProps {
   /** 开放数据类型
-   * @supported weapp
+   * @supported weapp, tt
    */
-  type: keyof OpenDataProps.type
+  type: keyof OpenDataProps.Type
   /** 当 type="groupName" 时生效, 群id
    * @supported weapp
    */
@@ -14,27 +14,27 @@ interface OpenDataProps extends StandardProps {
    * @default "en"
    * @supported weapp
    */
-  lang?: keyof OpenDataProps.lang
+  lang?: keyof OpenDataProps.Lang
 
   /** 数据为空时的默认文案
-   * @supported weapp
+   * @supported weapp, tt
    */
   defaultText?: string
 
   /** 用户头像为空时的默认图片，支持相对路径和网络图片路径
-   * @supported weapp
+   * @supported weapp, tt
    */
   defaultAvatar?: string
 
   /** 群名称或用户信息为空时触发
-   * @supported weapp
+   * @supported weapp, tt
    */
   onError?: CommonEventFunction
 }
 
 declare namespace OpenDataProps {
   /** type 的合法值 */
-  interface type {
+  interface Type {
     /** 拉取群名称 */
     groupName
     /** 用户昵称 */
@@ -53,7 +53,7 @@ declare namespace OpenDataProps {
     userLanguage
   }
   /** lang 的合法值 */
-  interface lang {
+  interface Lang {
     /** 英文 */
     en
     /** 简体中文 */
@@ -63,9 +63,9 @@ declare namespace OpenDataProps {
   }
 }
 
-/** 用于展示微信开放的数据
+/** 用于展示平台开放的数据
  * @classification open
- * @supported weapp
+ * @supported weapp, tt
  * @example_react
  * ```tsx
  * class App extends Component {

package/types/PageContainer.d.ts

@@ -4,13 +4,13 @@ import { StandardProps, CommonEventFunction, BaseEventOrigFunction } from './com
 interface PageContainerProps extends StandardProps {
   /** 是否显示容器组件
    * @default false
-   * @supported weapp
+   * @supported weapp, rn
    */
   show?: boolean
 
   /** 动画时长，单位毫秒
    * @default 300
-   * @supported weapp
+   * @supported weapp, rn
    */
   duration?: number
 
@@ -22,65 +22,65 @@ interface PageContainerProps extends StandardProps {
 
   /** 是否显示遮罩层
    * @default true
-   * @supported weapp
+   * @supported weapp, rn
    */
   overlay?: boolean
 
   /** 弹出位置，可选值为 top bottom right center
    * @default bottom
-   * @supported weapp
+   * @supported weapp, rn
    */
-  position?: keyof PageContainerProps.position
+  position?: keyof PageContainerProps.Position
 
   /** 是否显示圆角
    * @default false
-   * @supported weapp
+   * @supported weapp, rn
    */
   round?: boolean
 
-  /** 自定义遮罩层样式
+  /** 是否在下滑一段距离后关闭
    * @default false
    * @supported weapp
    */
   closeOnSlideDown?: boolean
 
-  /** 是否在下滑一段距离后关闭
-   * @supported weapp
+  /** 自定义遮罩层样式
+   * @supported weapp, rn
    */
-  overlayStyle?: boolean
+  overlayStyle?: string
 
   /** 自定义弹出层样式
-   * @supported weapp
+   * @supported weapp, rn
    */
-  customStyle?: boolean
+  customStyle?: string
 
   /** 进入前触发
-   * @supported weapp
+   * @supported weapp, rn
    */
   onBeforeEnter?: CommonEventFunction
 
   /** 进入中触发
-   * @supported weapp
+   * @supported weapp, rn
    */
   onEnter?: CommonEventFunction
 
   /** 进入后触发
-   * @supported weapp
+   * @supported weapp, rn
    */
   onAfterEnter?: CommonEventFunction
 
   /** 离开前触发
-   * @supported weapp
+   * @supported weapp, rn
    */
   onBeforeLeave?: CommonEventFunction
 
   /** 离开中触发
-   * @supported weapp
+   * @supported weapp, rn
    */
   onLeave?: CommonEventFunction
 
   /** 离开后触发
-   * @supported weapp
+   * @supported weapp, rn
    */
   onAfterLeave?: CommonEventFunction
 
@@ -92,15 +92,15 @@ interface PageContainerProps extends StandardProps {
 
 declare namespace PageContainerProps {
   /** 弹出位置 */
-  interface position {
+  interface Position {
     /** 上方弹出 */
     top
     /** 下方弹出 */
     bottom
-    /** 左边弹出 */
-    left
     /** 右边弹出 */
     right
+    /** 中央弹出 */
+    center
   }
 }
 
@@ -113,7 +113,7 @@ declare namespace PageContainerProps {
  *   1. tip: 当前页面最多只有 1 个容器，若已存在容器的情况下，无法增加新的容器
  *   2. tip: wx.navigateBack 无法在页面栈顶调用，此时没有上一级页面
  * @classification viewContainer
- * @supported weapp
+ * @supported weapp, rn
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html
  */
 declare const PageContainer: ComponentType<PageContainerProps>

package/types/Picker.d.ts

@@ -103,7 +103,7 @@ interface PickerMultiSelectorProps extends PickerStandardProps {
    * 列改变时触发
    * @supported weapp, h5, rn
    */
-  onColumnChange?: CommonEventFunction<PickerMultiSelectorProps.ColumnChangeEvnetDetail>
+  onColumnChange?: CommonEventFunction<PickerMultiSelectorProps.ColumnChangeEventDetail>
 }
 
 declare namespace PickerMultiSelectorProps {
@@ -111,7 +111,7 @@ declare namespace PickerMultiSelectorProps {
     /** 表示变更值的下标 */
     value: number[]
   }
-  interface ColumnChangeEvnetDetail {
+  interface ColumnChangeEventDetail {
     /** 表示改变了第几列（下标从0开始） */
     column: number
     /** 表示变更值的下标 */
@@ -350,7 +350,7 @@ declare namespace PickerRegionProps {
  *     </view>
  *   </view>
  * </template>
- * 
+ *
  * <script>
  *   export default {
  *     data() {
@@ -365,11 +365,11 @@ declare namespace PickerRegionProps {
  *       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
  *       }

package/types/PickerViewColumn.d.ts

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

package/types/Progress.d.ts

@@ -84,7 +84,7 @@ interface ProgressProps extends StandardProps {
  *   constructor() {
  *     super(...arguments)
  *   }
- * 
+ *
  *   render() {
  *     return (
  *       <View className='components-page'>

package/types/Radio.d.ts

@@ -3,25 +3,25 @@ import { StandardProps, CommonEventFunction, FormItemProps } from './common'
 
 interface RadioProps extends StandardProps {
   /** `<Radio/>` 标识。当该`<Radio/>` 选中时，`<RadioGroup/>`的 change 事件会携带`<Radio/>`的 value
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
   value?: string
 
   /** 当前是否选中
    * @default false
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    */
   checked?: boolean
 
   /** 是否禁用
    * @default false
-   * @supported weapp, h5, rn
+   * @supported weapp, h5, rn, tt
    */
   disabled?: boolean
 
   /** Radio 的颜色，同 css 的 color
    * @default "#09BB07"
-   * @supported weapp, rn
+   * @supported weapp, rn, tt
    */
   color?: string
 
@@ -33,7 +33,7 @@ interface RadioProps extends StandardProps {
 
 /** 单选项目
  * @classification forms
- * @supported weapp, h5, rn
+ * @supported weapp, h5, rn, tt
  * @example_react
  * ```tsx
  * export default class PageRadio extends Component {
@@ -120,7 +120,7 @@ interface RadioProps extends StandardProps {
  *     </view>
  *   </view>
  * </template>
- * 
+ *
  * <script>
  * export default {
  *   data() {

package/types/RadioGroup.d.ts

@@ -3,7 +3,7 @@ import { StandardProps, CommonEventFunction, FormItemProps } from './common'
 
 interface RadioGroupProps extends StandardProps, FormItemProps {
   /** RadioGroup 中选中项发生改变时触发 change 事件，detail = {value:[选中的radio的value的数组]}
-   * @supported weapp, h5
+   * @supported weapp, h5, tt
    */
   onChange?: CommonEventFunction
 }
@@ -16,7 +16,7 @@ declare namespace RadioGroupProps {
 
 /** 单项选择器，内部由多个 Radio 组成。
  * @classification forms
- * @supported weapp, h5, rn
+ * @supported weapp, h5, rn, tt
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/radio-group.html
  */
 declare const RadioGroup: ComponentType<RadioGroupProps>

package/types/RichText.d.ts

@@ -2,10 +2,15 @@ import { ComponentType } from 'react'
 import { StandardProps } from './common'
 
 interface RichTextProps extends StandardProps {
+  /** 文本是否可选，该属性会使节点显示为 block
+   * @default false
+   * @supported weapp
+   */
+  userSelect?: boolean
   /** 节点列表/ HTML String */
   nodes?: Nodes
   /** 显示连续空格
-   * @supported weapp
+   * @supported weapp, rn
    */
   space?: keyof RichTextProps.TSpace
 }
@@ -95,7 +100,7 @@ declare namespace RichTextProps {
  *     <rich-text :nodes="nodes"></rich-text>
  *   </view>
  * </template>
- * 
+ *
  * <script>
  * export default {
  *   name: 'Index',

package/types/ScrollView.d.ts

@@ -225,15 +225,15 @@ declare namespace ScrollViewProps {
  *     const Threshold = 20
  *     const vStyleA = {
  *       height: '150px',
- *       'background-color': 'rgb(26, 173, 25)'
+ *       'backgroundColor': 'rgb(26, 173, 25)'
  *     }
  *     const vStyleB = {
  *        height: '150px',
- *       'background-color': 'rgb(39,130,215)'
+ *       'backgroundColor': 'rgb(39,130,215)'
  *     }
  *     const vStyleC = {
  *       height: '150px',
- *       'background-color': 'rgb(241,241,241)',
+ *       'backgroundColor': 'rgb(241,241,241)',
  *       color: '#333'
  *     }
  *     return (
@@ -288,7 +288,7 @@ declare namespace ScrollViewProps {
  *     </view>
  *   </view>
  * </template>
- * 
+ *
  * <script>
  * const order = ['demo1', 'demo2', 'demo3']
  * export default {
@@ -299,23 +299,23 @@ declare namespace ScrollViewProps {
  *       toView: 'demo2'
  *     }
  *   },
- * 
+ *
  *   methods: {
  *     upper(e) {
  *       console.log('upper:', e)
  *     },
- * 
+ *
  *     lower(e) {
  *       console.log('lower:', e)
  *     },
- * 
+ *
  *     scroll(e) {
  *       console.log('scroll:', e)
  *     }
  *   }
  * }
  * </script>
- * 
+ *
  * <style>
  * .page-section-spacing{
  *   margin-top: 60rpx;
@@ -331,7 +331,7 @@ declare namespace ScrollViewProps {
  *   width: 100%;
  *   height: 300rpx;
  * }
- * 
+ *
  * .demo-text-1 { background: #ccc; }
  * .demo-text-2 { background: #999; }
  * .demo-text-3 { background: #666; }

package/types/ShareElement.d.ts

@@ -5,7 +5,7 @@ interface ShareElementProps extends StandardProps {
   /** 映射标记
    * @supported weapp
    */
-  key: string
+  mapkey: string
 
   /** 是否进行动画
    * @default false
@@ -28,10 +28,203 @@ interface ShareElementProps extends StandardProps {
 
 /** 共享元素
  *
- * 共享元素是一种动画形式，类似于 [`flutter Hero`](https://flutterchina.club/animations/hero-animations/) 动画，表现为元素像是在页面间穿越一样。该组件需与 [`page-container`](https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html) 组件结合使用。
- * 使用时需在当前页放置 `share-element` 组件，同时在 `page-container` 容器中放置对应的 `share-element` 组件，对应关系通过属性值 key 映射。当设置 `page-container` `显示时，transform` 属性为 `true` 的共享元素会产生动画。当前页面容器退出时，会产生返回动画。
+ * 共享元素是一种动画形式，类似于 [`flutter Hero`](https://flutterchina.club/animations/hero-animations/) 动画，表现为元素像是在页面间穿越一样。该组件需与 [`PageContainer`](/docs/components/viewContainer/page-container) 组件结合使用。
+ * 使用时需在当前页放置 `ShareElement` 组件，同时在 `PageContainer` 容器中放置对应的 `ShareElement` 组件，对应关系通过属性值 key 映射。当设置 `PageContainer` `显示时，transform` 属性为 `true` 的共享元素会产生动画。当前页面容器退出时，会产生返回动画。
  * @classification viewContainer
  * @supported weapp
+ * @example_react
+ * ```tsx
+ * // index.js
+ * import { useState, useCallback } from 'react'
+ * import { View, Button, PageContainer, ShareElement } from '@tarojs/components'
+ *
+ * import './index.scss'
+ *
+ * const contacts = [
+ *   { id: 1, name: 'Frank', img: 'frank.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
+ *   { id: 2, name: 'Susan', img: 'susan.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
+ *   { id: 3, name: 'Emma', img: 'emma.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
+ *   { id: 4, name: 'Scott', img: 'scott.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
+ *   { id: 5, name: 'Bob', img: 'bob.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
+ *   { id: 6, name: 'Olivia', img: 'olivia.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
+ *   { id: 7, name: 'Anne', img: 'anne.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
+ *   { id: 8, name: 'sunny', img: 'olivia.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' }
+ * ]
+ *
+ * export default function () {
+ *   const [show, setShow] = useState(false)
+ *   const [contact, setContact] = useState(contacts[0])
+ *   const [transformIdx, setTransformIdx] = useState(0)
+ *
+ *   const onBeforeEnter = useCallback((res) => {
+ *     console.log('onBeforeEnter: ', res)
+ *   }, [])
+ *   const onEnter = useCallback((res) => {
+ *     console.log('onEnter: ', res)
+ *   }, [])
+ *   const onAfterEnter = useCallback((res) => {
+ *     console.log('onAfterEnter: ', res)
+ *   }, [])
+ *   const onBeforeLeave = useCallback((res) => {
+ *     console.log('onBeforeLeave: ', res)
+ *   }, [])
+ *   const onLeave = useCallback((res) => {
+ *     console.log('onLeave: ', res)
+ *   }, [])
+ *   const onAfterLeave = useCallback((res) => {
+ *     console.log('onAfterLeave: ', res)
+ *   }, [])
+ *
+ *   const showNext = (e, index) => {
+ *     setShow(true)
+ *     setContact(contacts[index])
+ *     setTransformIdx(index)
+ *   }
+ *
+ *   const showPrev = useCallback(() => {
+ *     setShow(false)
+ *   }, [])
+ *
+ *   return (
+ *     <View>
+ *       <View className="screen screen1">
+ *         {
+ *           contacts.map((item, index) => (
+ *             <View key={item.id} className="contact" onClick={e => showNext(e, index)}>
+ *               <ShareElement duration={300} className="name" mapkey="name" transform={transformIdx === index}>
+ *                 {item.name}
+ *               </ShareElement>
+ *               <View className="list">
+ *                 <View>Phone: {item.phone}</View>
+ *                 <View>Mobile: {item.mobile}</View>
+ *                 <View>Email: {item.email}</View>
+ *               </View>
+ *             </View>
+ *           ))
+ *         }
+ *       </View>
+ *       <PageContainer
+ *         show={show}
+ *         overlay={false}
+ *         closeOnSlideDown
+ *         duration={300}
+ *         position='center'
+ *         onBeforeEnter={onBeforeEnter}
+ *         onEnter={onEnter}
+ *         onAfterEnter={onAfterEnter}
+ *         onBeforeLeave={onBeforeLeave}
+ *         onLeave={onLeave}
+ *         onAfterLeave={onAfterLeave}
+ *       >
+ *         <View className="screen screen2">
+ *           <View className="contact">
+ *             <ShareElement className="name" mapkey="name" duration={300} transform>
+ *               {contact.name}
+ *             </ShareElement>
+ *             <View className={`paragraph ${show ? 'enter' : ''}`}>
+ *               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nisl enim, sodales non augue efficitur, sagittis
+ *               varius neque. Fusce dolor turpis, maximus eu volutpat quis, pellentesque et ligula. Ut vehicula metus in nibh
+ *               mollis ornare. Etiam aliquam lacinia malesuada. Vestibulum dignissim mollis quam a tristique. Maecenas neque
+ *               mauris, malesuada vitae magna eu, congue consectetur risus. Etiam vitae pulvinar ex. Maecenas suscipit mi ac
+ *               imperdiet pretium. Aliquam velit mauris, euismod quis elementum sed, malesuada non dui. Nunc rutrum sagittis
+ *               ligula in dapibus. Cras suscipit ut augue eget mollis. Donec auctor feugiat ipsum id viverra. Vestibulum eu nisi
+ *               risus. Vestibulum eleifend dignissim.
+ *
+ *             </View>
+ *             <Button className="screen2-button" onClick={showPrev} hidden={!show} hoverClass="none">Click Me</Button>
+ *           </View>
+ *         </View>
+ *       </PageContainer>
+ *     </View>
+ *   )
+ * }
+ * ```
+ * ```scss
+ * \/** index.scss *\/
+ * page {
+ *   color: #333;
+ *   background-color: #ddd;
+ *   overflow: hidden;
+ * }
+ *
+ * button {
+ *   border: 0 solid #0010ae;
+ *   background-color: #1f2afe;
+ *   color: #fff;
+ *   font-size: 120%;
+ *   padding: 8px 16px;
+ *   outline-width: 0;
+ *   -webkit-appearance: none;
+ *   box-shadow: 0 8px 17px rgba(0, 0, 0, 0.2);
+ * }
+ *
+ * .screen {
+ *   position: absolute;
+ *   top: 0;
+ *   bottom: 0;
+ *   left: 0;
+ *   right: 0;
+ *   padding: 16px;
+ *   -webkit-overflow-scrolling: touch;
+ * }
+ *
+ * .contact {
+ *   position: relative;
+ *   padding: 16px;
+ *   background-color: #fff;
+ *   width: 100%;
+ *   height: 100%;
+ *   box-sizing: border-box;
+ * }
+ *
+ * .avatar {
+ *   position: absolute;
+ *   top: 16px;
+ *   left: 16px;
+ *   font-size: 0;
+ * }
+ *
+ * .name {
+ *   height: 65px;
+ *   font-size: 2em;
+ *   font-weight: bold;
+ *   text-align: center;
+ *   margin: 10px 0;
+ * }
+ *
+ * .list {
+ *   padding-top: 8px;
+ *   padding-left: 32px;
+ * }
+ *
+ * .screen1 {
+ *   overflow-y: scroll;
+ *   padding: 0;
+ * }
+ *
+ * .screen1 .contact {
+ *   margin: 16px;
+ *   height: auto;
+ *   width: auto;
+ *   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
+ * }
+ *
+ * .screen2-button {
+ *   display: block;
+ *   margin: 24px auto;
+ * }
+ *
+ * .paragraph {
+ *   -webkit-transition: transform ease-in-out 300ms;
+ *   transition: transform ease-in-out 300ms;
+ *   -webkit-transform: scale(0.6);
+ *   transform: scale(0.6);
+ * }
+ *
+ * .enter.paragraph {
+ *   transform: none;
+ * }
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/share-element.html
  */
 declare const ShareElement: ComponentType<ShareElementProps>

package/types/Slider.d.ts

@@ -100,7 +100,7 @@ declare namespace SliderProps {
  *   constructor() {
  *     super(...arguments)
  *   }
- * 
+ *
  *   render() {
  *     return (
  *       <View className='components-page'>