From 67eba7d0fcfb48fc4170556e4587648cb89b51c0 Mon Sep 17 00:00:00 2001 From: Zakary Date: Thu, 9 Dec 2021 22:31:42 +0800 Subject: [PATCH] =?UTF-8?q?feat(component):=20=E6=96=B0=E5=A2=9E=20H5=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=B9=B6=E6=96=B0=E5=A2=9E=E5=85=B1?= =?UTF-8?q?=E5=90=8C=E6=A0=B7=E5=BC=8F=20(#10841)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(component): add h5 component error tips * feat(types): 补齐新增组件相关类型 * feat(route): taro-page 滚动条共享问题 fix #7974 Co-authored-by: chenjiajian <798095202@qq.com> --- .../src/components/ad-custom/ad-custom.tsx | 17 +++ .../taro-components/src/components/ad/ad.tsx | 17 +++ .../src/components/editor/editor.tsx | 17 +++ .../functional-page-navigator.tsx | 17 +++ .../keyboard-accessory/keyboard-accessory.tsx | 17 +++ .../components/live-player/live-player.tsx | 17 +++ .../components/live-pusher/live-pusher.tsx | 17 +++ .../src/components/map/map.tsx | 17 +++ .../components/match-media/match-media.tsx | 17 +++ .../movable-area.tsx | 0 .../movable-view.tsx | 0 .../navigation-bar/navigation-bar.tsx | 17 +++ .../official-account/official-account.tsx | 17 +++ .../page-container/page-container.tsx | 17 +++ .../src/components/page-meta/page-meta.tsx | 17 +++ .../picker-view-column.tsx | 0 .../pull-to-refresh.tsx | 0 .../style/index.css | 0 .../share-element/share-element.tsx | 17 +++ .../src/components/slot/slot.tsx | 17 +++ .../src/components/voip-room/voip-room.tsx | 17 +++ packages/taro-components/src/global.css | 7 ++ .../src/utils/{index.js => index.ts} | 0 packages/taro-components/stencil.config.ts | 2 +- packages/taro-components/types/Ad.d.ts | 12 +- packages/taro-components/types/AdCustom.d.ts | 50 ++++++++ .../taro-components/types/CoverImage.d.ts | 6 +- packages/taro-components/types/CoverView.d.ts | 6 +- packages/taro-components/types/Image.d.ts | 4 +- .../types/KeyboardAccessory.d.ts | 29 +++++ .../taro-components/types/PageContainer.d.ts | 115 +++++++++++++++++ .../taro-components/types/ShareElement.d.ts | 39 ++++++ packages/taro-components/types/VoipRoom.d.ts | 71 +++++++++++ packages/taro-components/types/index.d.ts | 118 +++++++++++------- 34 files changed, 670 insertions(+), 61 deletions(-) create mode 100644 packages/taro-components/src/components/ad-custom/ad-custom.tsx create mode 100644 packages/taro-components/src/components/ad/ad.tsx create mode 100644 packages/taro-components/src/components/editor/editor.tsx create mode 100644 packages/taro-components/src/components/functional-page-navigator/functional-page-navigator.tsx create mode 100644 packages/taro-components/src/components/keyboard-accessory/keyboard-accessory.tsx create mode 100644 packages/taro-components/src/components/live-player/live-player.tsx create mode 100644 packages/taro-components/src/components/live-pusher/live-pusher.tsx create mode 100644 packages/taro-components/src/components/map/map.tsx create mode 100644 packages/taro-components/src/components/match-media/match-media.tsx rename packages/taro-components/src/components/{movable-view => movable-area}/movable-area.tsx (100%) rename packages/taro-components/src/components/{movable-view => movable-area}/movable-view.tsx (100%) create mode 100644 packages/taro-components/src/components/navigation-bar/navigation-bar.tsx create mode 100644 packages/taro-components/src/components/official-account/official-account.tsx create mode 100644 packages/taro-components/src/components/page-container/page-container.tsx create mode 100644 packages/taro-components/src/components/page-meta/page-meta.tsx rename packages/taro-components/src/components/{picker-view-column => picker-view}/picker-view-column.tsx (100%) rename packages/taro-components/src/components/{pull-down-refresh => pull-to-refresh}/pull-to-refresh.tsx (100%) rename packages/taro-components/src/components/{pull-down-refresh => pull-to-refresh}/style/index.css (100%) create mode 100644 packages/taro-components/src/components/share-element/share-element.tsx create mode 100644 packages/taro-components/src/components/slot/slot.tsx create mode 100644 packages/taro-components/src/components/voip-room/voip-room.tsx create mode 100644 packages/taro-components/src/global.css rename packages/taro-components/src/utils/{index.js => index.ts} (100%) create mode 100644 packages/taro-components/types/AdCustom.d.ts create mode 100644 packages/taro-components/types/KeyboardAccessory.d.ts create mode 100644 packages/taro-components/types/PageContainer.d.ts create mode 100644 packages/taro-components/types/ShareElement.d.ts create mode 100644 packages/taro-components/types/VoipRoom.d.ts diff --git a/packages/taro-components/src/components/ad-custom/ad-custom.tsx b/packages/taro-components/src/components/ad-custom/ad-custom.tsx new file mode 100644 index 000000000000..a2e7dbae563a --- /dev/null +++ b/packages/taro-components/src/components/ad-custom/ad-custom.tsx @@ -0,0 +1,17 @@ +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import { Component, h, Host } from '@stencil/core' + +@Component({ + tag: 'taro-ad-custom-core' +}) +export class AdCustom { + componentDidLoad () { + console.error('H5 暂不支持 AdCustom 组件！') + } + + render () { + return ( + + ) + } +} diff --git a/packages/taro-components/src/components/ad/ad.tsx b/packages/taro-components/src/components/ad/ad.tsx new file mode 100644 index 000000000000..26ab00cfcd7c --- /dev/null +++ b/packages/taro-components/src/components/ad/ad.tsx @@ -0,0 +1,17 @@ +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import { Component, h, Host } from '@stencil/core' + +@Component({ + tag: 'taro-ad-core' +}) +export class Ad { + componentDidLoad () { + console.error('H5 暂不支持 Ad 组件！') + } + + render () { + return ( + + ) + } +} diff --git a/packages/taro-components/src/components/editor/editor.tsx b/packages/taro-components/src/components/editor/editor.tsx new file mode 100644 index 000000000000..b031f3f0f4b4 --- /dev/null +++ b/packages/taro-components/src/components/editor/editor.tsx @@ -0,0 +1,17 @@ +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import { Component, h, Host } from '@stencil/core' + +@Component({ + tag: 'taro-editor-core' +}) +export class Editor { + componentDidLoad () { + console.error('H5 暂不支持 Editor 组件！') + } + + render () { + return ( + + ) + } +} diff --git a/packages/taro-components/src/components/functional-page-navigator/functional-page-navigator.tsx b/packages/taro-components/src/components/functional-page-navigator/functional-page-navigator.tsx new file mode 100644 index 000000000000..de6364824cee --- /dev/null +++ b/packages/taro-components/src/components/functional-page-navigator/functional-page-navigator.tsx @@ -0,0 +1,17 @@ +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import { Component, h, Host } from '@stencil/core' + +@Component({ + tag: 'taro-functional-page-navigator-core' +}) +export class FunctionalPageNavigator { + componentDidLoad () { + console.error('H5 暂不支持 FunctionalPageNavigator 组件！') + } + + render () { + return ( + + ) + } +} diff --git a/packages/taro-components/src/components/keyboard-accessory/keyboard-accessory.tsx b/packages/taro-components/src/components/keyboard-accessory/keyboard-accessory.tsx new file mode 100644 index 000000000000..f7cfb93c0819 --- /dev/null +++ b/packages/taro-components/src/components/keyboard-accessory/keyboard-accessory.tsx @@ -0,0 +1,17 @@ +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import { Component, h, Host } from '@stencil/core' + +@Component({ + tag: 'taro-keyboard-accessory-core' +}) +export class KeyboardAccessory { + componentDidLoad () { + console.error('H5 暂不支持 KeyboardAccessory 组件！') + } + + render () { + return ( + + ) + } +} diff --git a/packages/taro-components/src/components/live-player/live-player.tsx b/packages/taro-components/src/components/live-player/live-player.tsx new file mode 100644 index 000000000000..30ee55726194 --- /dev/null +++ b/packages/taro-components/src/components/live-player/live-player.tsx @@ -0,0 +1,17 @@ +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import { Component, h, Host } from '@stencil/core' + +@Component({ + tag: 'taro-live-player-core' +}) +export class LivePlayer { + componentDidLoad () { + console.error('H5 暂不支持 LivePlayer 组件！') + } + + render () { + return ( + + ) + } +} diff --git a/packages/taro-components/src/components/live-pusher/live-pusher.tsx b/packages/taro-components/src/components/live-pusher/live-pusher.tsx new file mode 100644 index 000000000000..3f3bd1840812 --- /dev/null +++ b/packages/taro-components/src/components/live-pusher/live-pusher.tsx @@ -0,0 +1,17 @@ +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import { Component, h, Host } from '@stencil/core' + +@Component({ + tag: 'taro-live-pusher-core' +}) +export class LivePusher { + componentDidLoad () { + console.error('H5 暂不支持 LivePusher 组件！') + } + + render () { + return ( + + ) + } +} diff --git a/packages/taro-components/src/components/map/map.tsx b/packages/taro-components/src/components/map/map.tsx new file mode 100644 index 000000000000..92fed693055a --- /dev/null +++ b/packages/taro-components/src/components/map/map.tsx @@ -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 ( + + ) + } +} diff --git a/packages/taro-components/src/components/match-media/match-media.tsx b/packages/taro-components/src/components/match-media/match-media.tsx new file mode 100644 index 000000000000..1154f67a8b4a --- /dev/null +++ b/packages/taro-components/src/components/match-media/match-media.tsx @@ -0,0 +1,17 @@ +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import { Component, h, Host } from '@stencil/core' + +@Component({ + tag: 'taro-match-media-core' +}) +export class MatchMedia { + componentDidLoad () { + console.error('H5 暂不支持 MatchMedia 组件！') + } + + render () { + return ( + + ) + } +} diff --git a/packages/taro-components/src/components/movable-view/movable-area.tsx b/packages/taro-components/src/components/movable-area/movable-area.tsx similarity index 100% rename from packages/taro-components/src/components/movable-view/movable-area.tsx rename to packages/taro-components/src/components/movable-area/movable-area.tsx diff --git a/packages/taro-components/src/components/movable-view/movable-view.tsx b/packages/taro-components/src/components/movable-area/movable-view.tsx similarity index 100% rename from packages/taro-components/src/components/movable-view/movable-view.tsx rename to packages/taro-components/src/components/movable-area/movable-view.tsx diff --git a/packages/taro-components/src/components/navigation-bar/navigation-bar.tsx b/packages/taro-components/src/components/navigation-bar/navigation-bar.tsx new file mode 100644 index 000000000000..057eba888b20 --- /dev/null +++ b/packages/taro-components/src/components/navigation-bar/navigation-bar.tsx @@ -0,0 +1,17 @@ +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import { Component, h, Host } from '@stencil/core' + +@Component({ + tag: 'taro-navigation-bar-core' +}) +export class NavigationBar { + componentDidLoad () { + console.error('H5 暂不支持 NavigationBar 组件！') + } + + render () { + return ( + + ) + } +} diff --git a/packages/taro-components/src/components/official-account/official-account.tsx b/packages/taro-components/src/components/official-account/official-account.tsx new file mode 100644 index 000000000000..284a51101ffc --- /dev/null +++ b/packages/taro-components/src/components/official-account/official-account.tsx @@ -0,0 +1,17 @@ +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import { Component, h, Host } from '@stencil/core' + +@Component({ + tag: 'taro-official-account-core' +}) +export class OfficialAccount { + componentDidLoad () { + console.error('H5 暂不支持 OfficialAccount 组件！') + } + + render () { + return ( + + ) + } +} diff --git a/packages/taro-components/src/components/page-container/page-container.tsx b/packages/taro-components/src/components/page-container/page-container.tsx new file mode 100644 index 000000000000..ceede42a0f97 --- /dev/null +++ b/packages/taro-components/src/components/page-container/page-container.tsx @@ -0,0 +1,17 @@ +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import { Component, h, Host } from '@stencil/core' + +@Component({ + tag: 'taro-page-container-core' +}) +export class PageContainer { + componentDidLoad () { + console.error('H5 暂不支持 PageContainer 组件！') + } + + render () { + return ( + + ) + } +} diff --git a/packages/taro-components/src/components/page-meta/page-meta.tsx b/packages/taro-components/src/components/page-meta/page-meta.tsx new file mode 100644 index 000000000000..d5081051d0ec --- /dev/null +++ b/packages/taro-components/src/components/page-meta/page-meta.tsx @@ -0,0 +1,17 @@ +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import { Component, h, Host } from '@stencil/core' + +@Component({ + tag: 'taro-page-meta-core' +}) +export class PageMeta { + componentDidLoad () { + console.error('H5 暂不支持 PageMeta 组件！') + } + + render () { + return ( + + ) + } +} diff --git a/packages/taro-components/src/components/picker-view-column/picker-view-column.tsx b/packages/taro-components/src/components/picker-view/picker-view-column.tsx similarity index 100% rename from packages/taro-components/src/components/picker-view-column/picker-view-column.tsx rename to packages/taro-components/src/components/picker-view/picker-view-column.tsx diff --git a/packages/taro-components/src/components/pull-down-refresh/pull-to-refresh.tsx b/packages/taro-components/src/components/pull-to-refresh/pull-to-refresh.tsx similarity index 100% rename from packages/taro-components/src/components/pull-down-refresh/pull-to-refresh.tsx rename to packages/taro-components/src/components/pull-to-refresh/pull-to-refresh.tsx diff --git a/packages/taro-components/src/components/pull-down-refresh/style/index.css b/packages/taro-components/src/components/pull-to-refresh/style/index.css similarity index 100% rename from packages/taro-components/src/components/pull-down-refresh/style/index.css rename to packages/taro-components/src/components/pull-to-refresh/style/index.css diff --git a/packages/taro-components/src/components/share-element/share-element.tsx b/packages/taro-components/src/components/share-element/share-element.tsx new file mode 100644 index 000000000000..4eaa90c6c177 --- /dev/null +++ b/packages/taro-components/src/components/share-element/share-element.tsx @@ -0,0 +1,17 @@ +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import { Component, h, Host } from '@stencil/core' + +@Component({ + tag: 'taro-share-element-core' +}) +export class ShareElement { + componentDidLoad () { + console.error('H5 暂不支持 ShareElement 组件！') + } + + render () { + return ( + + ) + } +} diff --git a/packages/taro-components/src/components/slot/slot.tsx b/packages/taro-components/src/components/slot/slot.tsx new file mode 100644 index 000000000000..f8e7397b0fc3 --- /dev/null +++ b/packages/taro-components/src/components/slot/slot.tsx @@ -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 ( + + ) + } +} diff --git a/packages/taro-components/src/components/voip-room/voip-room.tsx b/packages/taro-components/src/components/voip-room/voip-room.tsx new file mode 100644 index 000000000000..9f271a19b30d --- /dev/null +++ b/packages/taro-components/src/components/voip-room/voip-room.tsx @@ -0,0 +1,17 @@ +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import { Component, h, Host } from '@stencil/core' + +@Component({ + tag: 'taro-voip-room-core' +}) +export class VoipRoom { + componentDidLoad () { + console.error('H5 暂不支持 VoipRoom 组件！') + } + + render () { + return ( + + ) + } +} diff --git a/packages/taro-components/src/global.css b/packages/taro-components/src/global.css new file mode 100644 index 000000000000..e3416e209b78 --- /dev/null +++ b/packages/taro-components/src/global.css @@ -0,0 +1,7 @@ +@import url(../node_modules/weui/dist/style/weui.min.css); + +.taro_page { + max-height: 100vh; + overflow-x: hidden; + overflow-y: scroll; +} diff --git a/packages/taro-components/src/utils/index.js b/packages/taro-components/src/utils/index.ts similarity index 100% rename from packages/taro-components/src/utils/index.js rename to packages/taro-components/src/utils/index.ts diff --git a/packages/taro-components/stencil.config.ts b/packages/taro-components/stencil.config.ts index 7b5c3b1a704f..5e865e89ba18 100644 --- a/packages/taro-components/stencil.config.ts +++ b/packages/taro-components/stencil.config.ts @@ -4,7 +4,7 @@ const { jsWithTs: tsjPreset } = require('ts-jest/presets') export const config: Config = { namespace: 'taro-components', - globalStyle: './node_modules/weui/dist/style/weui.min.css', + globalStyle: './src/global.css', plugins: [ sass() ], diff --git a/packages/taro-components/types/Ad.d.ts b/packages/taro-components/types/Ad.d.ts index 09dce39a2443..8114a767b7ce 100644 --- a/packages/taro-components/types/Ad.d.ts +++ b/packages/taro-components/types/Ad.d.ts @@ -11,12 +11,12 @@ interface AdProps extends StandardProps { * @supported weapp */ adIntervals?: number - + /** 广告类型，默认为展示`banner`，可通过设置该属性为`video`展示视频广告, `grid`为格子广告 * @supported weapp */ adType?: 'banner' | 'video' | 'grid' - + /** 广告主题样式设置 * @supported weapp */ @@ -42,9 +42,9 @@ declare namespace AdProps { interface onErrorEventDetail { errCode: keyof AdErrCode } - /** + /** * 广告错误码 - * + * * 错误码是通过onError获取到的错误信息。调试期间，可以通过异常返回来捕获信息。 * 在小程序发布上线之后，如果遇到异常问题，可以在[“运维中心“](https://mp.weixin.qq.com/)里面搜寻错误日志，还可以针对异常返回加上适当的监控信息。 */ @@ -116,8 +116,8 @@ declare namespace AdProps { * render () { * return ( * console.log('ad onLoad')} * onError={() => console.log('ad onError')} * onClose={() => console.log('ad onClose')} diff --git a/packages/taro-components/types/AdCustom.d.ts b/packages/taro-components/types/AdCustom.d.ts new file mode 100644 index 000000000000..b06c942288c8 --- /dev/null +++ b/packages/taro-components/types/AdCustom.d.ts @@ -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 +} + +/** Banner 广告 + * @classification open + * @supported weapp + * @example + * ```tsx + * class App extends Component { + * render () { + * return ( + * 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 + +export { AdCustom, AdCustomProps } diff --git a/packages/taro-components/types/CoverImage.d.ts b/packages/taro-components/types/CoverImage.d.ts index 96688deba7b2..c219fc127b84 100644 --- a/packages/taro-components/types/CoverImage.d.ts +++ b/packages/taro-components/types/CoverImage.d.ts @@ -27,9 +27,9 @@ interface CoverImageProps extends StandardProps { * render () { * return ( * diff --git a/packages/taro-components/types/CoverView.d.ts b/packages/taro-components/types/CoverView.d.ts index 24c8155d53f9..03e32609ea59 100644 --- a/packages/taro-components/types/CoverView.d.ts +++ b/packages/taro-components/types/CoverView.d.ts @@ -28,9 +28,9 @@ interface CoverViewProps extends ViewProps { * render () { * return ( * diff --git a/packages/taro-components/types/Image.d.ts b/packages/taro-components/types/Image.d.ts index cf441376c139..8354a5665257 100644 --- a/packages/taro-components/types/Image.d.ts +++ b/packages/taro-components/types/Image.d.ts @@ -100,7 +100,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 @@ -110,7 +110,7 @@ declare namespace ImageProps { * constructor() { * super(...arguments) * } - * + * * render() { * return ( * diff --git a/packages/taro-components/types/KeyboardAccessory.d.ts b/packages/taro-components/types/KeyboardAccessory.d.ts new file mode 100644 index 000000000000..fb8a09ad9999 --- /dev/null +++ b/packages/taro-components/types/KeyboardAccessory.d.ts @@ -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 ( + * + * ) + * } + * } + * ``` + * @see https://developers.weixin.qq.com/miniprogram/dev/component/keyboard-accessory.html + */ +declare const KeyboardAccessory: ComponentType + +export { KeyboardAccessory, KeyboardAccessoryProps } diff --git a/packages/taro-components/types/PageContainer.d.ts b/packages/taro-components/types/PageContainer.d.ts new file mode 100644 index 000000000000..398732a42b59 --- /dev/null +++ b/packages/taro-components/types/PageContainer.d.ts @@ -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 + +export { PageContainer, PageContainerProps } diff --git a/packages/taro-components/types/ShareElement.d.ts b/packages/taro-components/types/ShareElement.d.ts new file mode 100644 index 000000000000..c935cdf9d2cf --- /dev/null +++ b/packages/taro-components/types/ShareElement.d.ts @@ -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 + +export { ShareElement, ShareElementProps } diff --git a/packages/taro-components/types/VoipRoom.d.ts b/packages/taro-components/types/VoipRoom.d.ts new file mode 100644 index 000000000000..f11299b76a15 --- /dev/null +++ b/packages/taro-components/types/VoipRoom.d.ts @@ -0,0 +1,71 @@ +import { ComponentType } from 'react' +import { StandardProps } from './common' +import { StyleProp, ViewStyle } from 'react-native' + +interface VoipRoomProps extends StandardProps { + /** 进入房间用户的 openid + * @default none + * @supported weapp, swan, alipay, tt, h5 + */ + openId?: string + + /** 对话窗口类型，自身传入 camera，其它用户传入 video + * @default camera + * @supported weapp, swan, alipay, tt, h5 + */ + mode?: keyof VoipRoomProps.mode + + /** 仅在 mode 为 camera 时有效，前置或后置，值为front, back + * @default front + * @supported weapp, swan, alipay, tt, h5 + */ + devicePosition?: keyof VoipRoomProps.devicePosition + + /** 创建对话窗口失败时触发 + * @supported weapp + */ + onError?: CommonEventFunction +} + +namespace VoipRoomProps { + /** 对话窗口类型 */ + interface mode { + camera + video + } + + /** 摄像头类型 */ + interface devicePosition { + front + back + } +} + +/** 多人音视频对话 + * + * 需用户授权 `scope.camera`、`scope.record`。相关接口： [Taro.joinVoIPChat](https://developers.weixin.qq.com/miniprogram/dev/api/media/voip/wx.joinVoIPChat.html) + * 开通该组件权限后，开发者可在 joinVoIPChat 成功后，获取房间成员的 openid，传递给 voip-room 组件，以显示成员画面。 + * @classification media + * @supported weapp + * @example + * ```tsx + * export default class PageView extends Component { + * constructor() { + * super(...arguments) + * } + * + * render() { + * return ( + * + * + * ) + * } + * } + * ``` + * @see https://developers.weixin.qq.com/miniprogram/dev/component/voip-room.html + */ +declare const VoipRoom: ComponentType + +export { VoipRoom, VoipRoomProps } diff --git a/packages/taro-components/types/index.d.ts b/packages/taro-components/types/index.d.ts index a6341b89835f..271fceeb2f86 100644 --- a/packages/taro-components/types/index.d.ts +++ b/packages/taro-components/types/index.d.ts @@ -1,49 +1,75 @@ -export { ScrollView } from './ScrollView' -export { View } from './View' +export * from './common' +export * from './event' + +/** 视图容器 */ export { Block } from './Block' -export { Swiper } from './Swiper' -export { SwiperItem } from './SwiperItem' -export { MatchMedia } from './MatchMedia' -export { MovableView } from './MovableView' -export { MovableArea } from './MovableArea' -export { CoverView } from './CoverView' -export { CoverImage } from './CoverImage' -export { Icon } from './Icon' -export { Text } from './Text' -export { RichText } from './RichText' -export { Progress } from './Progress' +export { CoverImage, CoverImageProps } from './CoverImage' +export { CoverView, CoverViewProps } from './CoverView' +export { MatchMedia, MatchMediaProps } from './MatchMedia' +export { MovableArea, MovableAreaProps } from './MovableArea' +export { MovableView, MovableViewProps } from './MovableView' +export { PageContainer, PageContainerProps } from './PageContainer' +export { ScrollView, ScrollViewProps } from './ScrollView' +export { ShareElement, ShareElementProps } from './ShareElement' +export { Swiper, SwiperProps } from './Swiper' +export { SwiperItem, SwiperItemProps } from './SwiperItem' +export { View, ViewProps } from './View' + +/** 基础内容 */ +export { Icon, IconProps } from './Icon' +export { Progress, ProgressProps } from './Progress' +export { RichText, RichTextProps } from './RichText' +export { Text, TextProps } from './Text' + +/** 表单组件 */ export { Button, ButtonProps } from './Button' -export { Checkbox } from './Checkbox' -export { CheckboxGroup } from './CheckboxGroup' -export { Editor } from './Editor' -export { Form } from './Form' -export { Input } from './Input' -export { Label } from './Label' -export { Picker } from './Picker' -export { PickerView } from './PickerView' +export { Checkbox, CheckboxProps } from './Checkbox' +export { CheckboxGroup, CheckboxGroupProps } from './CheckboxGroup' +export { Editor, EditorProps } from './Editor' +export { Form, FormProps } from './Form' +export { Input, InputProps } from './Input' +export { KeyboardAccessory, KeyboardAccessoryProps } from './KeyboardAccessory' +export { Label, LabelProps } from './Label' +export { Picker, PickerDateProps, PickerTimeProps, PickerRegionProps, PickerSelectorProps, PickerStandardProps, PickerMultiSelectorProps } from './Picker' +export { PickerView, PickerViewProps } from './PickerView' export { PickerViewColumn } from './PickerViewColumn' -export { Radio } from './Radio' -export { RadioGroup } from './RadioGroup' -export { Slider } from './Slider' -export { Switch } from './Switch' -export { Textarea } from './Textarea' -export { Image } from './Image' -export { Navigator } from './Navigator' -export { Camera } from './Camera' -export { Canvas } from './Canvas' -export { OpenData } from './OpenData' -export { Video } from './Video' -export { Ad } from './Ad' -export { Audio } from './Audio' -export { FunctionalPageNavigator } from './FunctionalPageNavigator' -export { LivePlayer } from './LivePlayer' -export { LivePusher } from './LivePusher' -export { Map } from './Map' -export { WebView } from './WebView' -export { OfficialAccount } from './OfficialAccount' -export { NavigationBar } from './NavigationBar' -export { PageMeta } from './PageMeta' -export { Slot } from './Slot' -export { CustomWrapper } from './CustomWrapper' -export * from './common' -export * from './event' +export { Radio, RadioProps } from './Radio' +export { RadioGroup, RadioGroupProps } from './RadioGroup' +export { Slider, SliderProps } from './Slider' +export { Switch, SwitchProps } from './Switch' +export { Textarea, TextareaProps } from './Textarea' + +/** 导航 */ +export { FunctionalPageNavigator, FunctionalPageNavigatorProps } from './FunctionalPageNavigator' +export { Navigator, NavigatorProps } from './Navigator' +export { NavigationBar, NavigationBarProps } from './NavigationBar' +// export { Tabbar, TabbarProps } from './Tabbar' +// export { TabbarItem, TabbarProps } from './TabbarItem' + +/** 媒体组件 */ +export { Audio, AudioProps } from './Audio' +export { Camera, CameraProps } from './Camera' +export { Image, ImageProps } from './Image' +export { LivePlayer, LivePlayerProps } from './LivePlayer' +export { LivePusher, LivePusherProps } from './LivePusher' +export { Video, VideoProps } from './Video' +export { VoipRoom, VoipRoomProps } from './VoipRoom' + +/** 地图 */ +export { Map, MapProps } from './Map' + +/** 画布 */ +export { Canvas, CanvasProps } from './Canvas' + +/** 开放能力 */ +export { Ad, AdProps } from './Ad' +export { AdCustom, AdCustomProps } from './AdCustom' +export { OfficialAccount, OfficialAccountProps } from './OfficialAccount' +export { OpenData, OpenDataProps } from './OpenData' +export { WebView, WebViewProps } from './WebView' + +/** 配置节点 */ +export { PageMeta, PageMetaProps } from './PageMeta' + +export { CustomWrapper, CustomWrapperProps } from './CustomWrapper' +export { Slot, SlotProps } from './Slot'