Skip to content

Commit

Permalink
feat(types): 补齐新增组件相关类型
Browse files Browse the repository at this point in the history
  • Loading branch information
ZakaryCode committed Dec 8, 2021
1 parent e8b3f70 commit e3c91d0
Show file tree
Hide file tree
Showing 14 changed files with 424 additions and 60 deletions.
17 changes: 17 additions & 0 deletions packages/taro-components/src/components/map/map.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { Component, h, Host } from '@stencil/core'

@Component({
tag: 'taro-map-core'
})
export class Map {
componentDidLoad () {
console.error('H5 暂不支持 Map 组件!')
}

render () {
return (
<Host />
)
}
}
17 changes: 17 additions & 0 deletions packages/taro-components/src/components/slot/slot.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { Component, h, Host } from '@stencil/core'

@Component({
tag: 'taro-slot-core'
})
export class Slot {
componentDidLoad () {
console.error('H5 暂不支持 Slot 组件!')
}

render () {
return (
<Host />
)
}
}
12 changes: 6 additions & 6 deletions packages/taro-components/types/Ad.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,12 @@ interface AdProps extends StandardProps {
* @supported weapp
*/
adIntervals?: number

/** 广告类型,默认为展示`banner`,可通过设置该属性为`video`展示视频广告, `grid`为格子广告
* @supported weapp
*/
adType?: 'banner' | 'video' | 'grid'

/** 广告主题样式设置
* @supported weapp
*/
Expand All @@ -42,9 +42,9 @@ declare namespace AdProps {
interface onErrorEventDetail {
errCode: keyof AdErrCode
}
/**
/**
* 广告错误码
*
*
* 错误码是通过onError获取到的错误信息。调试期间,可以通过异常返回来捕获信息。
* 在小程序发布上线之后,如果遇到异常问题,可以在[“运维中心“](https://mp.weixin.qq.com/)里面搜寻错误日志,还可以针对异常返回加上适当的监控信息。
*/
Expand Down Expand Up @@ -116,8 +116,8 @@ declare namespace AdProps {
* render () {
* return (
* <Ad
* unit-id=''
* ad-intervals={60}
* unitId=''
* adIntervals={60}
* onLoad={() => console.log('ad onLoad')}
* onError={() => console.log('ad onError')}
* onClose={() => console.log('ad onClose')}
Expand Down
50 changes: 50 additions & 0 deletions packages/taro-components/types/AdCustom.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import { ComponentType } from 'react'
import { StandardProps, CommonEventFunction } from './common'
import { AdProps } from './Ad'

interface AdCustomProps extends StandardProps {
/** 广告单元id,可在[小程序管理后台](https://mp.weixin.qq.com/)的流量主模块新建
* @supported weapp
*/
unitId: string

/** 广告自动刷新的间隔时间,单位为秒,参数值必须大于等于30(该参数不传入时 Banner 广告不会自动刷新)
* @supported weapp
*/
adIntervals?: number

/** 广告加载成功的回调
* @supported weapp
*/
onLoad?: CommonEventFunction

/** 当广告发生错误时,触发的事件,可以通过该事件获取错误码及原因,事件对象event.detail = {errCode: 1002}
* @supported weapp
*/
onError?: CommonEventFunction<AdProps.onErrorEventDetail>
}

/** Banner 广告
* @classification open
* @supported weapp
* @example
* ```tsx
* class App extends Component {
* render () {
* return (
* <AdCustom
* unitId=''
* adIntervals={60}
* onLoad={() => console.log('ad onLoad')}
* onError={() => console.log('ad onError')}
* onClose={() => console.log('ad onClose')}
* />
* )
* }
* }
* ```
* @see https://developers.weixin.qq.com/miniprogram/dev/component/ad.html
*/
declare const AdCustom: ComponentType<AdCustomProps>

export { AdCustom, AdCustomProps }
6 changes: 3 additions & 3 deletions packages/taro-components/types/CoverImage.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@ interface CoverImageProps extends StandardProps {
* render () {
* return (
* <Video id='myVideo' src='src'>
* <CoverView class='controls'>
* <CoverView class='play' onClick='play'>
* <CoverImage class='img' src='src' />
* <CoverView className='controls'>
* <CoverView className='play' onClick={() => { TODO }}>
* <CoverImage className='img' src='src' />
* </CoverView>
* </CoverView>
* </Video>
Expand Down
6 changes: 3 additions & 3 deletions packages/taro-components/types/CoverView.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@ interface CoverViewProps extends ViewProps {
* render () {
* return (
* <Video id='myVideo' src='src'>
* <CoverView class='controls'>
* <CoverView class='play' onClick='play'>
* <CoverImage class='img' src='src' />
* <CoverView className='controls'>
* <CoverView className='play' onClick={() => { TODO }}>
* <CoverImage className='img' src='src' />
* </CoverView>
* </CoverView>
* </Video>
Expand Down
4 changes: 2 additions & 2 deletions packages/taro-components/types/Image.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ declare namespace ImageProps {
}

/** 图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式以及云文件ID。
*
*
* **Note:** 为实现小程序的 `mode` 特性,在 H5 组件中使用一个 `div` 容器来对内部的 `img` 进行展示区域的裁剪,因此请勿使用元素选择器来重置 `img` 的样式!
* @classification media
* @supported weapp, h5, rn, swan, alipay, tt
Expand All @@ -104,7 +104,7 @@ declare namespace ImageProps {
* constructor() {
* super(...arguments)
* }
*
*
* render() {
* return (
* <View className='components-page'>
Expand Down
29 changes: 29 additions & 0 deletions packages/taro-components/types/KeyboardAccessory.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { ComponentType } from 'react'
import { StandardProps, CommonEventFunction } from './common'

type KeyboardAccessoryProps = StandardProps

/** 设置 input / textarea 聚焦时键盘上方 cover-view / cover-image 工具栏视图
*
* @classification forms
* @supported weapp
* @example
* ```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>
* )
* }
* }
* ```
* @see https://developers.weixin.qq.com/miniprogram/dev/component/keyboard-accessory.html
*/
declare const KeyboardAccessory: ComponentType<KeyboardAccessoryProps>

export { KeyboardAccessory, KeyboardAccessoryProps }
115 changes: 115 additions & 0 deletions packages/taro-components/types/PageContainer.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
import { ComponentType } from 'react'
import { StandardProps, CommonEventFunction, BaseEventOrigFunction } from './common'

interface PageContainerProps extends StandardProps {
/** 是否显示容器组件
* @default false
* @supported weapp
*/
show?: boolean

/** 动画时长,单位毫秒
* @default 300
* @supported weapp
*/
duration?: number

/** z-index 层级
* @default 100
* @supported weapp
*/
zIndex?: number

/** 是否显示遮罩层
* @default true
* @supported weapp
*/
overlay?: boolean

/** 弹出位置,可选值为 top bottom right center
* @default bottom
* @supported weapp
*/
position?: keyof PageContainerProps.position

/** 是否显示圆角
* @default false
* @supported weapp
*/
round?: boolean

/** 自定义遮罩层样式
* @default false
* @supported weapp
*/
closeOnSlideDown?: boolean

/** 是否在下滑一段距离后关闭
* @supported weapp
*/
overlayStyle?: boolean

/** 自定义弹出层样式
* @supported weapp
*/
customStyle?: boolean

/** 进入前触发
* @supported weapp
*/
onBeforeEnter?: CommonEventFunction

/** 进入中触发
* @supported weapp
*/
onEnter?: CommonEventFunction

/** 进入后触发
* @supported weapp
*/
onAfterEnter?: CommonEventFunction

/** 离开前触发
* @supported weapp
*/
onBeforeLeave?: CommonEventFunction

/** 离开中触发
* @supported weapp
*/
onLeave?: CommonEventFunction

/** 离开后触发
* @supported weapp
*/
onAfterLeave?: CommonEventFunction

/** 点击遮罩层时触发
* @supported weapp
*/
onClickOverlay?: CommonEventFunction
}

declare namespace PageContainerProps {
interface position {
top
bottom
left
right
}
}

/** 页面容器
*
* 小程序如果在页面内进行复杂的界面设计(如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等),用户进行返回操作会直接离开当前页面,不符合用户预期,预期应为关闭当前弹出的组件。
* 为此提供“假页”容器组件,效果类似于 `popup` 弹出层,页面内存在该容器时,当用户进行返回操作,关闭该容器不关闭页面。返回操作包括三种情形,右滑手势、安卓物理返回键和调用 `navigateBack` 接口。
*
* Bug & Tip
* 1. tip: 当前页面最多只有 1 个容器,若已存在容器的情况下,无法增加新的容器
* 2. tip: wx.navigateBack 无法在页面栈顶调用,此时没有上一级页面
* @classification viewContainer
* @see https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html
*/
declare const PageContainer: ComponentType<PageContainerProps>

export { PageContainer, PageContainerProps }
39 changes: 39 additions & 0 deletions packages/taro-components/types/ShareElement.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { ComponentType } from 'react'
import { StandardProps, CommonEventFunction } from './common'

interface ShareElementProps extends StandardProps {
/** 映射标记
* @supported weapp
*/
key: string

/** 是否进行动画
* @default false
* @supported weapp
*/
transform?: boolean

/** 动画时长,单位毫秒
* @default 300
* @supported weapp
*/
duration?: number

/** css缓动函数
* @default ease-out
* @supported weapp
*/
easingFunction?: number
}

/** 共享元素
*
* 共享元素是一种动画形式,类似于 [`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` 的共享元素会产生动画。当前页面容器退出时,会产生返回动画。
* @classification viewContainer
* @supported weapp
* @see https://developers.weixin.qq.com/miniprogram/dev/component/share-element.html
*/
declare const ShareElement: ComponentType<ShareElementProps>

export { ShareElement, ShareElementProps }
Loading

0 comments on commit e3c91d0

Please sign in to comment.